feat: call api list exams of category

src/api/RepositoryFactory.ts

@@ -1,8 +1,10 @@
 import homeRepository from "./homeRepository";
+import examRepository from "./examsRepository";
 
 
 const repositories = {
   home: homeRepository,
+  exams: examRepository,
 };
 
 export const RepositoryFactory = {

src/components/Box.vue

@@ -2,10 +2,14 @@
     <router-link to="/" >
       <div class="md:flex mb-6 gap-6 p-2 hover:bg-slate-100 rounded-md">
         <div class="md:w-4/12 h-fit">
-          <img src="https://api.baitaptracnghiem.com/storage/images/vfOcrwr1mmEuj1HEE6jPFgQ4Hu2SdoFk7Z4bc09y.jpg" alt="exercise-background" class="w-fit rounded-lg object-contain"/>
+
+          <img
+            v-lazy="{ src: props.avatar }"  
+            class="w-full rounded-lg object-cover h-32"
+          />
         </div>
         <div class="flex flex-col justify-between">
-          <h1 class="text-xl text-[#2b2d38] font-bold my-5 md:my-0">Bài tập trắc nghiệm về cực trị của hàm số</h1>
+          <h1 class="text-xl text-[#2b2d38] font-bold my-5 md:my-0">{{ props.name }}</h1>
           <p class="text-[#8189a9] text-md hidden md:block">
             Bài tập trắc nghiệm cực trị của hàm số có đáp án chi tiết hay nhất được tổng hợp giúp các bạn ôn luyện lại các kiến thức đã học
           </p>
@@ -17,4 +21,15 @@
 
 <script setup>
   import Category from "@/components/Button/Category.vue";
+
+  const props = defineProps({
+    name: {
+      type: String,
+      required: true,
+    },
+    avatar: {
+      type: String,
+      required: true,
+    },
+  });
 </script>

src/components/ListBox.vue

@@ -1,9 +1,21 @@
 <template lang="">
   <div>
-    <Box v-for="n in 10" :key="n"/>
+    <Box 
+      v-for="exam in exams.data" 
+      :key="exam.slug"
+      :name="exam.name"
+      :avatar="exam.avatar"
+    />
   </div>
 </template>
 
 <script setup>
   import Box from "@/components/Box.vue";
+
+  const props = defineProps({
+    exams: {
+      type: Object,
+      required: true,
+    }
+  });
 </script>

src/views/ExercisePage.vue

@@ -1,9 +1,32 @@
 <template lang="">
-  <div>
-    <ListBox/>
+  <div v-if="examsData.value && examsData.value.exams">
+    <ListBox 
+      :exams = "examsData.value.exams"
+    />
   </div>
 </template>
 
 <script setup>
   import ListBox from "@/components/ListBox.vue";
+  import { useRoute } from 'vue-router';
+  import { computed, watch, reactive } from "vue";
+  import { RepositoryFactory } from "@/api/RepositoryFactory";
+  import { useLoadingStore } from "@/store/loading";
+
+  const loadingStore = useLoadingStore();
+  const examsData = reactive([]);
+
+  const route = useRoute();
+  watch(() => route.path, async () => {
+    const classId = route.params.classId;
+    const ExamRepository = RepositoryFactory.get("exams");
+
+    loadingStore.changeLoadingState(true);
+    const { data } = await ExamRepository.get(classId);
+    loadingStore.changeLoadingState(false);
+    
+    examsData.value = data;
+  }, { immediate: true });
+  
+  
 </script>