Merge branch 'dev' into feature/make-3dots-leader

chakkun1121 · Feb 13, 2024 · f0e8849 · f0e8849
2 parents c059fe3 + 2c51efe
commit f0e8849
Show file tree

Hide file tree

Showing 21 changed files with 1,583 additions and 1,086 deletions.
diff --git a/.github/workflows/bluesky.yml b/.github/workflows/bluesky.yml
@@ -0,0 +1,26 @@
+name: Send Bluesky Post
+
+on:
+  release:
+    types: [published]
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  post:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: get latest release
+        id: get_latest_release
+        run: |
+          echo ::set-output name=tag::$(git describe --tags --abbrev=0)
+      - name: Send Bluesky Post
+        uses: myConsciousness/bluesky-post@v5
+        with:
+          text: "[VocabPhrase](https://vocab-phrase.vercel.app)の${{ steps.get_latest_release.outputs.tag }}が公開されました。 詳細は [こちら](${{ github.event.release.html_url }})"
+          link-preview-url: "https://vocab-phrase.vercel.app"
+          identifier: ${{ secrets.BLUESKY_IDENTIFIER }}
+          password: ${{ secrets.BLUESKY_PASSWORD }}
diff --git a/@types/flashCardSettings.ts b/@types/flashCardSettings.ts
@@ -1,16 +1,10 @@
-export type flashCardSettings =
-  | {
-      isRandom: boolean;
-      isAnswerWithKeyboard: false;
-      removeChecked?: boolean;
-      questionCount?: number;
-      mode: flashCardMode;
-    }
-  | {
-      isRandom: boolean;
-      isAnswerWithKeyboard: true;
-      removeChecked: boolean;
-      questionCount?: number;
-      mode: "ja-en";
-    };
+export type flashCardSettings = {
+  [keyof: string]: any;
+  isRandom: boolean;
+  isAnswerWithKeyboard: boolean;
+  removeChecked?: boolean;
+  questionCount?: number;
+  mode: flashCardMode;
+};
+
 export type flashCardMode = "ja-en" | "en-ja";
