From dc0e2809ec0fd70b6957c197f579f0e84fa87fc9 Mon Sep 17 00:00:00 2001
From: cuixiaorui <cui_xiaorui@126.com>
Date: Thu, 25 Jan 2024 21:02:59 +0800
Subject: [PATCH] refactor: extract core code

---
 apps/client/api/courses.ts                    |  8 +-
 .../{Footer/index.vue => Footer.vue}          |  0
 .../{Navbar/index.vue => Navbar.vue}          | 84 ++++++++++---------
 .../index.vue => courses/CourseCard.vue}      | 14 ++--
 apps/client/components/main/Answer.vue        | 25 ++----
 .../client/components/main/CourseProgress.vue | 14 +---
 apps/client/components/main/Game.vue          |  6 +-
 apps/client/components/main/Question.vue      |  7 +-
 apps/client/components/main/Summary.vue       | 69 +++++++++------
 apps/client/components/main/Tips.vue          |  7 +-
 apps/client/components/main/Tool.vue          | 26 ++++--
 .../englishSound.ts}                          |  5 +-
 .../{components => composables}/main/game.ts  |  2 +-
 .../main/summary.ts                           |  0
 apps/client/layouts/default.vue               |  6 +-
 apps/client/pages/Courses.vue                 | 33 ++------
 apps/client/pages/Main/[id].vue               |  3 -
 apps/client/store/course.ts                   | 14 +++-
 apps/client/store/todo.ts                     | 12 ---
 19 files changed, 157 insertions(+), 178 deletions(-)
 rename apps/client/components/{Footer/index.vue => Footer.vue} (100%)
 rename apps/client/components/{Navbar/index.vue => Navbar.vue} (75%)
 rename apps/client/components/{CourseItemCard/index.vue => courses/CourseCard.vue} (95%)
 rename apps/client/composables/{useEnglishSound.ts => main/englishSound.ts} (86%)
 rename apps/client/{components => composables}/main/game.ts (88%)
 rename apps/client/{components => composables}/main/summary.ts (100%)
 delete mode 100644 apps/client/store/todo.ts

