Implement CasesContext (#241)

home page cases context
uwblueprint · Mar 17, 2024 · ad1d336 · ad1d336
1 parent f67f242
commit ad1d336
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 84 deletions.
diff --git a/frontend/src/components/dashboard/CaseCard.tsx b/frontend/src/components/dashboard/CaseCard.tsx
@@ -137,6 +137,8 @@ const CaseCard = ({
         caseId={caseId}
         status={caseTag}
         referringWorkerName={referringWorker}
+        referralDate={date}
+        familyName={familyName}
         intakeNotes={intakeMeetingNotes}
         isOpen={isOpenStatusModal}
         onClick={onClickStatusUpdate}

diff --git a/frontend/src/components/dashboard/FilteredSection.tsx b/frontend/src/components/dashboard/FilteredSection.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import { useHistory } from "react-router-dom";
 import {
   Box,
@@ -11,26 +11,28 @@ import {
   Center,
 } from "@chakra-ui/react";
 import { ArrowRight } from "react-feather";
-import CaseCard, { CaseCardProps } from "./CaseCard";
+import CaseCard from "./CaseCard";
+import CasesContext from "../../contexts/CasesContext";
+import { CasesContextType } from "../../types/CasesContextTypes";
 
 const FilteredSection = ({
   status,
-  cases,
   showViewAll = true,
 }: {
   status: string;
-  cases: CaseCardProps[];
   showViewAll?: boolean;
 }): React.ReactElement => {
   const history = useHistory();
   const viewAllCases = () => {
     history.push(`/cases/${status.toLowerCase()}`);
   };
 
+  const cases = useContext(CasesContext);
+
   const groupedCases = cases.reduce(
     (acc, _, index) =>
       index % 4 === 0 ? [...acc, cases.slice(index, index + 4)] : acc,
-    [] as CaseCardProps[][],
+    [] as CasesContextType[],
   );
 
   return (
@@ -69,12 +71,18 @@ const FilteredSection = ({
                   <Flex key={rowIndex} marginBottom="20px">
                     {row.map((caseData) => (
                       <CaseCard
-                        key={caseData.caseId}
-                        caseId={caseData.caseId}
-                        referringWorker={caseData.referringWorker}
-                        date={caseData.date}
-                        familyName={caseData.familyName}
-                        caseTag={caseData.caseTag}
+                        key={caseData.case_id}
+                        caseId={
+                          typeof caseData.case_id === "string"
+                            ? parseInt(caseData.case_id, 10)
+                            : caseData.case_id
+                        }
+                        referringWorker={
+                          caseData.caseReferral.referringWorkerName
+                        }
+                        date={caseData.caseReferral.referralDate}
+                        familyName={caseData.caseReferral.familyName}
+                        caseTag={caseData.intakeStatus}
                         intakeMeetingNotes={caseData.intakeMeetingNotes}
                       />
                     ))}
@@ -84,12 +92,18 @@ const FilteredSection = ({
                   .slice(0, 4)
                   .map((caseData) => (
                     <CaseCard
-                      key={caseData.caseId}
-                      caseId={caseData.caseId}
-                      referringWorker={caseData.referringWorker}
-                      date={caseData.date}
-                      familyName={caseData.familyName}
-                      caseTag={caseData.caseTag}
+                      key={caseData.case_id}
+                      caseId={
+                        typeof caseData.case_id === "string"
+                          ? parseInt(caseData.case_id, 10)
+                          : caseData.case_id
+                      }
+                      referringWorker={
+                        caseData.caseReferral.referringWorkerName
+                      }
+                      date={caseData.caseReferral.referralDate}
+                      familyName={caseData.caseReferral.familyName}
+                      caseTag={caseData.intakeStatus}
                       intakeMeetingNotes={caseData.intakeMeetingNotes}
                     />
                   ))}

diff --git a/frontend/src/components/dashboard/StatusModal.tsx b/frontend/src/components/dashboard/StatusModal.tsx
@@ -31,6 +31,8 @@ export type StatusModalProps = {
   goToIntake: () => void;
   referringWorkerName: string;
   intakeNotes: string;
+  referralDate: string;
+  familyName: string;
 };
 
 const StatusModal = ({
@@ -43,6 +45,8 @@ const StatusModal = ({
   goToIntake,
   referringWorkerName,
   intakeNotes,
+  referralDate,
+  familyName,
 }: StatusModalProps): React.ReactElement => {
   const [selectedOption, setSelectedOption] = useState(status);
   const [workerName, setWorkerName] = useState(referringWorkerName);
@@ -124,8 +128,8 @@ const StatusModal = ({
                 Case Submission
               </Text>
               {/* TODO: Need to be changed for dynamic values */}
-              <Text>Date: XXX</Text>
-              <Text>Family Name: XXX</Text>
+              <Text>Date: {referralDate}</Text>
+              <Text>Family Name: {familyName}</Text>
               <Flex justify="flex-end" align="flex-end">
                 <Button
                   variant="tertiary"

diff --git a/frontend/src/components/pages/HomePage.tsx b/frontend/src/components/pages/HomePage.tsx
@@ -15,9 +15,9 @@ import IntakeHeader from "../intake/IntakeHeader";
 import CaseStatus from "../../types/CaseStatus";
 import IntakeAPIClient from "../../APIClients/IntakeAPIClient";
 import FilteredSection from "../dashboard/FilteredSection";
-import { CaseCardProps } from "../dashboard/CaseCard";
-import { Case } from "../../types/CasesContextTypes";
+import { CasesContextType } from "../../types/CasesContextTypes";
 import { useStepValueContext } from "../../contexts/IntakeValueContext";
+import CasesContext from "../../contexts/CasesContext";
 
 const SecondaryHeader = ({
   searchValue,
@@ -85,74 +85,62 @@ const SecondaryHeader = ({
 };
 
 const Home = (): React.ReactElement => {
+  const [contextCases, setContextCases] = useState<{
+    [key: string]: CasesContextType;
+  }>({
+    active: [],
+    submitted: [],
+    pending: [],
+    archived: [],
+    searched: [],
+  });
+
   const [searchValue, setSearchValue] = useState("");
-  const [searchResults, setSearchResults] = useState<CaseCardProps[]>([]);
   const [enterClicked, setEnterClicked] = useState(false);
   const handleSearch = () => {
     setEnterClicked(true);
     if (searchValue.trim() !== "") {
       IntakeAPIClient.search(searchValue).then((data) => {
-        const caseCards: CaseCardProps[] = data.map((caseData: Case) => ({
-          caseId: Number(caseData.case_id),
-          referringWorker: caseData.caseReferral.referringWorkerName,
-          date: caseData.caseReferral.referralDate,
-          caseTag: caseData.intakeStatus,
-          familyName: caseData.caseReferral.familyName,
-          intakeMeetingNotes: caseData.intakeMeetingNotes,
-        }));
-        setSearchResults(caseCards);
+        setContextCases({
+          active: contextCases.active,
+          submitted: contextCases.submitted,
+          pending: contextCases.pending,
+          archived: contextCases.archived,
+          searched: data,
+        });
       });
     }
   };
 
-  // TODO: remove console log and use context instead of state
-  // const casesFromContext = useContext(CasesContext);
-  // eslint-disable-next-line
-
-  const [cases, setCases] = useState<{ [key: string]: CaseCardProps[] }>({
-    active: [],
-    submitted: [],
-    pending: [],
-    archived: [],
-  });
-
-  const mapIntakeResponsesToCaseCards = (intakes: Case[]): CaseCardProps[] => {
-    if (intakes.length > 0) {
-      return intakes.map((intake) => ({
-        caseId:
-          typeof intake.case_id === "number"
-            ? intake.case_id
-            : parseInt(intake.case_id, 10),
-        referringWorker: intake.caseReferral.referringWorkerName,
-        intakeMeetingNotes: intake.intakeMeetingNotes,
-        date: intake.caseReferral.referralDate,
-        familyName: intake.caseReferral.familyName,
-        caseTag: intake.intakeStatus,
-      }));
-    }
-    return [];
-  };
-
   useEffect(() => {
     const fetchData = async () => {
-      const activeCases = await IntakeAPIClient.get(CaseStatus.ACTIVE, 1, 20);
-      const submittedCases = await IntakeAPIClient.get(
+      const activeContextCases = await IntakeAPIClient.get(
+        CaseStatus.ACTIVE,
+        1,
+        20,
+      );
+      const submittedContextCases = await IntakeAPIClient.get(
         CaseStatus.SUBMITTED,
         1,
         20,
       );
-      const pendingCases = await IntakeAPIClient.get(CaseStatus.PENDING, 1, 20);
-      const archivedCases = await IntakeAPIClient.get(
+      const pendingContextCases = await IntakeAPIClient.get(
+        CaseStatus.PENDING,
+        1,
+        20,
+      );
+      const archivedContextCases = await IntakeAPIClient.get(
         CaseStatus.ARCHIVED,
         1,
         20,
       );
 
-      setCases({
-        active: mapIntakeResponsesToCaseCards(activeCases),
-        submitted: mapIntakeResponsesToCaseCards(submittedCases),
-        pending: mapIntakeResponsesToCaseCards(pendingCases),
-        archived: mapIntakeResponsesToCaseCards(archivedCases),
+      setContextCases({
+        active: activeContextCases,
+        submitted: submittedContextCases,
+        pending: pendingContextCases,
+        archived: archivedContextCases,
+        searched: [],
       });
     };
 
@@ -181,29 +169,32 @@ const Home = (): React.ReactElement => {
           />
           {enterClicked && (
             <>
-              {searchResults.length > 0 ? (
-                <FilteredSection
-                  status="Search Results"
-                  cases={searchResults}
-                  showViewAll={false}
-                />
+              {contextCases.searched.length > 0 ? (
+                <CasesContext.Provider value={contextCases.searched}>
+                  <FilteredSection
+                    status="Search Results"
+                    showViewAll={false}
+                  />
+                </CasesContext.Provider>
               ) : (
                 <h3 style={{ marginTop: "20px" }}>
                   Sorry, we could not find that for you.
                 </h3>
               )}
             </>
           )}
-          <FilteredSection status={CaseStatus.ACTIVE} cases={cases.active} />
-          <FilteredSection
-            status={CaseStatus.SUBMITTED}
-            cases={cases.submitted}
-          />
-          <FilteredSection status={CaseStatus.PENDING} cases={cases.pending} />
-          <FilteredSection
-            status={CaseStatus.ARCHIVED}
-            cases={cases.archived}
-          />
+          <CasesContext.Provider value={contextCases.active}>
+            <FilteredSection status={CaseStatus.ACTIVE} />
+          </CasesContext.Provider>
+          <CasesContext.Provider value={contextCases.submitted}>
+            <FilteredSection status={CaseStatus.SUBMITTED} />
+          </CasesContext.Provider>
+          <CasesContext.Provider value={contextCases.pending}>
+            <FilteredSection status={CaseStatus.PENDING} />
+          </CasesContext.Provider>
+          <CasesContext.Provider value={contextCases.archived}>
+            <FilteredSection status={CaseStatus.ARCHIVED} />
+          </CasesContext.Provider>
         </VStack>
       </Box>
     </Box>