feat: complete dashboard mvp

src/routes/courses/[id]/+page.svelte

@@ -1,27 +1,10 @@
 <script>
   import Overview from '$lib/components/Course/index.svelte';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import { setCourse } from '$lib/components/Course/store';
-  import { fetchCourse } from '$lib/utils/services/courses';
-  import { browser } from '$app/environment';
 
   export let data;
-  const { courseId } = data;
-
-  let prevCourseId = '';
-
-  async function onCourseIdChange(courseId = '') {
-    if (!courseId || prevCourseId === courseId || !browser) return;
-
-    const { data: _data } = await fetchCourse(courseId);
-
-    setCourse(_data);
-    prevCourseId = courseId;
-  }
-
-  $: onCourseIdChange(courseId);
 </script>
 
-<CourseContainer>
+<CourseContainer bind:courseId={data.courseId}>
   <Overview />
 </CourseContainer>

src/routes/courses/[id]/attendance/+page.svelte

@@ -15,9 +15,8 @@
   import PageNav from '$lib/components/PageNav/index.svelte';
   import PageBody from '$lib/components/PageBody/index.svelte';
   import Box from '$lib/components/Box/index.svelte';
-  import { course, group, setCourse } from '$lib/components/Course/store';
+  import { course, group } from '$lib/components/Course/store';
   import { getLectureNo } from '$lib/components/Course/function';
-  import { fetchCourse } from '$lib/utils/services/courses';
   import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
   import { ROLE } from '$lib/utils/constants/roles';
   import { takeAttendance } from '$lib/utils/services/attendance';
@@ -27,6 +26,7 @@
   import type { GroupPerson, Lesson } from '$lib/utils/types/index';
 
   export let data;
+
   interface CourseData {
     attendance: {
       student_id: string;
@@ -127,12 +127,6 @@
       }
       return;
     }
-
-    const { data: _data } = await fetchCourse(data.courseId);
-    if (!_data) return;
-
-    setCourse(_data);
-    setAttendance(_data);
   });
 
   $: students = isStudent
@@ -140,7 +134,7 @@
     : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
 </script>
 
-<CourseContainer bind:isStudent>
+<CourseContainer bind:isStudent bind:courseId={data.courseId}>
   <PageNav title="Attendance" />
   <PageBody width="w-full max-w-6xl md:w-11/12">
     <section class="flex items-center mx-2 lg:mx-9 my-5">

src/routes/courses/[id]/certificates/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
   import PageBody from '$lib/components/PageBody/index.svelte';
@@ -13,22 +12,14 @@
   // import { Tabs, Tab } from 'carbon-components-svelte';
   // import TabContent from 'carbon-components-svelte/src/Tabs/TabContent.svelte';
   import StudentCertificate from '$lib/components/Course/components/Ceritficate/StudentCertificate/Index.svelte';
-  import { fetchCourse } from '$lib/utils/services/courses';
-  import { browser } from '$app/environment';
 
   export let courseId: string = '';
   let isStudent = false;
-
-  onMount(async () => {
-    if ($course.id || !browser) return;
-    const { data } = await fetchCourse(courseId);
-    setCourse(data);
-  });
 </script>
 
 <IssueCertificateModal />
 
-<CourseContainer bind:isStudent>
+<CourseContainer bind:isStudent bind:courseId>
   <PageNav title="Certificates" disableSticky={true}>
     <slot:fragment slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>

src/routes/courses/[id]/landingpage/+page.svelte

@@ -2,28 +2,19 @@
   import { fly } from 'svelte/transition';
   import CourseLandingPage from '$lib/components/CourseLandingPage/index.svelte';
   import Editor from '$lib/components/CourseLandingPage/components/Editor/index.svelte';
-  import { profile } from '$lib/utils/store/user';
-  import { setCourse, course } from '$lib/components/Course/store';
+  import { course } from '$lib/components/Course/store';
   import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
-  import { fetchCourse } from '$lib/utils/services/courses';
-  import { browser } from '$app/environment';
 
   export let data;
