Restructure app for scale and easy access of routeId

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 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,
-    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 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,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}
-              <IconButton onClick={() => (lectureEditing = null)}>
+            {#if lessonEditing === index}
+              <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}
-              <TextField bind:value={lecture.title} autofocus={true} />
+            {#if lessonEditing === index}
+              <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">
-                  {lecture.title}
+                <a href={lesson.to} class="hover:underline text-black">
+                  {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}
-                  options={$lecturers}
+                  bind:value={lesson.tutor.name}
+                  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)}
-                    on:input={(e) => (lecture.date = e.target.value)}
+                    value={formatDate(lesson.date)}
+                    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>