diff --git a/apps/client/api/courses.ts b/apps/client/api/courses.ts
index 01f79fe74..3013534fd 100644
--- a/apps/client/api/courses.ts
+++ b/apps/client/api/courses.ts
@@ -1,5 +1,4 @@
-import { type Course } from "~/store/course-new";
-import { useFetchPlus } from "~/composables/useFetch";
+import { type Course } from "~/store/course";
 import { http } from "./http";
 
 export async function fetchCourse(courseId: number) {
@@ -8,9 +7,4 @@ export async function fetchCourse(courseId: number) {
 
 export async function fetchNextCourse(courseId: number) {
   return await http.get<Course, Course>(`/courses/${courseId}/next`);
-  // const { data: courses } = await useFetchPlus<Course>(
-  //   `/courses/${courseId}/next`
-  // );
-
-  // return courses.value;
 }
diff --git a/apps/client/components/Footer/index.vue b/apps/client/components/Footer.vue
similarity index 100%
rename from apps/client/components/Footer/index.vue
rename to apps/client/components/Footer.vue
diff --git a/apps/client/components/Navbar/index.vue b/apps/client/components/Navbar.vue
similarity index 75%
rename from apps/client/components/Navbar/index.vue
rename to apps/client/components/Navbar.vue
index 5d6b973ea..87b66f96b 100644
--- a/apps/client/components/Navbar/index.vue
+++ b/apps/client/components/Navbar.vue
@@ -1,3 +1,45 @@
+<template>
+  <nav class="h-20 flex items-center justify-between">
+    <NuxtLink to="/">
+      <div class="logo flex items-center">
+        <img width="48" height="48" class="rounded-md overflow-hidden mr-6" src="/logo.png" alt="earth-worm-logo">
+        <h1 class="text-2xl leading-none font-black leading-normal text-wrap text-fuchsia-400">Earthworm</h1>
+      </div>
+    </NuxtLink>
+    <div class="flex items-center">
+      <button v-if="!userInfo && route.name !== 'Auth-Login'" class="btn btn-sm btn-ghost mx-1 h-8 px-2"
+        @click="handleLogin">
+        Log in
+      </button>
+      <button v-else-if="!userInfo && route.name !== 'Auth-Signup'" class="btn btn-sm btn-ghost mx-1 h-8 px-2"
+        @click="handleSignup">
+        Sign up
+      </button>
+      <div v-else class="dropdown dropdown-end">
+        <button tabindex="0" class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+            class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round"
+              d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+          </svg>
+        </button>
+        <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-32">
+          <li><a>User info</a></li>
+          <li @click="handleLogout"><a>Log out</a></li>
+          <!-- <li><a>Item 2</a></li> -->
+        </ul>
+      </div>
+      <button class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0" @click="toggleDarkMode">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+          class="w-6 h-6">
+          <path stroke-linecap="round" stroke-linejoin="round"
+            d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+        </svg>
+      </button>
+    </div>
+  </nav>
+</template>
+
 <script setup lang="ts">
 import type { UserInfo } from '~/api/auth';
 const route = useRoute()
@@ -6,7 +48,7 @@ const userInfo = useState<null | UserInfo>('userInfo', () => JSON.parse(localSto
 
 const toggleDarkMode = () => {
   if (document.documentElement.classList.contains('dark')) {
-    document.documentElement.setAttribute("data-theme", "light"); 
+    document.documentElement.setAttribute("data-theme", "light");
   } else {
     document.documentElement.setAttribute("data-theme", "dark");
   }
@@ -18,7 +60,7 @@ const setDarkMode = (state = false) => {
     document.documentElement.setAttribute("data-theme", "dark");
     document.documentElement.classList.add('dark')
   } else {
-    document.documentElement.setAttribute("data-theme", "light");       
+    document.documentElement.setAttribute("data-theme", "light");
     document.documentElement.classList.remove('dark')
   }
 }
@@ -41,40 +83,4 @@ onMounted(() => {
   setDarkMode(state)
 })
 
-</script>
-
-<template>
-  <nav class="h-20 flex items-center justify-between">
-    <NuxtLink to="/">
-      <div class="logo flex items-center">
-        <img width="48" height="48" class="rounded-md overflow-hidden mr-6" src="/logo.png" alt="earth-worm-logo">
-        <h1 class="text-2xl leading-none font-black leading-normal text-wrap text-fuchsia-400">Earthworm</h1>
-      </div>
-    </NuxtLink>
-    <div class="flex items-center">
-      <button v-if="!userInfo && route.name !== 'Auth-Login'" class="btn btn-sm btn-ghost mx-1 h-8 px-2" @click="handleLogin">
-        Log in
-      </button> 
-      <button v-else-if="!userInfo && route.name !== 'Auth-Signup' " class="btn btn-sm btn-ghost mx-1 h-8 px-2" @click="handleSignup">
-        Sign up
-      </button>
-      <div v-else class="dropdown dropdown-end">
-        <button tabindex="0" class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
-          </svg>
-        </button>
-        <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-32">
-          <li><a>User info</a></li>
-          <li @click="handleLogout"><a>Log out</a></li>
-          <!-- <li><a>Item 2</a></li> -->
-        </ul>
-      </div>
-      <button class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0" @click="toggleDarkMode">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
-        </svg>
-      </button>
-    </div>
-  </nav>
-</template>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/apps/client/components/CourseItemCard/index.vue b/apps/client/components/courses/CourseCard.vue
similarity index 95%
rename from apps/client/components/CourseItemCard/index.vue
rename to apps/client/components/courses/CourseCard.vue
index a31c88df3..887f0c8bf 100644
--- a/apps/client/components/CourseItemCard/index.vue
+++ b/apps/client/components/courses/CourseCard.vue
@@ -1,13 +1,13 @@
-<script setup lang="ts">
-defineProps<{
-  title: string
-}>()
-</script>
-
 <template>
   <div class="w-[330px] h-[220px] flex flex-col cursor-pointer border border-slate-400 rounded-xl px-6 py-4 hover:shadow-lg hover:shadow-purple-400/50 hover:border-purple-400 transition-all mb-4">
     <p class="text-2xl leading-loose font-bold">{{ title }}</p>
     <div class="mb-4"></div>
     <div>this is the course's description</div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string
+}>()
+</script>
\ No newline at end of file
diff --git a/apps/client/components/main/Answer.vue b/apps/client/components/main/Answer.vue
index 711d97cfc..53af8ce71 100644
--- a/apps/client/components/main/Answer.vue
+++ b/apps/client/components/main/Answer.vue
@@ -2,17 +2,11 @@
   <div class="text-center mb-20 mt-10">
     <div class="text-5xl mb-3 text-fuchsia-500 dark:text-gray-50">
       {{ courseStore.currentStatement?.english }}
-      <svg
-        class="w-7 h-7 inline-block ml-1 cursor-pointer"
-        viewBox="0 0 1024 1024"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        @click="handlePlaySound"
-      >
+      <svg class="w-7 h-7 inline-block ml-1 cursor-pointer" viewBox="0 0 1024 1024" version="1.1"
+        xmlns="http://www.w3.org/2000/svg" @click="handlePlaySound">
         <path
           d="M342.4 384H128v256h214.4L576 826.8V197.2L342.4 384zM64 320h256L640 64v896L320 704H64V320z m640 256h256v-64H704v64z m16.8 159.5l181 181 45.3-45.3-181-181-45.3 45.3z m33.9-343.9l181-181-45.3-45.3-181 181 45.3 45.3z"
-          fill="#666666"
-        ></path>
+          fill="#666666"></path>
       </svg>
     </div>
     <div class="text-2xl text-slate-600">
@@ -20,8 +14,7 @@
     </div>
     <button
       class="border-solid border-2 border-slate-400 bg-slate-100 dark:bg-fuchsia-500 rounded-lg mt-8 mb-11 indent-1 h-10 text-2xl pl-10 pr-10 hover:bg-slate-200"
-      @click="goToNextQuestion"
-    >
+      @click="goToNextQuestion">
       next
     </button>
   </div>
@@ -30,8 +23,9 @@
 <script setup lang="ts">
 import { useCourseStore } from "~/store/course";
 import { registerShortcut, cancelShortcut } from "~/utils/keyboardShortcuts";
-import { useMode } from "./game";
-import { useSummary } from "./summary";
+import { useGameMode } from "~/composables/main/game";
+import { useSummary } from "~/composables/main/summary";
+import { useCurrentStatementEnglishSound } from '~/composables/main/englishSound';
 
 const courseStore = useCourseStore();
 registerShortcutKeyForNextQuestion();
@@ -67,7 +61,7 @@ function registerShortcutKeyForNextQuestion() {
 }
 
 function goToNextQuestion() {
-  const { showQuestion } = useMode();
+  const { showQuestion } = useGameMode();
   const { showSummary } = useSummary();
 
   if (courseStore.isAllDone()) {
@@ -78,5 +72,4 @@ function goToNextQuestion() {
   courseStore.toNextStatement();
   showQuestion();
 }
-</script>
-~/store/course-new
+</script>
\ No newline at end of file
diff --git a/apps/client/components/main/CourseProgress.vue b/apps/client/components/main/CourseProgress.vue
index 3fe006938..1090e1723 100644
--- a/apps/client/components/main/CourseProgress.vue
+++ b/apps/client/components/main/CourseProgress.vue
@@ -1,23 +1,15 @@
 <template>
-  <progress class="progress w-56 m-2" :value="currentSchedule" :max="max"></progress>
-  <div class="text-center">({{ currentSchedule }} / {{ max }})</div>
+  <progress class="progress w-56 m-2" :value="currentSchedule" :max="courseStore.totalQuestionsCount"></progress>
+  <div class="text-center">({{ currentSchedule }} / {{ courseStore.totalQuestionsCount }})</div>
 </template>
 
 <script setup lang="ts">
-import { useCourseStore  } from "~/store/course";
+import { useCourseStore } from "~/store/course";
 
 const courseStore = useCourseStore();
 
-
 const currentSchedule = computed(() => {
   return courseStore.statementIndex + 1;
 });
 
-const max = computed(() => {
-  return courseStore.currentCourse?.statements.length || 0;
-});
-
 </script>
-
-<style scoped></style>
-~/store/course~/store/course-new
\ No newline at end of file
diff --git a/apps/client/components/main/Game.vue b/apps/client/components/main/Game.vue
index f73d98481..1240f7394 100644
--- a/apps/client/components/main/Game.vue
+++ b/apps/client/components/main/Game.vue
@@ -22,9 +22,9 @@ import Answer from "./Answer.vue";
 import CourseProgress from "./CourseProgress.vue";
 import Summary from "./Summary.vue";
 import Tips from "./Tips.vue";
-import { useMode } from "./game";
+import { useGameMode } from "~/composables/main/game";
 
-const { mode } = useMode();
+const { mode } = useGameMode();
 </script>
 
-<style scoped></style>
+<style scoped></style>
\ No newline at end of file
diff --git a/apps/client/components/main/Question.vue b/apps/client/components/main/Question.vue
index 9ad3f6787..fb62c7bdd 100644
--- a/apps/client/components/main/Question.vue
+++ b/apps/client/components/main/Question.vue
@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 import { useCourseStore } from "~/store/course";
-import { useMode } from "./game";
+import { useGameMode } from "~/composables/main/game";
 
 const courseStore = useCourseStore();
 const { userInputWords, activeInputIndex, inputValue } = useInput();
@@ -62,7 +62,7 @@ function useInput() {
 }
 
 function registerShortcutKeyForInputEl() {
-  const { showAnswer } = useMode();
+  const { showAnswer } = useGameMode();
 
   function handleKeyup(e: KeyboardEvent) {
     if (e.code === "Enter") {
@@ -139,5 +139,4 @@ function useFocus() {
 .active {
   border-bottom: 3px solid #1e80ff !important;
 }
-</style>
-~/store/course-new~/store/course
+</style>
\ No newline at end of file
diff --git a/apps/client/components/main/Summary.vue b/apps/client/components/main/Summary.vue
index cbb8fc959..605c3f8d0 100644
--- a/apps/client/components/main/Summary.vue
+++ b/apps/client/components/main/Summary.vue
@@ -1,19 +1,13 @@
 <template>
   <div>
     <n-modal v-model:show="showModal" transform-origin="center">
-      <n-card
-        style="width: 800px; height: 400px"
-        title="结算面板"
-        :bordered="false"
-        size="huge"
-        role="dialog"
-        aria-modal="true"
-      >
+      <n-card style="width: 800px; height: 400px" title="结算面板" :bordered="false" size="huge" role="dialog"
+        aria-modal="true">
         不错不错 又学到了那么多句子和单词 加油 坚持就是胜利:)
         <template #footer>
           <div class="flex">
             <n-button @click="handleDoAgain">再来一次</n-button>
-            <n-button @click="handleToNextCourse">开始下一课</n-button>
+            <n-button @click="handleGoToNextCourse">开始下一课</n-button>
           </div>
         </template>
       </n-card>
@@ -23,29 +17,52 @@
 
 <script setup lang="ts">
 import { useCourseStore } from "~/store/course";
-import { useSummary } from "./summary";
-import { useMode } from "./game";
+import { useSummary } from "~/composables/main/summary";
+import { useGameMode } from "~/composables/main/game";
 
 const courseStore = useCourseStore();
-const { showQuestion } = useMode();
 const { showModal, hideSummary } = useSummary();
-const router = useRouter();
 
-function handleDoAgain() {
-  courseStore.doAgain();
-  hideSummary();
-  showQuestion();
+const { handleDoAgain } = useDoAgain()
+const { handleGoToNextCourse } = useGoToNextCourse()
+
+
+function useDoAgain() {
+  const { showQuestion } = useGameMode();
+
+  function handleDoAgain() {
+    courseStore.doAgain();
+    hideSummary();
+    showQuestion();
+  }
+
+  return {
+    handleDoAgain
+  }
+
 }
 
-async function handleToNextCourse() {
-  const course = await courseStore.toNextCourse(
-    +router.currentRoute.value.params.id
-  );
-  router.push(`/main/${course.value.id}`);
-  hideSummary();
-  showQuestion();
+function useGoToNextCourse() {
+  const { showQuestion } = useGameMode();
+  const router = useRouter();
+
+  async function handleGoToNextCourse() {
+    await courseStore.goToNextCourse(
+      +router.currentRoute.value.params.id
+    );
+
+    router.push(`/main/${courseStore.currentCourse?.id}`);
+    hideSummary();
+    showQuestion();
+  }
+
+
+  return {
+    handleGoToNextCourse
+  };
 }
+
+
 </script>
 
-<style scoped></style>
-~/store/course~/store/course-new
\ No newline at end of file
+<style scoped></style>
\ No newline at end of file
diff --git a/apps/client/components/main/Tips.vue b/apps/client/components/main/Tips.vue
index b7e6e3c11..b1c16d96a 100644
--- a/apps/client/components/main/Tips.vue
+++ b/apps/client/components/main/Tips.vue
@@ -12,8 +12,9 @@
 </template>
 
 <script setup lang="ts">
-import { useMode } from "./game";
+import { useGameMode } from "~/composables/main/game";
 import { registerShortcut, cancelShortcut } from "~/utils/keyboardShortcuts";
+import { useCurrentStatementEnglishSound } from '~/composables/main/englishSound';
 
 
 const { handlePlaySound } = usePlaySound()
@@ -41,7 +42,7 @@ function usePlaySound() {
 }
 
 function useShowAnswer() {
-  const { showAnswer } = useMode();
+  const { showAnswer } = useGameMode();
 
   onMounted(() => {
     registerShortcut("ctrl+n", handleShowAnswer);
@@ -60,4 +61,4 @@ function useShowAnswer() {
   }
 
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/apps/client/components/main/Tool.vue b/apps/client/components/main/Tool.vue
index 9427ef6fd..f58418868 100644
--- a/apps/client/components/main/Tool.vue
+++ b/apps/client/components/main/Tool.vue
@@ -3,7 +3,7 @@
     <div>
       <NuxtLink href="/courses"> 更多课程 </NuxtLink>
     </div>
-    <div>{{ coursesStore.currentCourse.title }}</div>
+    <div>{{ coursesStore.currentCourse?.title }}</div>
     <div>
       <button @click="handleDoAgain">重新开始</button>
     </div>
@@ -12,16 +12,24 @@
 
 <script setup lang="ts">
 import { useCourseStore } from "~/store/course";
-import { useMode } from "./game";
+import { useGameMode } from "~/composables/main/game";
 
 const coursesStore = useCourseStore();
-const { showQuestion } = useMode();
+const { handleDoAgain } = useDoAgain()
+
+function useDoAgain() {
+  const { showQuestion } = useGameMode();
+
+  function handleDoAgain() {
+    coursesStore.doAgain();
+    showQuestion()
+  }
+
+  return {
+    handleDoAgain
+  }
 
-function handleDoAgain() {
-  coursesStore.doAgain();
-  showQuestion()
 }
-</script>
 
-<style scoped></style>
-~/store/course~/store/course-new
\ No newline at end of file
+
+</script>
diff --git a/apps/client/composables/useEnglishSound.ts b/apps/client/composables/main/englishSound.ts
similarity index 86%
rename from apps/client/composables/useEnglishSound.ts
rename to apps/client/composables/main/englishSound.ts
index bd38e80bd..7f6d928cc 100644
--- a/apps/client/composables/useEnglishSound.ts
+++ b/apps/client/composables/main/englishSound.ts
@@ -18,8 +18,7 @@ export function useCurrentStatementEnglishSound() {
   const coursesStore = useCourseStore();
 
   watchEffect(() => {
-    word.value = coursesStore.currentStatement?.english;
-    console.log(word)
+    word.value = coursesStore.currentStatement?.english || "";
   });
 
   const sound = useEnglishSound(word);
@@ -28,5 +27,3 @@ export function useCurrentStatementEnglishSound() {
     sound,
   };
 }
-
-
diff --git a/apps/client/components/main/game.ts b/apps/client/composables/main/game.ts
similarity index 88%
rename from apps/client/components/main/game.ts
rename to apps/client/composables/main/game.ts
index a0039945c..2424ce914 100644
--- a/apps/client/components/main/game.ts
+++ b/apps/client/composables/main/game.ts
@@ -1,6 +1,6 @@
 const mode = ref<"question" | "answer">("question");
 
-export function useMode() {
+export function useGameMode() {
   function showAnswer() {
     mode.value = "answer";
   }
diff --git a/apps/client/components/main/summary.ts b/apps/client/composables/main/summary.ts
similarity index 100%
rename from apps/client/components/main/summary.ts
rename to apps/client/composables/main/summary.ts
diff --git a/apps/client/layouts/default.vue b/apps/client/layouts/default.vue
index b973e3876..cae0eb1e9 100644
--- a/apps/client/layouts/default.vue
+++ b/apps/client/layouts/default.vue
@@ -1,7 +1,3 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
   <div class="w-full h-full bg-white dark:bg-slate-900 transition-colors dark:text-slate-300 text-slate-600">
     <div class="flex flex-col min-h-100vh min-h-screen xl:w-[1200px] m-auto xl:px-2 px-24">
@@ -12,4 +8,4 @@
       <Footer></Footer>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/apps/client/pages/Courses.vue b/apps/client/pages/Courses.vue
index ca2824059..2372dd4f6 100644
--- a/apps/client/pages/Courses.vue
+++ b/apps/client/pages/Courses.vue
@@ -2,38 +2,23 @@
   <div class=" p-16 relative  h-screen flex flex-col ">
     <div>
       <Link href="/">
-        <svg
-          viewBox="0 0 24 24"
-          width="1.2em"
-          height="1.2em"
-          class="absolute right-20 top-5 mr-2 h-7 w-7 cursor-pointer
-            text-gray-400 dark:text-indigo-500"
-        >
-          <path
-            fill="none"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M18 6L6 18M6 6l12 12"
-          ></path>
-        </svg>
+      <svg viewBox="0 0 24 24" width="1.2em" height="1.2em" class="absolute right-20 top-5 mr-2 h-7 w-7 cursor-pointer
+            text-gray-400 dark:text-indigo-500">
+        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M18 6L6 18M6 6l12 12"></path>
+      </svg>
       </Link>
       <h1 class="m-4 text-3xl text-indigo-500 ml-0 ">English Course</h1>
     </div>
     <div class="overflow-y-auto scrollbar-hide h-full">
-      <ul
-        class="flex gap-14  flex-wrap p-1 overflow-y-auto md:justify-start justify-center"
-      >
+      <ul class="flex gap-14  flex-wrap p-1 overflow-y-auto md:justify-start justify-center">
         <template v-for="course in courses" :key="course.id">
           <li>
             <NuxtLink class="truncate" :href="`/main/${course.id}`">
-              <div
-                class="w-52 h-24 bg-indigo-500 rounded-md p-1 
+              <div class="w-52 h-24 bg-indigo-500 rounded-md p-1 
         shadow-lg hover:bg-indigo-700  cursor-pointer 
-        flex justify-center items-center transition-colors text-slate-200"
-              >
-                {{course.title}}
+        flex justify-center items-center transition-colors text-slate-200">
+                {{ course.title }}
               </div>
             </NuxtLink>
           </li>
diff --git a/apps/client/pages/Main/[id].vue b/apps/client/pages/Main/[id].vue
index 0d9d9cb15..a1de43e28 100644
--- a/apps/client/pages/Main/[id].vue
+++ b/apps/client/pages/Main/[id].vue
@@ -15,6 +15,3 @@ const coursesStore = useCourseStore();
 
 await coursesStore.setup(+route.params.id);
 </script>
-
-<style scoped></style>
-~/store/course~/store/course-new
\ No newline at end of file
diff --git a/apps/client/store/course.ts b/apps/client/store/course.ts
index 7d5af3b4c..ee1208276 100644
--- a/apps/client/store/course.ts
+++ b/apps/client/store/course.ts
@@ -15,7 +15,6 @@ export interface Course {
   statements: Statement[];
 }
 
-
 export const useCourseStore = defineStore("course", () => {
   const currentCourse = ref<Course>();
   const statementIndex = ref(0);
@@ -30,6 +29,10 @@ export const useCourseStore = defineStore("course", () => {
     return currentStatement.value?.english.split(" ").length || 1;
   });
 
+  const totalQuestionsCount = computed(() => {
+    return currentCourse.value?.statements.length || 0;
+  });
+
   function toNextStatement() {
     statementIndex.value = statementIndex.value + 1;
 
@@ -51,11 +54,13 @@ export const useCourseStore = defineStore("course", () => {
     );
   }
 
-  async function toNextCourse(cId: number) {
+  async function goToNextCourse(cId: number) {
     const nextCourse = await fetchNextCourse(cId);
+    if(!nextCourse) return false
+
     currentCourse.value = nextCourse;
     statementIndex.value = 0;
-    return currentCourse;
+    return true;
   }
 
   async function setup(courseId: number) {
@@ -71,7 +76,8 @@ export const useCourseStore = defineStore("course", () => {
     currentCourse,
     currentStatement,
     wordCount,
-    toNextCourse,
+    totalQuestionsCount,
+    goToNextCourse,
     setup,
     doAgain,
     isAllDone,
diff --git a/apps/client/store/todo.ts b/apps/client/store/todo.ts
deleted file mode 100644
index f1f4d1c7b..000000000
--- a/apps/client/store/todo.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { defineStore } from "pinia";
-
-interface Todo {
-  title: string;
-}
-export const useTodoStore = defineStore("todo", () => {
-  const todos = ref<Todo[]>();
-
-  return {
-	todos
-  };
-});