+
   const { courseId } = data;
 
   let courseData = {};
 
-  async function triggerSetCourse(_profile) {
-    if ($course.id || !browser) return;
-    const { data: _data } = await fetchCourse(courseId);
-    setCourse(_data);
-  }
-
   function setCourseData(course = {}, lessons) {
     courseData = { ...course, lessons };
   }
 
-  $: triggerSetCourse($profile);
   $: setCourseData($course, $lessons);
   $: console.log('courseData changed', courseData);
 </script>

src/routes/courses/[id]/lessons/+page.svelte

@@ -17,7 +17,7 @@
   import TextField from '$lib/components/Form/TextField.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
   import Select from '$lib/components/Form/Select.svelte';
-  import { fetchCourse, updateLesson } from '$lib/utils/services/courses';
+  import { updateLesson } from '$lib/utils/services/courses';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import { profile } from '$lib/utils/store/user';
   import {
@@ -25,14 +25,13 @@
     handleSaveLesson,
     handleDelete
   } from '$lib/components/Course/components/Lesson/store/lessons';
-  import { course, setCourse, group } from '$lib/components/Course/store';
+  import { course, group } from '$lib/components/Course/store';
   import PageBody from '$lib/components/PageBody/index.svelte';
   import TextChip from '$lib/components/Chip/Text.svelte';
   import Avatar from '$lib/components/Apps/components/Poll/components/Avatar.svelte';
   import AddLessonModal from '$lib/components/Course/components/Lesson/AddLessonModal.svelte';
 
   export let data;
-  const { courseId } = data;
 
   let lessonEditing;
   let isStudent = true;
@@ -85,12 +84,6 @@
     }
   }
 
