Pass lesson from server into store

src/routes/courses/[id]/allexercises.svelte

@@ -1,18 +1,24 @@
 <script context="module">
   export async function preload({ params }) {
-    let [courseId, courseNavItem, lessonId] = params.id;
+    let [courseId] = params.id;
+    const res = await this.fetch(`api/course?id=${courseId}`);
+    const data = await res.json();
 
-    return { courseId, courseNavItem, lessonId };
+    if (res.status === 200) {
+      return { courseId, courseData: data };
+    } else {
+      this.error(res.status, data.message);
+    }
   }
 </script>
 
 <script>
-  import PageNav from '../../../components/PageNav/index.svelte';
-  import CourseContainer from '../../../components/CourseContainer/index.svelte';
+  import PageNav from "../../../components/PageNav/index.svelte";
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
 
-  export let courseId;
+  export let courseData = {};
 </script>
 
-<CourseContainer title="ReactJS" {courseId}>
+<CourseContainer {courseData}>
   <PageNav title="All Exercises" />
 </CourseContainer>

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

@@ -1,18 +1,25 @@
 <script context="module">
   export async function preload({ params }) {
-    let [courseId, courseNavItem, lessonId] = params.id;
-    console.log(`course id`, params);
-    return { courseId, courseNavItem, lessonId };
+    let [courseId] = params.id;
+
+    const res = await this.fetch(`api/course?id=${courseId}`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { courseId, courseData: data };
+    } else {
+      this.error(res.status, data.message);
+    }
   }
 </script>
 
 <script>
-  import Overview from '../../../components/Course/index.svelte';
-  import CourseContainer from '../../../components/CourseContainer/index.svelte';
+  import Overview from "../../../components/Course/index.svelte";
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
 
-  export let courseId;
+  export let courseData = {};
 </script>
 
-<CourseContainer title="ReactJS" {courseId}>
+<CourseContainer {courseData}>
   <Overview />
 </CourseContainer>

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

