v1.0.5

chakkun1121 · Jan 28, 2024 · d04bfe2 · d04bfe2
1 parent 4c9383d
commit d04bfe2
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 63 deletions.
diff --git a/@types/cardResult.ts b/@types/cardResult.ts
@@ -1,22 +1,19 @@
+import { flashCardMode } from "./flashCardSettings";
+
 // 保存するファイル名は result/<本体のファイルID>.jsonとすること
 export type cardResult = {
   fileInfo: {
     id: string;
   };
   check: {
-    en2ja?: {
-      id: string;
-      checked: boolean;
-    }[];
-    ja2en?: {
-      id: string;
-      checked: boolean;
-    }[];
+    //英語→日本語
+    ["en-ja"]?: string[]; //チェック済みのカードのID 英語→日本語
+    ["ja-en"]?: string[]; //チェック済みのカードのID 日本語→英語
   };
   results: {
     //キーボード入力での解答時のみ使用
     date: string;
-    mode?: "en2ja" | "ja2en"; //初期値は"en2ja"
+    mode?: flashCardMode; //初期値は"ja-en"
     cardsResult: {
       id: string;
       result: boolean; //正解かどうか

diff --git a/@types/flashCardSettings.ts b/@types/flashCardSettings.ts
@@ -4,12 +4,13 @@ export type flashCardSettings =
       isAnswerWithKeyboard: false;
       removeChecked?: boolean;
       questionCount?: number;
-      mode: "en2ja" | "ja2en";
+      mode: flashCardMode;
     }
   | {
       isRandom: boolean;
       isAnswerWithKeyboard: true;
       removeChecked: boolean;
       questionCount?: number;
-      mode: "en2ja";
+      mode: "ja-en";
     };
+export type flashCardMode = "ja-en" | "en-ja";
diff --git a/app/(app)/app/ImportForm.tsx b/app/(app)/app/ImportForm.tsx
@@ -5,6 +5,7 @@ import React, { MouseEventHandler, useState } from "react";
 import { wayakuFile2file } from "./_library/wayaku";
 import { uploadFile } from "./_library/uploadFile";
 import { csvToFileContent } from "./_library/csvToFileContent";
+import { flashCardMode } from "@/@types/flashCardSettings";
 
 export default function ImportForm({
   close,
@@ -32,7 +33,7 @@ export default function ImportForm({
     setTitle(title);
     close();
   }
-  async function importFromCsv(mode?: "en-ja" | "ja-en") {
+  async function importFromCsv(mode?: flashCardMode) {
     /**
      * ファイル形式(ヘッダー行は基本的になしだが、含まれている場合はユーザーによって除去してもらう)
      * 1. |表|裏|

diff --git a/app/(app)/flashCard/_card/answer.tsx b/app/(app)/flashCard/_card/answer.tsx
@@ -2,6 +2,7 @@ import { fileType } from "@/@types/fileType";
 import { useState } from "react";
 import { SpeechButton } from "./speechButton";
 import { useHotkeys } from "react-hotkeys-hook";
+import { flashCardMode } from "@/@types/flashCardSettings";
 
 export default function Answer({
   mode,
@@ -10,7 +11,7 @@ export default function Answer({
   setIsChecked,
   isAnswerWithKeyboard,
 }: {
-  mode: "en2ja" | "ja2en";
+  mode: flashCardMode;
   currentQuestion: fileType["content"][0];
   isChecked: boolean;
   setIsChecked: (isChecked: boolean) => void;
@@ -66,14 +67,14 @@ export default function Answer({
           <div>
             {isShowAnswer && (
               <p className="md:text-heading-S p-4 bg-gray-200 rounded flex-1">
-                {mode == "en2ja" ? currentQuestion?.en : currentQuestion?.ja}
+                {mode == "ja-en" ? currentQuestion?.en : currentQuestion?.ja}
               </p>
             )}
           </div>
         </div>
       ) : isShowAnswer ? (
         <p className="md:text-heading-S p-4 bg-gray-200 rounded flex-1">
-          {mode == "en2ja" ? currentQuestion?.en : currentQuestion?.ja}
+          {mode == "ja-en" ? currentQuestion?.en : currentQuestion?.ja}
         </p>
       ) : (
         <button
@@ -88,7 +89,7 @@ export default function Answer({
         checked={isChecked}
         onChange={(e) => setIsChecked((e.target as HTMLInputElement).checked)}
       />
-      {mode == "en2ja" && <SpeechButton text={currentQuestion?.en} />}
+      {mode == "ja-en" && <SpeechButton text={currentQuestion?.en} />}
     </div>
   );
 }

diff --git a/app/(app)/flashCard/_card/card.tsx b/app/(app)/flashCard/_card/card.tsx
@@ -24,19 +24,16 @@ export default function FlashCard({
 }) {
   const [questionList, setQuestionList] = useState<string[]>([]); // idの配列
   const [questionIndex, setQuestionIndex] = useState<number>(0); // 現在の問題のindex
-  const [checked, setIsChecked] = useState<cardResult["check"]["en2ja"]>(
-    cardResult.check?.[flashCardSettings.mode]
+  const [checked, setIsChecked] = useState<string[]>(
+    cardResult.check?.[flashCardSettings.mode] ?? []
   );
 
   useEffect(() => {
     // 初期設定
     let idList = fileContent.content.map((c) => c.id);
     let questionList: string[] = [];
     if (flashCardSettings.removeChecked) {
-      const checkedList = cardResult.check?.[flashCardSettings.mode]?.map(
-        (v) => v.id
-      );
-      idList = idList.filter((id) => !checkedList?.includes(id));
+      idList = idList.filter((id) => !checked?.includes(id));
     }
     if (flashCardSettings.isRandom) {
       const randomSectionList = idList.sort(() => Math.random() - 0.5);
@@ -102,13 +99,11 @@ export default function FlashCard({
         <CardMain
           currentQuestion={currentQuestion as fileType["content"][0]}
           key={currentQuestion?.id}
-          isChecked={
-            checked?.find((v) => v.id == currentQuestion.id)?.checked ?? false
-          }
+          isChecked={!!checked?.find((v) => v == currentQuestion.id) ?? false}
           setIsChecked={(isChecked: boolean) => {
             setIsChecked((prev) => [
-              ...(prev?.filter((v) => v.id !== currentQuestion.id) ?? []),
-              { id: currentQuestion?.id, checked: isChecked },
+              ...prev.filter((v) => v !== currentQuestion.id),
+              ...(isChecked ? [currentQuestion.id] : []),
             ]);
           }}
           mode={flashCardSettings.mode}

diff --git a/app/(app)/flashCard/_card/main.tsx b/app/(app)/flashCard/_card/main.tsx
@@ -1,6 +1,7 @@
 import { fileType } from "@/@types/fileType";
 import { SpeechButton } from "./speechButton";
 import Answer from "./answer";
+import { flashCardMode } from "@/@types/flashCardSettings";
 
 export function CardMain({
   currentQuestion,
@@ -12,17 +13,17 @@ export function CardMain({
   currentQuestion: fileType["content"][0];
   isChecked: boolean;
   setIsChecked: (isChecked: boolean) => void;
-  mode: "en2ja" | "ja2en";
+  mode: flashCardMode;
   isAnswerWithKeyboard: boolean;
 }) {
   return (
     <div className="flex-1 w-full flex flex-col gap-4 justify-center  ">
       <div className="mx-auto bg-gray-100 rounded w-full grid gap-4 p-4">
         <div className="flex items-center gap-4">
           <p className="md:text-heading-S p-4 bg-gray-200 rounded flex-1">
-            {mode == "en2ja" ? currentQuestion?.ja : currentQuestion?.en}
+            {mode == "ja-en" ? currentQuestion?.ja : currentQuestion?.en}
           </p>
-          {mode == "ja2en" && <SpeechButton text={currentQuestion?.en} />}
+          {mode == "en-ja" && <SpeechButton text={currentQuestion?.en} />}
         </div>
         <Answer
           mode={mode}

diff --git a/app/(app)/flashCard/cardResult.tsx b/app/(app)/flashCard/cardResult.tsx
@@ -49,7 +49,7 @@ export default function CardResult({
                     <input
                       type="checkbox"
                       checked={
-                        results.check?.en2ja?.find((r) => r.id === id)?.checked
+                        !!results.check?.["ja-en"]?.find((r) => r === id)
                       }
                       disabled
                       className="w-4 h-4 bg-primary-500"
@@ -59,7 +59,7 @@ export default function CardResult({
                     <input
                       type="checkbox"
                       checked={
-                        results.check?.ja2en?.find((r) => r.id === id)?.checked
+                        !!results.check?.["en-ja"]?.find((r) => r === id)
                       }
                       disabled
                       className="w-4 h-4 bg-primary-500"

diff --git a/app/(app)/flashCard/flashCardHome.tsx b/app/(app)/flashCard/flashCardHome.tsx
@@ -25,7 +25,7 @@ export default function FlashCardHome({
               name: "isRandom",
               title: "ランダムに出題する",
             },
-            flashCardSettings.mode == "en2ja" && {
+            flashCardSettings.mode == "ja-en" && {
               name: "isAnswerWithKeyboard",
               title: "キーボードで解答する",
             },
@@ -34,22 +34,24 @@ export default function FlashCardHome({
               title: "チェック済みの問題を除外する",
             },
           ] as { name: string; title: string }[]
-        ).map((c) => (
-          <label className="block m-2" key={c.name}>
-            <input
-              className="p-2 w-4 h-4"
-              type="checkbox"
-              defaultChecked={flashCardSettings.isRandom}
-              onChange={(e) => {
-                setFlashCardSettings({
-                  ...flashCardSettings,
-                  [c.name]: e.target.checked,
-                });
-              }}
-            />
-            {c.title}
-          </label>
-        ))}
+        )
+          .filter((a) => a)
+          .map((c) => (
+            <label className="block m-2" key={c.name}>
+              <input
+                className="p-2 w-4 h-4"
+                type="checkbox"
+                defaultChecked={flashCardSettings.isRandom}
+                onChange={(e) => {
+                  setFlashCardSettings({
+                    ...flashCardSettings,
+                    [c.name]: e.target.checked,
+                  });
+                }}
+              />
+              {c.title}
+            </label>
+          ))}
         <label className="block m-2">
           出題モード:
           <select
@@ -58,12 +60,12 @@ export default function FlashCardHome({
             onChange={(e) => {
               setFlashCardSettings({
                 ...flashCardSettings,
-                mode: e.target.value as unknown as "en2ja", // ゴリ押し解決
+                mode: e.target.value as unknown as "ja-en",
               });
             }}
           >
-            <option value="en2ja">英語→日本語</option>
-            <option value="ja2en">日本語→英語</option>
+            <option value="ja-en">日本語→英語</option> {/*←初期設定*/}
+            <option value="en-ja">英語→日本語</option>
           </select>
         </label>
         <label className="block m-2">
@@ -76,15 +78,13 @@ export default function FlashCardHome({
             defaultValue={
               fileContent.content.length -
               ((flashCardSettings?.removeChecked
-                ? checked?.[flashCardSettings.mode]?.filter((a) => a.checked)
-                    .length
+                ? checked?.[flashCardSettings.mode]?.length
                 : 0) ?? 0)
             }
             max={
               fileContent.content.length -
               ((flashCardSettings?.removeChecked
-                ? checked?.[flashCardSettings.mode]?.filter((a) => a.checked)
-                    .length
+                ? checked?.[flashCardSettings.mode]?.length
                 : 0) ?? 0)
             }
             min={1}
@@ -98,8 +98,7 @@ export default function FlashCardHome({
           問/全
           {fileContent.content.length -
             ((flashCardSettings?.removeChecked
-              ? checked?.[flashCardSettings.mode]?.filter((a) => a.checked)
-                  .length
+              ? checked?.[flashCardSettings.mode]?.length
               : 0) ?? 0)}
           問
           {!flashCardSettings.isRandom &&
@@ -112,8 +111,7 @@ export default function FlashCardHome({
         disabled={
           fileContent.content.length -
             ((flashCardSettings?.removeChecked
-              ? checked?.[flashCardSettings.mode]?.filter((a) => a.checked)
-                  .length
+              ? checked?.[flashCardSettings.mode]?.length
               : 0) ?? 0) ===
           0
         }

diff --git a/app/(app)/flashCard/main.tsx b/app/(app)/flashCard/main.tsx
@@ -27,8 +27,8 @@ export default function Card({ fileId }: { fileId: string }) {
   const [results, setResults] = useState<cardResult>({
     fileInfo: { id: fileId },
     check: {
-      en2ja: [],
-      ja2en: [],
+      ["en-ja"]: [],
+      ["ja-en"]: [],
     },
     results: [],
   });
@@ -37,7 +37,7 @@ export default function Card({ fileId }: { fileId: string }) {
   const [flashCardSettings, setFlashCardSettings] = useState<flashCardSettings>(
     {
       isRandom: false,
-      mode: "en2ja",
+      mode: "ja-en",
       isAnswerWithKeyboard: false,
     }
   );