Remove unneeded editPayroll component and fix key warning

uktrade · Dec 3, 2024 · 6609279 · 6609279
1 parent bb41d9f
commit 6609279
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 29 deletions.
diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
@@ -1,13 +1,13 @@
 import { useEffect, useReducer, useState, useMemo } from "react";
 
-import EditPayroll from "../Components/EditPayroll";
 import * as api from "../Components/EditPayroll/api";
 import {
   payrollHeaders,
   vacancyHeaders,
 } from "../Components/EditPayroll/constants";
 import EmployeeRow from "../Components/EditPayroll/EmployeeRow";
 import VacancyRow from "../Components/EditPayroll/VacancyRow";
+import PayrollTable from "../Components/EditPayroll/PayrollTable";
 
 const initialPayrollState = [];
 const initialVacanciesState = [];
@@ -84,21 +84,21 @@ export default function Payroll() {
         </div>
       )}
       <h2 className="govuk-heading-m">Payroll</h2>
-      <EditPayroll
+      <PayrollTable
         payroll={payroll}
         headers={payrollHeaders}
         onTogglePayPeriods={handleTogglePayPeriods}
         RowComponent={EmployeeRow}
       />
       <h2 className="govuk-heading-m">Non-payroll</h2>
-      <EditPayroll
+      <PayrollTable
         payroll={nonPayroll}
         headers={payrollHeaders}
         onTogglePayPeriods={handleTogglePayPeriods}
         RowComponent={EmployeeRow}
       />
       <h2 className="govuk-heading-m">Vacancies</h2>
-      <EditPayroll
+      <PayrollTable
         payroll={vacancies}
         headers={vacancyHeaders}
         onTogglePayPeriods={handleToggleVacancyPayPeriods}

diff --git a/front_end/src/Components/EditPayroll/PayrollTable/index.jsx b/front_end/src/Components/EditPayroll/PayrollTable/index.jsx
@@ -12,7 +12,7 @@ export default function PayrollTable({
 }) {
   return (
     <>
-      <div class="scrollable">
+      <div className="scrollable">
         <table className="govuk-table">
           <thead className="govuk-table__head">
             <tr className="govuk-table__row">
@@ -29,6 +29,7 @@ export default function PayrollTable({
             {payroll.map((row) => {
               return (
                 <RowComponent
+                  key={row.id}
                   row={row}
                   onTogglePayPeriods={onTogglePayPeriods}
                 />

diff --git a/front_end/src/Components/EditPayroll/index.jsx b/front_end/src/Components/EditPayroll/index.jsx