Reset modal after adding event

client/src/App.js

@@ -3,10 +3,11 @@ import Modal from "features/modal/Modal";
 import RejectionModal from "features/modal/RejectionModal";
 import WelcomeUserModal from "features/modal/WelcomeUserModal";
 import { useAuthContext } from "contexts/AuthContext";
+import FormProvider from "contexts/FormContext";
 import LandingPage from "pages/LandingPage";
 import CalendarPage from "pages/CalendarPage";
 import { AdminDashboard } from "pages/AdminDashboard";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 
 function App() {
   const auth = useAuthContext();
@@ -38,7 +39,14 @@ function App() {
     <>
       <Routes>
         <Route path="/" element={<LandingPage />} />
-        <Route path="/calendar" element={<CalendarPage />} />
+        <Route
+          path="/calendar"
+          element={
+            <FormProvider>
+              <CalendarPage />
+            </FormProvider>
+          }
+        />
         <Route path="/adminDashboard" element={<AdminDashboard />} />
       </Routes>
       {isAuthenticated && (

client/src/contexts/FormContext/useProvideForm.js

@@ -15,6 +15,13 @@ const useProvideForm = () => {
   const [formCreateEventErrors, setFormCreateEventErrors] = useState([]);
   const [formScheduleEventErrors, setFormScheduleEventErrors] = useState([]);
 
+  const resetForm = () => {
+    if (currentStep === 4) {
+      setFormData({ recurring: { rate: "noRecurr", days: [] } });
+      setCurrentStep(1);
+    }
+  };
+
   const handleNewStep = async direction => {
     const newStep = direction === "next" ? currentStep + 1 : currentStep - 1;
 
@@ -62,6 +69,7 @@ const useProvideForm = () => {
     setFormCreateEventErrors,
     setFormScheduleEventErrors,
     setCurrentStep,
+    resetForm,
   };
 };
 

client/src/features/form/FormCreateEvent.js

@@ -21,7 +21,7 @@ export default function FormCreateEvent() {
     <div className="flex flex-col">
       {formCreateEventErrors.map((error, index) => {
         return (
-          <div className="alert alert-error shadow-lg text-red-700" key="index">
+          <div className="alert alert-error shadow-lg text-red-700" key={index}>
             <div>
               <svg
                 xmlns="http://www.w3.org/2000/svg"

client/src/features/form/FormScheduleEvent.js

@@ -27,7 +27,7 @@ export default function FormScheduleEvent() {
     <div>
       {formScheduleEventErrors.map((error, index) => {
         return (
-          <div className="alert alert-error shadow-lg text-red-700" key="index">
+          <div className="alert alert-error shadow-lg text-red-700" key={index}>
             <div>
               <svg
                 xmlns="http://www.w3.org/2000/svg"

client/src/features/form/FormSuccess.js

@@ -3,7 +3,7 @@
 import { useFormContext } from "contexts/FormContext";
 
 export default function FormSuccess() {
-  const form = useFormContext();
+  const { resetForm } = useFormContext();
   return (
     <div className="container md:mt-10">
       <div className="flex flex-col items-center">
@@ -14,12 +14,7 @@ export default function FormSuccess() {
 
         {/* A button to add another event if so desired */}
         <button
-          onClick={() => {
-            form.setFormData({
-              recurring: { rate: "noRecurr", days: [] },
-            });
-            form.setCurrentStep(1);
-          }}
+          onClick={resetForm}
           className="h-10 mt-10 px-5 font-semibold text-green-700 transition-colors duration-150 border border-gray-300 rounded-lg focus:shadow-outline hover:bg-green-500 hover:text-green-100"
         >
           New Event

client/src/features/form/UserForm.js

@@ -10,9 +10,9 @@ import { useFormModalContext } from "contexts/FormModalContext";
 // This is the code for the form where you add events to the calendar
 const UserForm = () => {
   // Specifically extract the currentStep and totalSteps from userFormContext
-  const { currentStep, totalSteps } = useFormContext();
+  const { currentStep, totalSteps, resetForm } = useFormContext();
 
-  const modal = useFormModalContext();
+  const { handleClose } = useFormModalContext();
 
   // Called to display different parts of the form based on the latest step.
   const displayStep = step => {
@@ -39,7 +39,10 @@ const UserForm = () => {
         <div className="flex flex-col items-center">
           <button
             className="w-auto h-12 mt-5 px-2 border-solid border-2 border-gray outline-none rounded font-semibold text-xl hover:bg-teal-600 active:bg-teal-700 focus:outline-none focus:ring focus:ring-teal-300"
-            onClick={modal.handleClose}
+            onClick={() => {
+              handleClose();
+              resetForm();
+            }}
           >
             Close
           </button>

client/src/features/modal/Modal.jsx

@@ -2,7 +2,7 @@ import { AnimatePresence } from "framer-motion";
 import Backdrop from "./Backdrop";
 import { motion } from "framer-motion";
 
-const Modal = ({ children, context }) => {
+const Modal = ({ children, context, onBackdropClick }) => {
   const dropIn = {
     hidden: {
       y: "-100vh",
@@ -32,7 +32,12 @@ const Modal = ({ children, context }) => {
         onExitComplete={() => null}
       >
         {context.isOpen && (
-          <Backdrop onClick={context.handleClose}>
+          <Backdrop
+            onClick={() => {
+              context.handleClose();
+              if (typeof onBackdropClick === "function") onBackdropClick();
+            }}
+          >
             <motion.div
               className="modal overflow-y-auto"
               onClick={e => e.stopPropagation()}

client/src/pages/CalendarPage.js

@@ -1,7 +1,7 @@
 import useDate from "hooks/useDate";
 import Calendar from "../features/calendar/Calendar";
 import CalendarHeader from "../features/calendarHeader";
-import FormProvider from "contexts/FormContext";
+import { useFormContext } from "contexts/FormContext";
 import Modal from "features/modal/Modal";
 import UserForm from "features/form/UserForm";
 import { useAuthContext } from "contexts/AuthContext";
@@ -16,6 +16,7 @@ function CalendarPage() {
   const date = useDate();
   const formModal = useFormModalContext();
   const modal = useModalContext();
+  const { resetForm } = useFormContext();
   const canScrollMonthRef = useRef(true);
 
   const handleWheelScroll = e => {
@@ -33,7 +34,7 @@ function CalendarPage() {
   };
 
   return (
-    <FormProvider>
+    <>
       <main
         onWheel={handleWheelScroll}
         className="flex flex-col gap-3 p-3 shadow-sm min-h-screen max-w-[1920px] mx-auto"
@@ -45,15 +46,15 @@ function CalendarPage() {
         <Modal context={modal}>
           <EventModal />
         </Modal>
-        <Modal context={formModal}>
+        <Modal context={formModal} onBackdropClick={resetForm}>
           {auth?.user ? (
             <UserForm />
           ) : (
             <RejectionModal handleClose={formModal.handleClose} />
           )}
         </Modal>
       </div>
-    </FormProvider>
+    </>
   );
 }
 export default CalendarPage;

cypress/e2e/create-event-form.cy.js

@@ -201,7 +201,6 @@ describe("Event Creation Form", () => {
     cy.contains("button", "Test Title");
 
     tgt.calendar.button.addEvent().click();
-    cy.contains("button", "New Event").click();
     tgt.createForm.input.title().should("exist");
   });
 
@@ -281,5 +280,8 @@ describe("Event Creation Form", () => {
       "have.length.of.at.least",
       2
     );
+
+    tgt.calendar.button.addEvent().click();
+    tgt.createForm.input.title().should("exist");
   });
 });