update entity context to zustand

Enterprise-CMCS · May 23, 2024 · 0257fc3 · 0257fc3
1 parent 414ada6
commit 0257fc3
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 112 deletions.
diff --git a/services/ui-src/src/components/fields/ChoiceListField.tsx b/services/ui-src/src/components/fields/ChoiceListField.tsx
@@ -42,13 +42,12 @@ export const ChoiceListField = ({
   const [displayValue, setDisplayValue] = useState<Choice[]>(defaultValue);
 
   const { updateReport } = useContext(ReportContext);
-  const { entities, entityType, updateEntities, selectedEntity } =
-    useContext(EntityContext);
+  const { prepareEntityPayload } = useContext(EntityContext);
 
   // state management
   const { full_name, state, userIsAdmin, userIsReadOnly } =
     useStore().user ?? {};
-  const { report } = useStore();
+  const { report, selectedEntity } = useStore();
 
   // get form context and register field
   const form = useFormContext();
@@ -247,9 +246,7 @@ export const ChoiceListField = ({
           user,
           entityContext: {
             selectedEntity,
-            entityType,
-            updateEntities,
-            entities,
+            prepareEntityPayload,
           },
         });
       }, timeInMs);

diff --git a/services/ui-src/src/components/fields/DateField.tsx b/services/ui-src/src/components/fields/DateField.tsx
@@ -32,11 +32,10 @@ export const DateField = ({
 
   // state management
   const { full_name, state } = useStore().user ?? {};
-  const { report } = useStore();
+  const { report, selectedEntity } = useStore();
 
   const { updateReport } = useContext(ReportContext);
-  const { entities, entityType, updateEntities, selectedEntity } =
-    useContext(EntityContext);
+  const { prepareEntityPayload } = useContext(EntityContext);
 
   // get form context and register form field
   const form = useFormContext();
@@ -107,9 +106,7 @@ export const DateField = ({
         user,
         entityContext: {
           selectedEntity,
-          entityType,
-          updateEntities,
-          entities,
+          prepareEntityPayload,
         },
       });
     }

diff --git a/services/ui-src/src/components/fields/DropdownField.tsx b/services/ui-src/src/components/fields/DropdownField.tsx
@@ -38,12 +38,11 @@ export const DropdownField = ({
   ...props
 }: Props) => {
   const { updateReport } = useContext(ReportContext);
-  const { entities, entityType, updateEntities, selectedEntity } =
-    useContext(EntityContext);
+  const { prepareEntityPayload } = useContext(EntityContext);
 
   // state management
   const { full_name, state } = useStore().user ?? {};
-  const { report, copyEligibleReportsByState } = useStore();
+  const { report, copyEligibleReportsByState, selectedEntity } = useStore();
 
   // fetch the option values and format them if necessary
   const formatOptions = (options: DropdownOptions[] | string) => {
@@ -154,9 +153,7 @@ export const DropdownField = ({
         user,
         entityContext: {
           selectedEntity,
-          entityType,
-          updateEntities,
-          entities,
+          prepareEntityPayload,
         },
       });
     }

diff --git a/services/ui-src/src/components/fields/DynamicField.tsx b/services/ui-src/src/components/fields/DynamicField.tsx
@@ -26,11 +26,10 @@ import cancelIcon from "assets/icons/icon_cancel_x_circle.png";
 export const DynamicField = ({ name, label, ...props }: Props) => {
   // state management
   const { full_name, state, userIsEndUser } = useStore().user ?? {};
-  const { report } = useStore();
+  const { report, selectedEntity } = useStore();
 
   const { updateReport } = useContext(ReportContext);
-  const { entities, entityType, updateEntities, selectedEntity } =
-    useContext(EntityContext);
+  const { prepareEntityPayload } = useContext(EntityContext);
   const [displayValues, setDisplayValues] = useState<EntityShape[]>([]);
   const [selectedRecord, setSelectedRecord] = useState<EntityShape | undefined>(
     undefined
@@ -95,9 +94,7 @@ export const DynamicField = ({ name, label, ...props }: Props) => {
       user,
       entityContext: {
         selectedEntity,
-        entityType,
-        updateEntities,
-        entities,
+        prepareEntityPayload,
       },
     });
   };

diff --git a/services/ui-src/src/components/fields/NumberField.tsx b/services/ui-src/src/components/fields/NumberField.tsx
@@ -35,11 +35,10 @@ export const NumberField = ({
   const [displayValue, setDisplayValue] = useState(defaultValue);
   // state management
   const { full_name, state } = useStore().user ?? {};
-  const { report } = useStore();
+  const { report, selectedEntity } = useStore();
 
   const { updateReport } = useContext(ReportContext);
-  const { entities, entityType, updateEntities, selectedEntity } =
-    useContext(EntityContext);
+  const { prepareEntityPayload } = useContext(EntityContext);
 
   // get form context and register field
   const form = useFormContext();
@@ -140,9 +139,7 @@ export const NumberField = ({
         user,
         entityContext: {
           selectedEntity,
-          entityType,
-          updateEntities,
-          entities,
+          prepareEntityPayload,
         },
       });
     }

diff --git a/services/ui-src/src/components/fields/TextField.tsx b/services/ui-src/src/components/fields/TextField.tsx
@@ -32,11 +32,10 @@ export const TextField = ({
 
   // state management
   const { full_name, state } = useStore().user ?? {};
-  const { report } = useStore();
+  const { report, selectedEntity } = useStore();
 
   const { updateReport } = useContext(ReportContext);
-  const { entities, entityType, selectedEntity, updateEntities } =
-    useContext(EntityContext);
+  const { prepareEntityPayload } = useContext(EntityContext);
 
   // get form context and register field
   const form = useFormContext();
@@ -105,9 +104,7 @@ export const TextField = ({
         user,
         entityContext: {
           selectedEntity,
-          entityType,
-          updateEntities,
-          entities,
+          prepareEntityPayload,
         },
       });
     }

diff --git a/services/ui-src/src/components/overlays/EntityDetailsOverlay.tsx b/services/ui-src/src/components/overlays/EntityDetailsOverlay.tsx
@@ -1,60 +1,57 @@
-import React, { MouseEventHandler, useContext, useEffect } from "react";
+import React, { MouseEventHandler, useEffect } from "react";
 // components
 import { Box, Button, Flex, Image, Spinner, Text } from "@chakra-ui/react";
 import { Form, ReportPageIntro } from "components";
 // types
 import { EntityShape, EntityType, FormJson } from "types";
 // utils
-
+import { useStore } from "utils";
 // assets
 import arrowLeftBlue from "assets/icons/icon_arrow_left_blue.png";
 // verbiage
 import accordionVerbiage from "../../verbiage/pages/accordion";
 import overlayVerbiage from "../../verbiage/pages/overlays";
-import { EntityContext } from "components/reports/EntityProvider";
 
 export const EntityDetailsOverlay = ({
   closeEntityDetailsOverlay,
-  entityType,
-  entities,
   form,
   onSubmit,
-  selectedEntity,
   disabled,
   setEntering,
   submitting,
   validateOnRender,
 }: Props) => {
   // Entity Provider Setup
-  const { setEntities, setSelectedEntity, setEntityType } =
-    useContext(EntityContext);
+  const { report, selectedEntity, setSelectedEntity } = useStore();
 
+  /**
+   * Any time the report is updated on this page,
+   * we also want to update the selectedEntity in the store
+   * with new data that the report was given.
+   */
   useEffect(() => {
-    setSelectedEntity(selectedEntity);
-    setEntityType(entityType);
-    setEntities(entities);
-    return () => {
-      setEntities([]);
-      setSelectedEntity(undefined);
-    };
-  }, [entityType, selectedEntity]);
+    if (selectedEntity) {
+      setSelectedEntity(
+        report?.fieldData?.[selectedEntity.type]?.find(
+          (entity: EntityShape) => entity.id == selectedEntity.id
+        )
+      );
+    }
+  }, [report]);
 
   setEntering(false);
 
   // Display Variables
-  const {
-    report_programName: reportProgramName,
-    report_planName: reportPlanName,
-  } = selectedEntity;
+
   const eligibilityGroup = `${
-    selectedEntity["report_eligibilityGroup-otherText"] ||
-    selectedEntity.report_eligibilityGroup[0].value
+    selectedEntity?.["report_eligibilityGroup-otherText"] ||
+    selectedEntity?.report_eligibilityGroup[0].value
   }`;
-  const reportingPeriod = `${selectedEntity.report_reportingPeriodStartDate} to ${selectedEntity.report_reportingPeriodEndDate}`;
+  const reportingPeriod = `${selectedEntity?.report_reportingPeriodStartDate} to ${selectedEntity?.report_reportingPeriodEndDate}`;
 
   const programInfo = [
-    reportPlanName,
-    reportProgramName,
+    selectedEntity?.["report_planName"],
+    selectedEntity?.["report_programName"],
     eligibilityGroup,
     reportingPeriod,
   ];

diff --git a/services/ui-src/src/components/reports/EntityProvider.tsx b/services/ui-src/src/components/reports/EntityProvider.tsx
@@ -1,26 +1,13 @@
-import { ReactNode, useMemo, useState, createContext } from "react";
-import { EntityType, EntityShape } from "types";
+import { ReactNode, useMemo, createContext } from "react";
+import { EntityShape, AnyObject } from "types";
+import { useStore } from "utils";
 
 interface EntityContextShape {
-  updateEntities: Function;
-  setEntities: Function;
-  setSelectedEntity: Function;
-  setEntityType: Function;
-  entityType?: EntityType;
-  entityId?: string;
-  entities: EntityShape[];
-  selectedEntity?: EntityShape;
+  prepareEntityPayload: Function;
 }
 
 export const EntityContext = createContext<EntityContextShape>({
-  updateEntities: Function,
-  setEntities: Function,
-  setSelectedEntity: Function,
-  setEntityType: Function,
-  entityType: undefined,
-  entityId: undefined,
-  entities: [],
-  selectedEntity: undefined,
+  prepareEntityPayload: Function,
 });
 
 /**
@@ -33,23 +20,23 @@ export const EntityContext = createContext<EntityContextShape>({
  * @param children - React nodes
  */
 export const EntityProvider = ({ children }: EntityProviderProps) => {
-  const [selectedEntity, setSelectedEntity] = useState<EntityShape>();
-  const [entityType, setEntityType] = useState<EntityType>();
-  const [entities, setEntities] = useState<EntityShape[]>([]);
+  // state management
+  const { selectedEntity, report } = useStore();
 
   /**
-   * updateEntities updates the user's selected entity with their changes, and
+   * prepareEntityPayload updates the user's selected entity with their changes, and
    * replaces the selected entity in the entities list.
    *
    * When we submit an entity related field for autosave, we need to send
    * the updated list of all entities, not just the selected one.
    *
    * @param updateData - updated entity information
    */
-  const updateEntities = (updateData: EntityShape) => {
-    const currentEntities = entities;
+  const prepareEntityPayload = (updateData: AnyObject) => {
+    const entityType = selectedEntity!.type;
+    const currentEntities = report?.fieldData?.[entityType];
     const selectedEntityIndex = currentEntities?.findIndex(
-      (x) => x.id === selectedEntity?.id
+      (x: EntityShape) => x.id === selectedEntity?.id
     );
     if (currentEntities && selectedEntityIndex > -1) {
       const newEntity = {
@@ -63,16 +50,9 @@ export const EntityProvider = ({ children }: EntityProviderProps) => {
 
   const providerValue = useMemo(
     () => ({
-      updateEntities,
-      setSelectedEntity,
-      setEntities,
-      selectedEntity,
-      entities,
-      setEntityType,
-      entityType,
-      entityId: selectedEntity?.id,
+      prepareEntityPayload,
     }),
-    [entities, selectedEntity]
+    [selectedEntity]
   );
 
   return (

diff --git a/services/ui-src/src/types/states.ts b/services/ui-src/src/types/states.ts
@@ -1,5 +1,6 @@
 import {
   AdminBannerData,
+  EntityShape,
   MCRUser,
   ReportMetadataShape,
   ReportShape,
@@ -50,3 +51,12 @@ export interface McrReportState {
   ) => void;
   setLastSavedTime: (lastSavedTime: string | undefined) => void;
 }
+
+// initial entity state
+export interface McrEntityState {
+  // INITIAL STATE
+  selectedEntity: EntityShape | undefined;
+  // ACTIONS
+  setSelectedEntity: (newSelectedEntity: EntityShape | undefined) => void;
+  clearSelectedEntity: () => void;
+}
diff --git a/services/ui-src/src/utils/autosave/autosave.ts b/services/ui-src/src/utils/autosave/autosave.ts
@@ -1,5 +1,5 @@
 import { FieldValues, UseFormReturn } from "react-hook-form";
-import { AutosaveField, EntityShape, EntityType, ReportStatus } from "types";
+import { AutosaveField, EntityShape, ReportStatus } from "types";
 
 type FieldValue = any;
 
@@ -41,9 +41,7 @@ export interface GetAutosaveFieldsProps extends AutosaveField {
  */
 export interface EntityContextShape {
   selectedEntity?: EntityShape;
-  entities: EntityShape[];
-  entityType?: EntityType;
-  updateEntities: Function;
+  prepareEntityPayload: Function;
 }
 
 /**
@@ -114,17 +112,14 @@ export const autosaveFieldData = async ({
   if (fieldsToSave.length) {
     const reportKeys = { reportType, id, state };
     let dataToWrite = {};
-    if (
-      entityContext &&
-      entityContext.selectedEntity &&
-      entityContext.entityType
-    ) {
+    if (entityContext && entityContext.selectedEntity) {
       dataToWrite = {
         metadata: { status: ReportStatus.IN_PROGRESS, lastAlteredBy: userName },
         fieldData: {
-          [entityContext.entityType]: entityContext.updateEntities(
-            Object.fromEntries(fieldsToSave)
-          ),
+          [entityContext.selectedEntity.type]:
+            entityContext.prepareEntityPayload(
+              Object.fromEntries(fieldsToSave)
+            ),
         }, // create field data object
       };
     } else {