chore: debugging improvements 🚀 (#77)

* improve layout.server

* fix date behavior

* change direction of padlock icon on lesson

* feat: implement delete confirmation on lesson

* fix: course landing page improvements

apps/dashboard/src/routes/+layout.server.ts

@@ -12,29 +12,22 @@ interface LoadOutput {
   orgSiteName: string;
   isOrgSite: boolean;
   skipAuth: boolean;
-  org: CurrentOrg;
+  org: CurrentOrg | null;
 }
 
 export const load = async ({ url, cookies }): Promise<LoadOutput> => {
-  // if (url.hostname === 'classroomio.com') {
-  //   throw redirect(301, 'https://about.classroomio.com');
-  // }
-
-  let response: LoadOutput = {
+  const response: LoadOutput = {
     orgSiteName: '',
     isOrgSite: false,
     skipAuth: false,
-    org: {
-      theme: ''
-    }
+    org: null
   };
 
   const _orgSiteName = cookies.get('_orgSiteName');
   const debugPlay = cookies.get('debugPlay');
   const debugMode = _orgSiteName && _orgSiteName !== 'false';
-  console.log('_orgSiteName', _orgSiteName);
 
-  const matches = url.host.match(/([a-z 0-9 \-]+).*classroomio[.]com/);
+  const matches = url.host.match(/([a-z 0-9 -]+).*classroomio[.]com/);
   const subdomain = matches?.[1] ?? '';
 
   if (!blockedSubdomain.includes(subdomain)) {
@@ -42,7 +35,7 @@ export const load = async ({ url, cookies }): Promise<LoadOutput> => {
 
     response.isOrgSite = debugMode || answer;
     response.orgSiteName = debugMode ? _orgSiteName : subdomain;
-    response.org = await getCurrentOrg(response.orgSiteName, true);
+    response.org = (await getCurrentOrg(response.orgSiteName, true)) || null;
   } else if (subdomain === 'play' || debugPlay === 'true') {
     response.skipAuth = true;
   }

apps/dashboard/src/routes/+layout.svelte

@@ -90,7 +90,6 @@
       error,
       status
     } = await supabase.from('profile').select(`*`).eq('id', authUser?.id).single();
-    console.log('Get user', authUser);
     console.log('Get profile', profileData);
 
     if (error && !profileData && status === 406 && authUser) {
@@ -219,10 +218,7 @@
 
     handleResize();
 
-    if (
-      !isSupabaseTokenInLocalStorage() &&
-      !isPublicRoute($page.url.pathname)
-    ) {
+    if (!isSupabaseTokenInLocalStorage() && !isPublicRoute($page.url.pathname)) {
       console.log('No auth token and is not a public route, redirect to login', path);
       return goto('/login?redirect=/' + path);
     }
@@ -408,9 +404,12 @@
   }
 
   :global(.plyr__controls) {
-    background: url(/logo-192.png) 99% 70% no-repeat,
+    background:
+      url(/logo-192.png) 99% 70% no-repeat,
       linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)) !important;
-    background-size: 50px auto, auto !important;
+    background-size:
+      50px auto,
+      auto !important;
   }
 
   :global(.cards-container) {

apps/dashboard/src/routes/courses/[id]/landingpage/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { dev } from '$app/environment';
   import { fly } from 'svelte/transition';
   import CourseLandingPage from '$lib/components/CourseLandingPage/index.svelte';
   import Editor from '$lib/components/CourseLandingPage/components/Editor/index.svelte';
@@ -10,14 +11,18 @@
 
   const { courseId } = data;
 
-  let courseData: Course;
+  let courseData: Course = $course;
 
   function setCourseData(course: Course, lessons: Lesson[]) {
     courseData = { ...course, lessons };
   }
 
+  function syncCourseStore(_courseData: Course) {
+    $course = _courseData;
+  }
+
   $: setCourseData($course, $lessons);
-  $: console.log('courseData changed', courseData);
+  $: dev && console.log('courseData changed', courseData);
 </script>
 
 <div
@@ -25,7 +30,7 @@
   in:fly={{ y: 500, duration: 500 }}
   out:fly={{ y: 500, duration: 500 }}
 >
-  <Editor {courseId} bind:course={courseData} />
+  <Editor {courseId} bind:course={courseData} {syncCourseStore} />
   <div class="rightBar">
     <CourseLandingPage bind:courseData editMode={true} />
   </div>

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

@@ -1,5 +1,4 @@
-<script>
-  import { onMount } from 'svelte';
+<script lang="ts">
   import { page } from '$app/stores';
   import { dndzone } from 'svelte-dnd-action';
   import UnlockedIcon from 'carbon-icons-svelte/lib/Unlocked.svelte';
@@ -20,6 +19,7 @@
   import { updateLesson } from '$lib/utils/services/courses';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import { profile } from '$lib/utils/store/user';
+  import type { Lesson } from '$lib/utils/types';
   import {
     lessons,
     handleSaveLesson,
@@ -31,16 +31,20 @@
   import Avatar from '$lib/components/Apps/components/Poll/components/Avatar.svelte';
   import AddLessonModal from '$lib/components/Course/components/Lesson/AddLessonModal.svelte';
   import DateField from '$lib/components/Form/Date.svelte';
+  import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
 
   export let data;
 
-  let lessonEditing;
+  let lessonEditing: string | undefined;
+  let lessonToDelete: Lesson | undefined;
   let isStudent = true;
   let openModal = false;
+  let openDeleteModal = false;
 
   const flipDurationMs = 300;
 
-  function formatDate(date) {
+  function formatDate(date: string | undefined) {
+    if (!date) return '';
     const d = new Date(date);
 
     const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
@@ -54,16 +58,16 @@
     openModal = true;
   }
 
-  function handleDndConsider(e) {
+  function handleDndConsider(e: any) {
     $lessons = e.detail.items;
   }
 
-  function handleDndFinalize(e) {
+  function handleDndFinalize(e: any) {
     const prevLessonsByOrder = $lessons.reduce((acc, l) => ({ ...acc, [l.id]: l.order }), {});
     $lessons = e.detail.items;
 
     // Only update the lesson order that changed
-    e.detail.items.forEach((item, index) => {
+    e.detail.items.forEach((item: { id: string }, index: number) => {
       const order = index + 1;
 
       if (order !== prevLessonsByOrder[item.id]) {
@@ -75,7 +79,7 @@
     });
   }
 
-  function getLessonOrder(id) {
+  function getLessonOrder(id: string) {
     const index = $lessons.findIndex((lesson) => lesson.id === id);
 
     if (index < 9) {
@@ -96,6 +100,12 @@
 
 <AddLessonModal {isStudent} bind:openModal />
 
+<DeleteLessonConfirmation
+  bind:openDeleteModal
+  lessonTitle={lessonToDelete?.title || ''}
+  deleteLesson={() => handleDelete(lessonToDelete?.id)}
+/>
+
 <CourseContainer bind:isStudent bind:courseId={data.courseId}>
   <PageNav title="Lessons">
     <div slot="widget">
@@ -136,7 +146,7 @@
 
             <div class="w-4/5">
               {#if lessonEditing === lesson.id}
-                <TextField bind:value={lesson.title} autofocus={true} className="max-w-lg" />
+                <TextField bind:value={lesson.title} autoFocus={true} className="max-w-lg" />
               {:else}
                 <h3 class="dark:text-white text-xl m-0 flex items-center">
                   <a
@@ -196,7 +206,7 @@
                     <div class="flex mb-2">
                       <Calendar size={20} class="carbon-icon text-gray-400 dark:text-white" />
                       <p class="dark:text-white text-sm ml-2">
-                        {new Date(lesson.lesson_at).toDateString()}
+                        {new Date(lesson.lesson_at || '').toDateString()}
                       </p>
                     </div>
                   {/if}
@@ -206,7 +216,7 @@
                   {#if lessonEditing === lesson.id}
                     <TextField
                       bind:value={lesson.call_url}
-                      autofocus={true}
+                      autoFocus={true}
                       className="w-[179px]"
                       placeholder="https://meet.google.com/mga-dsjs-fmb"
                     />
@@ -234,10 +244,11 @@
                       handleSaveLesson(lesson, $course.id);
                     }}
                     toolTipProps={isStudent
-                      ? {}
+                      ? undefined
                       : {
                           title: `Click to ${lesson.is_unlocked ? 'lock' : 'unlock'}`,
-                          direction: 'right'
+                          direction: 'left',
+                          hotkeys: []
                         }}
                   >
                     {#if lesson.is_unlocked}
@@ -253,7 +264,7 @@
                     {#if lessonEditing === lesson.id}
                       <IconButton
                         onClick={() => {
-                          lessonEditing = null;
+                          lessonEditing = undefined;
                           handleSaveLesson(lesson, $course.id);
                         }}
                       >
@@ -272,7 +283,12 @@
 
                 <RoleBasedSecurity allowedRoles={[1, 2]}>
                   <div class="hidden md:block">
-                    <IconButton onClick={handleDelete(lesson.id)}>
+                    <IconButton
+                      onClick={() => {
+                        lessonToDelete = lesson;
+                        openDeleteModal = true;
+                      }}
+                    >
                       <TrashCanIcon size={24} class="carbon-icon dark:text-white" />
                     </IconButton>
                   </div>
@@ -293,7 +309,7 @@
                         text={lessonEditing === lesson.id ? 'Save' : 'Edit'}
                         on:click={() => {
                           if (lessonEditing === lesson.id) {
-                            lessonEditing = null;
+                            lessonEditing = undefined;
                             handleSaveLesson(lesson, $course.id);
                           } else {
                             lessonEditing = lesson.id;