FFT-175 Bump node dependencies and refactor react code (#612)

Co-authored-by: Sam Dudley <[email protected]>
uktrade · Feb 10, 2025 · f6729d3 · f6729d3
1 parent 20e64e4
commit f6729d3
Show file tree

Hide file tree

Showing 17 changed files with 885 additions and 665 deletions.
diff --git a/.gitignore b/.gitignore
@@ -170,3 +170,9 @@ ner_output_file.txt
 
 # DB
 .dumps/
+
+# hide all .env.* file
+.env.*
+# except for the ones we explicit allow and need to checkin
+!.env.example
+!.env.ci
diff --git a/config/urls.py b/config/urls.py
@@ -16,10 +16,15 @@
 
 from django.conf import settings
 from django.contrib import admin
-from django.urls import include, path
+from django.http import HttpResponse
+from django.urls import include, path, re_path
 from django.views.generic.base import RedirectView
 
 
+def empty_favicon(request):
+    return HttpResponse(status=204)
+
+
 urlpatterns = [
     path("auth/", include("authbroker_client.urls", namespace="authbroker")),
     path("", include("core.urls")),  # default to core with no path
@@ -38,6 +43,7 @@
     path("payroll/", include("payroll.urls")),
     path("admin/", admin.site.urls),
     # TODO - split below out into develop only?
+    path("favicon.ico", empty_favicon),
     path(
         "assets/<path:asset_path>",
         RedirectView.as_view(url="/static/govuk/assets/%(asset_path)s"),

diff --git a/front_end/src/Components/EditForecast/index.jsx b/front_end/src/Components/EditForecast/index.jsx
@@ -44,10 +44,7 @@ function EditForecast() {
             window.payroll_forecast_data,
             isPayrollEnabled,
           );
-          dispatch({
-            type: SET_CELLS,
-            cells: rows,
-          });
+          dispatch(SET_CELLS({ cells: rows }));
         } else {
           timer();
         }
@@ -96,10 +93,7 @@ function EditForecast() {
         if (response.status === 200) {
           setSheetUpdating(false);
           let rows = processForecastData(response.data);
-          dispatch({
-            type: SET_CELLS,
-            cells: rows,
-          });
+          dispatch(SET_CELLS({ cells: rows }));
         } else {
           setSheetUpdating(false);
           dispatch(

diff --git a/front_end/src/Components/InfoCell/index.jsx b/front_end/src/Components/InfoCell/index.jsx
@@ -8,55 +8,24 @@ const InfoCell = ({
   className,
   ignoreSelection,
 }) => {
-  const selectedRow = useSelector((state) => state.selected.selectedRow);
-  const allSelected = useSelector((state) => state.selected.all);
-  let changed = false;
-
-  const checkValue = (hiddenCols) => {
-    if (hiddenCols.indexOf(cellKey) > -1) {
-      changed = true;
-      return false;
-    } else if (changed) {
-      changed = false;
-      return false;
-    }
-
-    return true;
-  };
-
-  const hiddenCols = useSelector(
-    (state) => state.hiddenCols.hiddenCols,
-    checkValue,
+  const isRowSelected = useSelector(
+    (state) => state.selected.all || state.selected.selectedRow === rowIndex,
+  );
+  const isColHidden = useSelector(
+    (state) => state.hiddenCols.hiddenCols.indexOf(cellKey) > -1,
   );
-
-  const isSelected = () => {
-    if (ignoreSelection) return false;
-
-    if (allSelected) {
-      return true;
-    }
-
-    return selectedRow === rowIndex;
-  };
 
   const getClasses = () => {
     return (
       "govuk-table__cell forecast-month-cell not-editable " +
       className +
       " " +
-      (isSelected() ? "selected " : "") +
-      (hiddenCols.indexOf(cellKey) > -1 ? "hidden" : "")
+      (!ignoreSelection && isRowSelected ? "selected " : "") +
+      (isColHidden ? "hidden" : "")
     );
   };
 
   return <td className={getClasses()}>{children}</td>;
 };
 
-const comparisonFn = function (prevProps, nextProps) {
-  return (
-    prevProps.selectedRow === nextProps.selectedRow &&
-    prevProps.allSelected === nextProps.allSelected
-  );
-};
-
-export default memo(InfoCell, comparisonFn);
+export default InfoCell;
diff --git a/front_end/src/Components/TableCell/index.jsx b/front_end/src/Components/TableCell/index.jsx
@@ -12,41 +12,13 @@ const TableCell = ({
   sheetUpdating,
   payrollData,
 }) => {
-  let editing = false;
   const isPayrollEnabled = JSON.parse(localStorage.getItem("isPayrollEnabled"));
 
-  const checkValue = (val) => {
-    if (cellId === val) {
-      editing = true;
-      return false;
-    } else if (editing) {
-      // Turn off editing
-      editing = false;
-      return false;
-    }
-
-    return true;
-  };
-
-  let selectChanged = false;
-
-  const checkSelectRow = (selectedRow) => {
-    if (selectedRow === rowIndex) {
-      selectChanged = true;
-      return false;
-    } else if (selectChanged) {
-      selectChanged = false;
-      return false;
-    }
-
-    return true;
-  };
-
   const dispatch = useDispatch();
 
   const row = useSelector((state) => state.allCells.cells[rowIndex]);
   const cell = row[cellKey];
-  const editCellId = useSelector((state) => state.edit.cellId, checkValue);
+  const isEditing = useSelector((state) => state.edit.cellId === cellId);
 
   const isOverride = () => {
     // Is override if cell exists, has an override amount and is not an actual
@@ -59,11 +31,9 @@ const TableCell = ({
 
   const [isUpdating, setIsUpdating] = useState(false);
 
-  const selectedRow = useSelector(
-    (state) => state.selected.selectedRow,
-    checkSelectRow,
+  const isRowSelected = useSelector(
+    (state) => state.selected.all || state.selected.selectedRow === rowIndex,
   );
-  const allSelected = useSelector((state) => state.selected.all);
 
   let isLocked = row._meta.isLocked;
   // window.actuals = [1, 2];
@@ -88,14 +58,6 @@ const TableCell = ({
     }
   }, [cell]);
 
-  const isSelected = () => {
-    if (allSelected) {
-      return true;
-    }
-
-    return selectedRow === rowIndex;
-  };
-
   const wasEdited = () => {
     if (!isEditable) return false;
 
@@ -106,7 +68,7 @@ const TableCell = ({
     const classes = ["govuk-table__cell", "forecast-month-cell", "figure-cell"];
 
     if (!isEditable) classes.push("not-editable");
-    if (isSelected()) classes.push("selected");
+    if (isRowSelected) classes.push("selected");
     if (!cell) return classes.join(" ");
 
     if (cell && cell.amount < 0) classes.push("negative");
@@ -174,10 +136,7 @@ const TableCell = ({
           payrollData,
           isPayrollEnabled,
         );
-        dispatch({
-          type: SET_CELLS,
-          cells: rows,
-        });
+        dispatch(SET_CELLS({ cells: rows }));
       } else {
         dispatch(
           SET_ERROR({
@@ -225,7 +184,7 @@ const TableCell = ({
 
     if (isUpdating) return true;
 
-    if (sheetUpdating && isSelected()) {
+    if (sheetUpdating && isRowSelected) {
       return true;
     }
 
@@ -240,7 +199,7 @@ const TableCell = ({
         </Fragment>
       );
     } else {
-      if (editCellId === cellId) {
+      if (isEditing) {
         return (
           <input
             ref={(input) => input && input.focus()}
@@ -267,11 +226,7 @@ const TableCell = ({
         id={getId()}
         onDoubleClick={() => {
           if (isEditable && !isOverride()) {
-            dispatch(
-              SET_EDITING_CELL({
-                cellId: cellId,
-              }),
-            );
+            dispatch(SET_EDITING_CELL({ cellId: cellId }));
           }
         }}
       >

diff --git a/front_end/src/Components/TableHeader/index.jsx b/front_end/src/Components/TableHeader/index.jsx
@@ -2,32 +2,12 @@ import React from "react";
 import { useSelector } from "react-redux";
 
 const TableHeader = ({ children, colName }) => {
-  let changed = false;
-
-  const checkValue = (hiddenCols) => {
-    if (hiddenCols.indexOf(colName) > -1) {
-      changed = true;
-      return false;
-    } else if (changed) {
-      changed = false;
-      return false;
-    }
-
-    return true;
-  };
-
-  const hiddenCols = useSelector(
-    (state) => state.hiddenCols.hiddenCols,
-    checkValue,
+  const isColHidden = useSelector(
+    (state) => state.hiddenCols.hiddenCols.indexOf(colName) > -1,
   );
 
   return (
-    <th
-      className={
-        "govuk-table__header " +
-        (hiddenCols.indexOf(colName) > -1 ? "hidden" : "")
-      }
-    >
+    <th className={"govuk-table__header " + (isColHidden ? "hidden" : "")}>
       {children}
     </th>
   );

diff --git a/front_end/src/Components/ToggleCell/index.jsx b/front_end/src/Components/ToggleCell/index.jsx
@@ -2,57 +2,18 @@ import React from "react";
 import { useSelector } from "react-redux";
 
 const ToggleCell = ({ rowIndex, colName, children }) => {
-  let changed = false;
-
-  const checkValue = (hiddenCols) => {
-    if (hiddenCols.indexOf(colName) > -1) {
-      changed = true;
-      return false;
-    } else if (changed) {
-      changed = false;
-      return false;
-    }
-
-    return true;
-  };
-
-  let selectChanged = false;
-
-  const checkSelectRow = (selectedRow) => {
-    if (selectedRow === rowIndex) {
-      selectChanged = true;
-      return false;
-    } else if (selectChanged) {
-      selectChanged = false;
-      return false;
-    }
-
-    return true;
-  };
-
-  const selectedRow = useSelector(
-    (state) => state.selected.selectedRow,
-    checkSelectRow,
+  const isRowSelected = useSelector(
+    (state) => state.selected.all || state.selected.selectedRow === rowIndex,
   );
-  const allSelected = useSelector((state) => state.selected.all);
-  const hiddenCols = useSelector(
-    (state) => state.hiddenCols.hiddenCols,
-    checkValue,
+  const isColHidden = useSelector(
+    (state) => state.hiddenCols.hiddenCols.indexOf(colName) > -1,
   );
 
-  const isSelected = () => {
-    if (allSelected) {
-      return true;
-    }
-
-    return selectedRow === rowIndex;
-  };
-
   const getClasses = () => {
     return (
       "govuk-table__cell forecast-month-cell not-editable " +
-      (isSelected() ? "selected " : "") +
-      (hiddenCols.indexOf(colName) > -1 ? "hidden" : "")
+      (isRowSelected ? "selected " : "") +
+      (isColHidden ? "hidden" : "")
     );
   };
 

diff --git a/front_end/src/Reducers/CellCount.js b/front_end/src/Reducers/CellCount.js
@@ -3,7 +3,6 @@ import { createSlice } from "@reduxjs/toolkit";
 
 const cellCount = createSlice({
   name: "cellCount",
-  slice: "cellCount",
   initialState: {
     cellCount: 0,
   },

diff --git a/front_end/src/Reducers/Cells.js b/front_end/src/Reducers/Cells.js
@@ -2,13 +2,12 @@ import { createSlice } from "@reduxjs/toolkit";
 
 const allCells = createSlice({
   name: "allCells",
-  slice: "allCells",
   initialState: {
     cells: [],
   },
   reducers: {
     SET_CELLS: (state, action) => {
-      state.cells = action.cells;
+      state.cells = action.payload.cells;
     },
   },
 });

diff --git a/front_end/src/Reducers/Edit.js b/front_end/src/Reducers/Edit.js
@@ -3,7 +3,6 @@ import { createSlice } from "@reduxjs/toolkit";
 
 const edit = createSlice({
   name: "edit",
-  slice: "edit",
   initialState: {
     cellId: null,
   },

diff --git a/front_end/src/Reducers/Error.js b/front_end/src/Reducers/Error.js
@@ -3,7 +3,6 @@ import { createSlice } from "@reduxjs/toolkit";
 
 const error = createSlice({
   name: "error",
-  slice: "error",
   initialState: {
     errorMessage: null,
   },

diff --git a/front_end/src/Reducers/Filter.js b/front_end/src/Reducers/Filter.js
@@ -3,7 +3,6 @@ import { createSlice } from "@reduxjs/toolkit";
 
 const filter = createSlice({
   name: "filter",
-  slice: "edit",
   initialState: {
     open: false,
   },