Implement ‘Edit’ button function in Review Case page (#140)

implement edit buttons in review case page
uwblueprint · Feb 16, 2023 · db9fa1e · db9fa1e
1 parent cacd41a
commit db9fa1e
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 49 deletions.
diff --git a/frontend/src/components/intake/IndividualDetails.tsx b/frontend/src/components/intake/IndividualDetails.tsx
@@ -1,37 +1,23 @@
 import React from "react";
 import { Button, VStack, Text, HStack, Icon, Divider } from "@chakra-ui/react";
-import { Edit2, ArrowRight } from "react-feather";
+import { ArrowRight } from "react-feather";
 import { useHistory } from "react-router-dom";
 import { IndividualDetailsOverview } from "./PromptBox";
 
 type IndividualDetailsProps = {
-  title: string;
   childrenDetails: IndividualDetailsOverview[];
   caregiverDetails: IndividualDetailsOverview[];
 };
 
 const IndividualDetails = ({
-  title,
   childrenDetails,
   caregiverDetails,
 }: IndividualDetailsProps): React.ReactElement => {
   const history = useHistory();
 
   return (
     <>
-      <VStack padding="32px" align="flex-start" spacing="16px">
-        <HStack w="full" display="flex" justifyContent="space-between">
-          <Text color="b&w.black" textStyle="header-large">
-            {title}
-          </Text>
-          <Button
-            textStyle="button-medium"
-            variant="primary"
-            rightIcon={<Icon as={Edit2} h="16px" />}
-          >
-            Edit {/* TODO: implement edit button */}
-          </Button>
-        </HStack>
+      <VStack paddingY="32px" align="flex-start" spacing="16px">
         <Text
           color="blue.500"
           textStyle="label"
@@ -69,7 +55,7 @@ const IndividualDetails = ({
           </VStack>
         ))}
       </VStack>
-      <VStack padding="32px" align="flex-start" spacing="16px">
+      <VStack paddingY="32px" align="flex-start" spacing="16px">
         <Text
           color="blue.500"
           textStyle="label"

diff --git a/frontend/src/components/intake/ReviewCaseForm.tsx b/frontend/src/components/intake/ReviewCaseForm.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, HStack, Text, Icon, Stack, Box } from "@chakra-ui/react";
+import { Button, HStack, Icon, Stack, Text } from "@chakra-ui/react";
 import { Edit2 } from "react-feather";
 import IndividualDetails from "./IndividualDetails";
 import ReferralForm, { ReferralDetails } from "./ReferralForm";
@@ -16,8 +16,8 @@ type ReviewFormProps = {
   programDetails: ProgramDetails;
   setProgramDetails: React.Dispatch<React.SetStateAction<ProgramDetails>>;
   nextStep: () => void;
-  prevStep: () => void;
   setStep: React.Dispatch<React.SetStateAction<number>>;
+  setReviewHeader: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const ReviewForm = ({
@@ -28,8 +28,8 @@ const ReviewForm = ({
   programDetails,
   setProgramDetails,
   nextStep,
-  prevStep,
   setStep,
+  setReviewHeader,
 }: ReviewFormProps): React.ReactElement => {
   const onNextStep = () => {
     nextStep(); // TODO: Add functionality for nextStep (Currently we pass in empty nextStep() prop)
@@ -46,8 +46,12 @@ const ReviewForm = ({
             textStyle="button-medium"
             variant="primary"
             rightIcon={<Icon as={Edit2} h="16px" />}
+            onClick={() => {
+              setStep(IntakeSteps.CASE_REFERRAL);
+              setReviewHeader(true);
+            }}
           >
-            Edit {/* TODO: implement edit button */}
+            Edit
           </Button>
         </HStack>
         <ReferralForm
@@ -70,8 +74,12 @@ const ReviewForm = ({
             textStyle="button-medium"
             variant="primary"
             rightIcon={<Icon as={Edit2} h="16px" />}
+            onClick={() => {
+              setStep(IntakeSteps.COURT_INFORMATION);
+              setReviewHeader(true);
+            }}
           >
-            Edit {/* TODO: implement edit button */}
+            Edit
           </Button>
         </HStack>
         <CourtInformationForm
@@ -85,23 +93,41 @@ const ReviewForm = ({
         />
       </Stack>
 
-      <IndividualDetails
-        title="Individual details"
-        childrenDetails={[]}
-        caregiverDetails={[]}
-      />
+      <Stack padding="32px" spacing="16px">
+        <HStack w="full" display="flex" justifyContent="space-between">
+          <Text color="b&w.black" textStyle="header-large">
+            Individual details
+          </Text>
+          <Button
+            textStyle="button-medium"
+            variant="primary"
+            rightIcon={<Icon as={Edit2} h="16px" />}
+            onClick={() => {
+              setStep(IntakeSteps.INDIVIDUAL_DETAILS);
+              setReviewHeader(true);
+            }}
+          >
+            Edit
+          </Button>
+        </HStack>
+        <IndividualDetails childrenDetails={[]} caregiverDetails={[]} />
+      </Stack>
 
       <Stack padding="32px" spacing="16px">
         <HStack w="full" display="flex" justifyContent="space-between">
           <Text color="b&w.black" textStyle="header-large">
-            Program Details
+            Program details
           </Text>
           <Button
             textStyle="button-medium"
             variant="primary"
             rightIcon={<Icon as={Edit2} h="16px" />}
+            onClick={() => {
+              setStep(IntakeSteps.PROGRAM_DETAILS);
+              setReviewHeader(true);
+            }}
           >
-            Edit {/* TODO: implement edit button */}
+            Edit
           </Button>
         </HStack>
         <ProgramForm
@@ -122,15 +148,6 @@ const ReviewForm = ({
         registrationLoading={false}
         nextStepCallBack={onNextStep}
       />
-      <Box>
-        <Button
-          onClick={() => {
-            prevStep();
-          }}
-        >
-          Previous Button
-        </Button>
-      </Box>
     </>
   );
 };

diff --git a/frontend/src/components/pages/IntakePage.tsx b/frontend/src/components/pages/IntakePage.tsx
@@ -9,9 +9,11 @@ import ProgramForm, { ProgramDetails } from "../intake/ProgramForm";
 import ReviewForm from "../intake/ReviewCaseForm";
 import IndividualDetailsEntry from "../intake/IndividualDetailsEntry";
 import { Caregivers } from "../intake/NewCaregiverModal";
+import IntakeSteps from "../intake/intakeSteps";
 
 const Intake = (): React.ReactElement => {
   const [step, setStep] = useState(0);
+  const [reviewHeader, setReviewHeader] = useState(false);
   const [referralDetails, setReferralDetails] = useState<ReferralDetails>({
     referringWorker: "",
     referringWorkerContact: "",
@@ -39,11 +41,10 @@ const Intake = (): React.ReactElement => {
   const [caregivers, setCaregivers] = useState<Caregivers>([]);
 
   const nextStep = () => setStep(step + 1);
-  const prevStep = () => setStep(step - 1);
 
   const renderDetailsForm = () => {
     switch (step) {
-      case 0:
+      case IntakeSteps.CASE_REFERRAL:
         return (
           <ReferralForm
             referralDetails={referralDetails}
@@ -52,7 +53,7 @@ const Intake = (): React.ReactElement => {
             setStep={setStep}
           />
         );
-      case 1:
+      case IntakeSteps.COURT_INFORMATION:
         return (
           <CourtInformationForm
             courtDetails={courtDetails}
@@ -61,7 +62,7 @@ const Intake = (): React.ReactElement => {
             setStep={setStep}
           />
         );
-      case 2:
+      case IntakeSteps.INDIVIDUAL_DETAILS:
         return (
           <IndividualDetailsEntry
             nextStep={nextStep}
@@ -70,7 +71,7 @@ const Intake = (): React.ReactElement => {
             setCaregivers={setCaregivers}
           />
         );
-      case 3:
+      case IntakeSteps.PROGRAM_DETAILS:
         return (
           <ProgramForm
             programDetails={programDetails}
@@ -91,8 +92,8 @@ const Intake = (): React.ReactElement => {
                 programDetails={programDetails}
                 setProgramDetails={setProgramDetails}
                 nextStep={nextStep}
-                prevStep={prevStep}
                 setStep={setStep}
+                setReviewHeader={setReviewHeader}
               />
             </Box>
           </>
@@ -102,16 +103,25 @@ const Intake = (): React.ReactElement => {
 
   return (
     <>
-      {step === 4 ? (
+      {step === IntakeSteps.REVIEW_CASE_DETAILS ? (
         <IntakeHeader
           primaryTitle="Review Case Details"
           secondaryTitle="Initiate New Case"
         />
       ) : (
-        <IntakeHeader
-          primaryTitle="Initiate New Case"
-          secondaryTitle="Case Management"
-        />
+        <>
+          {reviewHeader ? (
+            <IntakeHeader
+              primaryTitle="Edit Case Intake Submission"
+              secondaryTitle="Case Management"
+            />
+          ) : (
+            <IntakeHeader
+              primaryTitle="Initiate New Case"
+              secondaryTitle="Case Management"
+            />
+          )}
+        </>
       )}
 
       <Box textAlign="center" padding="30px 0 40px 0">