From b7cdce4236541384e9ec7b2a1d0593460cd98a7b Mon Sep 17 00:00:00 2001
From: Em_Dev <Chifez1@gmail.com>
Date: Sat, 8 Jun 2024 08:04:21 +0100
Subject: [PATCH] feat: navigate to next/previous lesson (#352)

* prev and next button logic in place

* handled the edge case

* done

* updated the transation and the navigating function

* cleanup

* ease in animation, simplify disabled logic, avoid quick loader < 1s load time

---------

Co-authored-by: Rotimi Best <best@classroomio.com>
---
 .../Materials/components/ComponentNote.svelte |  2 +-
 .../components/Lesson/Materials/index.svelte  | 13 ++--
 .../src/lib/utils/translations/de.json        |  4 +-
 .../src/lib/utils/translations/en.json        |  3 +-
 .../src/lib/utils/translations/es.json        |  4 +-
 .../src/lib/utils/translations/fr.json        |  4 +-
 .../src/lib/utils/translations/hi.json        |  4 +-
 .../src/lib/utils/translations/pt.json        |  4 +-
 .../src/lib/utils/translations/ru.json        |  4 +-
 .../src/lib/utils/translations/vi.json        |  4 +-
 .../lessons/[...lessonParams]/+page.svelte    | 75 +++++++++++++------
 11 files changed, 83 insertions(+), 38 deletions(-)

diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/ComponentNote.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/ComponentNote.svelte
index dce92a8c..f2e2dd53 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/ComponentNote.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/ComponentNote.svelte
@@ -15,7 +15,7 @@
     $lessonByTranslation[lessonId],
     $lesson.locale
   );
-  $: hasAtLeastOneTranslation = Object.values($lessonByTranslation[lessonId]).some(
+  $: hasAtLeastOneTranslation = Object.values($lessonByTranslation[lessonId] || {}).some(
     (c) => !!c.length
   );
 </script>
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/index.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/index.svelte
index 8fbca428..d434c66e 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/index.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/index.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import isEmpty from 'lodash/isEmpty';
+  import { fade } from 'svelte/transition';
   import { useCompletion } from 'ai/svelte';
   import MODES from '$lib/utils/constants/mode.js';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
@@ -477,11 +478,13 @@
     </slot:fragment>
   </Tabs>
 {:else if !isMaterialsEmpty($lesson.materials, $lessonByTranslation[lessonId])}
-  <div class="w-full">
-    {#each componentsToRender as Component}
-      <svelte:component this={Component} {lessonId} />
-    {/each}
-  </div>
+  {#key lessonId}
+    <div class="w-full" in:fade={{ delay: 500 }} out:fade>
+      {#each componentsToRender as Component}
+        <svelte:component this={Component} {lessonId} />
+      {/each}
+    </div>
+  {/key}
 {:else}
   <Box className="text-center">
     <img src="/no-video.svg" alt="Video not found" />
diff --git a/apps/dashboard/src/lib/utils/translations/de.json b/apps/dashboard/src/lib/utils/translations/de.json
index 72f4047c..62f8bf2b 100644
--- a/apps/dashboard/src/lib/utils/translations/de.json
+++ b/apps/dashboard/src/lib/utils/translations/de.json
@@ -745,7 +745,9 @@
           "lock": "Sperren",
           "unlock": "Freischalten"
         },
-        "disabled": "Funktion ist deaktiviert"
+        "disabled": "Funktion ist deaktiviert",
+        "next": "Nächste",
+        "prev": "Vorher"
       },
       "news_feed": {
         "heading": "Neuigkeiten",
diff --git a/apps/dashboard/src/lib/utils/translations/en.json b/apps/dashboard/src/lib/utils/translations/en.json
index ae1918f3..4a8e5017 100644
--- a/apps/dashboard/src/lib/utils/translations/en.json
+++ b/apps/dashboard/src/lib/utils/translations/en.json
@@ -529,7 +529,8 @@
         "mark_as": "Mark as",
         "incomplete": "Incomplete",
         "complete": "Complete",
-
+        "next": "Next",
+        "prev": "Prev",
         "materials": {
           "body_heading": "No note, video or slide added for this lesson yet",
           "body_content": "Share your knowledge with your students by creating engaging content. Start by clicking on",
diff --git a/apps/dashboard/src/lib/utils/translations/es.json b/apps/dashboard/src/lib/utils/translations/es.json
index f3c3f16a..74ac98ca 100644
--- a/apps/dashboard/src/lib/utils/translations/es.json
+++ b/apps/dashboard/src/lib/utils/translations/es.json
@@ -745,7 +745,9 @@
           "lock": "Cerrar",
           "unlock": "desbloquear"
         },
-        "disabled": "La característica está deshabilitada"
+        "disabled": "La característica está deshabilitada",
+        "next": "Próximo",
+        "prev": "Anterior"
       },
       "news_feed": {
         "heading": "Noticias",
diff --git a/apps/dashboard/src/lib/utils/translations/fr.json b/apps/dashboard/src/lib/utils/translations/fr.json
index 60394c62..91eda60e 100644
--- a/apps/dashboard/src/lib/utils/translations/fr.json
+++ b/apps/dashboard/src/lib/utils/translations/fr.json
@@ -745,7 +745,9 @@
           "lock": "Verrouillage",
           "unlock": "Ouvrir"
         },
-        "disabled": "La fonctionnalité est désactivée"
+        "disabled": "La fonctionnalité est désactivée",
+        "next": "Suivant",
+        "prev": "Précédent"
       },
       "news_feed": {
         "heading": "Fil d'actualité",
diff --git a/apps/dashboard/src/lib/utils/translations/hi.json b/apps/dashboard/src/lib/utils/translations/hi.json
index ef60dec0..4ffd43b3 100644
--- a/apps/dashboard/src/lib/utils/translations/hi.json
+++ b/apps/dashboard/src/lib/utils/translations/hi.json
@@ -745,7 +745,9 @@
           "lock": "ताला",
           "unlock": "अनलॉक"
         },
-        "disabled": "सुविधा अक्षम है"
+        "disabled": "सुविधा अक्षम है",
+        "next": "अगला",
+        "prev": "पिछला"
       },
       "news_feed": {
         "heading": "समाचार फ़ीड",
diff --git a/apps/dashboard/src/lib/utils/translations/pt.json b/apps/dashboard/src/lib/utils/translations/pt.json
index cc39fadc..f5eca64a 100644
--- a/apps/dashboard/src/lib/utils/translations/pt.json
+++ b/apps/dashboard/src/lib/utils/translations/pt.json
@@ -745,7 +745,9 @@
           "lock": "Trancar",
           "unlock": "Desbloquear"
         },
