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 <best@classroomio.com>

apps/dashboard/src/lib/components/CourseContainer/index.svelte

@@ -9,6 +9,7 @@
   import { profile } from '$lib/utils/store/user';
   import { fetchCourse } from '$lib/utils/services/courses';
   import { globalStore } from '$lib/utils/store/app';
+  import { lessons } from '../Course/components/Lesson/store/lessons';
 
   export let courseId = '';
   export let path = '';
@@ -23,6 +24,7 @@
 
     isFetching = true;
     course.set(defaultCourse);
+    lessons.set([]);
 
     const { data: _data } = await fetchCourse(courseId);
 

apps/dashboard/src/lib/components/Courses/components/Card/index.svelte

@@ -66,7 +66,7 @@
 <a
   rel="prefetch"
   bind:this={target}
-  href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`}
+  href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}${isLMS ? '/lessons?next=true' : ''}`}
   class="text-black border border-gray dark:border-neutral-600 rounded w-full max-w-[320px] relative hover:scale-95 transition-all ease-in-out"
 >
   <div class="p-4">
@@ -122,7 +122,7 @@
 
     {#if isLMS}
       <PrimaryButton
-        label={'Continue Course'}
+        label="Continue Course"
         variant={VARIANTS.OUTLINED}
         className="rounded-none text-primary-600"
       />

apps/dashboard/src/lib/components/LMS/components/Learning.svelte

@@ -7,7 +7,7 @@
 
   const gotoCourse = (id: string | undefined) => {
     if (!id) return;
-    goto(`/courses/${id}`);
+    goto(`/courses/${id}/lessons?next=true`);
   };
 </script>
 
@@ -41,7 +41,9 @@
             </span>
             <div class="relative bg-[#EAEAEA] w-full h-1">
               <div
-                style="width:{course.progress_rate}%"
+                style="width: {Math.round(
+                  ((course?.progress_rate ?? 0) / (course?.total_lessons ?? 0)) * 100
+                ) || 0}%"
                 class={`absolute top-0 left-0 bg-primary-700 h-full`}
               />
             </div>