From 732d47b8230e17078c058bec29eadda54b413909 Mon Sep 17 00:00:00 2001
From: jujulcrane <jujulcrane@gmail.com>
Date: Sat, 14 Dec 2024 10:04:11 -0500
Subject: [PATCH 1/7] Created a "You need to save!" reminder on the Candidate
 Decider

---
 .../Candidate-Decider/CandidateDecider.tsx    | 78 +++++++++++++++++--
 1 file changed, 70 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Candidate-Decider/CandidateDecider.tsx b/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
index 42d0217e3..1a09bb310 100644
--- a/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
+++ b/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Button, Dropdown, Checkbox } from 'semantic-ui-react';
+import { Button, Dropdown, Checkbox, Modal } from 'semantic-ui-react';
 import CandidateDeciderAPI from '../../API/CandidateDeciderAPI';
 import ResponsesPanel from './ResponsesPanel';
 import LocalProgressPanel from './LocalProgressPanel';
@@ -17,6 +17,10 @@ type CandidateDeciderProps = {
 };
 
 const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
+  const [isSaved, setIsSaved] = useState(true);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isBypassingModal, setIsBypassingModal] = useState(false);
+  const [navigationDirection, setNavigationDirection] = useState<'next' | 'previous' | null>(null);
   const [currentCandidate, setCurrentCandidate] = useState<number>(0);
   const [showOtherVotes, setShowOtherVotes] = useState<boolean>(false);
 
@@ -68,7 +72,13 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentCandidate, instance.candidates, reviews]);
 
-  const next = () => {
+  const next = (force = false) => {
+    if (!force && !isSaved && !isBypassingModal) {
+      setNavigationDirection('next');
+      setIsOpen(true);
+      return;
+    }
+    setIsBypassingModal(false);
     if (currentCandidate === instance.candidates.length - 1) return;
     setCurrentCandidate((prev) => {
       const nextCandidate = prev + 1;
@@ -77,7 +87,13 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
     });
   };
 
-  const previous = () => {
+  const previous = (force = false) => {
+    if (!force && !isBypassingModal) {
+      setNavigationDirection('previous');
+      setIsOpen(true);
+      return;
+    }
+    setIsBypassingModal(false);
     if (currentCandidate === 0) return;
     setCurrentCandidate((prev) => {
       const prevCandidate = prev - 1;
@@ -86,6 +102,15 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
     });
   };
 
+  const confirmNavigation = (direction: 'next' | 'previous') => {
+    setIsOpen(false);
+    setIsBypassingModal(true);
+    setTimeout(() => {
+      if (direction === 'next') next(true);
+      else previous(true);
+    }, 0);
+  }
+
   const handleRatingAndCommentChange = (id: number, rating: Rating, comment: string) => {
     CandidateDeciderAPI.updateRatingAndComment(instance.uuid, id, rating, comment);
     if (userInfo) {
@@ -106,13 +131,52 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
           uuid: ''
         }
       ]);
+      setIsSaved(true);
     }
   };
 
