CLASSROOMIO-T-79: Implement empty state pages

Co-authored-by: Rotimi Best <[email protected]>


Merge-request: CLASSROOMIO-MR-32
Merged-by: Best Admin <[email protected]>

src/routes/+layout.svelte

@@ -22,12 +22,7 @@
   // import Footer from '$lib/components/Footer/index.svelte';
   import Apps from '$lib/components/Apps/index.svelte';
   import PlayQuiz from '$lib/components/Org/Quiz/Play/index.svelte';
-  import {
-    isCoursesPage,
-    isOrgPage,
-    isLMSPage,
-    isQuizPage,
-  } from '$lib/utils/functions/app';
+  import { isCoursesPage, isOrgPage, isLMSPage, isQuizPage } from '$lib/utils/functions/app';
   import showAppsSideBar from '$lib/utils/functions/showAppsSideBar';
   import isPublicRoute from '$lib/utils/functions/routes/isPublicRoute';
   import { user, profile } from '$lib/utils/store/user';
@@ -58,14 +53,14 @@
         integrations: [
           new Integrations.BrowserTracing(),
           new CaptureConsole({
-            levels: ['error'],
-          }),
+            levels: ['error']
+          })
         ],
         environment: !dev ? 'production' : 'development',
         // Set tracesSampleRate to 1.0 to capture 100%
         // of transactions for performance monitoring.
         // We recommend adjusting this value in production
-        tracesSampleRate: 1.0,
+        tracesSampleRate: 1.0
       });
     }
   }
@@ -74,7 +69,7 @@
     const params = new URLSearchParams(window.location.search);
     // Get user profile
     const {
-      data: { session },
+      data: { session }
     } = await supabase.auth.getSession();
     const { user: authUser } = session;
     console.log('Get user profile', authUser);
@@ -83,20 +78,14 @@
     let {
       data: profileData,
       error,
-      status,
-    } = await supabase
-      .from('profile')
-      .select(`*`)
-      .eq('id', authUser?.id)
-      .single();
+      status
+    } = await supabase.from('profile').select(`*`).eq('id', authUser?.id).single();
 
     if (error && !profileData && status === 406 && authUser) {
       // User wasn't found, create profile
       console.log(`User wasn't found, create profile`);
 
-      const [regexUsernameMatch] = [
-        ...(authUser.email?.matchAll(/(.*)@/g) || []),
-      ];
+      const [regexUsernameMatch] = [...(authUser.email?.matchAll(/(.*)@/g) || [])];
 
       const { data, error } = await supabase
         .from('profile')
@@ -104,7 +93,7 @@
           id: authUser.id,
           username: regexUsernameMatch[1] + '1669991321770',
           fullname: regexUsernameMatch[1],
-          email: authUser.email,
+          email: authUser.email
         })
         .select();
 
@@ -125,7 +114,7 @@
             .insert({
               organization_id: $currentOrg.id,
               profile_id: $profile.id,
-              role_id: 3,
+              role_id: 3
             })
             .select();
           if (error) {
@@ -188,9 +177,7 @@
       const subdomain = matches?.[1] ?? '';
 
       if (!blockedSubdomain.includes(subdomain)) {
-        const answer = Array.isArray(matches)
-          ? !!subdomain && subdomain !== 'www'
-          : false;
+        const answer = Array.isArray(matches) ? !!subdomain && subdomain !== 'www' : false;
 
         $appStore.isStudentDomain = debug || answer;
         $appStore.siteNameFromDomain = debug ? 'codingdojo' : subdomain;
@@ -230,32 +217,30 @@
     //   return goto('/login');
     // }
 
-    const { data: authListener } = supabase.auth.onAuthStateChange(
-      (event, session) => {
-        // Log key events
-        console.log(`event`, event);
-        if (event == 'PASSWORD_RECOVERY') {
-          console.log('PASSWORD RESET');
-        }
-
-        if (path.includes('reset')) {
-          console.log('Dont change auth when on reset page');
-          return;
-        }
-
-        // Skip Authentication
-        if (skipAuth) return;
-
-        // Authentication Steps
-        if (event === 'SIGNED_IN') {
-          $user.fetchingUser = true;
-          getProfile();
-        } else {
-          console.log('not logged in, go to login');
-          return goto('/login');
-        }
+    const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
+      // Log key events
+      console.log(`event`, event);
+      if (event == 'PASSWORD_RECOVERY') {
+        console.log('PASSWORD RESET');
       }
-    );
+
+      if (path.includes('reset')) {
+        console.log('Dont change auth when on reset page');
+        return;
+      }
+
+      // Skip Authentication
+      if (skipAuth) return;
+
+      // Authentication Steps
+      if (event === 'SIGNED_IN') {
+        $user.fetchingUser = true;
+        getProfile();
+      } else {
+        console.log('not logged in, go to login');
+        return goto('/login');
+      }
+    });
 
     // Update theme - dark or light mode
     $appStore.isDark = localStorage.getItem('theme') === 'dark';
@@ -266,6 +251,7 @@
     }
 
     return () => {
+      console.log('unsubscribed');
       authListener?.unsubscribe();
     };
   });

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

