CLASSROOMIO-T-88: Mark lesson as complete

src/routes/+layout.svelte

@@ -181,8 +181,9 @@
 
         $appStore.isStudentDomain = debug || answer;
         $appStore.siteNameFromDomain = debug ? 'codingdojo' : subdomain;
+      } else if (subdomain === 'play' || debug) {
+        skipAuth = true;
       }
-      skipAuth = debug || subdomain === 'play';
     }
   }
 
@@ -236,7 +237,7 @@
       if (event === 'SIGNED_IN') {
         $user.fetchingUser = true;
         getProfile();
-      } else {
+      } else if (!['INITIAL_SESSION', 'TOKEN_REFRESHED'].includes(event)) {
         console.log('not logged in, go to login');
         return goto('/login');
       }

src/routes/courses/[id]/lessons/+page.svelte

@@ -2,12 +2,13 @@
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
   import { dndzone } from 'svelte-dnd-action';
+  import UnlockedIcon from 'carbon-icons-svelte/lib/Unlocked.svelte';
+  import LockedIcon from 'carbon-icons-svelte/lib/Locked.svelte';
   import TimeIcon from 'carbon-icons-svelte/lib/Time.svelte';
   import EditIcon from 'carbon-icons-svelte/lib/Edit.svelte';
   import SaveIcon from 'carbon-icons-svelte/lib/Save.svelte';
   import PhoneIcon from 'carbon-icons-svelte/lib/Phone.svelte';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
-  import CheckmarkFilled24 from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
   import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
   import Box from '$lib/components/Box/index.svelte';
@@ -137,20 +138,20 @@
             <IconButton
               disabled={isStudent}
               onClick={() => {
-                lesson.is_complete = !lesson.is_complete;
+                lesson.is_unlocked = !lesson.is_unlocked;
                 handleSaveLesson(lesson, $course.id);
               }}
               toolTipProps={isStudent
                 ? {}
                 : {
-                    title: `Click to ${lesson.is_complete ? 'lock' : 'unlock'}`,
+                    title: `Click to ${lesson.is_unlocked ? 'lock' : 'unlock'}`,
                     direction: 'right'
                   }}
             >
-              {#if lesson.is_complete}
-                <CheckmarkFilled24 class="carbon-icon" />
+              {#if lesson.is_unlocked}
+                <UnlockedIcon size={24} class="carbon-icon" />
               {:else}
-                <span class="text-2xl">🔒</span>
+                <LockedIcon size={24} class="carbon-icon" />
               {/if}
             </IconButton>
           </div>
@@ -186,11 +187,11 @@
             {:else}
               <h3 class="dark:text-white text-2xl m-0 flex items-center">
                 <a
-                  href={isStudent && !lesson.is_complete
+                  href={isStudent && !lesson.is_unlocked
                     ? $page.url.pathname
                     : '/courses/' + $course.id + '/lessons/' + lesson.id}
                   class="dark:text-white hover:underline text-black {isStudent &&
-                  !lesson.is_complete
+                  !lesson.is_unlocked
                     ? 'cursor-not-allowed'
                     : ''}"
                 >

src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte

@@ -2,6 +2,7 @@
   import { page } from '$app/stores';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import { fetchCourse, fetchLesson } from '$lib/utils/services/courses';
+  import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
@@ -10,7 +11,7 @@
   import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte';
   import MODES from '$lib/utils/constants/mode.js';
   import { setCourse, course } from '$lib/components/Course/store';
-  import { lesson } from '$lib/components/Course/components/Lesson/store/lessons';
+  import { lesson, handleSaveLesson } from '$lib/components/Course/components/Lesson/store/lessons';
 
   export let data;
 
@@ -19,6 +20,7 @@
   let prevMode = '';
   let prevLessonId = '';
   let isFetching = false;
+  let isMarkingComplete = false;
 
   async function fetchReqData(lessonId = '') {
     isFetching = true;
@@ -41,6 +43,13 @@
     isFetching = false;
   }
 
+  async function markLessonComplete() {
+    isMarkingComplete = true;
+    $lesson.is_complete = !$lesson.is_complete;
+    await handleSaveLesson($lesson, $course.id);
+    isMarkingComplete = false;
+  }
+
   function setLesson(lessonData, totalExercises) {
     if (!lessonData) return;
 
@@ -99,6 +108,18 @@
   {:else if !!data.lessonId}
     <PageBody>
       <Materials lessonId={data.lessonId} {mode} {prevMode} />
+
+      <div class="w-full flex flex-row-reverse">
+        <PrimaryButton
+          onClick={markLessonComplete}
+          isLoading={isMarkingComplete}
+          isDisabled={isMarkingComplete}
+          className="mt-10"
+        >
+          <CheckmarkOutlineIcon size={24} class="carbon-icon mr-2" />
+          Mark as {$lesson.is_complete ? 'Incomplete' : 'Complete'}
+        </PrimaryButton>
+      </div>
     </PageBody>
   {/if}
 </CourseContainer>

src/routes/dashboard/+page.svelte

@@ -3,23 +3,17 @@
   import { InlineCalendar, Datepicker } from 'svelte-calendar';
   import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
 
-  import {
-    formatUserUpcomingData,
-    formatDate,
-  } from '$lib/utils/functions/routes/dashboard';
+  import { formatUserUpcomingData, formatDate } from '$lib/utils/functions/routes/dashboard';
   import { user } from '$lib/utils/store/user';
   import { fetchUserUpcomingData } from '$lib/utils/services/dashboard';
   import { isMobile } from '$lib/utils/store/useMobile';
-  import type {
-    UserLessonDataType,
-    LessonsByMonthIndexType,
-  } from '$lib/utils/types';
+  import type { UserLessonDataType, LessonsByMonthIndexType } from '$lib/utils/types';
 
   const theme = {
     calendar: {
       width: '400px',
-      shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)',
-    },
+      shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)'
+    }
   };
 
   let store;
