From 451a626869dbe53e8f043612a1d283f2831731c4 Mon Sep 17 00:00:00 2001
From: Shahan Neda <shahan.neda@gmail.com>
Date: Wed, 4 Sep 2024 17:15:25 -0400
Subject: [PATCH] Fix chrome history on 3 step forms (meal creation and
 donation form)

---
 .../asp/requests/CreateMealRequest.tsx        | 10 ++++++
 .../src/components/common/ThreeStepForm.tsx   | 33 ++++++++++++++++++-
 .../donation_form/MealDonationForm.tsx        | 18 +++++++---
 3 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/asp/requests/CreateMealRequest.tsx b/frontend/src/components/asp/requests/CreateMealRequest.tsx
index f27673d7..d5d9b8c3 100644
--- a/frontend/src/components/asp/requests/CreateMealRequest.tsx
+++ b/frontend/src/components/asp/requests/CreateMealRequest.tsx
@@ -117,6 +117,16 @@ const CreateMealRequest = (): React.ReactElement => {
         header1="Scheduling"
         header2="Meal donation information"
         header3="Review & submit"
+        shouldGoBackToStep1={(currentStep) => {
+          if(currentStep > 0 && mealRequestDates.length === 0) {
+            return true;
+          }
+          if(currentStep > 1 && (onsiteContact.length === 0 || onsiteContact[0].name === "")) {
+            return true;
+          }
+
+          return false;
+        }}
         panel1={
           isWeeklyInput ? (
             <SchedulingFormWeekly
diff --git a/frontend/src/components/common/ThreeStepForm.tsx b/frontend/src/components/common/ThreeStepForm.tsx
index 39d39ba9..4ce5632d 100644
--- a/frontend/src/components/common/ThreeStepForm.tsx
+++ b/frontend/src/components/common/ThreeStepForm.tsx
@@ -12,7 +12,18 @@ import {
   Text,
   useBreakpointValue,
 } from "@chakra-ui/react";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+
+type PageNavigationState = { tabIndex: number }
+
+function getTabIndex(state: unknown) : number {
+  if (!state) return 0; // Makes sure it's not null
+  if (typeof state !== "object") return 0;
+  if (typeof (state as PageNavigationState).tabIndex !== "number") return 0;
+  return (state as PageNavigationState).tabIndex;
+}
 
 /**
  * A three-step form with tabs at the top.
@@ -26,6 +37,7 @@ const ThreeStepForm = ({
   panel1,
   panel2,
   panel3,
+  shouldGoBackToStep1,
 }: {
   header1: string;
   header2: string;
@@ -33,19 +45,38 @@ const ThreeStepForm = ({
   panel1: React.ReactElement;
   panel2: React.ReactElement;
   panel3: React.ReactElement;
+  shouldGoBackToStep1: (currentStep : number) => boolean;
 }): React.ReactElement => {
   const fontSize = useBreakpointValue({ base: "12px", sm: "16px", md: "20px" });
+  const { state, pathname, search  } = useLocation(); 
 
   const [tabIndex, setTabIndex] = useState(0);
+  const navigate = useNavigate();
+
+  // Get state:
+  useEffect(() => {
+    let newTabIndex = getTabIndex(state);
+
+    if (shouldGoBackToStep1(newTabIndex)) {
+      newTabIndex = 0;
+      navigate(pathname + search, { state: { tabIndex: 0 } });
+      window.history.replaceState({}, '', '')
+    }
+
+    setTabIndex(newTabIndex);
+  }, [navigate, pathname, search, shouldGoBackToStep1, state])
 
   const handleNext = () => {
     const thisTab = tabIndex;
     setTabIndex((prevIndex) => prevIndex + 1);
+    navigate(pathname + search, { state: { tabIndex: thisTab + 1 } });
   };
 
+
   const handleBack = () => {
     const thisTab = tabIndex;
     setTabIndex((prevIndex) => prevIndex - 1);
+    navigate(pathname + search, { state: { tabIndex: thisTab - 1 } });
   };
 
   return (
diff --git a/frontend/src/components/meal_donor/donation_form/MealDonationForm.tsx b/frontend/src/components/meal_donor/donation_form/MealDonationForm.tsx
index 8640a175..f27617a9 100644
--- a/frontend/src/components/meal_donor/donation_form/MealDonationForm.tsx
+++ b/frontend/src/components/meal_donor/donation_form/MealDonationForm.tsx
@@ -30,6 +30,11 @@ const MealDonationForm = (): React.ReactElement => {
   ]);
 
   // Step 2: Meal details
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const idsParam = searchParams.get("ids");
+  const aspId = searchParams.get("aspId");
+
   const [mealDescription, setMealDescription] = useState<string>("");
   const [additionalInfo, setAdditionalInfo] = useState<string>("");
 
@@ -62,10 +67,6 @@ const MealDonationForm = (): React.ReactElement => {
   };
 
   const requestorId = authenticatedUser?.id || "";
-  const location = useLocation();
-  const searchParams = new URLSearchParams(location.search);
-  const idsParam = searchParams.get("ids");
-  const aspId = searchParams.get("aspId");
   // Split the idsParam by dot to get an array of ids
   const ids = idsParam ? idsParam.split(",") : [];
 
@@ -158,6 +159,15 @@ const MealDonationForm = (): React.ReactElement => {
           header1="Contact Information"
           header2="Meal Details"
           header3="Review & Submit"
+          shouldGoBackToStep1={(currentStep) => {
+            if (currentStep > 0 && (onsiteContacts.length === 0 || onsiteContacts[0].name === "")) {
+              return true;
+            }
+            if (currentStep > 1 && mealDescription === "") {
+              return true;
+            }
+            return false
+          }}
           panel1={
             <MealDonationFormContactInfo
               onsiteContact={onsiteContacts}