-        "disabled": "O recurso está desativado"
+        "disabled": "O recurso está desativado",
+        "next": "Próximo",
+        "prev": "Anterior"
       },
       "news_feed": {
         "heading": "Notícias",
diff --git a/apps/dashboard/src/lib/utils/translations/ru.json b/apps/dashboard/src/lib/utils/translations/ru.json
index 22230af8..00f3f93f 100644
--- a/apps/dashboard/src/lib/utils/translations/ru.json
+++ b/apps/dashboard/src/lib/utils/translations/ru.json
@@ -745,7 +745,9 @@
           "lock": "Замок",
           "unlock": "Разблокировать"
         },
-        "disabled": "Функция отключена"
+        "disabled": "Функция отключена",
+        "next": "Следующий",
+        "prev": "Предыдущий"
       },
       "news_feed": {
         "heading": "Новостная лента",
diff --git a/apps/dashboard/src/lib/utils/translations/vi.json b/apps/dashboard/src/lib/utils/translations/vi.json
index 6d94183c..1993ed2e 100644
--- a/apps/dashboard/src/lib/utils/translations/vi.json
+++ b/apps/dashboard/src/lib/utils/translations/vi.json
@@ -745,7 +745,9 @@
           "lock": "Khóa",
           "unlock": "Mở khóa"
         },
-        "disabled": "Tính năng bị vô hiệu hóa"
+        "disabled": "Tính năng bị vô hiệu hóa",
+        "next": "Kế tiếp",
+        "prev": "Trước đó"
       },
       "news_feed": {
         "heading": "Nguồn cấp tin tức",
diff --git a/apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte b/apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
index a7652263..d54eee9c 100644
--- a/apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+++ b/apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
@@ -39,6 +39,7 @@
   import { getIsLessonComplete } from '$lib/components/Course/components/Lesson/functions';
   import { t } from '$lib/utils/functions/translations';
   import { LANGUAGES } from '$lib/utils/constants/translation';
+  import { ChevronLeft, ChevronRight } from 'carbon-icons-svelte';
 
   export let data;
 
@@ -61,11 +62,15 @@
   }
 
   async function fetchReqData(lessonId = '', isMaterialsTabActive: boolean) {
-    $lesson.isFetching = true;
+    const timeout = setTimeout(() => {
+      $lesson.isFetching = true;
+    }, 1000);
     let lessonData;
     if (isMaterialsTabActive) {
       const lesson = await fetchLesson(lessonId);
       lessonData = lesson.data;
+
+      clearTimeout(timeout);
     }
 
     console.log({ lessonData });
@@ -240,6 +245,29 @@
     $apps.open = true;
   }
 