+  useEffect(() => {
+    setIsSaved(
+      currentComment === defaultCurrentComment &&
+      currentRating === defaultCurrentRating
+    );
+  }, [currentComment, currentRating, defaultCurrentComment, defaultCurrentRating]);
+
   return instance.candidates.length === 0 ? (
     <div></div>
   ) : (
+
     <div className={styles.candidateDeciderContainer}>
+      <Modal
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        size="small"
+      >
+        <Modal.Header>Don't Forget To Save!</Modal.Header>
+        <Modal.Content>
+          <p>You have unsaved changes. Do you want to save them before navigating?</p>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button onClick={() => setIsOpen(false)}>Clancel</Button>
+          <Button
+            onClick={() => {
+              handleRatingAndCommentChange(
+                currentCandidate,
+                currentRating ?? 0,
+                currentComment ?? ''
+              );
+              confirmNavigation(navigationDirection!);
+            }}>
+            Save and {navigationDirection === 'next' ? 'Proceed' : 'Go Back'}
+          </Button>
+          <Button
+            primary
+            onClick={() => confirmNavigation(navigationDirection!)}
+          >
+            Discard and {navigationDirection === 'next' ? 'Proceed' : 'Go Back'}
+          </Button>
+        </Modal.Actions>
+      </Modal>
       <div className={styles.applicationContainer}>
         <div className={styles.searchBar}>
           <SearchBar
@@ -142,23 +206,21 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
           />
           <span className={styles.ofNum}>of {instance.candidates.length}</span>
           <Button.Group className={styles.previousNextButtonContainer}>
-            <Button basic color="blue" disabled={currentCandidate === 0} onClick={previous}>
+            <Button basic color="blue" disabled={currentCandidate === 0} onClick={() => previous(isSaved)}>
               PREVIOUS
             </Button>
             <Button
               basic
               color="blue"
               disabled={currentCandidate === instance.candidates.length - 1}
-              onClick={next}
+              onClick={() => next(isSaved)}
             >
               NEXT
             </Button>
           </Button.Group>
           <Button
             className="ui blue button"
-            disabled={
-              currentComment === defaultCurrentComment && currentRating === defaultCurrentRating
-            }
+            disabled={isSaved}
             onClick={() => {
               handleRatingAndCommentChange(
                 currentCandidate,

From 8ff28ffb17a4d3cb4add8e20b9c5cdfca92d4b30 Mon Sep 17 00:00:00 2001
From: jujulcrane <jujulcrane@gmail.com>
Date: Sat, 14 Dec 2024 10:10:58 -0500
Subject: [PATCH 2/7] updated format and lint

---
 .../Candidate-Decider/CandidateDecider.tsx    | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/Candidate-Decider/CandidateDecider.tsx b/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
index 1a09bb310..8b29983be 100644
--- a/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
+++ b/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
@@ -109,7 +109,7 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
       if (direction === 'next') next(true);
       else previous(true);
     }, 0);
-  }
+  };
 
   const handleRatingAndCommentChange = (id: number, rating: Rating, comment: string) => {
     CandidateDeciderAPI.updateRatingAndComment(instance.uuid, id, rating, comment);
@@ -136,22 +136,14 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
   };
 
   useEffect(() => {
-    setIsSaved(
-      currentComment === defaultCurrentComment &&
-      currentRating === defaultCurrentRating
-    );
+    setIsSaved(currentComment === defaultCurrentComment && currentRating === defaultCurrentRating);
   }, [currentComment, currentRating, defaultCurrentComment, defaultCurrentRating]);
 
   return instance.candidates.length === 0 ? (
     <div></div>
   ) : (
-
     <div className={styles.candidateDeciderContainer}>
-      <Modal
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-        size="small"
-      >
+      <Modal open={isOpen} onClose={() => setIsOpen(false)} size="small">
         <Modal.Header>Don't Forget To Save!</Modal.Header>
         <Modal.Content>
           <p>You have unsaved changes. Do you want to save them before navigating?</p>
@@ -166,13 +158,11 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
                 currentComment ?? ''
               );
               confirmNavigation(navigationDirection!);
-            }}>
+            }}
+          >
             Save and {navigationDirection === 'next' ? 'Proceed' : 'Go Back'}
           </Button>
-          <Button
-            primary
-            onClick={() => confirmNavigation(navigationDirection!)}
-          >
+          <Button primary onClick={() => confirmNavigation(navigationDirection!)}>
             Discard and {navigationDirection === 'next' ? 'Proceed' : 'Go Back'}
           </Button>
         </Modal.Actions>
@@ -206,7 +196,12 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
           />
           <span className={styles.ofNum}>of {instance.candidates.length}</span>
           <Button.Group className={styles.previousNextButtonContainer}>
-            <Button basic color="blue" disabled={currentCandidate === 0} onClick={() => previous(isSaved)}>
+            <Button
+              basic
+              color="blue"
+              disabled={currentCandidate === 0}
+              onClick={() => previous(isSaved)}
+            >
               PREVIOUS
             </Button>
             <Button

