Reusable page style for lectures

src/components/Course/components/Attendance/index.svelte

@@ -0,0 +1,6 @@
+<script>
+  import PageNav from "../../../../PageNav/index.svelte";
+</script>
+
+<PageNav title="Attendance" />
+All attendance will be here with table

src/components/Course/components/CourseNav.svelte

@@ -2,7 +2,11 @@
   import { stores, goto } from "@sapper/app";
   import Expandable from "../../Expandable/index.svelte";
   import PageNav from "../../PageNav/index.svelte";
+  import { getNavItemRoute, getLectureRoute, getLectureNo } from "../function";
+
   // export let lectureId;
+  export let courseId;
+
   const { page } = stores();
 
   function handleMainGroupClick(href) {
@@ -11,84 +15,92 @@
     };
   }
 
-  const lectures = [
+  const navItems = [
     {
-      title: "Вводный урок. Soft skills",
-      link: "/courses/1/lecture/1",
+      label: "Overview",
+      to: getNavItemRoute(courseId),
+      hideSortIcon: true,
     },
     {
-      title: "Введение в ReactJS",
-      link: "/courses/1/lecture/2",
+      label: "Lectures",
+      to: getLectureRoute(courseId),
+      hideSortIcon: false,
+      items: [
+        {
+          id: 1,
+          title: "Вводный урок. Soft skills",
+          to: getLectureRoute(courseId, 1),
+        },
+        {
+          id: 2,
+          title: "Введение в ReactJS",
+          to: getLectureRoute(courseId, 2),
+        },
+        {
+          id: 3,
+          title: "Компоненты",
+          to: getLectureRoute(courseId, 3),
+        },
+        {
+          id: 4,
+          title: "Состояние компонентов и пропсы",
+          to: getLectureRoute(courseId, 4),
+        },
+        {
+          id: 5,
+          title: "Жизненный цикл",
+          to: getLectureRoute(courseId, 5),
+        },
+      ],
     },
     {
-      title: "Компоненты",
-      link: "/courses/1/lecture/3",
+      label: "People",
+      to: getNavItemRoute(courseId, "people"),
+      hideSortIcon: true,
     },
     {
-      title: "Состояние компонентов и пропсы",
-      link: "/courses/1/lecture/4",
+      label: "Timetable",
+      to: getNavItemRoute(courseId, "timetable"),
+      hideSortIcon: true,
     },
     {
-      title: "Жизненный цикл",
-      link: "/courses/1/lecture/5",
+      label: "Scoreboard",
+      to: getNavItemRoute(courseId, "scoreboard"),
+      hideSortIcon: true,
+    },
+    {
+      label: "Hometasks",
+      to: getNavItemRoute(courseId, "hometasks"),
+      hideSortIcon: true,
     },
   ];
-
-  function getLectureNo(index) {
-    if (index < 9) {
-      return `00${index}`;
-    }
-
-    return `0${index}`;
-  }
 </script>
 
 <div class="root">
   <PageNav title="React.JS" />
   <div>
-    <Expandable
-      label="Overview"
-      handleClick={handleMainGroupClick("/courses/1")}
-      isGroupActive={$page.path === "/courses/1"}
-      hideSortIcon
-    />
-    <Expandable label="Lectures">
-      {#each lectures as lecture, index}
-        <a
-          class="item {(lecture.link === $page.path ||
-            !$page.path.length > 3) &&
-            'active'} pl-7 py-2"
-          href={lecture.link}
-        >
-          <span class="course-counter"> {getLectureNo(index + 1)} </span>
-          <span>{lecture.title}</span>
-        </a>
-      {/each}
-    </Expandable>
-    <Expandable
-      label="People"
-      handleClick={handleMainGroupClick("/courses/1/people")}
-      isGroupActive={$page.path === "/courses/1/people"}
-      hideSortIcon
-    />
-    <Expandable
-      label="Timetable"
-      handleClick={handleMainGroupClick("/courses/1/timetable")}
-      isGroupActive={$page.path === "/courses/1/timetable"}
-      hideSortIcon
-    />
-    <Expandable
-      label="Scoreboard"
-      handleClick={handleMainGroupClick("/courses/1/score")}
-      isGroupActive={$page.path === "/courses/1/score"}
-      hideSortIcon
-    />
-    <Expandable
-      label="Home tasks"
-      handleClick={handleMainGroupClick("/courses/1/hometasks")}
-      isGroupActive={$page.path === "/courses/1/hometasks"}
-      hideSortIcon
-    />
+    {#each navItems as navItem}
+      <Expandable
+        label={navItem.label}
+        handleClick={handleMainGroupClick(navItem.to)}
+        isGroupActive={$page.path === navItem.to}
+        hideSortIcon={navItem.hideSortIcon}
+      >
+        {#if Array.isArray(navItem.items)}
+          {#each navItem.items as item, index}
+            <a
+              class="item flex items-center {(item.to === $page.path ||
+                !$page.path.length > 3) &&
+                'active'} pl-7 py-2"
+              href={item.to}
+            >
+              <span class="course-counter"> {getLectureNo(index + 1)} </span>
+              <span>{item.title}</span>
+            </a>
+          {/each}
+        {/if}
+      </Expandable>
+    {/each}
   </div>
 </div>
 

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

@@ -0,0 +1,8 @@
+<script>
+  import PageNav from "../../../../PageNav/index.svelte";
+  import PageBody from "../../../../PageBody/index.svelte";
+</script>
+
+<PageNav title="Lectures" />
+
+<PageBody>All lecture will be here</PageBody>

src/components/Course/components/Lecture/Homework/EditMode.svelte

@@ -35,6 +35,8 @@
       variant={VARIANTS.OUTLINED}
       onClick={handleAddQuestion}
       label="Add Question"
+      mnb
+      v
     />
   </div>
 

src/components/Course/components/Lecture/Homework/ViewMode.svelte

@@ -1,6 +1,6 @@
 <script>
   import { questionnaire } from "./store/index";
-  import RadioQuestion from "../../../../Question/RadioQuestion/index.svelte";
+  // import RadioQuestion from "../../../../Question/RadioQuestion/index.svelte";
   import CheckboxQuestion from "../../../../Question/CheckboxQuestion/index.svelte";
   import PrimaryButton from "../../../../PrimaryButton/index.svelte";
 

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

@@ -1,13 +1,25 @@
 <script>
-  import MODES from "../../../../../utils/constants/mode.js";
+  import PrimaryContainedButton from "../../../../PrimaryContainedButton/index.svelte";
+  import PageBody from "../../../../PageBody/index.svelte";
   import EditMode from "./EditMode.svelte";
   import ViewMode from "./ViewMode.svelte";
+  import MODES from "../../../../../utils/constants/mode.js";
 
-  export let mode = "";
+  let mode = MODES.view;
 </script>
 
-{#if mode === MODES.edit}
-  <EditMode />
-{:else}
-  <ViewMode />
-{/if}
+<PageBody>
+  <svelte:fragment slot="header">
+    <h3>Lesson 2 home exercises</h3>
+    <PrimaryContainedButton
+      label={mode === MODES.edit ? "Save" : "Edit"}
+      handleClick={() => (mode = mode === MODES.edit ? MODES.view : MODES.edit)}
+    />
+  </svelte:fragment>
+
+  {#if mode === MODES.edit}
+    <EditMode />
+  {:else}
+    <ViewMode />
+  {/if}
+</PageBody>

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

@@ -1,64 +1,55 @@
 <script>
+  import { onMount } from "svelte";
   import PageNav from "../../../PageNav/index.svelte";
   import Classwork from "./Classwork.svelte";
   import Homework from "./Homework/index.svelte";
   import Readme from "./Readme/index.svelte";
-  import PrimaryContainedButton from "../../../PrimaryContainedButton/index.svelte";
-
-  import MODES from "../../../../utils/constants/mode.js";
+  import Home from "./Home/index.svelte";
 
   export let path;
   export let tab;
-  export let mode;
+  export let showLectureHome;
 
-  let modeLabel = "Edit";
-
-  $: modeLabel = mode === MODES.edit ? "Save" : "Edit";
-
-  function handleModeChange(e) {
-    e.preventDefault();
-    mode = mode === MODES.edit ? MODES.view : MODES.edit;
-  }
+  onMount(() => {
+    console.log("mounted");
+  });
 </script>
 
-<div>
-  <PageNav
-    navItems={[
-      {
-        label: "README.md",
-        isActive: tab === "lectures",
-        href: `${path}?tab=lectures`,
-      },
-      {
-        label: "Class work",
-        isActive: tab === "classwork",
-        href: `${path}?tab=classwork`,
-      },
-      {
-        label: "Hometasks",
-        isActive: tab === "hometasks",
-        href: `${path}?tab=hometasks`,
-      },
-    ]}
-  >
-    <div slot="widget">
-      <PrimaryContainedButton
-        label={modeLabel}
-        handleClick={handleModeChange}
-      />
-    </div>
-  </PageNav>
+{#if showLectureHome}
+  <Home />
+{:else}
+  <div>
+    <PageNav
+      navItems={[
+        {
+          label: "README.md",
+          isActive: tab === "lectures",
+          href: `${path}?tab=lectures`,
+        },
+        {
+          label: "Class work",
+          isActive: tab === "classwork",
+          href: `${path}?tab=classwork`,
+        },
+        {
+          label: "Hometasks",
+          isActive: tab === "hometasks",
+          href: `${path}?tab=hometasks`,
+        },
+      ]}
+    />
 
-  <div class="course relative">
-    {#if tab === "lectures"}
-      <Readme {mode} />
-    {:else if tab === "classwork"}
-      <Classwork />
-    {:else if tab === "hometasks"}
-      <Homework {mode} />
-    {/if}
+    <div class="course relative">
+      {#if tab === "lectures"}
+        <Readme />
+      {:else if tab === "classwork"}
+        <Classwork />
+      {:else if tab === "hometasks"}
+        <Homework />
+      {/if}
+    </div>
   </div>
-</div>
+{/if}
 
 <style>
   .course {

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

@@ -0,0 +1,2 @@
+import { writable } from "svelte/store";
+

src/components/Course/function.js

@@ -0,0 +1,32 @@
+const ROUTES = {
+  COURSES: "courses",
+  LECTURES: "lecture",
+};
+
+export function getNavItemRoute(courseId, routeId) {
+  const path = `/${ROUTES.COURSES}/${courseId}`;
+
+  if (!routeId) {
+    return path;
+  }
+
+  return `${path}/${routeId}`;
+}
+
+export function getLectureRoute(courseId, lectureId) {
+  const path = getNavItemRoute(courseId, ROUTES.LECTURES);
+
+  if (!lectureId) {
+    return path;
+  }
+
+  return `${path}/${lectureId}`;
+}
+
+export function getLectureNo(index) {
+  if (index < 9) {
+    return `00${index}`;
+  }
+
+  return `0${index}`;
+}