refactor: types for mastered elements

apps/client/api/masteredElements.ts

@@ -1,21 +1,32 @@
+import type { MasteredElement, MasteredElementContent } from "~/types/models/mastered-elements";
 import { http } from "./http";
 
-interface ElementItem {
-  element: {
+interface ElementItemApiResponse {
+  content: {
     english: string;
   };
   masteredAt: string;
   id: string;
 }
 
-export async function fetchAddMasteredElement(element: { english: string }) {
-  return await http.post<ElementItem, ElementItem>(`/mastered-elements`, { element });
+export async function fetchAddMasteredElement(content: MasteredElementContent) {
+  const result: MasteredElement = await http.post<ElementItemApiResponse, ElementItemApiResponse>(
+    `/mastered-elements`,
+    {
+      content,
+    },
+  );
+
+  return result;
 }
 
 export async function fetchGetMasteredElements() {
-  return await http.get<{ element: { english: string }[] }, { element: { english: string }[] }>(
-    `/mastered-elements`,
-  );
+  const result: MasteredElement[] = await http.get<
+    ElementItemApiResponse[],
+    ElementItemApiResponse[]
+  >(`/mastered-elements`);
+
+  return result;
 }
 
 export async function fetchRemoveMasteredElements(elementId: string) {

apps/client/pages/mastered-elements.vue

@@ -20,7 +20,7 @@
     >
       <div>
         <div class="text-lg font-bold text-purple-800 dark:text-white">
-          {{ item.element.english }}
+          {{ item.content.english }}
         </div>
         <div class="text-purple-600 dark:text-purple-300">
           Added on {{ formatDate(item.masteredAt) }}
@@ -51,7 +51,7 @@ const searchQuery = ref("");
 const fuse = computed(
   () =>
     new Fuse(masteredElementsStore.masteredElements, {
-      keys: ["element.english"],
+      keys: ["content.english"],
       threshold: 0.4,
     }),
 );
@@ -75,6 +75,4 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped>
-/* 可以在这里添加额外的样式 */
-</style>
+<style scoped></style>

apps/client/store/masteredElements.ts

@@ -1,33 +1,22 @@
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
 
+import type { MasteredElement, MasteredElementContent } from "~/types/models/mastered-elements";
 import {
   fetchAddMasteredElement,
   fetchGetMasteredElements,
   fetchRemoveMasteredElements,
 } from "~/api/masteredElements";
 
-interface Element {
-  english: string;
-}
-
-interface ElementItem {
-  element: {
-    english: string;
-  };
-  masteredAt: string;
-  id: string;
-}
-
 export const useMasteredElementsStore = defineStore("masteredElements", () => {
-  const masteredElements = ref<ElementItem[]>([]);
+  const masteredElements = ref<MasteredElement[]>([]);
 
   const totalMasteredElementsCount = computed(() => {
     return masteredElements.value.length;
   });
 
-  async function addElement(element: Element) {
-    const result = await fetchAddMasteredElement(element);
+  async function addElement(content: MasteredElementContent) {
+    const result = await fetchAddMasteredElement(content);
     masteredElements.value.unshift(result);
   }
 
@@ -41,7 +30,7 @@ export const useMasteredElementsStore = defineStore("masteredElements", () => {
 
   function checkMastered(english: string) {
     return !!masteredElements.value.find((element) => {
-      return element.element.english.toLowerCase() === english.toLowerCase();
+      return element.content.english.toLowerCase() === english.toLowerCase();
     });
   }
 

apps/client/types/models/mastered-elements.ts

@@ -0,0 +1,9 @@
+export interface MasteredElement {
+  content: MasteredElementContent;
+  masteredAt: string;
+  id: string;
+}
+
+export interface MasteredElementContent {
+  english: string;
+}