From 09278ea315aedfdaf5be900a3cf511d8263b98f8 Mon Sep 17 00:00:00 2001
From: jujulcrane <jujulcrane@gmail.com>
Date: Sat, 14 Dec 2024 14:18:47 -0500
Subject: [PATCH 3/7] Added navigation for the search bar and id dropdown and
 removed isSaved state

---
 .../Candidate-Decider/CandidateDecider.tsx    | 47 ++++++++++++-------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Candidate-Decider/CandidateDecider.tsx b/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
index 8b29983be..293c67e79 100644
--- a/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
+++ b/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
@@ -17,10 +17,10 @@ type CandidateDeciderProps = {
 };
 
 const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
-  const [isSaved, setIsSaved] = useState(true);
   const [isOpen, setIsOpen] = useState(false);
   const [isBypassingModal, setIsBypassingModal] = useState(false);
-  const [navigationDirection, setNavigationDirection] = useState<'next' | 'previous' | null>(null);
+  const [navigationDirection, setNavigationDirection] = useState<'next' | 'previous' | 'other' | null>(null);
+  const [navigationDirectionCandidate, setNavigationDirectionCandidate] = useState<number | null>(null);
   const [currentCandidate, setCurrentCandidate] = useState<number>(0);
   const [showOtherVotes, setShowOtherVotes] = useState<boolean>(false);
 
@@ -50,6 +50,8 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
   const [defaultCurrentRating, setDefaultCurrentRating] = useState<Rating>();
   const [defaultCurrentComment, setDefaultCurrentComment] = useState<string>();
 
+  const isSaved = currentComment === defaultCurrentComment && currentRating === defaultCurrentRating;
+
   const populateReviewForCandidate = (candidate: number) => {
     const rating = getRating(candidate);
     const comment = getComment(candidate);
@@ -102,12 +104,18 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
     });
   };
 
-  const confirmNavigation = (direction: 'next' | 'previous') => {
+  const confirmNavigation = (direction: 'next' | 'previous' | 'other') => {
     setIsOpen(false);
     setIsBypassingModal(true);
     setTimeout(() => {
       if (direction === 'next') next(true);
-      else previous(true);
+      else if (direction === 'previous') previous(true);
+      else if (direction === 'other') {
+        if (navigationDirectionCandidate) {
+          setCurrentCandidate(navigationDirectionCandidate);
+          populateReviewForCandidate(navigationDirectionCandidate);
+        }
+      }
     }, 0);
   };
 
@@ -131,14 +139,9 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
           uuid: ''
         }
       ]);
-      setIsSaved(true);
     }
   };
 
-  useEffect(() => {
-    setIsSaved(currentComment === defaultCurrentComment && currentRating === defaultCurrentRating);
-  }, [currentComment, currentRating, defaultCurrentComment, defaultCurrentRating]);
-
   return instance.candidates.length === 0 ? (
     <div></div>
   ) : (
@@ -149,7 +152,7 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
           <p>You have unsaved changes. Do you want to save them before navigating?</p>
         </Modal.Content>
         <Modal.Actions>
-          <Button onClick={() => setIsOpen(false)}>Clancel</Button>
+          <Button onClick={() => setIsOpen(false)}>Cancel</Button>
           <Button
             onClick={() => {
               handleRatingAndCommentChange(
@@ -160,10 +163,10 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
               confirmNavigation(navigationDirection!);
             }}
           >
-            Save and {navigationDirection === 'next' ? 'Proceed' : 'Go Back'}
+            Save and {navigationDirection === 'previous' ? 'Go Back' : 'Proceed'}
           </Button>
           <Button primary onClick={() => confirmNavigation(navigationDirection!)}>
-            Discard and {navigationDirection === 'next' ? 'Proceed' : 'Go Back'}
+            Discard and {navigationDirection === 'previous' ? 'Go Back' : 'Proceed'}
           </Button>
         </Modal.Actions>
       </Modal>
@@ -172,8 +175,14 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
           <SearchBar
             instance={instance}
             setCurrentCandidate={(candidate) => {
-              setCurrentCandidate(candidate);
-              populateReviewForCandidate(candidate);
+              if (!isSaved) {
+                setNavigationDirection('other');
+                setNavigationDirectionCandidate(candidate);
+                setIsOpen(true);
+              } else {
+                setCurrentCandidate(candidate);
+                populateReviewForCandidate(candidate);
+              }
             }}
             currentCandidate={currentCandidate}
           />
@@ -190,8 +199,14 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
               text: candidate.id
             }))}
             onChange={(_, data) => {
-              setCurrentCandidate(data.value as number);
-              populateReviewForCandidate(data.value as number);
+              if (!isSaved) {
+                setNavigationDirection('other');
+                setNavigationDirectionCandidate(data.value as number);
+                setIsOpen(true);
+              } else {
+                setCurrentCandidate(data.value as number);
+                populateReviewForCandidate(data.value as number);
+              }
             }}
           />
           <span className={styles.ofNum}>of {instance.candidates.length}</span>

