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/lib/components/ClEditor/index.svelte

@@ -1,46 +0,0 @@
-<script>
-  import Editor from 'cl-editor/src/Editor.svelte';
-
-  export let html = '';
-  export let editor;
-
-  let colors = [
-    '#000000',
-    '#e60000',
-    '#ff9900',
-    '#ffff00',
-    '#008a00',
-    '#0066cc',
-    '#9933ff',
-    '#ffffff',
-    '#facccc',
-    '#ffebcc',
-    '#ffffcc',
-    '#cce8cc',
-    '#cce0f5',
-    '#ebd6ff',
-    '#bbbbbb',
-    '#f06666',
-    '#ffc266',
-    '#ffff66',
-    '#66b966',
-    '#66a3e0',
-    '#c285ff',
-    '#888888',
-    '#a10000',
-    '#b26b00',
-    '#b2b200',
-    '#006100',
-    '#0047b2',
-    '#6b24b2',
-    '#444444',
-    '#5c0000',
-    '#663d00',
-    '#666600',
-    '#003700',
-    '#002966',
-    '#3d1466'
-  ];
-</script>
-
-<Editor bind:this={editor} {html} {colors} on:change={(evt) => (html = evt.detail)} />

apps/dashboard/src/lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import Modal from '$lib/components/Modal/index.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+
+  export let lessonTitle: string;
+  export let openDeleteModal = false;
+  export let deleteLesson = () => {};
+
+  async function handleDelete() {
+    deleteLesson();
+    openDeleteModal = false;
+  }
+</script>
+
+<Modal
+  onClose={() => (openDeleteModal = false)}
+  bind:open={openDeleteModal}
+  width="w-96"
+  modalHeading="Delete"
+>
+  <div>
+    <h1 class="dark:text-white text-lg">
+      Are you sure you want to delete: <strong>{lessonTitle}</strong>?
+    </h1>
+
+    <div class="mt-5 flex items-center justify-between">
+      <PrimaryButton
+        className="px-6 py-3"
+        variant={VARIANTS.OUTLINED}
+        label="No"
+        onClick={() => (openDeleteModal = false)}
+      />
+      <PrimaryButton
+        className="px-6 py-3"
+        variant={VARIANTS.OUTLINED}
+        label="Yes"
+        onClick={handleDelete}
+      />
+    </div>
+  </div>
+</Modal>

apps/dashboard/src/lib/components/Course/components/Lesson/store/lessons.ts

@@ -2,6 +2,7 @@ import { writable } from 'svelte/store';
 import type { Writable, Updater } from 'svelte/store';
 import { createLesson, updateLesson, deleteLesson } from '$lib/utils/services/courses';
 import type { Lesson, Course, LessonPage, LessonComment } from '$lib/utils/types';
+import { snackbar } from '$lib/components/Snackbar/store';
 
 export const uploadCourseVideoStore = writable({
   isModalOpen: false
@@ -43,20 +44,20 @@ export function handleAddLesson() {
   }) as Updater<any>);
 }
 
