COMPENF-390 Redux Slice Refactor (#95)

Co-authored-by: Barrett Falk <[email protected]>
Co-authored-by: afwilcox <[email protected]>

frontend/package.json

@@ -20,6 +20,7 @@
     "@types/react-datepicker": "^4.11.2",
     "@types/react-dom": "^18.0.2",
     "@types/react-transition-group": "^4.4.6",
+    "@types/redux-persist": "^4.3.1",
     "@types/warning": "^3.0.0",
     "@typescript-eslint/parser": "5.56.0",
     "axios": "^1.4.0",
@@ -38,6 +39,7 @@
     "jsdom": "^21.0.0",
     "jwt-decode": "^3.1.2",
     "keycloak-js": "^21.0.0",
+    "linq-to-typescript": "^11.0.0",
     "lodash": "^4.17.21",
     "make-fetch-happen": "11.0.3",
     "prop-types-extra": "^1.1.1",

frontend/src/app/App.tsx

@@ -13,15 +13,17 @@ import ColorReference from "./components/reference";
 import ComplaintType from "./constants/complaint-types";
 import { ModalComponent as Modal } from "./components/modal/modal";
 import { useAppDispatch } from "./hooks/hooks";
-import { fetchCodeTablesAsync } from "./store/reducers/code-tables";
 import { ZoneAtAGlance } from "./components/containers/zone-at-a-glance/zone-at-a-glance";
+import { fetchCodeTables } from "./store/reducers/code-table";
+import { getOfficers } from "./store/reducers/officer";
 
 const App: FC = () => {
 
   const dispatch = useAppDispatch();
 
   useEffect(() => {
-    dispatch(fetchCodeTablesAsync());
+    dispatch(fetchCodeTables());
+    dispatch(getOfficers());
   }, [dispatch]);
 
   return (

frontend/src/app/components/containers/complaints/allegations/allegation-complaint-tab-container.tsx

@@ -8,7 +8,7 @@ import { AllegationComplaintFilterContainer } from "./allegation-complaint-filte
 import Option from "../../../../types/app/option";
 import filterIcon from "../../../../../assets/images/filter-icon.png";
 import { useAppSelector } from "../../../../hooks/hooks";
-import { allegationComplaints } from "../../../../store/reducers/allegation-complaint"
+import { selectAllegationComplaintsCount } from "../../../../store/reducers/complaints";
 
 type Props = {
     handleChange: Function,
@@ -34,15 +34,15 @@ type Props = {
 export const AllegationComplaintTabContainer: FC<Props>  = ({  handleChange, handleSort, sort, regionCodeFilter, setRegionCodeFilter, zoneCodeFilter, setZoneCodeFilter, areaCodeFilter, setAreaCodeFilter, officerFilter, setOfficerFilter, violationFilter, setViolationFilter,
     startDateFilter, setStartDateFilter, endDateFilter, setEndDateFilter, complaintStatusFilter, setComplaintStatusFilter}) => {
         const { getCollapseProps, getToggleProps, isExpanded } = useCollapse();
-        const allegationComplaintsArray = useAppSelector(allegationComplaints);
+        const total = useAppSelector(selectAllegationComplaintsCount);
     return <>
     <Navbar className="basic-navbar-nav complaint-tab-container-width">
         <Nav className="nav nav-tabs comp-tab container-fluid">
             <Nav.Item className="nav-item comp-tab-inactive">
                 <button className="nav-link" id="hwcr-tab" onClick={() => handleChange(ComplaintType.HWCR_COMPLAINT)}>Human Wildlife Conflicts</button>
             </Nav.Item>
             <Nav.Item className="nav-item comp-tab-active">
-                <button className="nav-link active" id="ers-tab">Enforcement ({allegationComplaintsArray.length})</button>
+                <button className="nav-link active" id="ers-tab">Enforcement ({`${total}`})</button>
             </Nav.Item>
             <Nav.Item className="ms-auto" {...getToggleProps()}>
                 <div className="complaint-filter-image-container" id="complaint-filter-image-id">

frontend/src/app/components/containers/complaints/allegations/allegation-complaint-table.tsx

@@ -1,12 +1,13 @@
 import { FC, useEffect } from "react";
 import { Table } from "react-bootstrap";
 import { useAppDispatch, useAppSelector } from "../../../../hooks/hooks";
-import { getAllegationComplaints, allegationComplaints } from "../../../../store/reducers/allegation-complaint"
 import { useNavigate } from "react-router-dom";
 import { formatDateTime } from "../../../../common/methods";
 import ComplaintEllipsisPopover from "../complaint-ellipsis-popover";
 import Option from "../../../../types/app/option";
 import COMPLAINT_TYPES from "../../../../types/app/complaint-types";
+import { getComplaints, selectAllegationComplaints } from "../../../../store/reducers/complaints";
+import { ComplaintFilters } from "../../../../types/complaints/complaint-filters";
 
 type Props = {
     sortColumn: string,
@@ -25,13 +26,35 @@ export const AllegationComplaintTable: FC<Props>  = ({ sortColumn, sortOrder, re
     const dispatch = useAppDispatch();
     const navigate = useNavigate();
 
-    const allegationComplaintsJson = useAppSelector(allegationComplaints);
-
+    const allegationComplaintsJson = useAppSelector(selectAllegationComplaints);
 
     useEffect(() => {
-            dispatch(getAllegationComplaints(sortColumn, sortOrder, regionCodeFilter, zoneCodeFilter, areaCodeFilter, officerFilter, violationFilter, startDateFilter, endDateFilter, complaintStatusFilter));
-  }, [dispatch, sortColumn, sortOrder, regionCodeFilter, zoneCodeFilter, areaCodeFilter, officerFilter, violationFilter, startDateFilter, endDateFilter, complaintStatusFilter])
-
+        const payload = {
+          sortColumn,
+          sortOrder,
+          regionCodeFilter,
+          zoneCodeFilter,
+          areaCodeFilter,
+          officerFilter,
+          violationFilter,
+          startDateFilter,
+          endDateFilter,
+          complaintStatusFilter,
+        } as ComplaintFilters;
+        dispatch(getComplaints(COMPLAINT_TYPES.ERS, payload));
+      }, [
+        dispatch,
+        sortColumn,
+        sortOrder,
+        regionCodeFilter,
+        zoneCodeFilter,
+        areaCodeFilter,
+        officerFilter,
+        violationFilter,
+        startDateFilter,
+        endDateFilter,
+        complaintStatusFilter,
+      ]);
 
   const handleComplaintClick = (
     e: any, //-- this needs to be updated to use the correct type when updating <Row> to <tr>

frontend/src/app/components/containers/complaints/complaint-details.tsx

@@ -4,8 +4,8 @@ import { useParams } from "react-router-dom";
 
 import { CallDetails, CallerInformation, ComplaintHeader } from "./details";
 import {
-  getErsComplaintByComplaintIdentifier,
-  getHwcrComplaintByComplaintIdentifier,
+  getAllegationComplaintByComplaintIdentifier,
+  getWildlifeComplaintByComplaintIdentifier,
   selectComplaint,
 } from "../../../store/reducers/complaints";
 import COMPLAINT_TYPES from "../../../types/app/complaint-types";
@@ -61,10 +61,10 @@ export const ComplaintDetails: FC = () => {
       if (id) {
         switch (complaintType) {
           case COMPLAINT_TYPES.ERS:
-            dispatch(getErsComplaintByComplaintIdentifier(id));
+            dispatch(getAllegationComplaintByComplaintIdentifier(id));
             break;
           case COMPLAINT_TYPES.HWCR:
-            dispatch(getHwcrComplaintByComplaintIdentifier(id));
+            dispatch(getWildlifeComplaintByComplaintIdentifier(id));
             break;
         }
       }

frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx

@@ -1,5 +1,5 @@
-import { FC, useEffect, useState } from "react";
-import { useAppDispatch, useAppSelector } from "../../../../hooks/hooks";
+import { FC, useState } from "react";
+import { useAppSelector } from "../../../../hooks/hooks";
 import {
   formatDate,
   formatTime,
@@ -15,25 +15,22 @@ import {
 import { ComplaintDetails } from "../../../../types/complaints/details/complaint-details";
 import DatePicker from "react-datepicker";
 import Select from "react-select";
-import {
-  selectComplaintStatusCodes,
-  selectSpeciesCodes,
-  selectedHwcrNatureOfComplaintCodes,
-  selectedAreaCodes,
-  selectedAttractantCodes,
-  selectAgencyCodes,
-  selectViolationCodes,
-} from "../../../../store/reducers/code-tables";
+import { 
+  selectAgencyDropdown, 
+  selectComplaintStatusCodeDropdown, 
+  selectSpeciesCodeDropdown, 
+  selectViolationCodeDropdown,
+  selectedHwcrNatureOfComplaintCodeDropdown, 
+  selectedAreaCodeDropdown, 
+  selectedAttractantCodeDropdown 
+} from "../../../../store/reducers/code-table";
 import { useSelector } from "react-redux";
-import {
-  getOfficersInZone,
-  officersInZone,
-} from "../../../../store/reducers/officer";
-import { Person } from "../../../../types/person/person";
+import { Officer } from "../../../../types/person/person";
 import ReactDOMServer from "react-dom/server";
 import { DropdownOption } from "../../../../types/code-tables/option";
 import COMPLAINT_TYPES from "../../../../types/app/complaint-types";
 import { ComplaintSuspectWitness } from "../../../../types/complaints/details/complaint-suspect-witness-details";
+import { selectOfficersByZone } from "../../../../store/reducers/officer";
 
 interface ComplaintHeaderProps {
   complaintType: string;
@@ -83,19 +80,13 @@ export const ComplaintDetailsEdit: FC<ComplaintHeaderProps> = ({
     selectComplaintSuspectWitnessDetails
   ) as ComplaintSuspectWitness;
 
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    dispatch(getOfficersInZone(zone_code));
-  }, [dispatch, zone_code]);
-
-  const officersInZoneList = useAppSelector(officersInZone);
+  const officersInZoneList = useAppSelector(selectOfficersByZone(zone_code));
 
   // Transform the fetched data into the DropdownOption type
-  const transformedOfficerCodeList = officersInZoneList.map(
-    (officer: Person) => ({
+  const transformedOfficerCodeList = officersInZoneList?.map(
+    (officer: Officer) => ({
       value: officer.person_guid,
-      label: `${officer.first_name} ${officer.last_name}`,
+      label: `${officer.person_guid.first_name} ${officer.person_guid.last_name}`,
     })
   );
 
@@ -116,23 +107,14 @@ export const ComplaintDetailsEdit: FC<ComplaintHeaderProps> = ({
   );
 
   // Get the code table lists to populate the Selects
-  const complaintStatusCodes = useSelector(
-    selectComplaintStatusCodes
-  ) as DropdownOption[];
-  const speciesCodes = useSelector(selectSpeciesCodes) as DropdownOption[];
-  const hwcrNatureOfComplaintCodes = useSelector(
-    selectedHwcrNatureOfComplaintCodes
-  ) as DropdownOption[];
-  const areaCodes = useSelector(selectedAreaCodes) as DropdownOption[];
-  const attractantCodes = useSelector(
-    selectedAttractantCodes
-  ) as DropdownOption[];
-  const referredByAgencyCodes = useSelector(
-    selectAgencyCodes
-  ) as DropdownOption[];
-  const violationTypeCodes = useSelector(
-    selectViolationCodes
-  ) as DropdownOption[];
+  const complaintStatusCodes = useSelector(selectComplaintStatusCodeDropdown) as DropdownOption[];
+  const speciesCodes = useSelector(selectSpeciesCodeDropdown) as DropdownOption[];
+  const hwcrNatureOfComplaintCodes = useSelector(selectedHwcrNatureOfComplaintCodeDropdown) as DropdownOption[];
+  const areaCodes = useSelector(selectedAreaCodeDropdown) as DropdownOption[];
+  const attractantCodes = useSelector(selectedAttractantCodeDropdown) as DropdownOption[];
+  const referredByAgencyCodes = useSelector(selectAgencyDropdown) as DropdownOption[];
+  const violationTypeCodes = useSelector(selectViolationCodeDropdown) as DropdownOption[];
+
   const yesNoOptions: DropdownOption[] = [
     { value: "Yes", label: "Yes" },
     { value: "No", label: "No" },
@@ -149,7 +131,7 @@ export const ComplaintDetailsEdit: FC<ComplaintHeaderProps> = ({
     (option) => option.value === natureOfComplaintCode
   );
   const selectedAreaCode = areaCodes.find((option) => option.label === area);
-  const selectedAssignedOfficer = transformedOfficerCodeList.find(
+  const selectedAssignedOfficer = transformedOfficerCodeList?.find(
     (option) => option.value === personGuid
   );
   const selectedAgencyCode = referredByAgencyCodes.find(