Skip to content

Commit

Permalink
Refactor to one reducer and state object
Browse files Browse the repository at this point in the history
  • Loading branch information
@CaitBarnard
CaitBarnard committed Jan 9, 2025
1 parent c87cd2d commit 6f986fd
Showing 1 changed file with 69 additions and 70 deletions.
139 changes: 69 additions & 70 deletions front_end/src/Apps/Payroll.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,30 +12,18 @@ import Tabs, { Tab } from "../Components/EditPayroll/Tabs";
import EditPayModifier from "../Components/EditPayroll/EditPayModifier";
import ToggleCheckbox from "../Components/Common/ToggleCheckbox";

const initialPayrollState = [];
const initialVacanciesState = [];
const initialPayModifiersState = [];
const initialPayrollState = {
employees: [],
vacancies: [],
pay_modifiers: [],
};
const initialPreviousMonthsState = [];

// const initialPayrollState = {
// employees: [],
// vacancies: [],
// pay_modifiers: [],
// };

export default function Payroll() {
const [allPayroll, dispatch] = useReducer(
payrollReducer,
initialPayrollState,
);
const [vacancies, dispatchVacancies] = useReducer(
vacanciesReducer,
initialVacanciesState,
);
const [payModifiers, dispatchPayModifiers] = useReducer(
payModifiersReducer,
initialPayModifiersState,
);
const [previousMonths, dispatchPreviousMonths] = useReducer(
previousMonthsReducer,
initialPreviousMonthsState,
Expand Down Expand Up @@ -80,28 +68,26 @@ export default function Payroll() {
}

api.getPayrollData().then((data) => {
dispatch({ type: "fetched", data: data.employees });
dispatchVacancies({ type: "fetched", data: data.vacancies });
dispatchPayModifiers({ type: "fetched", data: data.pay_modifiers });
dispatch({ type: "fetched", data });
});
}, []);

// Computed properties
const payroll = useMemo(
() => allPayroll.filter((payroll) => payroll.basic_pay > 0),
() => allPayroll.employees.filter((payroll) => payroll.basic_pay > 0),
[allPayroll],
);
const nonPayroll = useMemo(
() => allPayroll.filter((payroll) => payroll.basic_pay <= 0),
() => allPayroll.employees.filter((payroll) => payroll.basic_pay <= 0),
[allPayroll],
);

// Handlers
async function handleSavePayroll() {
try {
await api.postPayrollData(allPayroll);
await api.postVacancyData(vacancies);
await api.postPayModifierData(payModifiers);
// await api.postVacancyData(vacancies);
// await api.postPayModifierData(payModifiers);

setSaveSuccess(true);
localStorage.setItem("editPayroll.saveSuccess", "true");
Expand All @@ -116,15 +102,15 @@ export default function Payroll() {
}

function handleTogglePayPeriods(id, index, enabled) {
dispatch({ type: "updatePayPeriods", id, index, enabled });
dispatch({ type: "updatePayPeriodsEmployees", id, index, enabled });
}

function handleToggleVacancyPayPeriods(id, index, enabled) {
dispatchVacancies({ type: "updatePayPeriods", id, index, enabled });
dispatch({ type: "updatePayPeriodsVacancies", id, index, enabled });
}

function handleUpdatePayModifiers(id, index, value) {
dispatchPayModifiers({ type: "updatePayModifiers", id, index, value });
dispatch({ type: "updatePayModifiers", id, index, value });
}
function handleHidePreviousMonths() {
setHidePreviousMonths(!hidePreviousMonths);
Expand Down Expand Up @@ -199,7 +185,7 @@ export default function Payroll() {
</Tab>
<Tab label="Vacancies" key="3">
<PayrollTable
payroll={vacancies}
payroll={allPayroll.vacancies}
headers={vacancyHeaders}
onTogglePayPeriods={handleToggleVacancyPayPeriods}
RowComponent={VacancyRow}
Expand All @@ -215,7 +201,7 @@ export default function Payroll() {
</Tab>
<Tab label="Pay modifiers" key="4">
<EditPayModifier
data={payModifiers}
data={allPayroll.pay_modifiers}
onInputChange={handleUpdatePayModifiers}
/>
</Tab>
Expand All @@ -227,54 +213,70 @@ export default function Payroll() {
);
}

const positionReducer = (data, action) => {
switch (action.type) {
case "fetched": {
return action.data;
function updatePayPeriods(data, action) {
return data.map((row) => {
if (row.id === action.id) {
const updatedPayPeriods = row.pay_periods.map((period, index) => {
if (index + 1 >= action.index + 1) {
return !action.enabled;
}
return period;
});
return {
...row,
pay_periods: updatedPayPeriods,
};
}
case "updatePayPeriods": {
return data.map((row) => {
if (row.id === action.id) {
const updatedPayPeriods = row.pay_periods.map((period, index) => {
if (index + 1 >= action.index + 1) {
return !action.enabled;
}
return period;
});
return {
...row,
pay_periods: updatedPayPeriods,
};
return row;
});
}

function updatePayModifiers(data, action) {
return data.map((row) => {
if (row.id === action.id) {
const updatedPayModifier = row.pay_modifiers.map((modifier, index) => {
if (index === action.index) {
return parseFloat(action.value);
}
return row;
return modifier;
});
return {
...row,
pay_modifiers: updatedPayModifier,
};
}
}
};
return row;
});
}

const payrollData = (data) => ({
employees: data.employees,
vacancies: data.vacancies,
pay_modifiers: data.pay_modifiers,
});

const payModifiersReducer = (data, action) => {
const payrollReducer = (data, action) => {
switch (action.type) {
case "fetched": {
return action.data;
}
case "updatePayPeriodsEmployees": {
return {
...payrollData(data),
employees: updatePayPeriods(data.employees, action),
};
}
case "updatePayPeriodsVacancies": {
return {
...payrollData(data),
vacancies: updatePayPeriods(data.vacancies, action),
};
}
case "updatePayModifiers": {
return data.map((row) => {
if (row.id === action.id) {
const updatedPayModifier = row.pay_modifiers.map(
(modifier, index) => {
if (index === action.index) {
return parseFloat(action.value);
}
return modifier;
},
);
return {
...row,
pay_modifiers: updatedPayModifier,
};
}
return row;
});
return {
...payrollData(data),
pay_modifiers: updatePayModifiers(data.pay_modifiers, action),
};
}
}
};
Expand All @@ -286,6 +288,3 @@ const previousMonthsReducer = (data, action) => {
}
}
};

const payrollReducer = (data, action) => positionReducer(data, action);
const vacanciesReducer = (data, action) => positionReducer(data, action);

0 comments on commit 6f986fd

Please sign in to comment.