From 3d4f847641e0b8b379aa24463da27419a7d6a00e Mon Sep 17 00:00:00 2001
From: jujulcrane <jujulcrane@gmail.com>
Date: Sat, 14 Dec 2024 14:19:23 -0500
Subject: [PATCH 4/7] fixed format and lint

---
 .../components/Candidate-Decider/CandidateDecider.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Candidate-Decider/CandidateDecider.tsx b/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
index 293c67e79..a25359fcf 100644
--- a/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
+++ b/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
@@ -19,8 +19,12 @@ type CandidateDeciderProps = {
 const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isBypassingModal, setIsBypassingModal] = useState(false);
-  const [navigationDirection, setNavigationDirection] = useState<'next' | 'previous' | 'other' | null>(null);
-  const [navigationDirectionCandidate, setNavigationDirectionCandidate] = useState<number | null>(null);
+  const [navigationDirection, setNavigationDirection] = useState<
+    'next' | 'previous' | 'other' | null
+  >(null);
+  const [navigationDirectionCandidate, setNavigationDirectionCandidate] = useState<number | null>(
+    null
+  );
   const [currentCandidate, setCurrentCandidate] = useState<number>(0);
   const [showOtherVotes, setShowOtherVotes] = useState<boolean>(false);
 
@@ -50,7 +54,8 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
   const [defaultCurrentRating, setDefaultCurrentRating] = useState<Rating>();
   const [defaultCurrentComment, setDefaultCurrentComment] = useState<string>();
 
-  const isSaved = currentComment === defaultCurrentComment && currentRating === defaultCurrentRating;
+  const isSaved =
+    currentComment === defaultCurrentComment && currentRating === defaultCurrentRating;
 
   const populateReviewForCandidate = (candidate: number) => {
     const rating = getRating(candidate);

From 1129501d9646e8253cbae2e3465c59cbf85bf3e2 Mon Sep 17 00:00:00 2001
From: jujulcrane <jujulcrane@gmail.com>
Date: Wed, 18 Dec 2024 14:41:50 -0500
Subject: [PATCH 5/7] Update CandidateDecider.tsx

---
 .../Candidate-Decider/CandidateDecider.tsx    | 49 +++++++++----------
 1 file changed, 22 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Candidate-Decider/CandidateDecider.tsx b/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
index a25359fcf..08153f37f 100644
--- a/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
+++ b/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
@@ -112,16 +112,14 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
   const confirmNavigation = (direction: 'next' | 'previous' | 'other') => {
     setIsOpen(false);
     setIsBypassingModal(true);
-    setTimeout(() => {
-      if (direction === 'next') next(true);
-      else if (direction === 'previous') previous(true);
-      else if (direction === 'other') {
-        if (navigationDirectionCandidate) {
-          setCurrentCandidate(navigationDirectionCandidate);
-          populateReviewForCandidate(navigationDirectionCandidate);
-        }
+    if (direction === 'next') next(true);
+    else if (direction === 'previous') previous(true);
+    else if (direction === 'other') {
+      if (navigationDirectionCandidate) {
+        setCurrentCandidate(navigationDirectionCandidate);
+        populateReviewForCandidate(navigationDirectionCandidate);
       }
-    }, 0);
+    }
   };
 
   const handleRatingAndCommentChange = (id: number, rating: Rating, comment: string) => {
@@ -147,6 +145,17 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
     }
   };
 
+  const handleCandiateChange = (candidate: number) => {
+    if (!isSaved) {
+      setNavigationDirection('other');
+      setNavigationDirectionCandidate(candidate);
+      setIsOpen(true);
+    } else {
+      setCurrentCandidate(candidate);
+      populateReviewForCandidate(candidate);
+    }
+  };
+
   return instance.candidates.length === 0 ? (
     <div></div>
   ) : (
@@ -168,10 +177,10 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
               confirmNavigation(navigationDirection!);
             }}
           >
