Fix linting errors

Author: rickkoh

frontend/src/app/dashboard/_components/FindMatch/ConfirmationDialog.tsx

@@ -18,11 +18,10 @@ import { Ellipsis } from "lucide-react";
 import { UserProfile } from "@/types/User";
 import { getInitialsFromName } from "@/lib/utils";
 import { useCountdown } from "usehooks-ts";
-import { useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 interface ConfirmationDialogProps {
   user: UserProfile;
-
 }
 
 export default function ConfirmationDialog({ user }: ConfirmationDialogProps) {
@@ -33,36 +32,47 @@ export default function ConfirmationDialog({ user }: ConfirmationDialogProps) {
     handleDeclineMatch,
     handleAcceptMatch,
   } = useFindMatchContext();
-  
+
+  const [accepted, setAccepted] = useState(false);
+
   const [counter, { startCountdown, stopCountdown, resetCountdown }] =
     useCountdown({
       countStart: 10,
       intervalMs: 1000,
       isIncrement: false,
     });
 
+  const handleAcceptClick = useCallback(() => {
+    stopCountdown();
+    resetCountdown();
+    handleAcceptMatch();
+    setAccepted(true);
+  }, [stopCountdown, resetCountdown, handleAcceptMatch]);
+
   // onComplete logic here
   useEffect(() => {
     if (counter === 0) {
       handleDeclineMatch();
     }
-  }, [counter]);
+  }, [counter, handleDeclineMatch]);
 
   useEffect(() => {
     if (matchFound) {
       startCountdown();
+      setAccepted(false);
     } else {
       stopCountdown();
       resetCountdown();
     }
-  }, [matchFound]);
+  }, [matchFound, startCountdown, stopCountdown, resetCountdown]);
 
   return (
     <AlertDialog open={matchFound}>
       <AlertDialogContent className="flex flex-col gap-12">
         <AlertDialogHeader>
           <AlertDialogTitle>
-            You have found a match ({counter}s)
+            You have{" "}
+            {accepted ? "accepted the match" : `found a match (${counter}s)`}
           </AlertDialogTitle>
           <AlertDialogDescription>
             Once you have accepted the match, you will be redirected to another
@@ -90,7 +100,7 @@ export default function ConfirmationDialog({ user }: ConfirmationDialogProps) {
           </AlertDialogCancel>
           <AlertDialogAction
             disabled={isAwaitingConfirmation}
-            onClick={handleAcceptMatch}
+            onClick={handleAcceptClick}
           >
             {isAwaitingConfirmation
               ? "Waiting for other user to accept"

frontend/src/app/dashboard/_components/FindMatch/ContinueDialog.tsx

@@ -35,19 +35,19 @@ export default function ContinueDialog() {
     handleCancelMatch();
     setShowContinueDialog(false);
     stopCountdown();
-  }, []);
+  }, [handleCancelMatch, setShowContinueDialog, stopCountdown]);
 
   const handleContinue = useCallback(() => {
     handleFindMatch();
     setShowContinueDialog(false);
-  }, []);
+  }, [handleFindMatch, setShowContinueDialog]);
 
   // onComplete logic here
   useEffect(() => {
     if (counter === 0) {
       handleCancel();
     }
-  }, [counter]);
+  }, [counter, handleCancel]);
 
   useEffect(() => {
     if (showContinueDialog) {
@@ -56,7 +56,7 @@ export default function ContinueDialog() {
       stopCountdown();
       resetCountdown();
     }
-  }, [showContinueDialog]);
+  }, [showContinueDialog, startCountdown, stopCountdown, resetCountdown]);
 
   return (
     <AlertDialog open={showContinueDialog}>

frontend/src/contexts/FindMatchContext.tsx

@@ -54,8 +54,10 @@ export function FindMatchProvider({
   children,
 }: PropsWithChildren<FindMatchProviderProps>) {
   const { toast } = useToast();
-  
-  const [difficulty, setDifficulty] = useState<Difficulty>(DifficultyEnum.enum.Medium);
+
+  const [difficulty, setDifficulty] = useState<Difficulty>(
+    DifficultyEnum.enum.Medium
+  );
 
   const [topics, setTopics] = useState<Category[]>(["Array"]);
 
@@ -250,7 +252,7 @@ export function FindMatchProvider({
         clearTimeout(timer);
       };
     }
-  }, [findingMatch]);
+  }, [findingMatch, handleCancelMatch]);
 
   // Reset state
   function reset() {