feat: students should move to next lesson on click go to lesson (#230)

* completion * completion * PR Fixes * PR Fixes * fix: progress bug on home page * chore: fix lesson completion issue --------- Co-authored-by: Rotimi Best <[email protected]>
2024-04-16 08:51:53 +01:00
parent db38756cbf
commit 1277bcbfc6
7 changed files with 81 additions and 27 deletions
@@ -26,13 +26,17 @@
  import { course, group } from '$lib/components/Course/store';
  import DateField from '$lib/components/Form/Date.svelte';
  import type { Lesson } from '$lib/utils/types';
+  import { goto } from '$app/navigation';

  export let data;

+  const query = new URLSearchParams($page.url.search);
+
  let lessonEditing: string | undefined;
  let lessonToDelete: Lesson | undefined;
-  let isStudent = true;
-  let openDeleteModal = false;
+  let isStudent: boolean = true;
+  let openDeleteModal: boolean = false;
+  let isFetching: boolean = false;

  const flipDurationMs = 300;

@@ -81,6 +85,30 @@
      return index + 1;
    }
  }
+
+  function findFirstIncompleteLesson() {
+    return $lessons.find(
+      (lesson) =>
+        lesson.lesson_completion &&
+        lesson.lesson_completion.length === 0 &&
+        lesson.is_unlocked === true
+    );
+  }
+
+  function onNextQuery(lessons) {
+    if (!isFetching && lessons.length > 0) {
+      const incompleteLesson = findFirstIncompleteLesson();
+
+      if (incompleteLesson) {
+        goto(`/courses/${data.courseId}/lessons/${incompleteLesson.id}`);
+      } else {
+        goto(`/courses/${data.courseId}/lessons`);
+      }
+    }
+  }
+
+  $: shouldGoToNextLesson = query.get('next') === 'true';
+  $: shouldGoToNextLesson && onNextQuery($lessons);
 </script>

 {#if $handleAddLessonWidget}
@@ -94,7 +122,7 @@
 />

 <!-- TODO: Refactor usage of two way binding isStudent, rather use $globalStore.isStudent -->
-<CourseContainer bind:isStudent bind:courseId={data.courseId}>
+<CourseContainer bind:isFetching bind:isStudent bind:courseId={data.courseId}>
  <PageNav title="Lessons">
    <div slot="widget">
      <RoleBasedSecurity allowedRoles={[1, 2]}>
@@ -104,7 +132,18 @@
  </PageNav>

  <PageBody width="max-w-6xl" padding="p-0">
-    {#if $lessons.length}
+    {#if shouldGoToNextLesson}
+      <Box className="w-full lg:w-11/12 lg:px-4 m-auto">
+        <div class="flex flex-col items-center justify-between">
+          <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="mx-auto my-2.5" />
+          <h2 class="my-1.5 text-xl font-normal">No lessons yet</h2>
+          <p class="text-center text-sm text-slate-500">
+            Share your knowledge with the world by creating engaging lessons. Start by clicking on
+            the Add button.
+          </p>
+        </div>
+      </Box>
+    {:else if $lessons.length}
      <section
        class="m-auto w-full p-3 lg:w-11/12 lg:px-4"
        use:dndzone={{