CLASSROOMIO-T-21: Course landing page + editor

src/routes/_error.svelte

@@ -16,6 +16,10 @@
 
 <svelte:head>
   <title>{status}</title>
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/carbon-components-svelte/css/g90.css"
+  />
 </svelte:head>
 
 <div class="w-3/5 h-3/5 m-auto flex flex-col items-center justify-center">

src/routes/_layout.svelte

@@ -9,7 +9,7 @@
   import { derived } from 'svelte/store';
   import { stores, goto } from '@sapper/app';
   import * as Sentry from '@sentry/browser';
-  import { Firework } from 'svelte-loading-spinners';
+  import { Moon } from 'svelte-loading-spinners';
   import Tailwindcss from '../components/Tailwindcss.svelte';
   import Navigation from '../components/Navigation/index.svelte';
   import Snackbar from '../components/Snackbar/index.svelte';
@@ -91,7 +91,7 @@
       // If user coming to login page, then
       if (!$profile.role) {
         goto(ROUTE.ONBOARDING);
-      } else {
+      } else if (['login', 'signup', 'onboarding'].includes(path)) {
         goto('/dashboard');
       }
     }
@@ -161,6 +161,10 @@
 </script>
 
 <svelte:window on:resize={handleResize} />
+
+<svelte:head>
+  <link href="/css/carbon.css" rel="stylesheet" />
+</svelte:head>
 <Tailwindcss />
 
 <!-- <Nav {segment} /> -->
