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/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} />