fix: revert form values after cancelling edits (#113)

* fix back, next, cancel, and sasve buttons to match Figma designs * fix: bug with resetting frequency value when editing * fix: revert form values to previous values * remove unnecessary lines * fix: yarn fix * fix: remove duplicated imports * fix api call Co-authored-by: Hanlin Cheng <h62cheng@uwaterloo.ca> Co-authored-by: Shehryar Suleman <shehryarsuleman@gmail.com>
uwblueprint · Jan 27, 2022 · 730d50b · 730d50b
1 parent db0d7cd
commit 730d50b
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 42 deletions.
diff --git a/frontend/src/components/pages/Scheduling/BackButton.tsx b/frontend/src/components/pages/Scheduling/BackButton.tsx
@@ -1,6 +1,7 @@
 import { ArrowBackIcon } from "@chakra-ui/icons";
 import { Box, Button } from "@chakra-ui/react";
 import React from "react";
+
 import { ButtonProps } from "./types";
 
 export default function BackButton({ previous }: ButtonProps) {

diff --git a/frontend/src/components/pages/Scheduling/CancelEditsButton.tsx b/frontend/src/components/pages/Scheduling/CancelEditsButton.tsx
@@ -1,15 +1,16 @@
 import { Button, CloseButton, Flex } from "@chakra-ui/react";
 import React from "react";
+
 import { ButtonProps } from "./types";
 
-export default function CancelButton({ go }: ButtonProps) {
+export default function CancelButton({ discardChanges }: ButtonProps) {
   return (
     <Flex justify="flex-end" mt="2em">
-        <CloseButton 
-            onClick={() => go && go("confirm donation details")}
-            variant="cancelNavigation" 
-            size="lg"
-        />
+      <CloseButton
+        onClick={discardChanges}
+        variant="cancelNavigation"
+        size="lg"
+      />
     </Flex>
   );
 }
diff --git a/frontend/src/components/pages/Scheduling/ConfirmDetails.tsx b/frontend/src/components/pages/Scheduling/ConfirmDetails.tsx
@@ -6,7 +6,6 @@ import {
   Container,
   Flex,
   HStack,
-  IconButton,
   Text,
   useDisclosure,
   useToast,
@@ -93,8 +92,8 @@ const ConfirmDetails = ({
 
   const getDonorData = async () => {
     const donorResponse = isBeingEdited
-      ? await DonorAPIClient.getDonorByUserId(currentSchedule.donorId)
-      : await DonorAPIClient.getDonorById(authenticatedUser!.id);
+      ? await DonorAPIClient.getDonorById(currentSchedule.donorId)
+      : await DonorAPIClient.getDonorByUserId(authenticatedUser!.id);
     setForm({ target: { name: "donorId", value: donorResponse.id } });
     setCurrentDonor(donorResponse);
   };
@@ -143,19 +142,19 @@ const ConfirmDetails = ({
     <Container variant="responsiveContainer">
       {isBeingEdited ? (
         <Box mt={10}>
-        <Button
-          onClick={() =>
-            history.push(
-              authenticatedUser?.role === Role.DONOR
-                ? Routes.DASHBOARD_PAGE
-                : Routes.VIEW_DONATIONS,
-            )
-          }
-          paddingLeft="0" 
-          backgroundColor="transparent"
-        >
-        <ArrowBackIcon w={8} h={5} /> Back
-        </Button>
+          <Button
+            onClick={() =>
+              history.push(
+                authenticatedUser?.role === Role.DONOR
+                  ? Routes.DASHBOARD_PAGE
+                  : Routes.VIEW_DONATIONS,
+              )
+            }
+            paddingLeft="0"
+            backgroundColor="transparent"
+          >
+            <ArrowBackIcon w={8} h={5} /> Back
+          </Button>
         </Box>
       ) : (
         <>
@@ -388,15 +387,15 @@ const ConfirmDetails = ({
       )}
       {!isBeingEdited && (
         <HStack>
-        <Flex justify="flex-end">
-          <Button onClick={onSubmitClick} variant="navigation">
-            Submit
-          </Button>
-        </Flex>
-        <ErrorSchedulingModal
-          isOpen={isErrorSchedulingOpen}
-          onClose={onErrorSchedulingClose}
-        />
+          <Flex justify="flex-end">
+            <Button onClick={onSubmitClick} variant="navigation">
+              Submit
+            </Button>
+          </Flex>
+          <ErrorSchedulingModal
+            isOpen={isErrorSchedulingOpen}
+            onClose={onErrorSchedulingClose}
+          />
         </HStack>
       )}
     </Container>

diff --git a/frontend/src/components/pages/Scheduling/DonationInformation.tsx b/frontend/src/components/pages/Scheduling/DonationInformation.tsx
@@ -1,14 +1,11 @@
 import {
-  Button,
   Checkbox,
   Container,
   FormControl,
   FormErrorMessage,
   FormLabel,
-  HStack,
   Stack,
   Text,
-  VStack,
 } from "@chakra-ui/react";
 import React, { ChangeEvent, useState } from "react";
 
@@ -104,10 +101,19 @@ const DonationInformation: any = ({
     }
   };
 
+  const discardChanges = async () => {
+    const scheduleResponse = await SchedulingAPIClient.getScheduleById(id);
+    setForm({
+      target: { name: "categories", value: scheduleResponse.categories },
+    });
+    setForm({ target: { name: "size", value: scheduleResponse.size } });
+    return go && go("confirm donation details");
+  };
+
   return (
     <Container variant="responsiveContainer">
       {isBeingEdited ? (
-        <CancelButton go={go} />
+        <CancelButton discardChanges={discardChanges} />
       ) : (
         <>
           <SchedulingProgressBar activeStep={1} totalSteps={4} />

diff --git a/frontend/src/components/pages/Scheduling/NextButton.tsx b/frontend/src/components/pages/Scheduling/NextButton.tsx
@@ -1,5 +1,6 @@
 import { Button, Flex } from "@chakra-ui/react";
 import React from "react";
+
 import { ButtonProps } from "./types";
 
 export default function NextButton({ canSubmit, handleNext }: ButtonProps) {

diff --git a/frontend/src/components/pages/Scheduling/SaveChangesButton.tsx b/frontend/src/components/pages/Scheduling/SaveChangesButton.tsx
@@ -1,5 +1,6 @@
 import { Button, Flex } from "@chakra-ui/react";
 import React from "react";
+
 import useViewport from "../../../hooks/useViewport";
 import { ButtonProps } from "./types";
 

diff --git a/frontend/src/components/pages/Scheduling/SelectDateTime.tsx b/frontend/src/components/pages/Scheduling/SelectDateTime.tsx
@@ -22,8 +22,10 @@ import { Schedule } from "../../../types/SchedulingTypes";
 import RadioSelectGroup from "../../common/RadioSelectGroup";
 import SchedulingProgressBar from "../../common/SchedulingProgressBar";
 import BackButton from "./BackButton";
+import CancelButton from "./CancelEditsButton";
 import ErrorMessages from "./ErrorMessages";
 import NextButton from "./NextButton";
+import SaveButton from "./SaveChangesButton";
 import {
   convertFrequencyString,
   dayParts,
@@ -32,8 +34,6 @@ import {
   getTimeSlot,
   SchedulingStepProps,
 } from "./types";
-import CancelButton from "./CancelEditsButton";
-import SaveButton from "./SaveChangesButton";
 
 const SelectDateTime = ({
   formValues,
@@ -220,11 +220,11 @@ const SelectDateTime = ({
     setForm({ target: { name: "dayPart", value: "" } }); // reset daypart
     setForm({ target: { name: "startTime", value: "" } });
     setForm({ target: { name: "endTime", value: "" } });
-    
+
     if (!isBeingEdited) {
       setForm({ target: { name: "frequency", value: "" } });
     }
-    
+
     setFormErrors({
       ...formErrors,
       date: "",
@@ -336,10 +336,31 @@ const SelectDateTime = ({
     return new Date(today.setDate(diff));
   };
 
+  const discardChanges = async () => {
+    const scheduleResponse = await SchedulingAPIClient.getScheduleById(id);
+
+    setForm({ target: { name: "dayPart", value: scheduleResponse.dayPart } });
+    setForm({
+      target: { name: "frequency", value: scheduleResponse.frequency },
+    });
+    setForm({
+      target: { name: "startTime", value: scheduleResponse.startTime },
+    });
+    setForm({ target: { name: "endTime", value: scheduleResponse.endTime } });
+    setForm({
+      target: {
+        name: "recurringDonationEndDate",
+        value: scheduleResponse.recurringDonationEndDate,
+      },
+    });
+
+    return go && go("confirm donation details");
+  };
+
   return (
     <Container variant="responsiveContainer">
       {isBeingEdited ? (
-        <CancelButton go={go} />
+        <CancelButton discardChanges={discardChanges} />
       ) : (
         <>
           <SchedulingProgressBar activeStep={0} totalSteps={4} />

diff --git a/frontend/src/components/pages/Scheduling/VolunteerInformation.tsx b/frontend/src/components/pages/Scheduling/VolunteerInformation.tsx
@@ -138,10 +138,33 @@ const VolunteerInformation = ({
     }
   };
 
+  const discardChanges = async () => {
+    const scheduleResponse = await SchedulingAPIClient.getScheduleById(id);
+    setForm({
+      target: {
+        name: "volunteerNeeded",
+        value: scheduleResponse.volunteerNeeded,
+      },
+    });
+    setForm({
+      target: { name: "volunteerTime", value: scheduleResponse.volunteerTime },
+    });
+    setForm({
+      target: {
+        name: "pickupLocation",
+        value: scheduleResponse.pickupLocation,
+      },
+    });
+    setForm({ target: { name: "isPickup", value: scheduleResponse.isPickup } });
+    setForm({ target: { name: "notes", value: scheduleResponse.notes } });
+
+    return go && go("confirm donation details");
+  };
+
   return (
     <Container variant="responsiveContainer">
       {isBeingEdited ? (
-        <CancelButton go={go} />
+        <CancelButton discardChanges={discardChanges} />
       ) : (
         <>
           <SchedulingProgressBar activeStep={2} totalSteps={4} />

diff --git a/frontend/src/components/pages/Scheduling/types.ts b/frontend/src/components/pages/Scheduling/types.ts
@@ -26,7 +26,7 @@ export interface SchedulingProgessBarProps {
 export interface ButtonProps {
   onSaveClick?: () => void;
   isBeingEdited?: boolean;
-  go?: (step: string | number) => void;
+  discardChanges?: () => Promise<void | undefined>;
   canSubmit?: boolean;
   handleNext?: () => void;
   previous?: () => void;