+  const isNextOrPrevDisabled = (lessonId: string, isPrev: boolean) => {
+    const index = $lessons.findIndex((lesson) => lesson.id === lessonId);
+
+    return isPrev ? !$lessons[index - 1] : !$lessons[index + 1];
+  };
+
+  const goToNextOrPrevLesson = (lessonId: string, isPrev: boolean) => {
+    const isDisabled = isNextOrPrevDisabled(lessonId, isPrev);
+
+    // Always use early return
+    if (isDisabled) return;
+
+    const index = $lessons.findIndex((lesson) => lesson.id === lessonId);
+    const nextOrPrevLesson = isPrev ? $lessons[index - 1] : $lessons[index + 1];
+
+    const isLocked = $globalStore.isStudent && !nextOrPrevLesson.is_unlocked;
+
+    if (isLocked) return;
+
+    const path = `/courses/${$course.id}/lessons/${nextOrPrevLesson.id}`;
+    goto(path);
+  };
+
   $: path = $page.url?.pathname?.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
 
   $: if (data.courseId && browser) {
@@ -248,6 +276,8 @@
   }
 
   $: isLessonComplete = getIsLessonComplete($lesson.lesson_completion, $profile.id);
+  $: isPrevDisabled = isNextOrPrevDisabled(data.lessonId, true);
+  $: isNextDisabled = isNextOrPrevDisabled(data.lessonId, false);
 </script>
 
 <CourseContainer
@@ -343,28 +373,6 @@
         bind:isSaving
         isStudent={$globalStore.isStudent}
       />
-
-      <!-- {#if $globalStore.isStudent}
-        <div class="w-full hidden lg:flex flex-row-reverse mt-10">
-          <PrimaryButton
-            onClick={() => markLessonComplete(data.lessonId)}
-            isLoading={isMarkingComplete}
-            isDisabled={isMarkingComplete}
-            variant={VARIANTS.OUTLINED}
-            className="mt-10"
-          >
-            {#if isLessonComplete}
-              <CheckmarkFilledIcon size={24} class="carbon-icon text-primary-600 mr-2" />
-            {:else}
-              <CheckmarkOutlineIcon size={24} class="carbon-icon mr-2" />
-            {/if}
-            {$t('course.navItem.lessons.mark_as')}
-            {isLessonComplete
-              ? $t('course.navItem.lessons.incomplete')
-              : $t('course.navItem.lessons.complete')}
-          </PrimaryButton>
-        </div>
-      {/if} -->
     </PageBody>
   {/if}
 
@@ -373,6 +381,17 @@
     <div
       class="flex items-center gap-2 w-fit rounded-full shadow-xl bg-gray-100 dark:bg-neutral-700 px-5 py-1"
     >
+      <button
+        disabled={isPrevDisabled}
+        class={`px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center ${
+          isPrevDisabled && 'opacity-25 cursor-not-allowed'
+        }`}
+        on:click={() => goToNextOrPrevLesson(data.lessonId, true)}
+      >
+        <ChevronLeft size={24} />
+
+        <span class="hidden md:block">{$t('course.navItem.lessons.prev')}</span>
+      </button>
       {#if data.isMaterialsTabActive}
         <button
           class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center"
@@ -398,7 +417,7 @@
         <span class="ml-1">{$lesson.totalComments}</span>
       </button>
       <button
-        class="px-2 my-2"
+        class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center"
         on:click={() => markLessonComplete(data.lessonId)}
         disabled={isMarkingComplete}
       >
@@ -408,6 +427,14 @@
           <CheckmarkOutlineIcon size={24} class="carbon-icon" />
         {/if}
       </button>
+      <button
+        disabled={isNextDisabled}
+        class={`px-2 my-2 flex items-center ${isNextDisabled && 'opacity-25 cursor-not-allowed'}`}
+        on:click={() => goToNextOrPrevLesson(data.lessonId, false)}
+      >
+        <span class="hidden md:block">{$t('course.navItem.lessons.next')}</span>
+        <ChevronRight size={24} />
+      </button>
     </div>
   </div>
 </CourseContainer>