-            Save and {navigationDirection === 'previous' ? 'Go Back' : 'Proceed'}
+            Save
           </Button>
           <Button primary onClick={() => confirmNavigation(navigationDirection!)}>
-            Discard and {navigationDirection === 'previous' ? 'Go Back' : 'Proceed'}
+            Discard
           </Button>
         </Modal.Actions>
       </Modal>
@@ -180,14 +189,7 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
           <SearchBar
             instance={instance}
             setCurrentCandidate={(candidate) => {
-              if (!isSaved) {
-                setNavigationDirection('other');
-                setNavigationDirectionCandidate(candidate);
-                setIsOpen(true);
-              } else {
-                setCurrentCandidate(candidate);
-                populateReviewForCandidate(candidate);
-              }
+              handleCandiateChange(candidate);
             }}
             currentCandidate={currentCandidate}
           />
@@ -204,14 +206,7 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
               text: candidate.id
             }))}
             onChange={(_, data) => {
-              if (!isSaved) {
-                setNavigationDirection('other');
-                setNavigationDirectionCandidate(data.value as number);
-                setIsOpen(true);
-              } else {
-                setCurrentCandidate(data.value as number);
-                populateReviewForCandidate(data.value as number);
-              }
+              handleCandiateChange(data.value as number);
             }}
           />
           <span className={styles.ofNum}>of {instance.candidates.length}</span>

From d4c18e738b0760b4d827a38bc4ac2b847b00beb8 Mon Sep 17 00:00:00 2001
From: jujulcrane <jujulcrane@gmail.com>
Date: Fri, 20 Dec 2024 16:47:06 -0500
Subject: [PATCH 6/7] Update CandidateDecider.tsx

---
 .../Candidate-Decider/CandidateDecider.tsx    | 96 +++++++------------
 1 file changed, 35 insertions(+), 61 deletions(-)

diff --git a/frontend/src/components/Candidate-Decider/CandidateDecider.tsx b/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
index 08153f37f..46c2ae5f1 100644
--- a/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
+++ b/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
@@ -17,12 +17,8 @@ type CandidateDeciderProps = {
 };
 
 const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [isBypassingModal, setIsBypassingModal] = useState(false);
-  const [navigationDirection, setNavigationDirection] = useState<
-    'next' | 'previous' | 'other' | null
-  >(null);
-  const [navigationDirectionCandidate, setNavigationDirectionCandidate] = useState<number | null>(
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [nextCandidate, setNextCandidate] = useState<number | null>(
     null
   );
   const [currentCandidate, setCurrentCandidate] = useState<number>(0);
@@ -79,49 +75,6 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentCandidate, instance.candidates, reviews]);
 
