From 53857770449604f66d64cb386b6b73194e90fbb8 Mon Sep 17 00:00:00 2001
From: cuixiaorui <cui_xiaorui@126.com>
Date: Fri, 16 Aug 2024 16:56:03 +0800
Subject: [PATCH] feat: undo mastered element

---
 apps/client/components/main/MasteredBtn.vue | 24 +----------
 apps/client/components/main/Tips.vue        |  7 ---
 apps/client/composables/main/useMastered.ts | 48 ++++++++++++++++++++-
 apps/client/store/masteredElements.ts       |  6 +++
 4 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/apps/client/components/main/MasteredBtn.vue b/apps/client/components/main/MasteredBtn.vue
index 177c6a22..e97e4282 100644
--- a/apps/client/components/main/MasteredBtn.vue
+++ b/apps/client/components/main/MasteredBtn.vue
@@ -1,36 +1,16 @@
 <template>
   <button
     class="btn btn-outline btn-sm"
-    @click="handleMastered"
+    @click="markStatementAsMastered"
   >
     掌握
   </button>
 </template>
 
 <script setup lang="ts">
-import { toast } from "vue-sonner";
-
 import { useMastered } from "~/composables/main/useMastered";
-import { isAuthenticated } from "~/services/auth";
-
-const { handleMastered } = useMasteredShortcut();
-
-function useMasteredShortcut() {
-  const { markStatementAsMastered } = useMastered();
-
-  function handleMastered() {
-    if (!isAuthenticated()) {
-      toast.warning("需要登录哦");
-      return;
-    }
-
-    markStatementAsMastered();
-  }
 
-  return {
-    handleMastered,
-  };
-}
+const { markStatementAsMastered } = useMastered();
 </script>
 
 <style scoped></style>
diff --git a/apps/client/components/main/Tips.vue b/apps/client/components/main/Tips.vue
index aea8a477..7c999994 100644
--- a/apps/client/components/main/Tips.vue
+++ b/apps/client/components/main/Tips.vue
@@ -21,7 +21,6 @@
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted } from "vue";
-import { toast } from "vue-sonner";
 
 import { useAnswerTip } from "~/composables/main/answerTip";
 import { useCurrentStatementEnglishSound } from "~/composables/main/englishSound";
@@ -29,7 +28,6 @@ import { useGameMode } from "~/composables/main/game";
 import { useSummary } from "~/composables/main/summary";
 import { useMastered } from "~/composables/main/useMastered";
 import { useShortcutKeyMode } from "~/composables/user/shortcutKey";
-import { isAuthenticated } from "~/services/auth";
 import { cancelShortcut, parseShortcutKeys, registerShortcut } from "~/utils/keyboardShortcuts";
 import { useAnswer } from "./QuestionInput/useAnswer";
 import { useWrapperQuestionInput } from "./QuestionInput/useWrapperQuestionInput";
@@ -106,11 +104,6 @@ function useMasteredShortcut() {
   const { markStatementAsMastered } = useMastered();
 
   function handleMastered() {
-    if (!isAuthenticated()) {
-      toast.warning("需要登录哦");
-      return;
-    }
-
     markStatementAsMastered();
   }
 
diff --git a/apps/client/composables/main/useMastered.ts b/apps/client/composables/main/useMastered.ts
index e584bf11..50ee9da4 100644
--- a/apps/client/composables/main/useMastered.ts
+++ b/apps/client/composables/main/useMastered.ts
@@ -1,11 +1,18 @@
 import { ref } from "vue";
+import { toast } from "vue-sonner";
 
 import { useGameMode } from "~/composables/main/game";
 import { useSummary } from "~/composables/main/summary";
+import { isAuthenticated } from "~/services/auth";
 import { useCourseStore } from "~/store/course";
 import { useMasteredElementsStore } from "~/store/masteredElements";
+import { cancelShortcut, registerShortcut } from "~/utils/keyboardShortcuts";
+import { isWindows } from "~/utils/platform";
+
+const undoShortcut = isWindows() ? "ctrl+z" : "command+z";
 
 export function useMastered() {
+  let toastId: string | number | undefined;
   const courseStore = useCourseStore();
   const masteredElements = useMasteredElementsStore();
   const { showQuestion } = useGameMode();
@@ -13,16 +20,22 @@ export function useMastered() {
 
   const addLoading = ref(false);
   async function markStatementAsMastered() {
+    if (!isAuthenticated()) {
+      toast.warning("需要登录哦");
+      return;
+    }
+
     // updateMarketedStatements 会影响 isLastStatement 返回的结果
     // 所以我们提前调用 isLastStatement 来记录好值
     if (addLoading.value) return;
     const isLastStatement = courseStore.isLastStatement();
     addLoading.value = true;
-    await masteredElements.addElement({
+    const undoMasteredElements = await masteredElements.addElement({
       english: courseStore.currentStatement?.english!,
     });
-    addLoading.value = false;
 
+    handleMasteredToast(undoMasteredElements);
+    addLoading.value = false;
     courseStore.updateMarketedStatements();
 
     if (isLastStatement) {
@@ -38,6 +51,37 @@ export function useMastered() {
       courseStore.toNextStatement();
       showQuestion();
     }
+
+    function handleMasteredToast(undoMasteredElements: () => void) {
+      function handleUndo(e: KeyboardEvent) {
+        e.preventDefault();
+        e.stopPropagation();
+        undoMasteredElements();
+        courseStore.updateMarketedStatements();
+        cancelShortcut(undoShortcut, handleUndo);
+        dismissToastIfExists();
+      }
+
+      dismissToastIfExists();
+      cancelShortcut(undoShortcut);
+      registerShortcut(undoShortcut, handleUndo);
+
+      toastId = toast("成功添加到掌握列表中", {
+        action: {
+          label: "撤销",
+          onClick: () => handleUndo(new KeyboardEvent("keydown")),
+        },
+        onAutoClose() {
+          cancelShortcut(undoShortcut, handleUndo);
+        },
+      });
+    }
+
+    function dismissToastIfExists() {
+      if (toastId !== undefined) {
+        toast.dismiss(toastId);
+      }
+    }
   }
 
   return {
diff --git a/apps/client/store/masteredElements.ts b/apps/client/store/masteredElements.ts
index 4f1b8c9a..389b3795 100644
--- a/apps/client/store/masteredElements.ts
+++ b/apps/client/store/masteredElements.ts
@@ -17,7 +17,13 @@ export const useMasteredElementsStore = defineStore("masteredElements", () => {
 
   async function addElement(content: MasteredElementContent) {
     const result = await fetchAddMasteredElement(content);
+    const previousElements = [...masteredElements.value];
     masteredElements.value.unshift(result);
+
+    return () => {
+      masteredElements.value = previousElements;
+      fetchRemoveMasteredElements(result.id).catch(console.error);
+    };
   }
 
   async function removeElement(elementId: string) {