fix: fix handleClickSubmitButton() and its caller

exKAZUu-Research · Sep 26, 2024 · 85f20d8 · 85f20d8
1 parent 55e42dd
commit 85f20d8
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 37 deletions.
diff --git a/...p/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/BoardEditor.tsx b/...p/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/BoardEditor.tsx
@@ -57,7 +57,7 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
         updateTurtles(Object.values(focusTraceItem.vars ?? {}).filter(isTurtleTrace));
         if (!keepSelectedCell) setSelectedCell(undefined);
       },
-      [focusTraceItem, problem]
+      [focusTraceItem, updateBoard, updateTurtles]
     );
 
     useImperativeHandle(ref, () => ({
@@ -66,6 +66,7 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
 
     useEffect(() => {
       initialize(focusTraceItemIndex >= 1);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentTraceItemIndex, problem]);
 
     const updateTurtle = (currentTurtle: TurtleTrace, newTurtle: Partial<TurtleTrace>): void => {
@@ -300,16 +301,15 @@ function parseBoard(boardString: string): ColorChar[][] {
     .map((line) => [...line.trim()]) as ColorChar[][];
 }
 
-function useShortcutKeys(handleClickAnswerButton: () => Promise<void>): void {
+function useShortcutKeys(handleClickSubmitButton: () => Promise<void>): void {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent): void => {
       if (event.key === 'Enter') {
         event.preventDefault();
-        void handleClickAnswerButton();
+        void handleClickSubmitButton();
       }
     };
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [handleClickSubmitButton]);
 }
diff --git a/...pp/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx b/...pp/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx
@@ -1,6 +1,6 @@
 import type { ProblemSession } from '@prisma/client';
 import { useRouter } from 'next/navigation';
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
 import { MAX_CHALLENGE_COUNT } from '../../../../../../../../constants';
 import { backendTrpcReact } from '../../../../../../../../infrastructures/trpcBackend/client';
@@ -55,19 +55,24 @@ export const ProblemBody: React.FC<Props> = (props) => {
   const [alertMessage, setAlertMessage] = useState('');
   const [postAlertAction, setPostAlertAction] = useState<() => void>();
 
-  const openAlertDialog = (title: string, message: string, action?: () => void): void => {
-    setAlertTitle(title);
-    setAlertMessage(message);
-    setPostAlertAction(() => action);
-    onAlertOpen();
-  };
+  const openAlertDialog = useCallback(
+    (title: string, message: string, action?: () => void): void => {
+      setAlertTitle(title);
+      setAlertMessage(message);
+      setPostAlertAction(() => action);
+      onAlertOpen();
+    },
+    [onAlertOpen]
+  );
 
   const { refetch: fetchIncorrectSubmissionsCount } = backendTrpcReact.countIncorrectSubmissions.useQuery(
     { sessionId: props.problemSession.id },
     { enabled: false }
   );
 
-  const handleClickSubmitButton = async (): Promise<void> => {
+  const handleClickSubmitButton = useCallback(async (): Promise<void> => {
+    if (isAlertOpen) return;
+
     const isCorrect = turtleGraphicsRef.current?.isCorrect() || false;
 
     switch (problemType) {
@@ -126,7 +131,16 @@ export const ProblemBody: React.FC<Props> = (props) => {
         break;
       }
     }
-  };
+  }, [
+    currentTraceItemIndex,
+    fetchIncorrectSubmissionsCount,
+    isAlertOpen,
+    openAlertDialog,
+    previousTraceItemIndex,
+    problemType,
+    props,
+    router,
+  ]);
 
   return (
     <>

diff --git a/.../(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/pageOnClient.tsx b/.../(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/pageOnClient.tsx
@@ -2,7 +2,7 @@
 
 import type { ProblemSession } from '@prisma/client';
 import NextLink from 'next/link';
-import { useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useIdleTimer } from 'react-idle-timer';
 
 import {
@@ -43,29 +43,35 @@ export const ProblemPageOnClient: React.FC<Props> = (props) => {
   const updateProblemSessionMutation = backendTrpcReact.updateProblemSession.useMutation();
   const createProblemSubmissionMutation = backendTrpcReact.createProblemSubmission.useMutation();
 
-  const createSubmissionUpdatingProblemSession = async (isCorrect: boolean, isCompleted: boolean): Promise<void> => {
-    const newProblemSession = await updateProblemSessionMutation.mutateAsync({
-      id: problemSession.id,
-      incrementalElapsedMilliseconds: getIncrementalElapsedMilliseconds(lastActionTimeRef),
-      completedAt: isCompleted ? new Date() : undefined,
-    });
-    await createProblemSubmissionMutation.mutateAsync({
-      sessionId: problemSession.id,
-      problemType: problemSession.problemType,
-      traceItemIndex: problemSession.traceItemIndex,
-      elapsedMilliseconds: newProblemSession.elapsedMilliseconds,
-      isCorrect,
-    });
-  };
+  const createSubmissionUpdatingProblemSession = useCallback(
+    async (isCorrect: boolean, isCompleted: boolean): Promise<void> => {
+      const newProblemSession = await updateProblemSessionMutation.mutateAsync({
+        id: problemSession.id,
+        incrementalElapsedMilliseconds: getIncrementalElapsedMilliseconds(lastActionTimeRef),
+        completedAt: isCompleted ? new Date() : undefined,
+      });
+      await createProblemSubmissionMutation.mutateAsync({
+        sessionId: problemSession.id,
+        problemType: problemSession.problemType,
+        traceItemIndex: problemSession.traceItemIndex,
+        elapsedMilliseconds: newProblemSession.elapsedMilliseconds,
+        isCorrect,
+      });
+    },
+    [problemSession, updateProblemSessionMutation, createProblemSubmissionMutation, lastActionTimeRef]
+  );
 
-  const updateProblemSession = async (newProblemType: string, newTraceItemIndex: number): Promise<void> => {
-    const newProblemSession = await updateProblemSessionMutation.mutateAsync({
-      id: problemSession.id,
-      problemType: newProblemType,
-      traceItemIndex: newTraceItemIndex,
-    });
-    setProblemSession(newProblemSession);
-  };
+  const updateProblemSession = useCallback(
+    async (newProblemType: string, newTraceItemIndex: number): Promise<void> => {
+      const newProblemSession = await updateProblemSessionMutation.mutateAsync({
+        id: problemSession.id,
+        problemType: newProblemType,
+        traceItemIndex: newTraceItemIndex,
+      });
+      setProblemSession(newProblemSession);
+    },
+    [problemSession.id, updateProblemSessionMutation]
+  );
 
   return (
     <VStack align="stretch" spacing={4}>