-export function handleDelete(lessonId: Lesson['id']) {
+export async function handleDelete(lessonId: Lesson['id'] | undefined) {
-  return async () => {
+  // Need to implement soft delete
-    // Need to implement soft delete
+  if (lessonId) {
-    if (lessonId) {
+    const { error } = await deleteLesson(lessonId);
-      const { error } = await deleteLesson(lessonId);
 
-      if (error) {
+    if (error) {
-        return alert('Please delete all exercises first');
+      snackbar.error(error.message);
-      }
+      return console.error('Error deleting course', error);
     }
 
     lessons.update((_lessons) => _lessons.filter((lesson) => lesson.id !== lessonId));
-    console.log(`lessonId`, lessonId);
+  }
-  };
+
+  console.log(`lessonId`, lessonId);
 }
 
 export async function handleSaveLesson(lesson: Lesson, course_id: Course['id']) {

apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/InstructorForm.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import cloneDeep from 'lodash/cloneDeep';
   import set from 'lodash/set';
   import get from 'lodash/get';
@@ -7,32 +7,37 @@
   import TextField from '$lib/components/Form/TextField.svelte';
   import UploadImage from '$lib/components/UploadImage/index.svelte';
   import { uploadAvatar } from '$lib/utils/services/courses';
+  import type { Course } from '$lib/utils/types';
 
-  export let course = {};
+  export let course: Course;
-  let name;
+  let name: string | undefined;
-  let role;
+  let role: string | undefined;
-  let imgUrl;
+  let imgUrl: string | undefined;
-  let description;
+  let description: string | undefined;
-  let courseNo;
+  let courseNo: string | undefined;
-  let avatar;
+  let avatar: string | undefined;
   let hasBeenSet = false;
 
-  function setter(value, setterKey) {
+  function setter(value: any, setterKey: string) {
     if (!value) return;
 
     const _course = cloneDeep(course);
     set(_course, setterKey, value);
+
     course = _course;
   }
 
-  async function onAvatarChange(_avatar) {
+  async function onAvatarChange(_avatar: string | undefined) {
-    if (!_avatar) return;
+    if (!_avatar || !course.id) return;
 
     const logo = await uploadAvatar(course.id, _avatar);
+
+    if (!logo) return;
+
     imgUrl = logo;
   }
 
-  function setDefaults(course) {
+  function setDefaults(course: Course) {
     if (isEmpty(course) || hasBeenSet) return;
 
     hasBeenSet = true;
@@ -78,7 +83,7 @@
 <TextArea
   label="About instructor"
   placeholder="A short background about the instructor"
-  rows="6"
+  rows={6}
   className="mt-5"
   labelClassName="font-bold"
   bind:value={description}

apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/RequirementForm.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import TextEditor from '$lib/components/TextEditor/index.svelte';
 
-  export let value: string;
+  export let value: string | undefined;
 </script>
 
 <div class="h-2/5">

apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/index.svelte

@@ -27,6 +27,7 @@
 
   export let course: Course;
   export let courseId: string;
+  export let syncCourseStore: (course: Course) => void;
 
   let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
   let loading = false;
@@ -123,9 +124,9 @@
       polls: undefined,
       slug: course.slug
     });
-    loading = false;
 
-    return `${window.location.origin}/course/${course.slug}`;
+    loading = false;
+    syncCourseStore(course);
   }
   /**
    * 1. Use all you have for editing now
@@ -149,10 +150,11 @@
       size={$isMobile ? 'large' : 'small'}
       color="text-black"
       toolTipProps={$isMobile
-        ? {}
+        ? undefined
         : {
             title: 'Toggle editor',
-            direction: 'right'
+            direction: 'right',
+            hotkeys: []
           }}
     >
       {#if show}

apps/dashboard/src/lib/components/CourseLandingPage/index.svelte

@@ -86,7 +86,7 @@
   $: video = get(courseData, 'metadata.videoUrl');
   $: bannerImage = get(courseData, 'logo');
   $: lessons = get(courseData, 'lessons', []);
-  $: instructor = courseData?.metadata?.instructor || {};
+  $: instructor = get(courseData, 'metadata.instructor') || {};
   $: initPlyr(player, video);
   $: {
     reviews = get(courseData, 'metadata.reviews') || [];
@@ -276,7 +276,7 @@
                   {/if}
                   {#if lesson.note}
                     <span class="text-sm font-light flex w-2/4"
-                      ><Notebook size={16} class="mr-1" />1 note</span
+                      ><Notebook size={16} class="mr-1" />note</span
                     >
                   {/if}
                 </div>

apps/dashboard/src/lib/components/Form/Date.svelte

@@ -1,7 +1,7 @@
 <script>
-  export let label;
+  export let label = '';
-  export let placeholder;
+  export let placeholder = '';
-  export let value;
+  export let value = '';
   export let className = '';
   export let onChange = () => {}; // This is to know if element is 'dirty'
 </script>

apps/dashboard/src/lib/components/TextEditor/index.svelte

@@ -4,7 +4,7 @@
   import { appStore } from '$lib/utils/store/app';
 
   export let id = '';
-  export let value: string;
+  export let value: string | undefined = '';
   export let onChange = (html: string) => {};
   export let height = 300;
   export let placeholder = '';
@@ -14,7 +14,7 @@
   const apiKey = PUBLIC_TINYMCE_API_KEY;
 
   let tinmycEditor: any;
-  let unmount = false
+  let unmount = false;
 
   // editor configuration
   let conf = {
@@ -73,6 +73,6 @@
 
 <div>
   {#if !unmount}
-  <Editor bind:value {apiKey} bind:conf />
+    <Editor bind:value {apiKey} bind:conf />
   {/if}
 </div>

apps/dashboard/src/lib/components/UploadImage/index.svelte

@@ -1,21 +1,22 @@
-<script>
+<script lang="ts">
   import Camera from 'carbon-icons-svelte/lib/Camera.svelte';
 
-  export let avatar = null;
+  export let avatar: string | undefined;
-  export let src = null;
+  export let src: string | undefined;
   export let widthHeight = '';
   export let shape = 'rounded-full';
-  export let errorMessage = null;
+  export let errorMessage: string | null = null;
 
-  let fileinput;
+  let fileinput: HTMLInputElement;
 
-  const onFileSelected = (e) => {
+  const onFileSelected = (e: Event<HTMLInputElement>) => {
     const image = e.target.files[0];
     let reader = new FileReader();
     reader.readAsDataURL(image);
     reader.onload = (e) => {
       avatar = image;
-      src = e.target.result;
+      // @ts-ignore
+      src = e.target?.result || undefined;
     };
   };
 </script>

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') {
+  const response: LoadOutput = {
-  //   throw redirect(301, 'https://about.classroomio.com');
-  // }
-
-  let response: LoadOutput = {
     orgSiteName: '',
     isOrgSite: false,
     skipAuth: false,
-    org: {
+    org: null
-      theme: ''
-    }
   };
 
   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 (
+    if (!isSupabaseTokenInLocalStorage() && !isPublicRoute($page.url.pathname)) {
-      !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>
+<script lang="ts">
-  import { onMount } from 'svelte';
   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;

supabase/migrations/20231115082347_remote_schema.sql

@@ -230,7 +230,7 @@ CREATE TABLE IF NOT EXISTS "public"."course" (
     "is_template" boolean DEFAULT true,
     "logo" "text" DEFAULT ''::"text" NOT NULL,
     "slug" character varying,
-    "metadata" "jsonb" DEFAULT '{"gols": "", "description": "", "requirements": ""}'::"jsonb" NOT NULL,
+    "metadata" "jsonb" DEFAULT '{"goals": "", "description": "", "requirements": ""}'::"jsonb" NOT NULL,
     "cost" bigint DEFAULT '0'::bigint,
     "currency" character varying DEFAULT 'NGN'::character varying NOT NULL,
     "banner_image" "text",