@@ -23,7 +23,7 @@
     lessons,
     handleAddLesson,
     handleSaveLesson,
-    handleDelete,
+    handleDelete
   } from '$lib/components/Course/components/Lesson/store/lessons';
   import { course, setCourse, group } from '$lib/components/Course/store';
 
@@ -55,7 +55,7 @@
         ref.scrollIntoView({
           block: 'start',
           behavior: 'smooth',
-          inline: 'nearest',
+          inline: 'nearest'
         });
       }
     }, 100);
@@ -66,10 +66,7 @@
   }
 
   function handleDndFinalize(e) {
-    const prevLessonsByOrder = $lessons.reduce(
-      (acc, l) => ({ ...acc, [l.id]: l.order }),
-      {}
-    );
+    const prevLessonsByOrder = $lessons.reduce((acc, l) => ({ ...acc, [l.id]: l.order }), {});
     $lessons = e.detail.items;
 
     // Only update the lesson order that changed
@@ -98,9 +95,7 @@
   });
 
   $: {
-    const user = $group.people.find(
-      (person) => person.profile_id === $profile.id
-    );
+    const user = $group.people.find((person) => person.profile_id === $profile.id);
 
     if (user) {
       isStudent = user.role_id === 3;
@@ -112,11 +107,7 @@
   <PageNav title="Lessons">
     <div slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <PrimaryButton
-          label="Add"
-          onClick={addLesson}
-          isDisabled={!!lessonEditing}
-        />
+        <PrimaryButton label="Add" onClick={addLesson} isDisabled={!!lessonEditing} />
       </RoleBasedSecurity>
     </div>
   </PageNav>
@@ -130,8 +121,8 @@
         dragDisabled: isStudent,
         dropTargetStyle: {
           border: '2px #1d4ed8 solid',
-          'border-style': 'dashed',
-        },
+          'border-style': 'dashed'
+        }
       }}
       on:consider={handleDndConsider}
       on:finalize={handleDndFinalize}
