feat: fetch course data from api

Author: cuixiaorui

apps/api/src/app.module.ts

@@ -4,9 +4,10 @@ import { AppService } from './app.service';
 import { GlobalModule } from './global/global.mudule';
 import { UserModule } from './user/user.module';
 import { AuthModule } from './auth/auth.module';
+import { CourseModule } from './course/course.module';
 
 @Module({
-  imports: [GlobalModule, UserModule, AuthModule],
+  imports: [GlobalModule, UserModule, AuthModule, CourseModule],
   controllers: [AppController],
   providers: [AppService],
 })

apps/api/src/app.service.ts

@@ -1,11 +1,11 @@
 import { Inject, Injectable } from '@nestjs/common';
 import { DB, DbType } from './global/providers/db.provider';
-import {course} from '@earthwrom/shared'
+import { course } from '@earthwrom/shared';
 
 @Injectable()
 export class AppService {
-  constructor(@Inject(DB) private db:  DbType) {}
+  constructor(@Inject(DB) private db: DbType) {}
   async getHello() {
-    return await this.db.select().from(course)
+    return await this.db.select().from(course);
   }
 }

apps/api/src/course/course.controller.ts

@@ -0,0 +1,12 @@
+import { Controller, Get, Param } from '@nestjs/common';
+import { CourseService } from './course.service';
+
+@Controller('courses')
+export class CourseController {
+  constructor(private courseService: CourseService) {}
+
+  @Get(':courseId')
+  getStatements(@Param('courseId') courseId: number) {
+    return this.courseService.find(courseId);
+  }
+}

apps/api/src/course/course.module.ts

@@ -0,0 +1,11 @@
+import { Module } from '@nestjs/common';
+import { CourseService } from './course.service';
+import { CourseController } from './course.controller';
+import { GlobalModule } from '../global/global.mudule';
+
+@Module({
+  imports: [GlobalModule],
+  providers: [CourseService],
+  controllers: [CourseController],
+})
+export class CourseModule {}

apps/api/src/course/course.service.ts

@@ -0,0 +1,38 @@
+import { DB, DbType } from '../global/providers/db.provider';
+import { eq, asc } from 'drizzle-orm';
+import { statement, course } from '@earthwrom/shared';
+import { Injectable, Inject } from '@nestjs/common';
+
+@Injectable()
+export class CourseService {
+  constructor(@Inject(DB) private db: DbType) {}
+
+  async find(courseId: number) {
+    const courseResult = await this.db
+      .select({
+        id: course.id,
+        title: course.title,
+      })
+      .from(course)
+      .where(eq(course.id, courseId));
+
+    const statementsResult = await this.db
+      .select({
+        id: statement.id,
+        chinese: statement.chinese,
+        english: statement.english,
+        soundmark: statement.soundmark,
+      })
+      .from(statement)
+      .where(eq(statement.courseId, courseId))
+      .orderBy(asc(statement.order));
+
+    const finalResult = {
+      id: courseResult[0].id,
+      title: courseResult[0].title,
+      statements: statementsResult,
+    };
+
+    return finalResult;
+  }
+}

apps/client/api/courses.ts

@@ -0,0 +1,14 @@
+import { useFetchPlus } from "~/composables/useFetch";
+
+interface Course {
+  title: string;
+  id: number;
+}
+
+export async function fetchCourse(courseId: number) {
+  const { data: courses } = await useFetchPlus<Course[]>(
+    `/courses/${courseId}`
+  );
+
+  return courses;
+}

apps/client/components/main/Question.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="text-5xl text-center mb-20 mt-10">
     <div class="text-fuchsia-500 dark:text-gray-50">
-      {{ currentStatement?.chinese }}
+      {{ coursesStore.currentStatement?.chinese }}
     </div>
     <div class="code-box">
       <template v-for="i in lineNum" :key="i">
@@ -36,7 +36,7 @@ import { useCoursesStore } from "~/store/courses";
 
 const emit = defineEmits(["bingo"]);
 
-const { currentStatement, checkCorrect } = useCoursesStore();
+const coursesStore  = useCoursesStore();
 
 const lineNum = ref(1);
 const focusing = ref(true);
@@ -47,8 +47,9 @@ const activeInputIndex = computed(() => {
   return Math.min(words.value.length - 1, lineNum.value - 1);
 });
 
+
 watchEffect(() => {
-  lineNum.value = currentStatement?.english.split(" ").length || 1;
+  lineNum.value = coursesStore.currentStatement?.english.split(" ").length || 1;
 });
 
 watchEffect(() => {
@@ -57,7 +58,7 @@ watchEffect(() => {
 
 function handleKeyDown(e: KeyboardEvent) {
   if (e.code === "Enter") {
-    if (checkCorrect(inputValue.value.trim())) {
+    if (coursesStore.checkCorrect(inputValue.value.trim())) {
       emit("bingo");
     }
     inputValue.value = "";

apps/client/pages/Main/[id].vue

@@ -15,7 +15,9 @@ import { useCoursesStore } from "~/store/courses";
 const route = useRoute();
 const coursesStore = useCoursesStore();
 
-await coursesStore.fetchCourseData(route.params.id as string);
+onMounted(async () => {
+  await coursesStore.setup(+route.params.id);
+});
 </script>
 
 <style scoped></style>

apps/client/store/courses.ts

@@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+import { fetchCourse } from "~/api/courses";
 
 interface Statement {
   id: number;
@@ -7,14 +8,17 @@ interface Statement {
   soundmark: string;
 }
 
-type Course = { statements: Statement[] };
+type Course = { id: number; title: string; statements: Statement[] };
 
 export const useCoursesStore = defineStore("courses", () => {
   const currentCourse = ref<Course>();
   const statementIndex = ref(0);
-  const currentStatement = computed(() => {
-    return currentCourse.value?.statements[statementIndex.value];
-  })
+  const currentStatement = ref<Statement>();
+
+  watchEffect(() => {
+    currentStatement.value =
+      currentCourse.value?.statements[statementIndex.value];
+  });
 
   function toNextStatement() {
     statementIndex.value = statementIndex.value + 1;
@@ -29,35 +33,17 @@ export const useCoursesStore = defineStore("courses", () => {
     );
   }
 
-  async function fetchCourseData(courseId: string) {
-    const courseData = {
-      "1": {
-        title: "第一课",
-        statements: [
-          {
-            id: 1,
-            chinese: "我",
-            english: "I",
-            soundmark: "/aɪ/",
-          },
-          {
-            id: 2,
-            chinese: "不",
-            english: "don't",
-            soundmark: "/dont/",
-          },
-        ],
-      },
-    };
-
-    currentCourse.value = courseData[courseId];
+  async function setup(courseId: number) {
+    const course = await fetchCourse(courseId);
+    currentCourse.value = course.value;
   }
 
+
   return {
     statementIndex,
     currentCourse,
     currentStatement,
-    fetchCourseData,
+    setup,
     checkCorrect,
     toNextStatement,
   };