@@ -37,8 +31,7 @@
       // );
 
       const renderedMonths =
-        calendar?.querySelectorAll('.contents .container .stage .grid .grid') ||
-        [];
+        calendar?.querySelectorAll('.contents .container .stage .grid .grid') || [];
       // console.log(`renderedMonths`, renderedMonths);
       const currentMonthIndex = new Date($store?.selected).getMonth();
       const currentMonth = renderedMonths[currentMonthIndexInRenderedMonth];
@@ -63,10 +56,7 @@
         if (!!currentMonthData[dateIndex]) {
           // console.log(`dateIndex`, dateIndex);
           // console.log(`lesson data`, currentMonthData[dateIndex]);
-          dayElement.insertAdjacentHTML(
-            'beforeend',
-            '<span class="active-day">•</span>'
-          );
+          dayElement.insertAdjacentHTML('beforeend', '<span class="active-day">•</span>');
         }
       }
     }, 500);
@@ -84,9 +74,7 @@
     }
   }
 
-  function getDataOfSelectedDate(
-    _selectedDate: string
-  ): UserLessonDataType[] | [] {
+  function getDataOfSelectedDate(_selectedDate: string): UserLessonDataType[] | [] {
     if (!_selectedDate) return [];
 
     const selectedDate = new Date(_selectedDate).toUTCString();
@@ -97,8 +85,7 @@
     // If we changed the month, update the calendar dots
     const prevMonthIndex = new Date(prevSelectedDate).getMonth();
     if (prevMonthIndex !== monthIndex) {
-      const currentMonthIndexInRenderedMonth =
-        monthIndex < prevMonthIndex ? 1 : 2;
+      const currentMonthIndexInRenderedMonth = monthIndex < prevMonthIndex ? 1 : 2;
 
       addDotsToCalendar(currentMonthIndexInRenderedMonth);
     }
@@ -163,9 +150,7 @@
           </Datepicker>
         </div>
       {:else}
-        <div
-          class="header text-lg font-bold text-blue-700 flex px-5 items-center"
-        >
+        <div class="header text-lg font-bold text-blue-700 flex px-5 items-center">
           {formatDate($store?.selected)}
         </div>
       {/if}
@@ -176,11 +161,11 @@
             <a
               class="text-black-700 text-lg font-bold flex items-center"
               href={`/courses/${lessonData.course_id}/lessons/${
-                lessonData.is_complete ? lessonData.lesson_id : ''
+                lessonData.is_unlocked ? lessonData.lesson_id : ''
               }`}
             >
               {lessonData.lesson_title}
-              {#if lessonData.is_complete}
+              {#if lessonData.is_unlocked}
                 <span class="ml-2 success">
                   <CheckmarkFilledIcon size={20} class="carbon-icon" />
                 </span>
@@ -189,15 +174,12 @@
               {/if}
             </a>
             <p class="dark:text-white text-grey text-sm flex items-center">
-              <a
-                class="underline text-blue-700 my-2"
-                href="/courses/{lessonData.course_id}"
-              >
+              <a class="underline text-blue-700 my-2" href="/courses/{lessonData.course_id}">
                 {` ${lessonData.course_title}`}
               </a>
             </p>
           </div>
-          {#if lessonData.is_complete}
+          {#if lessonData.is_unlocked}
             <a
               class="join-call rounded-3xl bg-blue-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
                 'opacity-50 pointer-events-none cursor-not-allowed'}"
@@ -212,9 +194,7 @@
           {/if}
         </div>
       {:else}
-        <p
-          class="dark:text-white flex items-center justify-center w-full no-data"
-        >
+        <p class="dark:text-white flex items-center justify-center w-full no-data">
           No lesson on this day
         </p>
       {/each}

src/routes/org/[slug]/+page.svelte

@@ -3,20 +3,15 @@
   // import { supabase } from '$lib/utils/functions/supabase';
   import { goto } from '$app/navigation';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import UnlockedIcon from 'carbon-icons-svelte/lib/Unlocked.svelte';
+  import LockedIcon from 'carbon-icons-svelte/lib/Locked.svelte';
   import Avatar from '$lib/components/Avatar/index.svelte';
   import { InlineCalendar, Datepicker } from 'svelte-calendar';
-  import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
-  import {
-    formatUserUpcomingData,
-    formatDate,
-  } from '$lib/utils/functions/routes/dashboard';
+  import { formatUserUpcomingData, formatDate } from '$lib/utils/functions/routes/dashboard';
   import { user } from '$lib/utils/store/user';
   import { fetchUserUpcomingData } from '$lib/utils/services/dashboard';
   import { isMobile } from '$lib/utils/store/useMobile';
-  import type {
-    UserLessonDataType,
-    LessonsByMonthIndexType,
-  } from '$lib/utils/types';
+  import type { UserLessonDataType, LessonsByMonthIndexType } from '$lib/utils/types';
   import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte';
   import { onMount } from 'svelte';
 
@@ -31,8 +26,8 @@
     calendar: {
       width: '300px',
       height: '300px',
-      shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)',
-    },
+      shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)'
+    }
   };
 
   let store;
@@ -44,20 +39,20 @@
   const boxes = [
     {
       label: 'Revenue (NGN)',
-      value: '0.00',
+      value: '0.00'
     },
     {
       label: 'Number of sales',
-      value: 0,
+      value: 0
     },
     {
       label: 'Number of courses',
-      value: 0,
+      value: 0
     },
     {
       label: 'Total students',
-      value: 0,
-    },
+      value: 0
+    }
   ];
   const activities = [
     {
@@ -66,7 +61,7 @@
       name: 'Nnancy Okoye',
       time: '1 hour ago',
       description: 'Submitted an assignment for lesson Figma prototyping',
-      link: '/',
+      link: '/'
     },
     {
       avatar:
@@ -74,7 +69,7 @@
       name: 'Bro Shagi',
       time: '2 days ago',
       description: 'Submitted an assignment for lesson Figma prototyping',
-      link: '/',
+      link: '/'
     },
     {
       avatar:
@@ -82,7 +77,7 @@
       name: 'Bill Gates',
       time: '13 hours ago',
       description: 'Submitted an assignment for lesson Figma prototyping',
-      link: '/',
+      link: '/'
     },
     {
       avatar:
@@ -90,8 +85,8 @@
       name: 'Steve Jobs',
       time: 'yesterday',
       description: 'Submitted an assignment for lesson Figma prototyping',
-      link: '/',
-    },
+      link: '/'
+    }
   ];
 
   const addDotsToCalendar = (currentMonthIndexInRenderedMonth: number) =>
