Fix chrome history on 3 step forms (meal creation and donation form)

Author: shahanneda

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

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,26 +37,46 @@ const ThreeStepForm = ({
   panel1,
   panel2,
   panel3,
+  shouldGoBackToStep1,
 }: {
   header1: string;
   header2: string;
   header3: string;
   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 (

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}