-  const next = (force = false) => {
-    if (!force && !isSaved && !isBypassingModal) {
-      setNavigationDirection('next');
-      setIsOpen(true);
-      return;
-    }
-    setIsBypassingModal(false);
-    if (currentCandidate === instance.candidates.length - 1) return;
-    setCurrentCandidate((prev) => {
-      const nextCandidate = prev + 1;
-      populateReviewForCandidate(nextCandidate);
-      return nextCandidate;
-    });
-  };
-
-  const previous = (force = false) => {
-    if (!force && !isBypassingModal) {
-      setNavigationDirection('previous');
-      setIsOpen(true);
-      return;
-    }
-    setIsBypassingModal(false);
-    if (currentCandidate === 0) return;
-    setCurrentCandidate((prev) => {
-      const prevCandidate = prev - 1;
-      populateReviewForCandidate(prevCandidate);
-      return prevCandidate;
-    });
-  };
-
-  const confirmNavigation = (direction: 'next' | 'previous' | 'other') => {
-    setIsOpen(false);
-    setIsBypassingModal(true);
-    if (direction === 'next') next(true);
-    else if (direction === 'previous') previous(true);
-    else if (direction === 'other') {
-      if (navigationDirectionCandidate) {
-        setCurrentCandidate(navigationDirectionCandidate);
-        populateReviewForCandidate(navigationDirectionCandidate);
-      }
-    }
-  };
-
   const handleRatingAndCommentChange = (id: number, rating: Rating, comment: string) => {
     CandidateDeciderAPI.updateRatingAndComment(instance.uuid, id, rating, comment);
     if (userInfo) {
@@ -145,11 +98,9 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
     }
   };
 
-  const handleCandiateChange = (candidate: number) => {
+  const handleCandidateChange = (candidate: number) => {
     if (!isSaved) {
-      setNavigationDirection('other');
-      setNavigationDirectionCandidate(candidate);
-      setIsOpen(true);
+      setIsModalOpen(true);
     } else {
       setCurrentCandidate(candidate);
       populateReviewForCandidate(candidate);
@@ -160,13 +111,13 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
     <div></div>
   ) : (
     <div className={styles.candidateDeciderContainer}>
-      <Modal open={isOpen} onClose={() => setIsOpen(false)} size="small">
+      <Modal open={isModalOpen} onClose={() => setIsModalOpen(false)} size="small">
         <Modal.Header>Don't Forget To Save!</Modal.Header>
         <Modal.Content>
           <p>You have unsaved changes. Do you want to save them before navigating?</p>
         </Modal.Content>
         <Modal.Actions>
-          <Button onClick={() => setIsOpen(false)}>Cancel</Button>
+          <Button onClick={() => setIsModalOpen(false)}>Cancel</Button>
           <Button
             onClick={() => {
               handleRatingAndCommentChange(
@@ -174,12 +125,27 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
                 currentRating ?? 0,
                 currentComment ?? ''
               );
-              confirmNavigation(navigationDirection!);
+              if (nextCandidate !== null) {
+                setCurrentCandidate(nextCandidate);
+                populateReviewForCandidate(nextCandidate);
+                setNextCandidate(null);
+              }
+              setIsModalOpen(false);
             }}
           >
             Save
           </Button>
-          <Button primary onClick={() => confirmNavigation(navigationDirection!)}>
+          <Button
+            primary
+            onClick={() => {
+              if (nextCandidate !== null) {
+                setCurrentCandidate(nextCandidate);
+                populateReviewForCandidate(nextCandidate);
+                setNextCandidate(null);
+              }
+              setIsModalOpen(false);
+            }}
+          >
             Discard
           </Button>
         </Modal.Actions>
@@ -189,7 +155,7 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
           <SearchBar
             instance={instance}
             setCurrentCandidate={(candidate) => {
-              handleCandiateChange(candidate);
+              handleCandidateChange(candidate);
             }}
             currentCandidate={currentCandidate}
           />
@@ -206,7 +172,7 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
               text: candidate.id
             }))}
             onChange={(_, data) => {
-              handleCandiateChange(data.value as number);
+              handleCandidateChange(data.value as number);
             }}
           />
           <span className={styles.ofNum}>of {instance.candidates.length}</span>
