Fixed bug

Author: pkolt

src/pages/WordToTranslation/FinalReport/index.tsx

@@ -6,11 +6,11 @@ import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import { useDialogs } from '@toolpad/core';
 import WordFormDialog from '@/components/WordFormDialog';
 import { Fragment } from 'react/jsx-runtime';
-import { Question } from '@/services/words/types';
+import { QuizItem } from '@/services/words/types';
 import { renderWordTypes } from '@/services/words/utils';
 
 interface Props {
-  data: Question[];
+  data: QuizItem[];
 }
 
 export const FinalReport = ({ data }: Props) => {

src/pages/WordToTranslation/Quiz/Answers/index.tsx

@@ -1,18 +1,18 @@
 import { Button, Stack } from '@mui/material';
-import { Word, Question } from '@/services/words/types';
+import { Word, QuizItem } from '@/services/words/types';
 
 interface Props {
-  data: Question;
+  item: QuizItem;
   onClickAnswer: (word: Word) => void;
 }
 
-export const Answers = ({ data, onClickAnswer }: Props) => {
+export const Answers = ({ item, onClickAnswer }: Props) => {
   return (
     <Stack spacing={2}>
-      {data.answers.map((it, index) => {
-        const isAnswered: boolean = !!data.userAnswer;
-        const isSelected: boolean = data.userAnswer?.id === it.id;
-        const isSuccess: boolean = it.id === data.question.id;
+      {item.answers.map((it, index) => {
+        const isAnswered: boolean = !!item.userAnswer;
+        const isSelected: boolean = item.userAnswer?.id === it.id;
+        const isSuccess: boolean = it.id === item.question.id;
         return (
           <Button
             key={it.id}

src/pages/WordToTranslation/Quiz/index.tsx

@@ -1,17 +1,17 @@
 import { Button, FormControlLabel, Grid2 as Grid, Switch, Typography } from '@mui/material';
 import { Question } from './Question';
 import { Answers } from './Answers';
-import { Word, Question as QuestionType } from '@/services/words/types';
+import { Word, QuizItem } from '@/services/words/types';
 
 interface Props {
-  question: QuestionType;
+  item: QuizItem;
   onClickAnswer: (answer: Word) => void;
   onGoToNextQuestion: () => void;
   autoSpeak: boolean;
   onChangeAutoSpeak: (value: boolean) => void;
 }
 
-export const Quiz = ({ question, onClickAnswer, onGoToNextQuestion, autoSpeak, onChangeAutoSpeak }: Props) => {
+export const Quiz = ({ item, onClickAnswer, onGoToNextQuestion, autoSpeak, onChangeAutoSpeak }: Props) => {
   return (
     <Grid container rowSpacing={4} columnSpacing={8}>
       <Grid size={12} textAlign="right">
@@ -23,13 +23,13 @@ export const Quiz = ({ question, onClickAnswer, onGoToNextQuestion, autoSpeak, o
         />
       </Grid>
       <Grid size={6} sx={{ display: 'flex' }}>
-        <Question data={question.question} autoSpeak={autoSpeak} />
+        <Question data={item.question} autoSpeak={autoSpeak} />
       </Grid>
       <Grid size={6}>
-        <Answers data={question} onClickAnswer={onClickAnswer} />
+        <Answers item={item} onClickAnswer={onClickAnswer} />
       </Grid>
       <Grid offset={6} size={6}>
-        {question.userAnswer && (
+        {item.userAnswer && (
           <Button variant="outlined" onClick={onGoToNextQuestion} size="large">
             Дальше
           </Button>

src/pages/WordToTranslation/hooks.ts

@@ -1,8 +1,14 @@
 import { useHotkeys, HotkeyCallback } from 'react-hotkeys-hook';
 import { useGetWordList } from '@/services/words/hooks';
-import { Word, Question } from '@/services/words/types';
-import { filterWordsByTagIds, filterWordsByTypes, makeQuestions, renderWordTypes } from '@/services/words/utils';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Word, QuizItem } from '@/services/words/types';
+import {
+  filterWordsByTagIds,
+  filterWordsByTypes,
+  makeQuizItems,
+  renderWordTypes,
+  updateQuizItems,
+} from '@/services/words/utils';
+import { useCallback, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { TrainerRouteState } from '../Trainers/types';
 import {
@@ -13,23 +19,23 @@ import {
 import { useGetWordProgressList } from '@/services/wordProgress/hooks';
 import { useGetTagList } from '@/services/tags/hooks';
 import { renderTags } from '@/services/tags/utils';
+import { useEffectOnce } from '@/hooks/useOnceEffect';
 
 export const useWordToTranslation = () => {
   const { data: tagList, isLoading: isLoadingTags } = useGetTagList();
   const { data: wordList, isLoading: isLoadingWordList } = useGetWordList();
   const { data: wordProgressList, isLoading: isLoadingWordProgressList } = useGetWordProgressList();
   const isLoading = isLoadingWordList || isLoadingWordProgressList || isLoadingTags;
 
-  const [questions, setQuestions] = useState<Question[]>([]);
+  const [items, setItems] = useState<QuizItem[]>([]);
   const [curIndex, setCurIndex] = useState(0);
   const [isFinished, setIsFinished] = useState(false);
   const [autoSpeak, setAutoSpeak] = useState(false);
-  const refOnlyOnce = useRef(false);
 
   const stepNumber = curIndex + 1;
-  const stepCount = questions.length;
-  const question = questions.length > 0 ? questions[curIndex] : null;
-  const isUserAnswered = !!question?.userAnswer;
+  const stepCount = items.length;
+  const curItem = items.length > 0 ? items[curIndex] : null;
+  const isUserAnswered = !!curItem?.userAnswer;
 
   const routeState = (useLocation().state ?? {}) as TrainerRouteState;
 
@@ -58,53 +64,60 @@ export const useWordToTranslation = () => {
   const applyUserAnswer = useCallback(
     (word: Word) => {
       if (!isUserAnswered) {
-        setQuestions((state) =>
+        setItems((state) =>
           state.map((it) => {
-            return it === question ? { ...it, userAnswer: word } : it;
+            return it === curItem ? { ...it, userAnswer: word } : it;
           }),
         );
       }
     },
-    [question, isUserAnswered],
+    [curItem, isUserAnswered],
   );
 
   const applyUserAnswerByKeyNumber: HotkeyCallback = useCallback(
     (event) => {
       const keyNumber = Number(event.key);
-      const answer = question?.answers[keyNumber - 1];
+      const answer = curItem?.answers[keyNumber - 1];
       if (answer) {
         applyUserAnswer(answer);
       }
     },
-    [applyUserAnswer, question?.answers],
+    [applyUserAnswer, curItem?.answers],
   );
 
   const goToNextQuestion = useCallback(() => {
     if (isUserAnswered) {
-      if (curIndex < questions.length - 1) {
+      if (curIndex < items.length - 1) {
         setCurIndex((state) => state + 1);
       } else {
         setIsFinished(true);
-        saveWordProgressList(questions);
+        saveWordProgressList(items);
       }
     }
-  }, [curIndex, isUserAnswered, questions]);
+  }, [curIndex, isUserAnswered, items]);
 
   const startQuiz = useCallback(() => {
     if (!filteredWordList) {
       return;
     }
     setIsFinished(false);
     setCurIndex(0);
-    setQuestions(makeQuestions(filteredWordList));
+    setItems(makeQuizItems(filteredWordList));
   }, [filteredWordList]);
 
-  useEffect(() => {
-    if (filteredWordList && !refOnlyOnce.current) {
-      refOnlyOnce.current = true;
-      startQuiz();
-    }
-  }, [filteredWordList, startQuiz]);
+  useEffectOnce({
+    effect: startQuiz,
+    condition: () => !!filteredWordList,
+    deps: [filteredWordList, startQuiz],
+  });
+
+  // Update items after changed word list
+  useEffectOnce({
+    effect: () => setItems((state) => updateQuizItems(state, wordList!)),
+    condition: () => !!wordList,
+    skipFirst: true,
+    deps: [wordList],
+  });
 
   useHotkeys('space,enter', isFinished ? startQuiz : goToNextQuestion, { preventDefault: true });
   useHotkeys('1,2,3,4,5,6,7,8,9', applyUserAnswerByKeyNumber, { preventDefault: true });
@@ -113,11 +126,11 @@ export const useWordToTranslation = () => {
     isLoading,
     stepNumber,
     stepCount,
-    question,
+    curItem,
     applyUserAnswer,
     goToNextQuestion,
     isFinished,
-    questions,
+    items,
     startQuiz,
     autoSpeak,
     setAutoSpeak,

src/pages/WordToTranslation/index.tsx

@@ -11,11 +11,11 @@ const WordToTranslation = () => {
     isLoading,
     stepNumber,
     stepCount,
-    question,
+    curItem,
     applyUserAnswer,
     goToNextQuestion,
     isFinished,
-    questions,
+    items,
     startQuiz: restart,
     autoSpeak,
     setAutoSpeak,
@@ -45,10 +45,10 @@ const WordToTranslation = () => {
           </Stack>
         )}
       </Stack>
-      {isFinished && <FinalReport data={questions} />}
-      {!isFinished && question && (
+      {isFinished && <FinalReport data={items} />}
+      {!isFinished && curItem && (
         <Quiz
-          question={question}
+          item={curItem}
           onClickAnswer={applyUserAnswer}
           onGoToNextQuestion={goToNextQuestion}
           autoSpeak={autoSpeak}

src/services/wordProgress/utils.ts

@@ -1,5 +1,5 @@
 import { DateTime, Interval } from 'luxon';
-import { Question, Word } from '../words/types';
+import { QuizItem, Word } from '../words/types';
 import { findWordProgressByWord, updateWordProgress } from './api';
 import { WordProgress } from './types';
 import { mergeValues } from '@/utils/form';
@@ -14,7 +14,7 @@ export const getWordProgressDefaultValues = (wordId: string): WordProgress => {
   };
 };
 
-export const saveWordProgressList = async (questions: Question[]): Promise<void> => {
+export const saveWordProgressList = async (questions: QuizItem[]): Promise<void> => {
   for (const { question: word, userAnswer } of questions) {
     const isRightAnswer = word.id === userAnswer?.id;
     const wordProgress = (await findWordProgressByWord(word.id)) ?? getWordProgressDefaultValues(word.id);

src/services/words/types.ts

@@ -26,7 +26,7 @@ export enum WordType {
 
 export type Word = z.infer<typeof WordSchema>;
 
-export interface Question {
+export interface QuizItem {
   question: Word;
   answers: Word[];
   userAnswer: Word | null;

src/services/words/utils.ts

@@ -1,5 +1,5 @@
 import { DateTime } from 'luxon';
-import { Question, Word, WordType } from './types';
+import { QuizItem, Word, WordType } from './types';
 import { getRandomItemOfArray, shuffle } from '@/utils/random';
 import { WORD_TYPE_TO_NAME } from '@/constants/word';
 
@@ -65,8 +65,8 @@ export const renderWordTypes = (values: WordType[]) => {
 const QUESTIONS_MAX = 7;
 const ANSWERS_MAX = 5;
 
-export const makeQuestions = (words: Word[]): Question[] => {
-  const questions: Question[] = [];
+export const makeQuizItems = (words: Word[]): QuizItem[] => {
+  const questions: QuizItem[] = [];
   for (const word of words.slice(0, QUESTIONS_MAX)) {
     const answers: Word[] = [word];
     const answerIds: string[] = [word.id];
@@ -88,3 +88,17 @@ export const makeQuestions = (words: Word[]): Question[] => {
   }
   return questions;
 };
+
+export const updateQuizItems = (items: QuizItem[], words: Word[]): QuizItem[] => {
+  const wordsById = new Map<string, Word>();
+  for (const word of words) {
+    wordsById.set(word.id, word);
+  }
+  return items.map((item) => {
+    return {
+      question: wordsById.get(item.question.id) ?? item.question,
+      answers: item.answers.map((answer) => wordsById.get(answer.id) ?? answer),
+      userAnswer: wordsById.get(item.userAnswer?.id ?? '') ?? item.userAnswer,
+    };
+  });
+};