@@ -103,8 +98,7 @@
       // );
 
       const renderedMonths =
-        calendar?.querySelectorAll('.contents .container .stage .grid .grid') ||
-        [];
+        calendar?.querySelectorAll('.contents .container .stage .grid .grid') || [];
       // console.log(`renderedMonths`, renderedMonths);
       const currentMonthIndex = new Date($store?.selected).getMonth();
       const currentMonth = renderedMonths[currentMonthIndexInRenderedMonth];
@@ -129,10 +123,7 @@
         if (!!currentMonthData[dateIndex]) {
           // console.log(`dateIndex`, dateIndex);
           // console.log(`lesson data`, currentMonthData[dateIndex]);
-          dayElement.insertAdjacentHTML(
-            'beforeend',
-            '<span class="active-day">•</span>'
-          );
+          dayElement.insertAdjacentHTML('beforeend', '<span class="active-day">•</span>');
         }
       }
     }, 500);
@@ -150,9 +141,7 @@
     }
   }
 
-  function getDataOfSelectedDate(
-    _selectedDate: string
-  ): UserLessonDataType[] | [] {
+  function getDataOfSelectedDate(_selectedDate: string): UserLessonDataType[] | [] {
     if (!_selectedDate) return [];
 
     const selectedDate = new Date(_selectedDate).toUTCString();
@@ -163,8 +152,7 @@
     // If we changed the month, update the calendar dots
     const prevMonthIndex = new Date(prevSelectedDate).getMonth();
     if (prevMonthIndex !== monthIndex) {
-      const currentMonthIndexInRenderedMonth =
-        monthIndex < prevMonthIndex ? 1 : 2;
+      const currentMonthIndexInRenderedMonth = monthIndex < prevMonthIndex ? 1 : 2;
 
       addDotsToCalendar(currentMonthIndexInRenderedMonth);
     }
@@ -212,9 +200,7 @@
 
   <div class="flex items-start flex-wrap">
     {#each boxes as box}
-      <div
-        class="box flex flex-col rounded border border-gray-200 justify-center px-5 mr-5 mb-5"
-      >
+      <div class="box flex flex-col rounded border border-gray-200 justify-center px-5 mr-5 mb-5">
         <p class="dark:text-white mb-2 text-sm">{box.label}</p>
         <p class="dark:text-white text-xl font-bold">{box.value}</p>
       </div>
@@ -259,28 +245,25 @@
               <a
                 class="text-black-700 text-lg font-bold flex items-center"
                 href={`/courses/${lessonData.course_id}/lessons/${
-                  lessonData.is_complete ? lessonData.lesson_id : ''
+                  lessonData.is_unlocked ? lessonData.lesson_id : ''
                 }`}
               >
                 {lessonData.lesson_title}
-                {#if lessonData.is_complete}
+                {#if lessonData.is_unlocked}
                   <span class="ml-2 success">
-                    <CheckmarkFilledIcon size={20} class="carbon-icon" />
+                    <LockedIcon class="carbon-icon" />
                   </span>
                 {:else}
-                  <span class="text-md ml-2">🔒</span>
+                  <UnlockedIcon class="carbon-icon" />
                 {/if}
               </a>
               <p class="dark:text-white text-grey text-sm flex items-center">
-                <a
-                  class="underline text-blue-700 my-2"
-                  href="/courses/{lessonData.course_id}"
-                >
+                <a class="underline text-blue-700 my-2" href="/courses/{lessonData.course_id}">
                   {` ${lessonData.course_title}`}
                 </a>
               </p>
             </div>
-            {#if lessonData.is_complete}
+            {#if lessonData.is_unlocked}
               <a
                 class="join-call rounded-3xl bg-blue-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
                   'opacity-50 pointer-events-none cursor-not-allowed'}"
@@ -295,9 +278,7 @@
             {/if}
           </div>
         {:else}
-          <p
-            class="dark:text-white flex items-center justify-center w-full no-data"
-          >
+          <p class="dark:text-white flex items-center justify-center w-full no-data">
             No lesson on this day
           </p>
         {/each}