@@ -153,7 +144,7 @@
                 ? {}
                 : {
                     title: `Click to ${lesson.is_complete ? 'lock' : 'unlock'}`,
-                    direction: 'right',
+                    direction: 'right'
                   }}
             >
               {#if lesson.is_complete}
@@ -218,11 +209,7 @@
             >
               <div class="mb-3 lg:mb-0">
                 {#if lessonEditing === lesson.id}
-                  <Select
-                    bind:value={lesson.profile}
-                    options={$group.tutors}
-                    labelKey="fullname"
-                  />
+                  <Select bind:value={lesson.profile} options={$group.tutors} labelKey="fullname" />
                 {:else if !lesson.profile}
                   <p class="dark:text-white ml-2 text-sm">No tutor added</p>
                 {:else}
@@ -268,11 +255,7 @@
                   />
                 {:else}
                   <PhoneIcon size={24} class="carbon-icon" />
-                  <a
-                    class="text-md ml-2"
-                    href={lesson.call_url || '#'}
-                    target="_blank"
-                  >
+                  <a class="text-md ml-2" href={lesson.call_url || '#'} target="_blank">
                     {lesson.call_url ? 'Join lesson' : 'No link'}
                   </a>
                 {/if}
@@ -290,10 +273,14 @@
         </div>
       {:else}
         <Box>
-          <h3 class="text-3xl text-gray-500 dark:text-white">
-            No lesson added
-          </h3>
-          <img alt="No lesson added" src="/notfound2.gif" class="w-80" />
+          <div class="flex justify-between flex-col items-center w-96">
+            <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="my-2.5 mx-auto" />
+            <h2 class="text-xl my-1.5 font-normal">No lessons yet</h2>
+            <p class="text-sm text-center text-slate-500">
+              Share your knowledge with the world by creating engaging lessons. Start by clicking on
+              the New Lesson button.
+            </p>
+          </div>
         </Box>
       {/each}
     </section>

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

@@ -8,7 +8,6 @@ export const load = ({ params = { id: '' } }) => {
   //   lessonId
   // }
   const splitparams = lessonParams.split('/');
-  console.log('splitparams', splitparams);
   const [lessonId, exerciseRouteName, exerciseId] = splitparams;
 
   return {
@@ -16,6 +15,6 @@ export const load = ({ params = { id: '' } }) => {
     lessonId,
     exerciseRouteName,
     exerciseId,
-    isMaterialsTabActive: !exerciseRouteName,
+    isMaterialsTabActive: !exerciseRouteName
   };
 };

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

@@ -27,9 +27,7 @@
     if (!$course.id) {
       const { data: _data } = await fetchCourse(data.courseId);
 
-      lessonData = _data.lessons.find(
-        (lesson = { id: '' }) => lesson.id === lessonId
-      );
+      lessonData = _data.lessons.find((lesson = { id: '' }) => lesson.id === lessonId);
       setCourse(_data);
     } else if (prevLessonId !== lessonId) {
       const lesson = await fetchLesson(lessonId);
@@ -38,8 +36,7 @@
 
     prevLessonId = lessonId;
 
-    const totalExercises =
-      lessonData?.totalExercises?.[0] && lessonData.totalExercises[0].count;
+    const totalExercises = lessonData?.totalExercises?.[0] && lessonData.totalExercises[0].count;
     setLesson(lessonData, totalExercises || 0);
     isFetching = false;
   }
@@ -51,7 +48,7 @@
       ...l,
       id: data.lessonId,
       totalExercises,
-      materials: lessonData,
+      materials: lessonData
     }));
   }
 
@@ -61,28 +58,22 @@
     mode = MODES.view;
     fetchReqData(data.lessonId);
   }
-
-  $: console.log('data changed', data);
 </script>
 
-<CourseContainer
-  {isFetching}
-  {path}
-  isExercisePage={!data.isMaterialsTabActive && data.exerciseId}
->
+<CourseContainer {isFetching} {path} isExercisePage={!data.isMaterialsTabActive && data.exerciseId}>
   <PageNav
     navItems={[
       {
         label: 'Materials',
         isActive: data.isMaterialsTabActive,
-        href: path,
+        href: path
       },
       {
         label: 'Exercises',
         badgeValue: $lesson.totalExercises,
         isActive: !data.isMaterialsTabActive,
-        href: `${path}/exercises`,
-      },
+        href: `${path}/exercises`
+      }
     ]}
   >
     <svelte:fragment slot="widget">
@@ -104,11 +95,7 @@
   </PageNav>
 
   {#if !data.isMaterialsTabActive}
-    <Exercises
-      lessonId={data.lessonId}
-      exerciseId={data.exerciseId}
-      path={`${path}/exercises`}
-    />
+    <Exercises lessonId={data.lessonId} exerciseId={data.exerciseId} path={`${path}/exercises`} />
   {:else if !!data.lessonId}
     <PageBody>
       <Materials lessonId={data.lessonId} {mode} {prevMode} />