Merge branch 'Gehrkej/Attempt-Input-Error-Handling' of https://github…

….com/Golf-Drill-Challenge-App/Golf-App into Gehrkej/Attempt-Input-Error-Handling
Golf-Drill-Challenge-App · Apr 12, 2024 · 80b81a6 · 80b81a6
2 parents b4d6c46 + 45a8476
commit 80b81a6
Showing 1 changed file with 81 additions and 17 deletions.
diff --git a/app/segments/drill/[id]/submission/input.js b/app/segments/drill/[id]/submission/input.js
@@ -112,6 +112,9 @@ async function uploadAttempt(
         console.log("Document successfully uploaded!");
         //TODO: Call function to check for leaderboard update
 
+        //Check if drill was assigned
+        //TODO: Call function to check for leaderboard update
+
         //Check if drill was assigned
         if (assignedTime) {
           completeAssigned(
@@ -342,6 +345,7 @@ function createOutputData(drillInfo, inputValues, attemptShots, uid, did) {
 
     //add the sid to the shot
     shot.sid = j + 1;
+    shot.sid = j + 1;
 
     //push the shot into the array
     outputShotData.push(shot);
@@ -410,6 +414,16 @@ function validateInputs(inputs) {
   return Object.values(inputs).some((input) => isNaN(input));
 }
 
+//A function to validate inputs are not empty
+function checkEmptyInputs(inputs) {
+  return Object.values(inputs).some((value) => value === "");
+}
+
+//A function to validate inputs are all numbers
+function validateInputs(inputs) {
+  return Object.values(inputs).some((input) => isNaN(input));
+}
+
 export default function Input({ drillInfo, setToggleResult, setOutputData }) {
   //Helper varibles
   const { id, assignedTime } = useLocalSearchParams();
@@ -458,30 +472,31 @@ export default function Input({ drillInfo, setToggleResult, setOutputData }) {
   const [invalidDialogVisible, setInvalidDialogVisible] = useState(false);
   const hideInvalidDialog = () => setInvalidDialogVisible(false);
 
-  /***** Invalid Input Banner Stuff *****/
-
-  const [invalidInputBannerVisible, setInvalidInputBannerVisible] =
-    useState(false);
-
   //useEffectHook to set the attempts shot requirements
   useEffect(() => {
     setattemptShots(getShotInfo(drillInfo));
   }, []);
 
+  //Varible to store if Submit button is active
+  const submitVisible =
+    currentShot == drillInfo.reps - 1 && displayedShot == drillInfo.reps - 1;
+
   //Varible to store if Submit button is active
   const submitVisible =
     currentShot == drillInfo.reps - 1 && displayedShot == drillInfo.reps - 1;
 
   //Changes the button depending on the current shot and shot index
   const buttonDisplayHandler = () => {
     //Logic to display "Submit Drill"
+    if (submitVisible) {
     if (submitVisible) {
       return (
         <Button
           style={styles.button}
           labelStyle={styles.buttonText}
           mode="contained-tonal"
           onPress={handleButtonClick}
+          onPress={handleButtonClick}
         >
           Submit Drill
         </Button>
@@ -511,6 +526,7 @@ export default function Input({ drillInfo, setToggleResult, setOutputData }) {
         labelStyle={styles.buttonText}
         mode="contained-tonal"
         onPress={handleButtonClick}
+        onPress={handleButtonClick}
       >
         Next Shot
       </Button>
@@ -530,6 +546,7 @@ export default function Input({ drillInfo, setToggleResult, setOutputData }) {
   };
 
   //Function to handle "Next shot" button click
+  const handleButtonClick = () => {
   const handleButtonClick = () => {
     //Check if all inputs have been filled in
     if (
@@ -564,6 +581,38 @@ export default function Input({ drillInfo, setToggleResult, setOutputData }) {
       );
       setToggleResult(true);
     } else {
+    if (
+      Object.keys(inputValues[displayedShot]).length != numInputs ||
+      checkEmptyInputs(inputValues[displayedShot])
+    ) {
+      setEmptyDialogVisible(true);
+    }
+    //check inputs are all numbers
+    else if (validateInputs(inputValues[displayedShot])) {
+      setInvalidDialogVisible(true);
+    }
+    //check for submit button
+    else if (submitVisible) {
+      let outputData = createOutputData(
+        inputValues,
+        attemptShots,
+        currentUserId,
+        did,
+        drillInfo.outputs,
+        drillInfo.aggOutputs,
+      );
+
+      setOutputData(outputData);
+      uploadAttempt(
+        outputData,
+        currentUserId,
+        currentTeamId,
+        assignedTime,
+        id,
+        queryClient,
+      );
+      setToggleResult(true);
+    } else {
       setDisplayedShot(displayedShot + 1);
       setCurrentShot(currentShot + 1);
     }
@@ -600,18 +649,6 @@ export default function Input({ drillInfo, setToggleResult, setOutputData }) {
                 />
               </Appbar.Header>
 
-              <Banner
-                visible={invalidInputBannerVisible}
-                actions={[
-                  {
-                    label: "Dismiss",
-                    onPress: () => setInvalidInputBannerVisible(false),
-                  },
-                ]}
-              >
-                Error! Input fields must only be numbers!
-              </Banner>
-
               <KeyboardAwareScrollView>
                 {/* Shot Number / Total shots */}
                 <View style={styles.shotNumContainer}>
@@ -643,6 +680,7 @@ export default function Input({ drillInfo, setToggleResult, setOutputData }) {
                       icon={getIconByKey(item.id)}
                       prompt={item.prompt}
                       helperText={item.helperText}
+                      helperText={item.helperText}
                       distanceMeasure={item.distanceMeasure}
                       inputValue={inputValues[displayedShot]?.[item.id] || ""}
                       onInputChange={(newText) => {
@@ -704,7 +742,11 @@ export default function Input({ drillInfo, setToggleResult, setOutputData }) {
                     visible={leaveDialogVisible}
                     onDismiss={hideLeaveDialog}
                     style={{ backgroundColor: "white" }}
+                    style={{ backgroundColor: "white" }}
                   >
+                    <Dialog.Title style={{ fontWeight: "bold" }}>
+                      Alert
+                    </Dialog.Title>
                     <Dialog.Title style={{ fontWeight: "bold" }}>
                       Alert
                     </Dialog.Title>
@@ -718,6 +760,14 @@ export default function Input({ drillInfo, setToggleResult, setOutputData }) {
                       >
                         Cancel
                       </Button>
+                      <Button
+                        style={{ backgroundColor: "#F24E1E" }}
+                        labelStyle={{ color: "white" }}
+                        onPress={hideLeaveDialog}
+                        labelStyle={{ color: "#F24E1E" }}
+                      >
+                        Cancel
+                      </Button>
                       <Button
                         style={{ backgroundColor: "#F24E1E" }}
                         labelStyle={{ color: "white" }}
@@ -746,6 +796,20 @@ export default function Input({ drillInfo, setToggleResult, setOutputData }) {
                   onHide={hideInvalidDialog}
                 />
 
+                {/* Error Dialog: Empty Input*/}
+                <ErrorDialog
+                  content="All inputs must be filled."
+                  visible={emptyDialogVisible}
+                  onHide={hideEmptyDialog}
+                />
+
+                {/* Error Dialog: Invalid Input*/}
+                <ErrorDialog
+                  content="All inputs must be numbers."
+                  visible={invalidDialogVisible}
+                  onHide={hideInvalidDialog}
+                />
+
                 {/* Navigation */}
                 <View style={styles.navigationContainer}>
                   <Text