Restructure app for scale and easy access of routeId

src/components/Course/components/Lecture/Exercises/List.svelte

@@ -1,66 +0,0 @@
-<script>
-  import { Modal } from "carbon-components-svelte";
-  import PrimaryButton from "../../../../PrimaryButton/index.svelte";
-  import PageBody from "../../../../PageBody/index.svelte";
-  import TextField from "../../../../Form/TextField.svelte";
-
-  export let path;
-
-  let exercises = [
-    {
-      id: 1,
-      title: "Practice Exercise",
-      link: `${path}&exerciseId=1`,
-    },
-    {
-      id: 2,
-      title: "Home task",
-      link: `${path}&exerciseId=2`,
-    },
-  ];
-  let exerciseEditing;
-  let open = false;
-  let newExercise = {
-    id: 1,
-    title: "",
-    link: "",
-  };
-
-  function handleAddExercise() {
-    open = true;
-  }
-</script>
-
-<Modal
-  size="sm"
-  bind:open
-  modalHeading="Create database"
-  primaryButtonText="Confirm"
-  secondaryButtonText="Cancel"
-  on:click:button--secondary
-  on:open
-  on:close
-  on:submit
->
-  <p>Create a new Cloudant database in the US South region.</p>
-</Modal>
-
-<PageBody width="w-11/12 m-auto">
-  <slot:fragment slot="header">
-    <PrimaryButton className="mr-2" label="Add" onClick={handleAddExercise} />
-  </slot:fragment>
-
-  <div class="flex flex-wrap">
-    {#each exercises as exercise, index}
-      <a class="w-52 bg-gray-100 px-4 py-7 mr-4 mb-4" href={exercise.link}>
-        {#if exerciseEditing === index}
-          <TextField bind:value={exercise.title} autofocus={true} />
-        {:else}
-          <h3 class="text-xl">{exercise.title}</h3>
-        {/if}
-
-        <p class="mt-4 text-sm">Created Jul 3, 2021</p>
-      </a>
-    {/each}
-  </div>
-</PageBody>

src/components/Course/components/Lecture/Exercises/index.svelte

@@ -1,13 +0,0 @@
-<script>
-  import List from "./List.svelte";
-  import Exercise from "./Exercise.svelte";
-
-  export let exerciseId;
-  export let path;
-</script>
-
-{#if exerciseId}
-  <Exercise {exerciseId} />
-{:else}
-  <List {path} />
-{/if}

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

@@ -1,187 +0,0 @@
-import { writable } from "svelte/store";
-
-export const lessons = writable([
-  {
-    title: "Вступительное слово. Софт скилы",
-    to: "/courses/1/lecture/1",
-    lecturer: {
-      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/lecture/2",
-    lecturer: {
-      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/lecture/3",
-    lecturer: {
-      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/lecture/4",
-    lecturer: {
-      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/lecture/5",
-    lecturer: {
-      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 lecturers = writable([
-  {
-    id: 1,
-    text: "Sergey Semko",
-  },
-  {
-    id: 3,
-    text: "Jonathan Nelson",
-  },
-  {
-    id: 4,
-    text: "Sasha Pokidin",
-  },
-  {
-    id: 5,
-    text: "Natasha Rudenko",
-  },
-  {
-    id: 6,
-    text: "Yulia Marushko",
-  },
-]);
-
-
-export function handleAddLesson() {
-  const resources = [
-    {
-      label: "lesson",
-      value: 0,
-    },
-    {
-      label: "quiz",
-      value: 0,
-    },
-    {
-      label: "home task",
-      value: 0,
-    },
-  ];
-
-  lessons.update(_lessons => {
-    return [
-      ..._lessons,
-      {
-        title: 'Untitled lesson',
-        to: "/courses/1/lecture/" + (_lessons.length + 1),
-        resources,
-        lecturer: {
-          userId: 1,
-          avatar: "https://picsum.photos/32/32/?random",
-          name: "",
-        },
-        date: new Date()
-      }
-    ]
-  })
-}

src/components/Course/components/Lesson/Exercise/index.svelte

@@ -1,13 +1,13 @@
 <script>
-  import { handleAddQuestion } from "./store/index";
+  import { handleAddQuestion } from './store/index';
-  import PrimaryButton from "../../../../PrimaryButton/index.svelte";
+  import PrimaryButton from '../../../../PrimaryButton/index.svelte';
-  import PageBody from "../../../../PageBody/index.svelte";
+  import PageBody from '../../../../PageBody/index.svelte';
-  import ViewMode from "./ViewMode.svelte";
+  import ViewMode from './ViewMode.svelte';
-  import EditMode from "./EditMode.svelte";
+  import EditMode from './EditMode.svelte';
-  import MODES from "../../../../../utils/constants/mode.js";
+  import MODES from '../../../../../utils/constants/mode.js';
-  import { VARIANTS } from "../../../../PrimaryButton/constants";
+  import { VARIANTS } from '../../../../PrimaryButton/constants';
 
-  export let exerciseId;
+  // export let exerciseId;
 
   let mode = MODES.view;
   let preview = false;
@@ -24,13 +24,13 @@
       <PrimaryButton
         className="mr-2"
         variant={VARIANTS.OUTLINED}
-        label={mode === MODES.edit ? "Save" : "Edit"}
+        label={mode === MODES.edit ? 'Save' : 'Edit'}
         onClick={handleMode}
       />
       {#if mode === MODES.edit || preview}
         <PrimaryButton
           variant={VARIANTS.OUTLINED}
-          label={preview ? "Edit" : "Preview"}
+          label={preview ? 'Edit' : 'Preview'}
           onClick={() => (preview = !preview)}
         />
       {/if}

src/components/Course/components/Lesson/Exercises/index.svelte

@@ -0,0 +1,92 @@
+<script>
+  import { Modal } from 'carbon-components-svelte';
+  import PrimaryButton from '../../../../PrimaryButton/index.svelte';
+  import PageBody from '../../../../PageBody/index.svelte';
+  import TextField from '../../../../Form/TextField.svelte';
+  import Exercise from '../Exercise/index.svelte';
+
+  export let path;
+  export let exerciseId;
+
+  let exercises = [
+    {
+      id: 1,
+      title: 'Practice Exercise',
+      link: `${path}/1`,
+    },
+    {
+      id: 2,
+      title: 'Home task',
+      link: `${path}/2`,
+    },
+  ];
+  let open = false;
+  let newExercise = {
+    id: 1,
+    title: '',
+    link: '',
+  };
+
+  function handleAddExercise() {
+    exercises = [
+      ...exercises,
+      {
+        ...newExercise,
+        link: `${path}/${exercises.length + 1}`,
+      },
+    ];
+
+    handleCancelAddExercise();
+  }
+
+  function handleCancelAddExercise() {
+    open = false;
+    newExercise = {
+      id: exercises.length + 1,
+      title: '',
+      link: '',
+    };
+  }
+</script>
+
+{#if exerciseId}
+  <Exercise {exerciseId} />
+{:else}
+  <Modal
+    size="xs"
+    bind:open
+    modalHeading="Create an Exercise"
+    primaryButtonText="Confirm"
+    secondaryButtonText="Cancel"
+    on:click:button--primary={handleAddExercise}
+    on:click:button--secondary={handleCancelAddExercise}
+    on:open
+    on:close
+    on:submit
+  >
+    <TextField
+      bind:value={newExercise.title}
+      autofocus={true}
+      placeholder="Exercise name"
+    />
+  </Modal>
+
+  <PageBody width="w-11/12 m-auto">
+    <slot:fragment slot="header">
+      <PrimaryButton
+        className="mr-2"
+        label="Add"
+        onClick={() => (open = !open)}
+      />
+    </slot:fragment>
+
+    <div class="flex flex-wrap">
+      {#each exercises as exercise, index}
+        <a class="w-52 bg-gray-100 px-4 py-7 mr-4 mb-4" href={exercise.link}>
+          <h3 class="text-xl">{exercise.title}</h3>
+          <p class="mt-4 text-sm">Created Jul 3, 2021</p>
+        </a>
+      {/each}
+    </div>
+  </PageBody>
+{/if}

src/components/Course/components/Lesson/index.svelte

@@ -1,7 +1,7 @@
 <script>
-  import PageNav from "../../../PageNav/index.svelte";
+  import PageNav from '../../../PageNav/index.svelte';
-  import Exercises from "./Exercises/index.svelte";
+  import Exercises from './Exercises/index.svelte';
-  import Readme from "./Readme/index.svelte";
+  import Readme from './Readme/index.svelte';
 
   export let path;
   export let tab;
@@ -12,22 +12,22 @@
   <PageNav
     navItems={[
       {
-        label: "README.md",
+        label: 'README.md',
-        isActive: tab === "lectures",
+        isActive: tab === 'lessons',
-        href: `${path}?tab=lectures`,
+        href: `${path}?tab=lessons`,
       },
       {
-        label: "Exercises",
+        label: 'Exercises',
-        isActive: tab === "exercises",
+        isActive: tab === 'exercises',
         href: `${path}?tab=exercises`,
       },
     ]}
   />
 
   <div class="course relative">
-    {#if tab === "lectures"}
+    {#if tab === 'lessons'}
       <Readme />
-    {:else if tab === "exercises"}
+    {:else if tab === 'exercises'}
       <Exercises {exerciseId} path={`${path}?tab=exercises`} />
     {/if}
   </div>

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

@@ -0,0 +1,186 @@
+import { writable } from 'svelte/store';
+
+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',
+  },
+  {
+    id: 3,
+    text: 'Jonathan Nelson',
+  },
+  {
+    id: 4,
+    text: 'Sasha Pokidin',
+  },
+  {
+    id: 5,
+    text: 'Natasha Rudenko',
+  },
+  {
+    id: 6,
+    text: 'Yulia Marushko',
+  },
+]);
+
+export function handleAddLesson() {
+  const resources = [
+    {
+      label: 'lesson',
+      value: 0,
+    },
+    {
+      label: 'quiz',
+      value: 0,
+    },
+    {
+      label: 'home task',
+      value: 0,
+    },
+  ];
+
+  lessons.update((_lessons) => {
+    return [
+      ..._lessons,
+      {
+        title: 'Untitled lesson',
+        to: '/courses/1/lessons/' + (_lessons.length + 1),
+        resources,
+        tutor: {
+          userId: 1,
+          avatar: 'https://picsum.photos/32/32/?random',
+          name: '',
+        },
+        date: new Date(),
+      },
+    ];
+  });
+}

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

@@ -1,22 +1,22 @@
 <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,
-    getLectureRoute,
+    getLessonsRoute,
     getLectureNo,
-  } from "../../function";
+  } from '../../function';
 
-  import { lessons } from "../Lecture/store/lessons";
+  import { lessons } from '../Lesson/store/lessons';
 
-  // export let lectureId;
+  // export let lessonId;
   export let courseId;
 
   let show = true;
@@ -31,43 +31,43 @@
 
   const navItems = [
     {
-      label: "Overview",
+      label: 'Overview',
       to: getNavItemRoute(courseId),
       hideSortIcon: true,
     },
     {
-      label: "Lectures",
+      label: 'Lessons',
-      to: getLectureRoute(courseId),
+      to: getLessonsRoute(courseId),
       hideSortIcon: false,
       isLecture: true,
     },
     {
-      label: "Exercises",
+      label: 'All Exercises',
-      to: getNavItemRoute(courseId, "exercises"),
+      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;
       }
@@ -116,9 +116,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/function.js

@@ -1,6 +1,6 @@
 const ROUTES = {
-  COURSES: "courses",
+  COURSES: 'courses',
-  LECTURES: "lecture",
+  LESSONS: 'lessons',
 };
 
 export function getNavItemRoute(courseId, routeId) {
@@ -13,14 +13,14 @@ export function getNavItemRoute(courseId, routeId) {
   return `${path}/${routeId}`;
 }
 
-export function getLectureRoute(courseId, lectureId) {
+export function getLessonsRoute(courseId, lessonId) {
-  const path = getNavItemRoute(courseId, ROUTES.LECTURES);
+  const path = getNavItemRoute(courseId, ROUTES.LESSONS);
 
-  if (!lectureId) {
+  if (!lessonId) {
     return path;
   }
 
-  return `${path}/${lectureId}`;
+  return `${path}/${lessonId}`;
 }
 
 export function getLectureNo(index) {

src/components/TimeTable/RowItem.svelte

@@ -1,7 +1,7 @@
 <script>
-  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 Input from "./Input.svelte";
+  import Input from './Input.svelte';
 
   export let item, current;
   let editing = false;
@@ -11,6 +11,35 @@
   }
 </script>
 
+<div class="rowItem">
+  <div class="rowItemHeader">
+    <Input className="small" value={item.lessonType} {editing} />
+    <Input className="small alignRight" value={item.lessonHall} {editing} />
+  </div>
+
+  <div class="rowItemHeader">
+    <Input
+      className={`large ${current && 'current'}`}
+      value={item.subject}
+      {editing}
+    />
+  </div>
+
+  <div class="rowItemHeader">
+    <div class="rowItemFooter" style="width: 70%">
+      <Input className="small" value={item.tutorOne} {editing} />
+      <Input className="small" value={item.tutorTwo} {editing} />
+    </div>
+    <button on:click={toggle}>
+      {#if editing}
+        <Save24 class="icon" />
+      {:else}
+        <Edit24 class="icon" />
+      {/if}
+    </button>
+  </div>
+</div>
+
 <style>
   .rowItem {
     border-right: 1px solid;
@@ -46,31 +75,3 @@
     fill: red;
   }
 </style>
-
-<div class="rowItem">
-  <div class="rowItemHeader">
-    <Input className="small" value={item.lessonType} {editing} />
-    <Input className="small alignRight" value={item.lectureHall} {editing} />
-  </div>
-
-  <div class="rowItemHeader">
-    <Input
-      className={`large ${current && 'current'}`}
-      value={item.subject}
-      {editing} />
-  </div>
-
-  <div class="rowItemHeader">
-    <div class="rowItemFooter" style="width: 70%">
-      <Input className="small" value={item.lecturerOne} {editing} />
-      <Input className="small" value={item.lecturerTwo} {editing} />
-    </div>
-    <button on:click={toggle}>
-      {#if editing}
-        <Save24 class="icon" />
-      {:else}
-        <Edit24 class="icon" />
-      {/if}
-    </button>
-  </div>
-</div>

src/components/TimeTable/data.js

@@ -1,38 +1,39 @@
 export default [
-    {
+  {
+    lessonType: '1-9 leture',
+    lessonHall: '402F',
+    subject: 'Mathematics',
+    tutorOne: 'Peter Pitrovich',
+    tutorTwo: 'Pragma James',
+  },
+  {
+    lessonType: '1-9 Pra.',
+    lessonHall: '202F',
+    subject: 'Physics',
+    tutorOne: 'Anicimov',
+    tutorTwo: '',
+  },
+  {
+    lessonType: '1-9 leture',
+    lessonHall: '301F',
+    subject: 'Algorithm',
+    tutorOne: 'Babilunga Sharon',
+    tutorTwo: 'Alex Jonard',
+  },
+  {
+    lessonType: '1-9 leture',
+    lessonHall: '222F',
+    subject: 'Computer Aided system',
+    tutorOne: 'Godovichecko Heroku',
+    tutorTwo: '',
+  },
+  ...Array(4 * 4)
+    .fill(0)
+    .map((a, i) => ({
       lessonType: '1-9 leture',
-      lectureHall: '402F',
+      lessonHall: '222F',
-      subject: 'Mathematics',
-      lecturerOne: 'Peter Pitrovich',
-      lecturerTwo: 'Pragma James',
-    },
-    {
-      lessonType: '1-9 Pra.',
-      lectureHall: '202F',
-      subject: 'Physics',
-      lecturerOne: 'Anicimov',
-      lecturerTwo: '',
-    },
-    {
-      lessonType: '1-9 leture',
-      lectureHall: '301F',
-      subject: 'Algorithm',
-      lecturerOne: 'Babilunga Sharon',
-      lecturerTwo: 'Alex Jonard',
-    },
-    {
-      lessonType: '1-9 leture',
-      lectureHall: '222F',
       subject: 'Computer Aided system',
-      lecturerOne: 'Godovichecko Heroku',
+      tutorOne: 'Godovichecko Heroku',
-      lecturerTwo: '',
+      tutorTwo: '',
-      
+    })),
-    },
+];
-    ...Array(4 * 4).fill(0).map((a, i) => ({
-      lessonType: '1-9 leture',
-      lectureHall: '222F',
-      subject: 'Computer Aided system',
-      lecturerOne: 'Godovichecko Heroku',
-      lecturerTwo: '',
-    }))
-  ];

src/routes/_layout.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { stores } from "@sapper/app";
   import Tailwindcss from "../components/Tailwindcss.svelte";
   // import Nav from "../components/Nav.svelte";
   import LeftNav from "../components/LeftNav/index.svelte";
@@ -7,6 +8,8 @@
   import Apps from "../components/Apps/index.svelte";
 
   export let segment;
+
+  let { page } = stores();
 </script>
 
 <Tailwindcss />
@@ -16,7 +19,9 @@
 <main class="flex">
   <LeftNav {segment} />
   <slot />
-  <Apps />
+  {#if $page.path.includes("courses")}
+    <Apps />
+  {/if}
 </main>
 
 <Footer />

src/routes/api/_lessons.js

@@ -0,0 +1,14 @@
+const lessons = [{}];
+
+const lookup = new Map();
+lessons.forEach((lesson) => {
+  lookup.set(`${lesson.id}`, JSON.stringify(lesson));
+});
+
+export function getLessons() {
+  return lessons;
+}
+
+export function getLecture(id) {
+  return lookup.get(id);
+}

src/routes/api/lesson.js

@@ -0,0 +1,27 @@
+import { getLecture } from './_lessons';
+
+function writeJsonHead(res, statusCode) {
+  res.writeHead(statusCode, {
+    'Content-Type': 'application/json',
+  });
+}
+
+export function get(req, res, next) {
+  // the `id` parameter is available because
+  // this file is called [id].json.js
+  const { id } = req.params;
+
+  if (lookup.has(id)) {
+    writeJsonHead(res, 200);
+
+    res.end(lookup.get(id));
+  } else {
+    writeJsonHead(res, 404);
+
+    res.end(
+      JSON.stringify({
+        message: `Not found`,
+      })
+    );
+  }
+}

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

@@ -1,18 +0,0 @@
-<script context="module">
-  export async function preload({ params }) {
-    let [courseId, courseNavItem, lectureId] = params.id;
-
-    return { courseId, courseNavItem, lectureId };
-  }
-</script>
-
-<script>
-  import PageNav from "../../../components/PageNav/index.svelte";
-  import CourseContainer from "../../../components/CourseContainer/index.svelte";
-
-  export let courseId;
-</script>
-
-<CourseContainer title="ReactJS" {courseId}>
-  <PageNav title="Exercises" />
-</CourseContainer>

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

@@ -1,18 +0,0 @@
-<script context="module">
-  export async function preload({ params }) {
-    let [courseId, courseNavItem, lectureId] = params.id;
-
-    return { courseId, courseNavItem, lectureId };
-  }
-</script>
-
-<script>
-  import Overview from "../../../components/Course/index.svelte";
-  import CourseContainer from "../../../components/CourseContainer/index.svelte";
-
-  export let courseId;
-</script>
-
-<CourseContainer title="ReactJS" {courseId}>
-  <Overview />
-</CourseContainer>

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

@@ -1,27 +0,0 @@
-<script context="module">
-  export async function preload({ params }) {
-    let [courseId, courseNavItem, lectureId] = params.id;
-
-    return { courseId, courseNavItem, lectureId };
-  }
-</script>
-
-<script>
-  import { stores } from "@sapper/app";
-  import Lecture from "../../../../../components/Course/components/Lecture/index.svelte";
-  import CourseContainer from "../../../../../components/CourseContainer/index.svelte";
-
-  export let courseId;
-  export let lectureId;
-
-  const { page } = stores();
-  let tab = "";
-  let exerciseId = "";
-
-  $: tab = $page.query.tab || "lectures";
-  $: exerciseId = $page.query.exerciseId;
-</script>
-
-<CourseContainer title="ReactJS" {courseId}>
-  <Lecture path={$page.path} {tab} {exerciseId} {lectureId} />
-</CourseContainer>

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

@@ -1,88 +0,0 @@
-<script context="module">
-  export async function preload({ params }) {
-    let [courseId, courseNavItem, lectureId] = params.id;
-
-    return { courseId, courseNavItem, lectureId };
-  }
-</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";
-
-  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 students = [...teachers, ...teachers, ...teachers];
-  export let courseId;
-</script>
-
-<CourseContainer title="ReactJS" {courseId}>
-  <PageNav title="People" disableSticky={true} />
-  <div class="m-3">
-    <h3>
-      <a id="teachers" name="teachers" href="{$page.path}#teachers">Teachers</a>
-    </h3>
-    <div class="flex flex-wrap">
-      {#each teachers as teacher}
-        <UserCard
-          name={teacher.name}
-          avatarUrl={teacher.avatar}
-          title={teacher.title}
-          telegramLink={teacher.telegramLink}
-          mailLink={teacher.mailLink}
-        />
-      {/each}
-    </div>
-  </div>
-
-  <div class="m-3">
-    <h3>
-      <a id="students" name="students" href="{$page.path}#students">Students</a>
-    </h3>
-    <div class="flex flex-wrap">
-      {#each students as student}
-        <UserCard
-          name={student.name}
-          avatarUrl={student.avatar}
-          title={student.title}
-        />
-      {/each}
-    </div>
-  </div>
-</CourseContainer>

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

@@ -1,18 +0,0 @@
-<script context="module">
-  export async function preload({ params }) {
-    let [courseId, courseNavItem, lectureId] = params.id;
-
-    return { courseId, courseNavItem, lectureId };
-  }
-</script>
-
-<script>
-  import CourseContainer from "../../../components/CourseContainer/index.svelte";
-  import PageNav from "../../../components/PageNav/index.svelte";
-
-  export let courseId;
-</script>
-
-<CourseContainer title="ReactJS" {courseId}>
-  <PageNav title="Scoreboard" />
-</CourseContainer>

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

@@ -1,18 +0,0 @@
-<script context="module">
-  export async function preload({ params }) {
-    let [courseId, courseNavItem, lectureId] = params.id;
-
-    return { courseId, courseNavItem, lectureId };
-  }
-</script>
-
-<script>
-  import CourseContainer from "../../../components/CourseContainer/index.svelte";
-  import PageNav from "../../../components/PageNav/index.svelte";
-
-  export let courseId;
-</script>
-
-<CourseContainer title="ReactJS" {courseId}>
-  <PageNav title="Timetable" />
-</CourseContainer>

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

@@ -0,0 +1,18 @@
+<script context="module">
+  export async function preload({ params }) {
+    let [courseId, courseNavItem, lessonId] = params.id;
+
+    return { courseId, courseNavItem, lessonId };
+  }
+</script>
+
+<script>
+  import PageNav from '../../../components/PageNav/index.svelte';
+  import CourseContainer from '../../../components/CourseContainer/index.svelte';
+
+  export let courseId;
+</script>
+
+<CourseContainer title="ReactJS" {courseId}>
+  <PageNav title="All Exercises" />
+</CourseContainer>

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

@@ -0,0 +1,18 @@
+<script context="module">
+  export async function preload({ params }) {
+    let [courseId, courseNavItem, lessonId] = params.id;
+    console.log(`course id`, params);
+    return { courseId, courseNavItem, lessonId };
+  }
+</script>
+
+<script>
+  import Overview from '../../../components/Course/index.svelte';
+  import CourseContainer from '../../../components/CourseContainer/index.svelte';
+
+  export let courseId;
+</script>
+
+<CourseContainer title="ReactJS" {courseId}>
+  <Overview />
+</CourseContainer>

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

@@ -0,0 +1,55 @@
+<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/index.svelte

@@ -1,41 +1,40 @@
 <script context="module">
   export async function preload({ params }) {
-    let [courseId, courseNavItem, lectureId] = params.id;
+    let [courseId, courseNavItem, lessonId] = params.id;
 
-    return { courseId, courseNavItem, lectureId };
+    return { courseId, courseNavItem, lessonId };
   }
 </script>
 
 <script>
-  import { stores } from "@sapper/app";
+  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,
-    lecturers,
+    tutors,
     handleAddLesson,
-  } from "../../../../components/Course/components/Lecture/store/lessons";
+  } from '../../../../components/Course/components/Lesson/store/lessons';
 
   export let courseId;
 
-  let lectureEditing;
+  let lessonEditing;
   let ref;
 
   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,16 +42,16 @@
   function addLesson() {
     handleAddLesson();
     setTimeout(() => {
-      lectureEditing = $lessons.length - 1;
+      lessonEditing = $lessons.length - 1;
       if (ref) {
-        ref.scrollIntoView({ block: "end", behavior: "smooth" });
+        ref.scrollIntoView({ block: 'end', behavior: 'smooth' });
       }
     }, 100);
   }
 </script>
 
 <CourseContainer title="ReactJS" {courseId}>
-  <PageNav title="Lectures">
+  <PageNav title="Lessons">
     <div slot="widget">
       <PrimaryButton label="Add" onClick={addLesson} />
     </div>
@@ -60,7 +59,7 @@
 
   <PageBody width="w-11/12 m-auto">
     <div class="w-4/5 m-auto">
-      {#each $lessons as lecture, index}
+      {#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"
@@ -68,9 +67,9 @@
           <!-- Complete or Not complete icon -->
           <div class="absolute -left-6 -top-6 success">
             <IconButton
-              onClick={() => (lecture.isComplete = !lecture.isComplete)}
+              onClick={() => (lesson.isComplete = !lesson.isComplete)}
             >
-              {#if lecture.isComplete}
+              {#if lesson.isComplete}
                 <CheckmarkFilled24 class="carbon-icon" />
               {:else}
                 <span class="text-2xl">🔒</span>
@@ -80,12 +79,12 @@
 
           <!-- Edit/Save -->
           <div class="absolute top-2 right-0">
-            {#if lectureEditing === index}
+            {#if lessonEditing === index}
-              <IconButton onClick={() => (lectureEditing = null)}>
+              <IconButton onClick={() => (lessonEditing = null)}>
                 <Save24 class="carbon-icon" />
               </IconButton>
             {:else}
-              <IconButton onClick={() => (lectureEditing = index)}>
+              <IconButton onClick={() => (lessonEditing = index)}>
                 <Edit24 class="carbon-icon" />
               </IconButton>
             {/if}
@@ -95,28 +94,28 @@
             <h3 class="text-3xl font-bold">{index + 1}.</h3>
           </div>
           <div class="ml-8 w-4/5">
-            {#if lectureEditing === index}
+            {#if lessonEditing === index}
-              <TextField bind:value={lecture.title} autofocus={true} />
+              <TextField bind:value={lesson.title} autofocus={true} />
             {:else}
               <h3 class="text-3xl font-semibold m-0 flex items-center">
-                <a href={lecture.to} class="hover:underline text-black">
+                <a href={lesson.to} class="hover:underline text-black">
-                  {lecture.title}
+                  {lesson.title}
                 </a>
               </h3>
             {/if}
             <div class="flex items-center mb-2">
               <div class="flex items-center mr-2">
-                {lecture.resources
+                {lesson.resources
                   .map((r) => `${r.value} ${r.label}`)
-                  .join(", ")}
+                  .join(', ')}
               </div>
             </div>
 
             <div class="flex items-center justify-between mt-3 w-full">
-              {#if lectureEditing === index}
+              {#if lessonEditing === index}
                 <Select
-                  bind:value={lecture.lecturer.name}
+                  bind:value={lesson.tutor.name}
-                  options={$lecturers}
+                  options={$tutors}
                   valueKey="text"
                 />
               {:else}
@@ -129,25 +128,25 @@
                     class="block rounded-full"
                     width="24"
                     height="20"
-                    src={lecture.lecturer.avatar}
+                    src={lesson.tutor.avatar}
                   />
-                  <p class="ml-2 text-sm font-bold">{lecture.lecturer.name}</p>
+                  <p class="ml-2 text-sm font-bold">{lesson.tutor.name}</p>
                 </a>
               {/if}
 
               <div class="flex items-center">
-                {#if lectureEditing === index}
+                {#if lessonEditing === index}
                   <input
                     type="date"
-                    name="lecture-date-picker"
+                    name="lesson-date-picker"
                     class="p-2 rounded-md w-40"
-                    value={formatDate(lecture.date)}
+                    value={formatDate(lesson.date)}
-                    on:input={(e) => (lecture.date = e.target.value)}
+                    on:input={(e) => (lesson.date = e.target.value)}
                   />
                 {:else}
                   <Time24 class="carbon-icon" />
                   <p class="text-md font-semibold ml-2">
-                    {new Date(lecture.date).toDateString()}
+                    {new Date(lesson.date).toDateString()}
                   </p>
                 {/if}
               </div>

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

@@ -0,0 +1,88 @@
+<script context="module">
+  export async function preload({ params }) {
+    let [courseId, courseNavItem, lessonId] = params.id;
+
+    return { courseId, courseNavItem, lessonId };
+  }
+</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';
+
+  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 students = [...teachers, ...teachers, ...teachers];
+  export let courseId;
+</script>
+
+<CourseContainer title="ReactJS" {courseId}>
+  <PageNav title="People" disableSticky={true} />
+  <div class="m-3">
+    <h3>
+      <a id="teachers" name="teachers" href="{$page.path}#teachers">Teachers</a>
+    </h3>
+    <div class="flex flex-wrap">
+      {#each teachers as teacher}
+        <UserCard
+          name={teacher.name}
+          avatarUrl={teacher.avatar}
+          title={teacher.title}
+          telegramLink={teacher.telegramLink}
+          mailLink={teacher.mailLink}
+        />
+      {/each}
+    </div>
+  </div>
+
+  <div class="m-3">
+    <h3>
+      <a id="students" name="students" href="{$page.path}#students">Students</a>
+    </h3>
+    <div class="flex flex-wrap">
+      {#each students as student}
+        <UserCard
+          name={student.name}
+          avatarUrl={student.avatar}
+          title={student.title}
+        />
+      {/each}
+    </div>
+  </div>
+</CourseContainer>

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

@@ -0,0 +1,18 @@
+<script context="module">
+  export async function preload({ params }) {
+    let [courseId, courseNavItem, lessonId] = params.id;
+
+    return { courseId, courseNavItem, lessonId };
+  }
+</script>
+
+<script>
+  import CourseContainer from '../../../components/CourseContainer/index.svelte';
+  import PageNav from '../../../components/PageNav/index.svelte';
+
+  export let courseId;
+</script>
+
+<CourseContainer title="ReactJS" {courseId}>
+  <PageNav title="Scoreboard" />
+</CourseContainer>

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

@@ -0,0 +1,18 @@
+<script context="module">
+  export async function preload({ params }) {
+    let [courseId, courseNavItem, lessonId] = params.id;
+
+    return { courseId, courseNavItem, lessonId };
+  }
+</script>
+
+<script>
+  import CourseContainer from '../../../components/CourseContainer/index.svelte';
+  import PageNav from '../../../components/PageNav/index.svelte';
+
+  export let courseId;
+</script>
+
+<CourseContainer title="ReactJS" {courseId}>
+  <PageNav title="Timetable" />
+</CourseContainer>