Sync with Server

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

@@ -1,27 +1,43 @@
 <script context="module">
-  export async function preload({ params }) {
+  import {
+    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;
 
-    const res = await this.fetch(
-      `api/course?id=${courseId}&lessonId=${lessonId}&exerciseId=${exerciseId}`
-    );
-    const data = await res.json();
+    if (!process.browser) {
+      const [course, lesson] = await Promise.all([
+        fetchCourse(courseId, session),
+        fetchLesson(lessonId),
+      ]);
 
-    if (res.status === 200) {
-      return {
-        courseData: data,
-        lessonId,
-        isMaterialsTabActive: !exerciseRouteName,
-        exerciseId,
-      };
-    } else {
-      this.error(res.status, data.message);
+      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,
+    };
   }
 </script>
 
 <script>
+  import { onMount, afterUpdate } from 'svelte';
   import { stores } from '@sapper/app';
   import CourseContainer from '../../../../../components/CourseContainer/index.svelte';
 
@@ -31,21 +47,42 @@
   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 { lesson } from '../../../../../components/Course/components/Lesson/store/lessons';
 
   export let courseData;
+  export let lessonData;
   export let lessonId;
-  export let isMaterialsTabActive;
   export let exerciseId;
+  export let isMaterialsTabActive;
 
   let path;
   let mode = MODES.view;
 
   const { page } = stores();
 
-  $: path = $page.path.replace(/\/exercises[\/ 0-9]*/, '');
+  function setLesson() {
+    if (!lessonData) return;
+
+    lesson.update((l) => ({
+      ...l,
+      id: lessonId,
+      materials: lessonData,
+    }));
+  }
+
+  onMount(() => {
+    setCourseData(courseData);
+
+    setLesson();
+  });
+
+  afterUpdate(setLesson);
+
+  $: path = $page.path.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
 </script>
 
-<CourseContainer {courseData} {path}>
+<CourseContainer {path} isExercisePage={!isMaterialsTabActive && exerciseId}>
   <PageNav
     navItems={[
       {
@@ -74,11 +111,11 @@
     </svelte:fragment>
   </PageNav>
 
-  <PageBody>
-    {#if !isMaterialsTabActive}
-      <Exercises {exerciseId} path={`${path}/exercises`} />
-    {:else}
+  {#if !isMaterialsTabActive}
+    <Exercises {lessonId} {exerciseId} path={`${path}/exercises`} />
+  {:else}
+    <PageBody width="w-11/12 m-auto">
       <Materials {lessonId} {mode} />
-    {/if}
-  </PageBody>
+    </PageBody>
+  {/if}
 </CourseContainer>