diff --git a/app/(app)/_components/rightClick/main.tsx b/app/(app)/_components/rightClick/main.tsx
@@ -146,7 +146,7 @@ export default function RightClick() {
       {isShow && (
         <>
           <div
-            className="absolute top-0 left-0 w-64 bg-gray-100 rounded shadow-lg z-50 select-none"
+            className="absolute top-0 left-0 w-64 bg-gray-100 rounded shadow-lg z-50"
             style={{
               top: y,
               left: x,

diff --git a/app/(app)/_library/settings/localSettings.ts b/app/(app)/_library/settings/localSettings.ts
@@ -0,0 +1,14 @@
+import { localSettings } from "@/@types/settings";
+import { atom } from "recoil";
+import { recoilPersist } from "recoil-persist";
+
+// recoil
+const { persistAtom } = recoilPersist({
+  key: "settings",
+  storage: typeof window === "undefined" ? undefined : localStorage,
+});
+export const localSettingsState = atom<localSettings>({
+  key: "settings",
+  default: {},
+  effects_UNSTABLE: [persistAtom],
+});
diff --git a/app/(app)/_library/settings/useServerSettings.tsx b/app/(app)/_library/settings/useServerSettings.tsx
@@ -24,7 +24,7 @@ export function useServerSettings(token: string) {
       if (settingsFile) {
         setSettingsFileID(settingsFile.id);
         setServerSettings(
-          JSON.parse(await getFileContent(token, settingsFile.id)) || {}
+          JSON.parse((await getFileContent(token, settingsFile.id)) || "{}")
         );
       }
       setIsLoading(false);

diff --git a/app/(app)/_library/useLeavePageConfirmation.ts b/app/(app)/_library/useLeavePageConfirmation.ts
@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import Router from "next/router";
+import { useBeforeUnload } from "react-use";
+
+export const useLeavePageConfirmation = (
+  showAlert = true,
+  message?: string
+) => {
+  useBeforeUnload(showAlert, message);
+
+  useEffect(() => {
+    const handler = () => {
+      if (showAlert && !window.confirm(message)) {
+        throw "cancel";
+      }
+    };
+
+    Router.events.on("routeChangeStart", handler);
+
+    return () => {
+      Router.events.off("routeChangeStart", handler);
+    };
+  }, [showAlert, message]);
+};
diff --git a/app/(app)/flashCard/_card/answer.tsx b/app/(app)/flashCard/_card/answer.tsx
@@ -3,6 +3,7 @@ import { useState } from "react";
 import { SpeechButton } from "./speechButton";
 import { useHotkeys } from "react-hotkeys-hook";
 import { flashCardMode } from "@/@types/flashCardSettings";
+import { DisabledCheckBox } from "@/app/_components/disabledCheckBox";
 
 export default function Answer({
   mode,
@@ -52,7 +53,7 @@ export default function Answer({
               disabled={isShowAnswer}
             />
             {isShowAnswer ? (
-              <p className="md:text-heading-S text-center bg-gray-200 rounded  p-4 flex-none">
+              <p className="md:text-heading-S text-center bg-gray-200 rounded p-4 flex-none !select-text">
                 {inputAnswer == currentQuestion.en ? "◯" : "✕"}
               </p>
             ) : (
@@ -66,14 +67,14 @@ export default function Answer({
           </div>
           <div>
             {isShowAnswer && (
-              <p className="md:text-heading-S p-4 bg-gray-200 rounded flex-1">
+              <p className="md:text-heading-S p-4 bg-gray-200 rounded flex-1 !select-text">
                 {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">
+        <p className="md:text-heading-S p-4 bg-gray-200 rounded flex-1 !select-text">
           {mode == "ja-en" ? currentQuestion?.en : currentQuestion?.ja}
         </p>
       ) : (
@@ -84,27 +85,17 @@ export default function Answer({
           答えを見る
         </button>
       )}
-      <CheckBox
-        disabled={!isShowAnswer}
-        checked={isChecked}
-        onChange={(e) => setIsChecked((e.target as HTMLInputElement).checked)}
-      />
+      {isShowAnswer ? (
+        <input
+          type="checkbox"
+          className="w-12 h-12 border-none accent-primary-500 text-white"
+          checked={isChecked}
+          onChange={(e) => setIsChecked((e.target as HTMLInputElement).checked)}
+        />
+      ) : (
+        <DisabledCheckBox className="w-12 h-12 m-auto" checked={isChecked} />
+      )}
       {mode == "ja-en" && <SpeechButton text={currentQuestion?.en} />}
     </div>
   );
 }
-function CheckBox(
-  props: React.DetailedHTMLProps<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  >
-) {
-  const { className, ...rest } = props;
-  return (
-    <input
-      type="checkbox"
-      className={`${className} aspect-square bg-gray-200 hover:bg-gray-300 w-12 h-12 rounded-full border-none`}
-      {...rest}
-    />
-  );
-}
diff --git a/app/(app)/flashCard/_card/card.tsx b/app/(app)/flashCard/_card/card.tsx
@@ -85,11 +85,9 @@ export default function FlashCard({
     // preventDefaultTouchmoveEvent: true,
     trackMouse: true,
   });
-
   const currentQuestion = fileContent.content.find(
     (c) => c.id === questionList[questionIndex]
   );
-
   return (
     <>
       <button

diff --git a/app/(app)/flashCard/_card/main.tsx b/app/(app)/flashCard/_card/main.tsx
@@ -20,7 +20,7 @@ export function CardMain({
     <div className="w-full flex flex-col gap-4 justify-center fixed inset-0 m-auto p-4 max-w-7xl">
       <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">
+          <p className="md:text-heading-S p-4 bg-gray-200 rounded flex-1 !select-text">
             {mode == "ja-en" ? currentQuestion?.ja : currentQuestion?.en}
           </p>
           {mode == "en-ja" && <SpeechButton text={currentQuestion?.en} />}

diff --git a/app/(app)/flashCard/cardResult.tsx b/app/(app)/flashCard/cardResult.tsx
@@ -1,5 +1,6 @@
 import { cardResult } from "@/@types/cardResult";
 import { fileType } from "@/@types/fileType";
+import { DisabledCheckBox } from "../../_components/disabledCheckBox";
 
 export default function CardResult({
   fileContent,
@@ -76,25 +77,24 @@ export default function CardResult({
             ) as fileType["content"][0];
 
             return (
-              <tr key={currentQuestion.id} className="even:bg-gray-100">
-                <td className="text-center py-5">{i + 1}</td>
-                <td className="py-5">{currentQuestion.en}</td>
-                <td className="py-5">{currentQuestion.ja}</td>
+              <tr
+                key={currentQuestion.id}
+                className="even:bg-gray-100 [&>td]:py-5"
+              >
+                <td className="text-center">{i + 1}</td>
+                <td>{currentQuestion.en}</td>
+                <td>{currentQuestion.ja}</td>
                 {/* <td className="text-center">{result ? "○" : "×"}</td> */}
-                <td className="py-5 text-center">
-                  <input
-                    type="checkbox"
+                <td className="text-center">
+                  <DisabledCheckBox
+                    className="w-6 h-6 m-auto"
                     checked={!!results.check?.["ja-en"]?.find((r) => r === id)}
-                    disabled
-                    className="w-4 h-4 bg-primary-500"
                   />
                 </td>
-                <td className="text-center py-5">
-                  <input
-                    type="checkbox"
+                <td className="text-center">
+                  <DisabledCheckBox
+                    className="w-6 h-6 m-auto"
                     checked={!!results.check?.["en-ja"]?.find((r) => r === id)}
-                    disabled
-                    className="w-4 h-4 bg-primary-500"
                   />
                 </td>
               </tr>