@@ -169,7 +173,7 @@
 <main>
   {#if $preloading && $delayedPreloading}
     <Backdrop>
-      <Firework size="60" color="#1d4ed8" unit="px" duration="1s" />
+      <Moon size="60" color="#1d4ed8" unit="px" duration="1s" />
     </Backdrop>
   {/if}
   {#if !ROUTES_TO_HIDE_NAV.includes($page.path) && !isCoursePage(path)}

src/routes/admin.svelte

@@ -88,7 +88,7 @@
   <div class="flex items-center justify-evenly max-w-6xl m-auto">
     {#each boxes as box}
       <div
-        class="bg-white rounded-md py-4 px-16 active shadow-md hover:shadow-2xl border-2 hover:border-blue-700 cursor-pointer {animate}"
+        class="bg-white rounded-md py-3 px-16 active shadow-md hover:shadow-2xl border-2 hover:border-blue-700 cursor-pointer {animate}"
       >
         {#if box.icon === 'students'}
           <UserSpeaker32 class="carbon-icon" />
@@ -106,7 +106,7 @@
   <div class="flex items-center justify-evenly mt-16">
     <div class="table rounded-md bg-white shadow-md">
       <div class="flex border-t-0 {borderBottomGrey} p-3">
-        <h3 class="m-0 py-2 pl-2 text-lg">Outstanding students</h3>
+        <h3 class="m-0 py-3 pl-2 text-lg">Outstanding students</h3>
       </div>
 
       {#each topStudents as topStudent, index}
@@ -123,7 +123,7 @@
 
     <div class="table rounded-md bg-white shadow-md">
       <div class="flex border-t-0 {borderBottomGrey} p-3">
-        <h3 class="m-0 py-2 pl-2 text-lg">Top rated courses</h3>
+        <h3 class="m-0 py-3 pl-2 text-lg">Top rated courses</h3>
       </div>
 
       {#each topCourses as topCourse, index}

src/routes/ask.svelte

@@ -1,22 +1,22 @@
 <script>
-  import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
-  import TextEditor from "../components/TextEditor/index.svelte";
+  import ChevronDown24 from 'carbon-icons-svelte/lib/ChevronDown24';
+  import TextEditor from '../components/TextEditor/index.svelte';
 
-  let questionTitle = "";
-  let questionDescription = "";
+  let questionTitle = '';
+  let questionDescription = '';
   let facultyFilterOpened = false;
 
   const faculties = [
-    "ИЭКСУ",
-    "ИМБТ",
-    "ИМИ",
-    "ИПТДМ",
-    "ИИИР",
-    "ГФ",
-    "ХТФ",
-    "ИДЗО",
-    "УИИ",
-    "УНИ",
+    'ИЭКСУ',
+    'ИМБТ',
+    'ИМИ',
+    'ИПТДМ',
+    'ИИИР',
+    'ГФ',
+    'ХТФ',
+    'ИДЗО',
+    'УИИ',
+    'УНИ',
   ];
   let checkbox = faculties.reduce((acc, cur) => {
     acc[cur] = false;
@@ -38,7 +38,7 @@
   <div class="main-title my-1 flex">
     <div class="faculty-filter mr-1">
       <button
-        class="flex border rounded-lg border-grey py-2 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200 relative"
+        class="flex border rounded-lg border-grey py-3 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200 relative"
         on:click={handleFacultyFilters}
       >
         <span class="flex flex-row"
@@ -49,10 +49,10 @@
 
       {#if facultyFilterOpened}
         <div
-          class="w-48 bg-white border border-grey rounded-lg mt-2 py-2 absolute"
+          class="w-48 bg-white border border-grey rounded-lg mt-2 py-3 absolute"
         >
           {#each faculties as faculty}
-            <div class="block px-4 py-2 border-b">
+            <div class="block px-4 py-3 border-b">
               <input
                 type="checkbox"
                 class="border border-gray checked:bg-blue-600 checked:border-transparent mr-1 cursor-pointer"

src/routes/course/[slug].svelte

@@ -5,9 +5,39 @@
 </script>
 
 <script>
+  import Backdrop from '../../components/Backdrop/index.svelte';
+  import { Moon } from 'svelte-loading-spinners';
   import CourseLandingPage from '../../components/CourseLandingPage/index.svelte';
+  import { profile } from '../../utils/store/user';
+  import { setCourse, course } from '../../components/Course/store';
+  import { lessons } from '../../components/Course/components/Lesson/store/lessons';
+  import { fetchCourse } from '../../utils/services/courses';
 
   export let slug;
+
+  let courseData = {};
+  let loading = false;
+
+  async function triggerSetCourse(_profile) {
+    loading = true;
+    const { data } = await fetchCourse(undefined, slug);
+    setCourse(data);
+    loading = false;
+  }
+
+  function setCourseData(course, lessons) {
+    courseData = { ...course, lessons };
+    console.log('courseData', courseData);
+  }
+
+  $: triggerSetCourse($profile);
+  $: setCourseData($course, $lessons);
 </script>
 
-<CourseLandingPage {slug} />
+{#if loading}
+  <Backdrop>
+    <Moon size="60" color="#1d4ed8" unit="px" duration="1s" />
+  </Backdrop>
+{:else}
+  <CourseLandingPage {courseData} />
+{/if}

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

@@ -11,11 +11,7 @@
   import PageNav from '../../../components/PageNav/index.svelte';
   import PageBody from '../../../components/PageBody/index.svelte';
   import Box from '../../../components/Box/index.svelte';
-  import {
-    course,
-    group,
-    setCourseData,
-  } from '../../../components/Course/store';
+  import { course, group, setCourse } from '../../../components/Course/store';
   import { getLectureNo } from '../../../components/Course/function';
   import { fetchCourse } from '../../../utils/services/courses';
   import { lessons } from '../../../components/Course/components/Lesson/store/lessons';
@@ -120,7 +116,7 @@
     }
 
     const { data } = await fetchCourse(courseId);
-    setCourseData(data);
+    setCourse(data);
     setAttendance(data);
   });
 

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

@@ -7,7 +7,7 @@
 <script>
   import Overview from '../../../components/Course/index.svelte';
   import CourseContainer from '../../../components/CourseContainer/index.svelte';
-  import { setCourseData } from '../../../components/Course/store';
+  import { setCourse } from '../../../components/Course/store';
   import { fetchCourse } from '../../../utils/services/courses';
 
   export let courseId;
@@ -19,7 +19,7 @@
 
     const { data } = await fetchCourse(courseId);
 
-    setCourseData(data);
+    setCourse(data);
     prevCourseId = courseId;
   }
 

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

@@ -9,8 +9,28 @@
   import CourseLandingPage from '../../../components/CourseLandingPage/index.svelte';
   import Editor from '../../../components/CourseLandingPage/components/Editor/index.svelte';
   import { isMobile } from '../../../utils/store/useMobile';
+  import { profile } from '../../../utils/store/user';
+  import { setCourse, course } from '../../../components/Course/store';
+  import { lessons } from '../../../components/Course/components/Lesson/store/lessons';
+  import { fetchCourse } from '../../../utils/services/courses';
 
   export let courseId;
+
+  let courseData = {};
+
+  async function triggerSetCourse(_profile) {
+    if ($course.id) return;
+    const { data } = await fetchCourse(courseId);
+    setCourse(data);
+  }
+
+  function setCourseData(course, lessons) {
+    courseData = { ...course, lessons };
+  }
+
+  $: triggerSetCourse($profile);
+  $: setCourseData($course, $lessons);
+  $: console.log('courseData changed', courseData);
 </script>
 
 <div
@@ -18,9 +38,9 @@
   in:fly={{ y: 500, duration: 500 }}
   out:fly={{ y: 500, duration: 500 }}
 >
-  <Editor {courseId} />
+  <Editor {courseId} bind:course={courseData} />
   <div class="rightBar" class:isMobile={$isMobile}>
-    <CourseLandingPage />
+    <CourseLandingPage bind:courseData />
   </div>
 </div>
 

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

@@ -29,10 +29,7 @@
   import Materials from '../../../../../components/Course/components/Lesson/Materials/index.svelte';
   import Exercises from '../../../../../components/Course/components/Lesson/Exercises/index.svelte';
   import MODES from '../../../../../utils/constants/mode.js';
-  import {
-    setCourseData,
-    course,
-  } from '../../../../../components/Course/store';
+  import { setCourse, course } from '../../../../../components/Course/store';
   import { lesson } from '../../../../../components/Course/components/Lesson/store/lessons';
 
   export let courseId;
@@ -53,14 +50,10 @@
 
     let lessonData;
     if (!$course.id) {
-      const [_course, lesson] = await Promise.all([
-        fetchCourse(courseId),
-        fetchLesson(lessonId),
-      ]);
+      const { data } = await fetchCourse(courseId);
 
-      lessonData = lesson.data;
-
-      setCourseData(_course.data);
+      lessonData = data.lessons.find((lesson) => lesson.id === lessonId);
+      setCourse(data);
     } else if (prevLessonId !== lessonId) {
       const lesson = await fetchLesson(lessonId);
       lessonData = lesson.data;

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

@@ -36,7 +36,7 @@
   } from '../../../../components/Course/components/Lesson/store/lessons';
   import {
     course,
-    setCourseData,
+    setCourse,
     group,
   } from '../../../../components/Course/store';
 
@@ -107,7 +107,7 @@
   onMount(async () => {
     if ($course.id) return;
     const { data } = await fetchCourse(courseId);
-    setCourseData(data);
+    setCourse(data);
   });
 
   $: {

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

@@ -12,11 +12,7 @@
   import PageBody from '../../../components/PageBody/index.svelte';
   import Box from '../../../components/Box/index.svelte';
   import { ROLE } from '../../../utils/constants/roles';
-  import {
-    setCourseData,
-    course,
-    group,
-  } from '../../../components/Course/store';
+  import { setCourse, course, group } from '../../../components/Course/store';
   import { lessons } from '../../../components/Course/components/Lesson/store/lessons';
   import {
     fetchCourse,
@@ -50,7 +46,7 @@
   onMount(async () => {
     if (!$course.id) {
       const { data } = await fetchCourse(courseId);
-      setCourseData(data);
+      setCourse(data);
     }
 
     const { data: marks } = await fetchMarks(courseId);

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

@@ -25,11 +25,7 @@
   import IconButton from '../../../components/IconButton/index.svelte';
   import PageBody from '../../../components/PageBody/index.svelte';
   import RoleBasedSecurity from '../../../components/RoleBasedSecurity/index.svelte';
-  import {
-    setCourseData,
-    course,
-    group,
-  } from '../../../components/Course/store';
+  import { setCourse, course, group } from '../../../components/Course/store';
   import InviationModal from '../../../components/Course/components/People/InviationModal.svelte';
   import DeleteConfirmation from '../../../components/Course/components/People/DeleteConfirmation.svelte';
   import {
@@ -102,7 +98,7 @@
   onMount(async () => {
     if ($course.id) return;
     const { data } = await fetchCourse(courseId);
-    setCourseData(data);
+    setCourse(data);
   });
 
   $: sortAndFilterPeople($group.people, filterBy);

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

@@ -20,12 +20,12 @@
   import CourseContainer from '../../../components/CourseContainer/index.svelte';
   import PageNav from '../../../components/PageNav/index.svelte';
   import PageBody from '../../../components/PageBody/index.svelte';
-  import { setCourseData } from '../../../components/Course/store';
+  import { setCourse } from '../../../components/Course/store';
 
   export let courseData = {};
 
   onMount(() => {
-    setCourseData(courseData);
+    setCourse(courseData);
   });
 </script>
 

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

@@ -16,7 +16,7 @@
   import PageBody from '../../../components/PageBody/index.svelte';
   import CourseContainer from '../../../components/CourseContainer/index.svelte';
   import { fetchCourse } from '../../../utils/services/courses';
-  import { setCourseData, course } from '../../../components/Course/store';
+  import { setCourse, course } from '../../../components/Course/store';
   import {
     fetchSubmissions,
     updateSubmission,
@@ -182,7 +182,7 @@
   onMount(async () => {
     if (!$course.id) {
       const { data } = await fetchCourse(courseId);
-      setCourseData(data);
+      setCourse(data);
     }
 
     const { data: submissions } = await fetchSubmissions(
@@ -297,7 +297,7 @@
                 <div
                   class="border {item.isEarly
                     ? 'border-grey-700'
-                    : 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white py-2 px-3"
+                    : 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white py-3 px-3"
                   animate:flip={{ duration: flipDurationMs }}
                 >
                   <div

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

@@ -20,12 +20,12 @@
   import CourseContainer from '../../../components/CourseContainer/index.svelte';
   import PageNav from '../../../components/PageNav/index.svelte';
   import PageBody from '../../../components/PageBody/index.svelte';
-  import { setCourseData } from '../../../components/Course/store';
+  import { setCourse } from '../../../components/Course/store';
 
   export let courseData = {};
 
   onMount(() => {
-    setCourseData(courseData);
+    setCourse(courseData);
   });
 </script>
 

src/routes/forgot.svelte

@@ -65,7 +65,8 @@
       <p class="text-md mb-6 text-center">
         We have sent a confirmation email to <span class="text-blue-700"
           >{fields.email}</span
-        >. Kindly check your inbox to reset password.
+        >. Kindly check your inbox to reset password or spam to reset your
+        password.
       </p>
     </div>
 

src/routes/index.svelte

@@ -97,7 +97,7 @@
   <div class="flex flex-col md:flex-row">
     {#each areas as area, index}
       <div
-        class="box m-3 bg-white rounded-md py-4 px-12 active shadow-xl border-2 hover:border-blue-700 {animate}"
+        class="box m-3 bg-white rounded-md py-3 px-12 active shadow-xl border-2 hover:border-blue-700 {animate}"
       >
         <h3 class="text-3xl">
           {#if index === 0}

src/routes/onboarding.svelte

@@ -287,7 +287,7 @@
           <PrimaryButton
             label="Back"
             variant={VARIANTS.NONE}
-            className="py-2 px-6 mr-2 text-blue-700"
+            className="py-3 px-6 mr-2 text-blue-700"
             onClick={() => (step = step - 1)}
           />
         {/if}

src/routes/profile/[id].svelte

@@ -183,7 +183,7 @@
           This are the organizations you work at
         </p>
 
-        <div class="hidden my-3 py-2 px-4 border shadow-sm rounded-md">
+        <div class="hidden my-3 py-3 px-4 border shadow-sm rounded-md">
           <h4 class="m-0 font-normal">
             <a class="text-blue-700 font-bold" href="/courses"> CitiBim </a>
           </h4>
@@ -204,7 +204,7 @@
           </div>
         </div>
 
-        <div class="hidden my-2 py-2 px-4 border shadow-sm rounded-md">
+        <div class="hidden my-2 py-3 px-4 border shadow-sm rounded-md">
           <h4 class="m-0 font-normal">
             <a class="text-blue-700 font-bold" href="/courses">
               Climate Change Group
@@ -226,7 +226,7 @@
         </div>
       </div>
       <PrimaryButton
-        className="px-6 py-2"
+        className="px-6 py-3"
         variant={VARIANTS.CONTAINED_DANGER}
         label="Log out"
         onClick={logout}