@@ -1,55 +0,0 @@
-<script context="module">
-  export async function preload({ params }) {
-    let [lessonId, exerciseRouteName, exerciseId] = params.id;
-    return { lessonId, exerciseRouteName, exerciseId };
-  }
-</script>
-
-<script>
-  import { stores } from '@sapper/app';
-  import CourseContainer from '../../../../../components/CourseContainer/index.svelte';
-
-  import PageNav from '../../../../../components/PageNav/index.svelte';
-  import PageBody from '../../../../../components/PageBody/index.svelte';
-  import Readme from '../../../../../components/Course/components/Lesson/Readme/index.svelte';
-  import Exercises from '../../../../../components/Course/components/Lesson/Exercises/index.svelte';
-
-  export let lessonId;
-  export let exerciseRouteName;
-  export let exerciseId;
-
-  let path;
-
-  const { page } = stores();
-
-  function getCourseId() {
-    return $page.path.match(/\w+\/(\d)\//)[1];
-  }
-
-  $: path = $page.path.replace(/\/exercises[\/ 0-9]*/, '');
-</script>
-
-<CourseContainer title="ReactJS" courseId={getCourseId()}>
-  <PageNav
-    navItems={[
-      {
-        label: 'README.md',
-        isActive: !exerciseRouteName,
-        href: path,
-      },
-      {
-        label: 'Exercises',
-        isActive: !!exerciseRouteName,
-        href: `${path}/exercises`,
-      },
-    ]}
-  />
-
-  <PageBody>
-    {#if !!exerciseRouteName}
-      <Exercises {exerciseId} path={`${path}/exercises`} />
-    {:else}
-      <Readme {lessonId} />
-    {/if}
-  </PageBody>
-</CourseContainer>

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

@@ -0,0 +1,61 @@
+<script context="module">
+  export async function preload({ params }) {
+    const { id: courseId, lessonParams = [] } = params;
+    const [lessonId, exerciseRouteName, exerciseId] = lessonParams;
+
+    const res = await this.fetch(`api/course?id=${courseId}`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { courseData: data, lessonId, exerciseRouteName, exerciseId };
+    } else {
+      this.error(res.status, data.message);
+    }
+  }
+</script>
+
+<script>
+  import { stores } from "@sapper/app";
+  import CourseContainer from "../../../../../components/CourseContainer/index.svelte";
+
+  import PageNav from "../../../../../components/PageNav/index.svelte";
+  import PageBody from "../../../../../components/PageBody/index.svelte";
+  import Readme from "../../../../../components/Course/components/Lesson/Readme/index.svelte";
+  import Exercises from "../../../../../components/Course/components/Lesson/Exercises/index.svelte";
+
+  export let courseData;
+  export let lessonId;
+  export let exerciseRouteName;
+  export let exerciseId;
+
+  let path;
+
+  const { page } = stores();
+
+  $: path = $page.path.replace(/\/exercises[\/ 0-9]*/, "");
+</script>
+
+<CourseContainer {courseData} {path}>
+  <PageNav
+    navItems={[
+      {
+        label: "README.md",
+        isActive: !exerciseRouteName,
+        href: path,
+      },
+      {
+        label: "Exercises",
+        isActive: !!exerciseRouteName,
+        href: `${path}/exercises`,
+      },
+    ]}
+  />
+
+  <PageBody>
+    {#if !!exerciseRouteName}
+      <Exercises {exerciseId} path={`${path}/exercises`} />
+    {:else}
+      <Readme {lessonId} />
+    {/if}
+  </PageBody>
+</CourseContainer>

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

@@ -1,29 +1,37 @@
 <script context="module">
   export async function preload({ params }) {
+    console.log("params", params);
     let [courseId, courseNavItem, lessonId] = params.id;
-    return { courseId, courseNavItem, lessonId };
+    const res = await this.fetch(`api/course?id=${courseId}`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { courseId, courseData: data };
+    } else {
+      this.error(res.status, data.message);
+    }
   }
 </script>
 
 <script>
-  import Time24 from 'carbon-icons-svelte/lib/Time24';
-  import Edit24 from 'carbon-icons-svelte/lib/Edit24';
-  import Save24 from 'carbon-icons-svelte/lib/Save24';
-  import CheckmarkFilled24 from 'carbon-icons-svelte/lib/CheckmarkFilled24';
-  import PageNav from '../../../../components/PageNav/index.svelte';
-  import PageBody from '../../../../components/PageBody/index.svelte';
-  import PrimaryButton from '../../../../components/PrimaryButton/index.svelte';
-  import TextField from '../../../../components/Form/TextField.svelte';
-  import IconButton from '../../../../components/IconButton/index.svelte';
-  import Select from '../../../../components/Form/Select.svelte';
-  import CourseContainer from '../../../../components/CourseContainer/index.svelte';
+  import Time24 from "carbon-icons-svelte/lib/Time24";
+  import Edit24 from "carbon-icons-svelte/lib/Edit24";
+  import Save24 from "carbon-icons-svelte/lib/Save24";
+  import CheckmarkFilled24 from "carbon-icons-svelte/lib/CheckmarkFilled24";
+  import PageNav from "../../../../components/PageNav/index.svelte";
+  import PageBody from "../../../../components/PageBody/index.svelte";
+  import PrimaryButton from "../../../../components/PrimaryButton/index.svelte";
+  import TextField from "../../../../components/Form/TextField.svelte";
+  import IconButton from "../../../../components/IconButton/index.svelte";
+  import Select from "../../../../components/Form/Select.svelte";
+  import CourseContainer from "../../../../components/CourseContainer/index.svelte";
   import {
     lessons,
     tutors,
     handleAddLesson,
-  } from '../../../../components/Course/components/Lesson/store/lessons';
+  } from "../../../../components/Course/components/Lesson/store/lessons";
 
-  export let courseId;
+  export let courseData;
 
   let lessonEditing;
   let ref;
@@ -31,9 +39,9 @@
   function formatDate(date) {
     const d = new Date(date);
 
-    const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
-    const mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(d);
-    const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d);
+    const ye = new Intl.DateTimeFormat("en", { year: "numeric" }).format(d);
+    const mo = new Intl.DateTimeFormat("en", { month: "2-digit" }).format(d);
+    const da = new Intl.DateTimeFormat("en", { day: "2-digit" }).format(d);
 
     return `${ye}-${mo}-${da}`;
   }
@@ -43,13 +51,13 @@
     setTimeout(() => {
       lessonEditing = $lessons.length - 1;
       if (ref) {
-        ref.scrollIntoView({ block: 'end', behavior: 'smooth' });
+        ref.scrollIntoView({ block: "end", behavior: "smooth" });
       }
     }, 100);
   }
 </script>
 
-<CourseContainer title="ReactJS" {courseId}>
+<CourseContainer {courseData}>
   <PageNav title="Lessons">
     <div slot="widget">
       <PrimaryButton label="Add" onClick={addLesson} />
@@ -68,8 +76,8 @@
             <IconButton
               onClick={() => (lesson.isComplete = !lesson.isComplete)}
               toolTipProps={{
-                title: `Click to ${lesson.isComplete ? 'lock' : 'unlock'}`,
-                direction: 'right',
+                title: `Click to ${lesson.isComplete ? "lock" : "unlock"}`,
+                direction: "right",
               }}
             >
               {#if lesson.isComplete}
@@ -110,7 +118,7 @@
               <div class="flex items-center mr-2">
                 {lesson.resources
                   .map((r) => `${r.value} ${r.label}`)
-                  .join(', ')}
+                  .join(", ")}
               </div>
             </div>
 

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

