Pass lesson from server into store

src/components/Course/components/Lesson/store/lessons.js

@@ -1,168 +1,42 @@
-import { writable } from 'svelte/store';
+import { writable } from "svelte/store";
 
-export const lessons = writable([
+export const lessons = writable([]);
-  {
-    title: 'Вступительное слово. Софт скилы',
-    to: '/courses/1/lessons/1',
-    tutor: {
-      userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-    },
-    resources: [
-      {
-        label: 'lesson',
-        value: 1,
-      },
-      {
-        label: 'quiz',
-        value: 1,
-      },
-      {
-        label: 'home task',
-        value: 2,
-      },
-    ],
-    date: new Date(),
-    isComplete: true,
-  },
-  {
-    title: 'Введение в ReactJS',
-    to: '/courses/1/lessons/2',
-    tutor: {
-      userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-    },
-    resources: [
-      {
-        label: 'lesson',
-        value: 1,
-      },
-      {
-        label: 'quiz',
-        value: 1,
-      },
-      {
-        label: 'home task',
-        value: 2,
-      },
-    ],
-    date: new Date(),
-    isComplete: false,
-  },
-  {
-    title: 'Компоненты',
-    to: '/courses/1/lessons/3',
-    tutor: {
-      userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-    },
-    resources: [
-      {
-        label: 'lesson',
-        value: 1,
-      },
-      {
-        label: 'quiz',
-        value: 1,
-      },
-      {
-        label: 'home task',
-        value: 2,
-      },
-    ],
-    date: new Date(),
-    isComplete: false,
-  },
-  {
-    title: 'Состояние компонентов и пропсы',
-    to: '/courses/1/lessons/4',
-    tutor: {
-      userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-    },
-    resources: [
-      {
-        label: 'lesson',
-        value: 1,
-      },
-      {
-        label: 'quiz',
-        value: 1,
-      },
-      {
-        label: 'home task',
-        value: 2,
-      },
-    ],
-    date: new Date(),
-    isComplete: false,
-  },
-  {
-    title: 'Жизненный цикл',
-    to: '/courses/1/lessons/5',
-    tutor: {
-      userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-    },
-    resources: [
-      {
-        label: 'lesson',
-        value: 1,
-      },
-      {
-        label: 'quiz',
-        value: 1,
-      },
-      {
-        label: 'home task',
-        value: 2,
-      },
-    ],
-    date: new Date(),
-    isComplete: false,
-  },
-]);
 
 export const tutors = writable([
   {
     id: 1,
-    text: 'Sergey Semko',
+    text: "Sergey Semko",
   },
   {
     id: 3,
-    text: 'Jonathan Nelson',
+    text: "Jonathan Nelson",
   },
   {
     id: 4,
-    text: 'Sasha Pokidin',
+    text: "Sasha Pokidin",
   },
   {
     id: 5,
-    text: 'Natasha Rudenko',
+    text: "Natasha Rudenko",
   },
   {
     id: 6,
-    text: 'Yulia Marushko',
+    text: "Yulia Marushko",
   },
 ]);
 
 export function handleAddLesson() {
   const resources = [
     {
-      label: 'lesson',
+      label: "lesson",
       value: 0,
     },
     {
-      label: 'quiz',
+      label: "quiz",
       value: 0,
     },
     {
-      label: 'home task',
+      label: "home task",
       value: 0,
     },
   ];
@@ -171,13 +45,13 @@ export function handleAddLesson() {
     return [
       ..._lessons,
       {
-        title: 'Untitled lesson',
+        title: "Untitled lesson",
-        to: '/courses/1/lessons/' + (_lessons.length + 1),
+        to: "/courses/1/lessons/" + (_lessons.length + 1),
         resources,
         tutor: {
           userId: 1,
-          avatar: 'https://picsum.photos/32/32/?random',
+          avatar: "https://picsum.photos/32/32/?random",
-          name: '',
+          name: "",
         },
         date: new Date(),
       },

src/components/Course/components/Navigation/index.svelte

@@ -1,23 +1,24 @@
 <script>
-  import { onMount } from 'svelte';
+  import { onMount } from "svelte";
-  import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
+  import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20";
-  import hotkeys from 'hotkeys-js';
+  import hotkeys from "hotkeys-js";
-  import ChevronLeft32 from 'carbon-icons-svelte/lib/ChevronLeft32';
+  import ChevronLeft32 from "carbon-icons-svelte/lib/ChevronLeft32";
-  import ChevronRight32 from 'carbon-icons-svelte/lib/ChevronRight32';
+  import ChevronRight32 from "carbon-icons-svelte/lib/ChevronRight32";
-  import { stores, goto } from '@sapper/app';
+  import { stores, goto } from "@sapper/app";
-  import Expandable from '../../../Expandable/index.svelte';
+  import Expandable from "../../../Expandable/index.svelte";
-  import PageNav from '../../../PageNav/index.svelte';
+  import PageNav from "../../../PageNav/index.svelte";
-  import IconButton from '../../../IconButton/index.svelte';
+  import IconButton from "../../../IconButton/index.svelte";
   import {
     getNavItemRoute,
     getLessonsRoute,
     getLectureNo,
-  } from '../../function';
+  } from "../../function";
 
-  import { lessons } from '../Lesson/store/lessons';
+  import { lessons } from "../Lesson/store/lessons";
 
   // export let lessonId;
   export let courseId;
+  export let path;
 
   let show = true;
 
@@ -31,43 +32,43 @@
 
   const navItems = [
     {
-      label: 'Overview',
+      label: "Overview",
       to: getNavItemRoute(courseId),
       hideSortIcon: true,
     },
     {
-      label: 'Lessons',
+      label: "Lessons",
       to: getLessonsRoute(courseId),
       hideSortIcon: false,
       isLecture: true,
     },
     {
-      label: 'All Exercises',
+      label: "All Exercises",
-      to: getNavItemRoute(courseId, 'allexercises'),
+      to: getNavItemRoute(courseId, "allexercises"),
       hideSortIcon: true,
     },
     {
-      label: 'Scoreboard',
+      label: "Scoreboard",
-      to: getNavItemRoute(courseId, 'scoreboard'),
+      to: getNavItemRoute(courseId, "scoreboard"),
       hideSortIcon: true,
     },
     {
-      label: 'People',
+      label: "People",
-      to: getNavItemRoute(courseId, 'people'),
+      to: getNavItemRoute(courseId, "people"),
       hideSortIcon: true,
     },
     {
-      label: 'Timetable',
+      label: "Timetable",
-      to: getNavItemRoute(courseId, 'timetable'),
+      to: getNavItemRoute(courseId, "timetable"),
       hideSortIcon: true,
     },
   ];
 
   onMount(() => {
-    hotkeys('b', function (event, handler) {
+    hotkeys("b", function (event, handler) {
       event.preventDefault();
       switch (handler.key) {
-        case 'b':
+        case "b":
           show = !show;
           break;
       }
@@ -83,17 +84,18 @@
         <Expandable
           label={navItem.label}
           handleClick={handleMainGroupClick(navItem.to)}
-          isGroupActive={$page.path === navItem.to}
+          isGroupActive={(path || $page.path) === navItem.to}
           hideSortIcon={navItem.hideSortIcon}
         >
           {#if navItem.isLecture}
             {#each $lessons as item, index}
               <a
-                class="item flex items-center {(item.to === $page.path ||
+                class="item flex items-center {(item.to ===
-                  !$page.path.length > 3) &&
+                  (path || $page.path) ||
+                  !(path || $page.path).length > 3) &&
                   'active'} pl-7 py-2 {!item.isComplete &&
                   'cursor-not-allowed'}"
-                href={item.isComplete ? item.to : $page.path}
+                href={item.isComplete ? item.to : path || $page.path}
               >
                 <span class="course-counter"> {getLectureNo(index + 1)} </span>
                 <span>{item.title}</span>
@@ -116,9 +118,9 @@
       value="toggle"
       onClick={() => (show = !show)}
       toolTipProps={{
-        title: 'Toggle sidebar',
+        title: "Toggle sidebar",
-        hotkeys: ['B'],
+        hotkeys: ["B"],
-        direction: 'right',
+        direction: "right",
       }}
     >
       {#if show}

src/components/Course/constants.js

@@ -0,0 +1,4 @@
+export const ROUTES = {
+  COURSES: "courses",
+  LESSONS: "lessons",
+};

src/components/Course/function.js

@@ -1,7 +1,4 @@
-const ROUTES = {
+import { ROUTES } from "./constants";
-  COURSES: 'courses',
-  LESSONS: 'lessons',
-};
 
 export function getNavItemRoute(courseId, routeId) {
   const path = `/${ROUTES.COURSES}/${courseId}`;

src/components/CourseContainer/index.svelte

@@ -1,15 +1,25 @@
 <script>
+  import { onMount } from "svelte";
+
   import Navigation from "../Course/components/Navigation/index.svelte";
-  export let courseTitle = "";
+  import { lessons } from "../Course/components/Lesson/store/lessons";
-  export let courseId = "";
+
+  export let courseData = {};
+  export let path;
+
+  onMount(() => {
+    if (!$lessons.length) {
+      lessons.set(courseData.lessons);
+    }
+  });
 </script>
 
 <svelte:head>
-  <title>{courseTitle}</title>
+  <title>{courseData.name}</title>
 </svelte:head>
 
 <div class="root">
-  <Navigation {courseId} />
+  <Navigation courseId={courseData.id} {path} />
   <div class="rightBar">
     <slot />
   </div>

src/components/Form/TextField.svelte

@@ -4,7 +4,6 @@
   export let value;
   export let onKeyDown;
   export let className = "";
-  export let autofocus = false;
 </script>
 
 <label class="block {className}">
@@ -15,6 +14,5 @@
     on:keydown={onKeyDown}
     {placeholder}
     bind:value
-    autofocus
   />
 </label>

src/routes/api/_db.js

@@ -1,5 +1,5 @@
-import { STATUS } from '../../utils/constants/answers';
+import { STATUS } from "../../utils/constants/answers";
-import { QUESTION_TYPE } from '../../components/Question/constants';
+import { QUESTION_TYPE } from "../../components/Question/constants";
 
 const ROLE = {
   ADMIN: 0,
@@ -10,66 +10,66 @@ const ROLE = {
 const tutors = [
   {
     id: 1,
-    text: 'Sergey Semko',
+    text: "Sergey Semko",
   },
   {
     id: 3,
-    text: 'Jonathan Nelson',
+    text: "Jonathan Nelson",
   },
   {
     id: 4,
-    text: 'Sasha Pokidin',
+    text: "Sasha Pokidin",
   },
   {
     id: 5,
-    text: 'Natasha Rudenko',
+    text: "Natasha Rudenko",
   },
   {
     id: 6,
-    text: 'Yulia Marushko',
+    text: "Yulia Marushko",
   },
 ];
 
 const people = [
   {
-    name: 'Alexander Pokidin',
+    name: "Alexander Pokidin",
-    title: 'Senior Software Engineer',
+    title: "Senior Software Engineer",
-    avatar: 'https://i.pravatar.cc/150?img=1',
+    avatar: "https://i.pravatar.cc/150?img=1",
     role: ROLE.TUTOR,
-    telegramLink: 'https://t.me/seed_of_abraham',
+    telegramLink: "https://t.me/seed_of_abraham",
-    mailLink: 'mailto:irb.ossystem@gmail.com',
+    mailLink: "mailto:irb.ossystem@gmail.com",
   },
   {
-    name: 'Andrey Filatov',
+    name: "Andrey Filatov",
-    title: 'Fullstack Software Engineer',
+    title: "Fullstack Software Engineer",
-    avatar: 'https://i.pravatar.cc/150?img=2',
+    avatar: "https://i.pravatar.cc/150?img=2",
     role: ROLE.TUTOR,
-    telegramLink: 'https://t.me/seed_of_abraham',
+    telegramLink: "https://t.me/seed_of_abraham",
-    mailLink: 'mailto:irb.ossystem@gmail.com',
+    mailLink: "mailto:irb.ossystem@gmail.com",
   },
   {
-    name: 'Sergey Semko',
+    name: "Sergey Semko",
-    title: 'Senior Software Engineer',
+    title: "Senior Software Engineer",
-    avatar: 'https://i.pravatar.cc/150?img=3',
+    avatar: "https://i.pravatar.cc/150?img=3",
     role: ROLE.TUTOR,
-    telegramLink: 'https://t.me/seed_of_abraham',
+    telegramLink: "https://t.me/seed_of_abraham",
-    mailLink: 'mailto:irb.ossystem@gmail.com',
+    mailLink: "mailto:irb.ossystem@gmail.com",
   },
   {
-    name: 'Natalia Fedii',
+    name: "Natalia Fedii",
-    title: 'Project Manager',
+    title: "Project Manager",
-    avatar: 'https://i.pravatar.cc/150?img=4',
+    avatar: "https://i.pravatar.cc/150?img=4",
     role: ROLE.TUTOR,
-    telegramLink: 'https://t.me/seed_of_abraham',
+    telegramLink: "https://t.me/seed_of_abraham",
-    mailLink: 'mailto:irb.ossystem@gmail.com',
+    mailLink: "mailto:irb.ossystem@gmail.com",
   },
 ];
 
 const courses = [
   {
     id: 1,
-    title: 'React.js Fundamentals',
+    title: "React.js Fundamentals",
-    status: '',
+    status: "",
   },
 ];
 
@@ -87,24 +87,24 @@ const lessons = [
   {
     id: 1,
     course_id: 1,
-    title: 'Вступительное слово. Софт скилы',
+    title: "Вступительное слово. Софт скилы",
-    to: '/courses/1/lessons/1',
+    to: "/courses/1/lessons/1",
     tutor: {
       userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
+      avatar: "https://picsum.photos/32/32/?random",
-      name: 'Sergey Semko',
+      name: "Sergey Semko",
     },
     resources: [
       {
-        label: 'lesson',
+        label: "lesson",
         value: 1,
       },
       {
-        label: 'quiz',
+        label: "quiz",
         value: 1,
       },
       {
-        label: 'home task',
+        label: "home task",
         value: 2,
       },
     ],
@@ -114,24 +114,24 @@ const lessons = [
   {
     id: 2,
     course_id: 1,
-    title: 'Введение в ReactJS',
+    title: "Введение в ReactJS",
-    to: '/courses/1/lessons/2',
+    to: "/courses/1/lessons/2",
     tutor: {
       userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
+      avatar: "https://picsum.photos/32/32/?random",
-      name: 'Sergey Semko',
+      name: "Sergey Semko",
     },
     resources: [
       {
-        label: 'lesson',
+        label: "lesson",
         value: 1,
       },
       {
-        label: 'quiz',
+        label: "quiz",
         value: 1,
       },
       {
-        label: 'home task',
+        label: "home task",
         value: 2,
       },
     ],
@@ -141,24 +141,24 @@ const lessons = [
   {
     id: 3,
     course_id: 1,
-    title: 'Компоненты',
+    title: "Компоненты",
-    to: '/courses/1/lessons/3',
+    to: "/courses/1/lessons/3",
     tutor: {
       userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
+      avatar: "https://picsum.photos/32/32/?random",
-      name: 'Sergey Semko',
+      name: "Sergey Semko",
     },
     resources: [
       {
-        label: 'lesson',
+        label: "lesson",
         value: 1,
       },
       {
-        label: 'quiz',
+        label: "quiz",
         value: 1,
       },
       {
-        label: 'home task',
+        label: "home task",
         value: 2,
       },
     ],
@@ -168,24 +168,24 @@ const lessons = [
   {
     id: 4,
     course_id: 1,
-    title: 'Состояние компонентов и пропсы',
+    title: "Состояние компонентов и пропсы",
-    to: '/courses/1/lessons/4',
+    to: "/courses/1/lessons/4",
     tutor: {
       userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
+      avatar: "https://picsum.photos/32/32/?random",
-      name: 'Sergey Semko',
+      name: "Sergey Semko",
     },
     resources: [
       {
-        label: 'lesson',
+        label: "lesson",
         value: 1,
       },
       {
-        label: 'quiz',
+        label: "quiz",
         value: 1,
       },
       {
-        label: 'home task',
+        label: "home task",
         value: 2,
       },
     ],
@@ -195,24 +195,24 @@ const lessons = [
   {
     id: 5,
     course_id: 1,
-    title: 'Жизненный цикл',
+    title: "Жизненный цикл",
-    to: '/courses/1/lessons/5',
+    to: "/courses/1/lessons/5",
     tutor: {
       userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
+      avatar: "https://picsum.photos/32/32/?random",
-      name: 'Sergey Semko',
+      name: "Sergey Semko",
     },
     resources: [
       {
-        label: 'lesson',
+        label: "lesson",
         value: 1,
       },
       {
-        label: 'quiz',
+        label: "quiz",
         value: 1,
       },
       {
-        label: 'home task',
+        label: "home task",
         value: 2,
       },
     ],
@@ -226,38 +226,38 @@ const exercises = [
   {
     id: 1,
     lesson_id: 1,
-    title: 'Home task 1',
+    title: "Home task 1",
     description:
       "You will be to answer 10 questions, it isn't timed so you can take your time to answer. You can also continue from where you left off, you don't need to worry cause everything is automatically syncronized in the cloud.",
     questions: [
       {
-        id: 'react-founder',
+        id: "react-founder",
         type: QUESTION_TYPE.CHECKBOX,
-        title: 'Who is the creator of React.js',
+        title: "Who is the creator of React.js",
         options: [
           {
-            id: '1',
+            id: "1",
-            value: 'Dan Abrahmov',
+            value: "Dan Abrahmov",
           },
           {
-            id: '2',
+            id: "2",
-            value: 'Google',
+            value: "Google",
           },
           {
-            id: '3',
+            id: "3",
-            value: 'Facebook',
+            value: "Facebook",
           },
           {
-            id: '4',
+            id: "4",
-            value: 'Traversy Media',
+            value: "Traversy Media",
           },
         ],
-        answers: ['3'],
+        answers: ["3"],
       },
       {
-        id: 'vue-founder',
+        id: "vue-founder",
         type: QUESTION_TYPE.CHECKBOX,
-        title: 'Who is the creator of Vue.js',
+        title: "Who is the creator of Vue.js",
         code: `const name = 'Josh Perez';\nconst element = <h1>Hello, {name}</h1>;\n\nReactDOM.render(\n 
       element,\,
       document.getElementById('root')
@@ -265,53 +265,53 @@ const exercises = [
         `,
         options: [
           {
-            id: '1',
+            id: "1",
-            value: 'Evan Vue',
+            value: "Evan Vue",
           },
           {
-            id: '2',
+            id: "2",
-            value: 'Mark Zukerberg',
+            value: "Mark Zukerberg",
           },
           {
-            id: '3',
+            id: "3",
-            value: 'Prince Charles',
+            value: "Prince Charles",
           },
           {
-            id: '4',
+            id: "4",
-            value: 'Bill Gates',
+            value: "Bill Gates",
           },
         ],
-        answers: ['3'],
+        answers: ["3"],
       },
       {
-        id: 'svelte-founder',
+        id: "svelte-founder",
         type: QUESTION_TYPE.RADIO,
-        title: 'Who is the creator of Svelte.js',
+        title: "Who is the creator of Svelte.js",
         options: [
           {
-            id: '1',
+            id: "1",
-            value: 'Hillary Svelte',
+            value: "Hillary Svelte",
           },
           {
-            id: '2',
+            id: "2",
-            value: 'Mircosoft',
+            value: "Mircosoft",
           },
           {
-            id: '3',
+            id: "3",
-            value: 'Elevate',
+            value: "Elevate",
           },
           {
-            id: '4',
+            id: "4",
-            value: 'Coding Train',
+            value: "Coding Train",
           },
         ],
-        answers: ['2'],
+        answers: ["2"],
       },
       {
-        id: 'angular-founder',
+        id: "angular-founder",
         type: QUESTION_TYPE.TEXTAREA,
-        title: 'Who is the creator of Angular.js',
+        title: "Who is the creator of Angular.js",
-        value: '',
+        value: "",
       },
     ],
   },
@@ -336,9 +336,11 @@ lessons.forEach((lesson) => {
 });
 
 export function getCourse(id) {
-  const people = [];
   return {
+    id,
+    name: "React.js",
     people,
+    roles: ROLE,
     lessons: getLessons(id),
   };
 }

src/routes/api/course.js

@@ -1,8 +1,8 @@
-import { getCourse } from './_db';
+import { getCourse } from "./_db";
 
 function writeJsonHead(res, statusCode) {
   res.writeHead(statusCode, {
-    'Content-Type': 'application/json',
+    "Content-Type": "application/json",
   });
 }
 
@@ -11,5 +11,5 @@ export function get(req, res, next) {
 
   writeJsonHead(res, 200);
 
-  return res.end(JSON.stringify(getCourse(id)));
+  return res.end(JSON.stringify(getCourse(parseInt(id, 2))));
 }

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 PageNav from "../../../components/PageNav/index.svelte";
-  import CourseContainer from '../../../components/CourseContainer/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;
+    let [courseId] = params.id;
-    console.log(`course id`, params);
+
-    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 Overview from '../../../components/Course/index.svelte';
+  import Overview from "../../../components/Course/index.svelte";
-  import CourseContainer from '../../../components/CourseContainer/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 Time24 from "carbon-icons-svelte/lib/Time24";
-  import Edit24 from 'carbon-icons-svelte/lib/Edit24';
+  import Edit24 from "carbon-icons-svelte/lib/Edit24";
-  import Save24 from 'carbon-icons-svelte/lib/Save24';
+  import Save24 from "carbon-icons-svelte/lib/Save24";
-  import CheckmarkFilled24 from 'carbon-icons-svelte/lib/CheckmarkFilled24';
+  import CheckmarkFilled24 from "carbon-icons-svelte/lib/CheckmarkFilled24";
-  import PageNav from '../../../../components/PageNav/index.svelte';
+  import PageNav from "../../../../components/PageNav/index.svelte";
-  import PageBody from '../../../../components/PageBody/index.svelte';
+  import PageBody from "../../../../components/PageBody/index.svelte";
-  import PrimaryButton from '../../../../components/PrimaryButton/index.svelte';
+  import PrimaryButton from "../../../../components/PrimaryButton/index.svelte";
-  import TextField from '../../../../components/Form/TextField.svelte';
+  import TextField from "../../../../components/Form/TextField.svelte";
-  import IconButton from '../../../../components/IconButton/index.svelte';
+  import IconButton from "../../../../components/IconButton/index.svelte";
-  import Select from '../../../../components/Form/Select.svelte';
+  import Select from "../../../../components/Form/Select.svelte";
-  import CourseContainer from '../../../../components/CourseContainer/index.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 ye = new Intl.DateTimeFormat("en", { year: "numeric" }).format(d);
-    const mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).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 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'}`,
+                title: `Click to ${lesson.isComplete ? "lock" : "unlock"}`,
-                direction: 'right',
+                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 { stores } from "@sapper/app";
-  import CourseContainer from '../../../components/CourseContainer/index.svelte';
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
-  import PageNav from '../../../components/PageNav/index.svelte';
+  import PageNav from "../../../components/PageNav/index.svelte";
-  import UserCard from '../../../components/UserCard/index.svelte';
+  import UserCard from "../../../components/UserCard/index.svelte";
+
+  export let courseData = {};
 
   const { page } = stores();
 
-  const teachers = [
+  const teachers = courseData.people;
-    {
-      name: 'Alexander Pokidin',
-      title: 'Senior Software Engineer',
-      avatar: 'https://i.pravatar.cc/150?img=1',
-
-      telegramLink: 'https://t.me/seed_of_abraham',
-      mailLink: 'mailto:irb.ossystem@gmail.com',
-    },
-    {
-      name: 'Andrey Filatov',
-      title: 'Fullstack Software Engineer',
-      avatar: 'https://i.pravatar.cc/150?img=2',
-
-      telegramLink: 'https://t.me/seed_of_abraham',
-      mailLink: 'mailto:irb.ossystem@gmail.com',
-    },
-    {
-      name: 'Sergey Semko',
-      title: 'Senior Software Engineer',
-      avatar: 'https://i.pravatar.cc/150?img=3',
-
-      telegramLink: 'https://t.me/seed_of_abraham',
-      mailLink: 'mailto:irb.ossystem@gmail.com',
-    },
-    {
-      name: 'Natalia Fedii',
-      title: 'Project Manager',
-      avatar: 'https://i.pravatar.cc/150?img=4',
-
-      telegramLink: 'https://t.me/seed_of_abraham',
-      mailLink: 'mailto:irb.ossystem@gmail.com',
-    },
-  ];
   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 CourseContainer from "../../../components/CourseContainer/index.svelte";
-  import PageNav from '../../../components/PageNav/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 CourseContainer from "../../../components/CourseContainer/index.svelte";
-  import PageNav from '../../../components/PageNav/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>