From b8d982f92917cc961cccda5a516a451f9ee4b546 Mon Sep 17 00:00:00 2001
From: Hieu Ngo <hieu.ngo12989@gmail.com>
Date: Tue, 14 Nov 2023 22:35:46 -0800
Subject: [PATCH] Reset form to initial state upon submitting (#245)

---
 src/components/goal/Goal.tsx | 31 +++++++++++++++++++++++--------
 src/components/iep/Iep.tsx   | 18 ++++++++++++------
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/components/goal/Goal.tsx b/src/components/goal/Goal.tsx
index 668a3539..848a875a 100644
--- a/src/components/goal/Goal.tsx
+++ b/src/components/goal/Goal.tsx
@@ -18,16 +18,24 @@ const Goals = ({ goal }: GoalProps) => {
     onSuccess: () => utils.iep.getSubgoals.invalidate(),
   });
 
-  const handleSubGoalSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  const handleSubGoalSubmit = async (
+    event: React.FormEvent<HTMLFormElement>
+  ) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);
 
-    subgoal.mutate({
-      goal_id: goal.goal_id,
-      description: data.get("description") as string,
-      instructions: data.get("instructions") as string,
-      target_max_attempts: Number(data.get("target_max_attempts")) || null,
-    });
+    try {
+      await subgoal.mutateAsync({
+        goal_id: goal.goal_id,
+        description: data.get("description") as string,
+        instructions: data.get("instructions") as string,
+        target_max_attempts: Number(data.get("target_max_attempts")) || null,
+      });
+
+      (event.target as HTMLFormElement).reset();
+    } catch (err) {
+      console.log("error: ", err);
+    }
   };
 
   if (isLoading) {
@@ -55,11 +63,18 @@ const Goals = ({ goal }: GoalProps) => {
             placeholder="Subgoal description"
             required
           />
-          <input type="text" name="instructions" placeholder="Instructions" />
+          <input
+            type="text"
+            name="instructions"
+            placeholder="Instructions"
+            required
+          />
           <input
             type="number"
             name="target_max_attempts"
             placeholder="# of attempts"
+            min="1"
+            required
           />
 
           <button type="submit" className={$goal.createButton}>
diff --git a/src/components/iep/Iep.tsx b/src/components/iep/Iep.tsx
index 447040e3..8fbef0aa 100644
--- a/src/components/iep/Iep.tsx
+++ b/src/components/iep/Iep.tsx
@@ -27,15 +27,21 @@ const Iep = ({ iep_id }: IepProps) => {
     onSuccess: () => utils.iep.getGoals.invalidate(),
   });
 
-  const handleGoalSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  const handleGoalSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);
 
-    goalMutation.mutate({
-      iep_id: iep_id,
-      description: data.get("description") as string,
-      category: data.get("category") as string,
-    });
+    try {
+      await goalMutation.mutateAsync({
+        iep_id: iep_id,
+        description: data.get("description") as string,
+        category: data.get("category") as string,
+      });
+
+      (event.target as HTMLFormElement).reset();
+    } catch (err) {
+      console.log("error: ", err);
+    }
   };
 
   if (isLoading) {