@@ -1,58 +1,33 @@
 <script context="module">
   export async function preload({ params }) {
-    let [courseId, courseNavItem, lessonId] = params.id;
+    let [courseId] = params.id;
 
-    return { courseId, courseNavItem, lessonId };
+    const res = await this.fetch(`api/course?id=${courseId}`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { courseId, courseData: data };
+    } else {
+      this.error(res.status, data.message);
+    }
   }
 </script>
 
 <script>
-  import { stores } from '@sapper/app';
-  import CourseContainer from '../../../components/CourseContainer/index.svelte';
-  import PageNav from '../../../components/PageNav/index.svelte';
-  import UserCard from '../../../components/UserCard/index.svelte';
+  import { stores } from "@sapper/app";
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
+  import PageNav from "../../../components/PageNav/index.svelte";
+  import UserCard from "../../../components/UserCard/index.svelte";
+
+  export let courseData = {};
 
   const { page } = stores();
 
-  const teachers = [
-    {
-      name: 'Alexander Pokidin',
-      title: 'Senior Software Engineer',
-      avatar: 'https://i.pravatar.cc/150?img=1',
-
-      telegramLink: 'https://t.me/seed_of_abraham',
-      mailLink: 'mailto:[email protected]',
-    },
-    {
-      name: 'Andrey Filatov',
-      title: 'Fullstack Software Engineer',
-      avatar: 'https://i.pravatar.cc/150?img=2',
-
-      telegramLink: 'https://t.me/seed_of_abraham',
-      mailLink: 'mailto:[email protected]',
-    },
-    {
-      name: 'Sergey Semko',
-      title: 'Senior Software Engineer',
-      avatar: 'https://i.pravatar.cc/150?img=3',
-
-      telegramLink: 'https://t.me/seed_of_abraham',
-      mailLink: 'mailto:[email protected]',
-    },
-    {
-      name: 'Natalia Fedii',
-      title: 'Project Manager',
-      avatar: 'https://i.pravatar.cc/150?img=4',
-
-      telegramLink: 'https://t.me/seed_of_abraham',
-      mailLink: 'mailto:[email protected]',
-    },
-  ];
+  const teachers = courseData.people;
   const students = [...teachers, ...teachers, ...teachers];
-  export let courseId;
 </script>
 
-<CourseContainer title="ReactJS" {courseId}>
+<CourseContainer {courseData}>
   <PageNav title="People" disableSticky={true} />
   <div class="m-3">
     <h3>

src/routes/courses/[id]/scoreboard.svelte

@@ -1,18 +1,25 @@
 <script context="module">
   export async function preload({ params }) {
-    let [courseId, courseNavItem, lessonId] = params.id;
+    let [courseId] = params.id;
 
-    return { courseId, courseNavItem, lessonId };
+    const res = await this.fetch(`api/course?id=${courseId}`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { courseId, courseData: data };
+    } else {
+      this.error(res.status, data.message);
+    }
   }
 </script>
 
 <script>
-  import CourseContainer from '../../../components/CourseContainer/index.svelte';
-  import PageNav from '../../../components/PageNav/index.svelte';
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
+  import PageNav from "../../../components/PageNav/index.svelte";
 
-  export let courseId;
+  export let courseData = {};
 </script>
 
-<CourseContainer title="ReactJS" {courseId}>
+<CourseContainer {courseData}>
   <PageNav title="Scoreboard" />
 </CourseContainer>

src/routes/courses/[id]/timetable.svelte

@@ -1,18 +1,25 @@
 <script context="module">
   export async function preload({ params }) {
-    let [courseId, courseNavItem, lessonId] = params.id;
+    let [courseId] = params.id;
 
-    return { courseId, courseNavItem, lessonId };
+    const res = await this.fetch(`api/course?id=${courseId}`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { courseId, courseData: data };
+    } else {
+      this.error(res.status, data.message);
+    }
   }
 </script>
 
 <script>
-  import CourseContainer from '../../../components/CourseContainer/index.svelte';
-  import PageNav from '../../../components/PageNav/index.svelte';
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
+  import PageNav from "../../../components/PageNav/index.svelte";
 
-  export let courseId;
+  export let courseData = {};
 </script>
 
-<CourseContainer title="ReactJS" {courseId}>
+<CourseContainer {courseData}>
   <PageNav title="Timetable" />
 </CourseContainer>