Add people + Move fetching to client side

src/routes/courses/[id]/lessons/[...lessonParams]/index.svelte

@@ -3,35 +3,10 @@
     fetchCourse,
     fetchLesson,
   } from '../../../../../utils/services/courses';
-  let prevLessonId;
 
   export async function preload({ params }, session) {
-    const { id: courseId, lessonParams = [] } = params;
-    const [lessonId, exerciseRouteName, exerciseId] = lessonParams;
-    let courseData;
-    let lessonData;
-
-    if (!process.browser) {
-      const [course, lesson] = await Promise.all([
-        fetchCourse(courseId, session),
-        fetchLesson(lessonId),
-      ]);
-
-      courseData = course.data;
-      lessonData = lesson.data;
-    } else if (prevLessonId && prevLessonId !== lessonId) {
-      const lesson = await fetchLesson(lessonId);
-
-      lessonData = lesson.data;
-    }
-
-    prevLessonId = lessonId;
     return {
-      courseData,
-      lessonData,
-      isMaterialsTabActive: !exerciseRouteName,
-      lessonId,
-      exerciseId,
+      params,
     };
   }
 </script>
@@ -47,21 +22,54 @@
   import Materials from '../../../../../components/Course/components/Lesson/Materials/index.svelte';
   import Exercises from '../../../../../components/Course/components/Lesson/Exercises/index.svelte';
   import MODES from '../../../../../utils/constants/mode.js';
-  import { setCourseData } from '../../../../../components/Course/store';
+  import {
+    setCourseData,
+    course,
+  } from '../../../../../components/Course/store';
   import { lesson } from '../../../../../components/Course/components/Lesson/store/lessons';
 
-  export let courseData;
-  export let lessonData;
+  export let params;
   export let lessonId;
   export let exerciseId;
   export let isMaterialsTabActive;
 
   let path;
   let mode = MODES.view;
+  let prevLessonId;
 
   const { page } = stores();
 
-  function setLesson() {
+  async function fetchReqData() {
+    const { id: courseId, lessonParams = [] } = params;
+    const [_lessonId, exerciseRouteName, _exerciseId] = lessonParams;
+
+    let courseData;
+    let lessonData;
+
+    if (!$course.id) {
+      const [_course, lesson] = await Promise.all([
+        fetchCourse(courseId),
+        fetchLesson(_lessonId),
+      ]);
+
+      courseData = _course.data;
+      lessonData = lesson.data;
+    } else if (prevLessonId && prevLessonId !== _lessonId) {
+      const lesson = await fetchLesson(_lessonId);
+
+      lessonData = lesson.data;
+    }
+
+    prevLessonId = _lessonId;
+    lessonId = _lessonId;
+    exerciseId = _exerciseId;
+    isMaterialsTabActive = !exerciseRouteName;
+
+    setCourseData(courseData);
+    setLesson(lessonData);
+  }
+
+  function setLesson(lessonData) {
     if (!lessonData) return;
 
     lesson.update((l) => ({
@@ -71,19 +79,13 @@
     }));
   }
 
-  onMount(() => {
-    setCourseData(courseData);
-
-    setLesson();
-  });
-
-  afterUpdate(setLesson);
-
   $: path = $page.path.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
 
   $: {
-    if (lessonId) {
+    console.log(`params`, params);
+    if (params) {
       mode = MODES.view;
+      fetchReqData();
     }
   }
 </script>
@@ -119,8 +121,8 @@
 
   {#if !isMaterialsTabActive}
     <Exercises {lessonId} {exerciseId} path={`${path}/exercises`} />
-  {:else}
-    <PageBody width="w-11/12 m-auto">
+  {:else if !!lessonId}
+    <PageBody>
       <Materials {lessonId} {mode} />
     </PageBody>
   {/if}

src/routes/courses/[id]/lessons/index.svelte

@@ -1,17 +1,6 @@
 <script context="module">
-  import { fetchCourse } from '../../../../utils/services/courses';
-
-  export async function preload({ params }, session) {
-    if (process.browser) {
-      return {};
-    }
-
-    const {
-      data,
-      // error
-    } = await fetchCourse(params.id, session);
-
-    return { courseData: data };
+  export async function preload({ params }) {
+    return { courseId: params.id };
   }
 </script>
 
@@ -30,6 +19,7 @@
   import TextField from '../../../../components/Form/TextField.svelte';
   import IconButton from '../../../../components/IconButton/index.svelte';
   import Select from '../../../../components/Form/Select.svelte';
+  import { fetchCourse } from '../../../../utils/services/courses';
   import CourseContainer from '../../../../components/CourseContainer/index.svelte';
   import {
     lessons,
@@ -43,7 +33,7 @@
     group,
   } from '../../../../components/Course/store';
 
-  export let courseData;
+  export let courseId;
 
   let lessonEditing;
   let ref;
@@ -88,8 +78,10 @@
     }, 100);
   }
 
-  onMount(() => {
-    setCourseData(courseData);
+  onMount(async () => {
+    if ($course.id) return;
+    const { data } = await fetchCourse(courseId);
+    setCourseData(data);
   });
 
   $: console.log(`$lessons`, $lessons);
@@ -106,12 +98,12 @@
     </div>
   </PageNav>
 
-  <PageBody width="w-11/12 m-auto">
-    <div class="w-4/5 mt-4 m-auto">
+  <PageBody>
+    <div class="w-11/12 mt-4 m-auto">
       {#each $lessons as lesson, index}
         <div
           bind:this={ref}
-          class="group relative m-auto rounded-md border-2 border-gray-100 py-3 px-5 mr-4 mb-4 flex items-center hover:shadow-2xl shadow-md transition delay-150 duration-300 ease-in-out"
+          class="group relative m-auto rounded-md border-2 border-gray-100 py-3 px-5 mb-4 flex items-center hover:shadow-2xl shadow-md transition delay-150 duration-300 ease-in-out"
         >
           <!-- Complete or Not complete icon -->
           <div class="absolute -left-6 -top-6 success">