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 <[email protected]>

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>

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

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",

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",

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",

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é",

apps/dashboard/src/lib/utils/translations/hi.json

@@ -745,7 +745,9 @@
           "lock": "ताला",
           "unlock": "अनलॉक"
         },
-        "disabled": "सुविधा अक्षम है"
+        "disabled": "सुविधा अक्षम है",
+        "next": "अगला",
+        "prev": "पिछला"
       },
       "news_feed": {
         "heading": "समाचार फ़ीड",

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",

apps/dashboard/src/lib/utils/translations/ru.json

@@ -745,7 +745,9 @@
           "lock": "Замок",
           "unlock": "Разблокировать"
         },
-        "disabled": "Функция отключена"
+        "disabled": "Функция отключена",
+        "next": "Следующий",
+        "prev": "Предыдущий"
       },
       "news_feed": {
         "heading": "Новостная лента",

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",