-  onMount(async () => {
-    if ($course.id) return;
-    const { data: _data } = await fetchCourse(courseId);
-    setCourse(_data);
-  });
-
   $: {
     const user = $group.people.find((person) => person.profile_id === $profile.id);
 
@@ -102,7 +95,7 @@
 
 <AddLessonModal {isStudent} bind:openModal />
 
-<CourseContainer bind:isStudent>
+<CourseContainer bind:isStudent bind:courseId={data.courseId}>
   <PageNav title="Lessons">
     <div slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>

src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte

@@ -58,13 +58,7 @@
     isFetching = true;
 
     let lessonData;
-    if (!$course.id) {
-      const { data: _data } = await fetchCourse(data.courseId);
-
-      lessonData = _data?.lessons.find((lesson) => lesson.id === lessonId);
-
-      setCourse(_data);
-    } else if (isMaterialsTabActive) {
+    if (isMaterialsTabActive) {
       const lesson = await fetchLesson(lessonId);
       lessonData = lesson.data;
     }
@@ -222,6 +216,7 @@
   bind:isStudent
   {path}
   isExercisePage={!data.isMaterialsTabActive && data.exerciseId}
+  bind:courseId={data.courseId}
 >
   <PageNav
     bind:hideOnMobile={isStudent}

src/routes/courses/[id]/marks/+page.svelte

@@ -6,9 +6,9 @@
   import PageBody from '$lib/components/PageBody/index.svelte';
   import Box from '$lib/components/Box/index.svelte';
   import { ROLE } from '$lib/utils/constants/roles';
-  import { setCourse, course, group } from '$lib/components/Course/store';
+  import { group } from '$lib/components/Course/store';
   import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
-  import { fetchCourse, fetchExercisesByMarks } from '$lib/utils/services/courses';
+  import { fetchExercisesByMarks } from '$lib/utils/services/courses';
   import { getLectureNo } from '$lib/components/Course/function';
   import { fetchMarks } from '$lib/utils/services/marks';
   import { profile } from '$lib/utils/store/user';
@@ -34,11 +34,6 @@
   }
 
   onMount(async () => {
-    if (!$course.id) {
-      const { data } = await fetchCourse(courseId);
-      setCourse(data);
-    }
-
     const { data: marks } = await fetchMarks(courseId);
 
     marks.forEach((mark) => {
@@ -80,7 +75,7 @@
     : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
 </script>
 
-<CourseContainer bind:isStudent>
+<CourseContainer bind:isStudent bind:courseId={data.courseId}>
   <PageNav title="Marks" />
 
   <PageBody width="w-full max-w-6xl md:w-11/12">

src/routes/courses/[id]/people/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import TextChip from '$lib/components/Chip/Text.svelte';
   import ComingSoon from '$lib/components/ComingSoon/index.svelte';
-  import { onMount } from 'svelte';
   import copy from 'copy-to-clipboard';
   import {
     CopyButton,
@@ -13,7 +12,7 @@
     StructuredListRow
   } from 'carbon-components-svelte';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import { fetchCourse, deleteGroupMember, updatedGroupMember } from '$lib/utils/services/courses';
+  import { deleteGroupMember, updatedGroupMember } from '$lib/utils/services/courses';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
   import PageBody from '$lib/components/PageBody/index.svelte';
@@ -21,7 +20,7 @@
   import Select from '$lib/components/Form/Select.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
   import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
-  import { setCourse, course, group } from '$lib/components/Course/store';
+  import { group } from '$lib/components/Course/store';
   import InviationModal from '$lib/components/Course/components/People/InviationModal.svelte';
   import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
   import {
@@ -36,7 +35,6 @@
   import type { GroupPerson } from '$lib/utils/types';
 
   export let data;
-  const { courseId } = data;
 
   let people: Array<Person> = [];
   let member: { id?: string; email?: string; profile?: { email: string } } = {};
@@ -105,12 +103,6 @@
     }
   }
 
-  onMount(async () => {
-    if ($course.id) return;
-    const { data } = await fetchCourse(courseId);
-    setCourse(data);
-  });
-
   $: sortAndFilterPeople($group.people, filterBy);
 </script>
 
@@ -121,7 +113,7 @@
   {deletePerson}
 />
 
-<CourseContainer bind:isStudent>
+<CourseContainer bind:isStudent bind:courseId={data.courseId}>
   <PageNav title="People" disableSticky={true}>
     <slot:fragment slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>

src/routes/courses/[id]/settings/+page.svelte

@@ -1,25 +1,14 @@
 <script>
-  import { course, setCourse } from '$lib/components/Course/store';
-  import { fetchCourse } from '$lib/utils/services/courses';
-  import { onMount } from 'svelte';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
   import PageBody from '$lib/components/PageBody/index.svelte';
   import Settings from '$lib/components/Course/components/Settings/index.svelte';
 
   export let data;
-
-  const { courseId } = data;
   let isStudent = false;
-
-  onMount(async () => {
-    if ($course.id) return;
-    const { data } = await fetchCourse(courseId);
-    setCourse(data);
-  });
 </script>
 
-<CourseContainer bind:isStudent>
+<CourseContainer bind:isStudent bind:courseId={data.courseId}>
   <PageNav title="Settings" />
   <PageBody>
     <Settings />

src/routes/courses/[id]/submissions/+page.svelte

@@ -10,8 +10,7 @@
   import Chip from '$lib/components/Chip/index.svelte';
   import PageBody from '$lib/components/PageBody/index.svelte';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import { fetchCourse } from '$lib/utils/services/courses';
-  import { setCourse, course } from '$lib/components/Course/store';
+  import { course } from '$lib/components/Course/store';
   import {
     fetchSubmissions,
     updateSubmission,
@@ -258,8 +257,7 @@
 
   onMount(async () => {
     if (!$course.id) {
-      const { data } = await fetchCourse(courseId);
-      setCourse(data);
+      return;
     }
 
     const { data: submissions } = await fetchSubmissions(courseId || $course.id);
@@ -339,7 +337,7 @@
 />
 
 <RoleBasedSecurity allowedRoles={[1, 2]}>
-  <CourseContainer>
+  <CourseContainer bind:courseId={data.courseId}>
     <PageNav title="Submitted Exercises" />
 
     <PageBody width="w-full max-w-6xl md:w-11/12 overflow-x-auto">