@@ -215,7 +181,11 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
               basic
               color="blue"
               disabled={currentCandidate === 0}
-              onClick={() => previous(isSaved)}
+              onClick={() => {
+                if (currentCandidate === 0) return;
+                setNextCandidate(currentCandidate - 1);
+                handleCandidateChange(currentCandidate - 1);
+              }}
             >
               PREVIOUS
             </Button>
@@ -223,7 +193,11 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
               basic
               color="blue"
               disabled={currentCandidate === instance.candidates.length - 1}
-              onClick={() => next(isSaved)}
+              onClick={() => {
+                if (currentCandidate === instance.candidates.length - 1) return;
+                setNextCandidate(currentCandidate + 1);
+                handleCandidateChange(currentCandidate + 1);
+              }}
             >
               NEXT
             </Button>

From ee07bdd096c12c12290eba02f242153115ed9226 Mon Sep 17 00:00:00 2001
From: jujulcrane <jujulcrane@gmail.com>
Date: Wed, 25 Dec 2024 15:54:59 +0100
Subject: [PATCH 7/7] reducing code duplication

---
 .../Candidate-Decider/CandidateDecider.tsx    | 29 +++++++++----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Candidate-Decider/CandidateDecider.tsx b/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
index 46c2ae5f1..1f08a8bcf 100644
--- a/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
+++ b/frontend/src/components/Candidate-Decider/CandidateDecider.tsx
@@ -18,9 +18,7 @@ type CandidateDeciderProps = {
 
 const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [nextCandidate, setNextCandidate] = useState<number | null>(
-    null
-  );
+  const [nextCandidate, setNextCandidate] = useState<number | null>(null);
   const [currentCandidate, setCurrentCandidate] = useState<number>(0);
   const [showOtherVotes, setShowOtherVotes] = useState<boolean>(false);
 
@@ -99,7 +97,11 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
   };
 
   const handleCandidateChange = (candidate: number) => {
+    if (candidate < 0 || candidate >= instance.candidates.length) {
+      return;
+    }
     if (!isSaved) {
+      setNextCandidate(candidate);
       setIsModalOpen(true);
     } else {
       setCurrentCandidate(candidate);
@@ -107,6 +109,13 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
     }
   };
 
+  const navigateToNextCandidate = (candidate: number) => {
+    setCurrentCandidate(candidate);
+    populateReviewForCandidate(candidate);
+    setNextCandidate(null);
+    setIsModalOpen(false);
+  };
+
   return instance.candidates.length === 0 ? (
     <div></div>
   ) : (
@@ -126,11 +135,8 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
                 currentComment ?? ''
               );
               if (nextCandidate !== null) {
-                setCurrentCandidate(nextCandidate);
-                populateReviewForCandidate(nextCandidate);
-                setNextCandidate(null);
+                navigateToNextCandidate(nextCandidate);
               }
-              setIsModalOpen(false);
             }}
           >
             Save
@@ -139,11 +145,8 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
             primary
             onClick={() => {
               if (nextCandidate !== null) {
-                setCurrentCandidate(nextCandidate);
-                populateReviewForCandidate(nextCandidate);
-                setNextCandidate(null);
+                navigateToNextCandidate(nextCandidate);
               }
-              setIsModalOpen(false);
             }}
           >
             Discard
@@ -182,8 +185,6 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
               color="blue"
               disabled={currentCandidate === 0}
               onClick={() => {
-                if (currentCandidate === 0) return;
-                setNextCandidate(currentCandidate - 1);
                 handleCandidateChange(currentCandidate - 1);
               }}
             >
@@ -194,8 +195,6 @@ const CandidateDecider: React.FC<CandidateDeciderProps> = ({ uuid }) => {
               color="blue"
               disabled={currentCandidate === instance.candidates.length - 1}
               onClick={() => {
-                if (currentCandidate === instance.candidates.length - 1) return;
-                setNextCandidate(currentCandidate + 1);
                 handleCandidateChange(currentCandidate + 1);
               }}
             >