fix: empty lesson title bug (#314)

* finished the lesson title bug

* made chnages based on review

* Update +page.svelte

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/src/lib/components/Course/components/Lesson/store/lessons.ts

@@ -4,6 +4,7 @@ import { createLesson, updateLesson, deleteLesson } from '$lib/utils/services/co
 import type { Lesson, Course, LessonPage, LessonComment } from '$lib/utils/types';
 import { LOCALE } from '$lib/utils/types';
 import { snackbar } from '$lib/components/Snackbar/store';
+import { lessonValidation } from '$lib/utils/functions/validator';
 
 export const uploadCourseVideoStore = writable({
   isModalOpen: false
@@ -68,6 +69,12 @@ export async function handleDelete(lessonId: Lesson['id'] | undefined) {
 }
 
 export async function handleSaveLesson(lesson: Lesson, course_id: Course['id']) {
+  const result = lessonValidation(lesson);
+
+  if (Object.keys(result).length) {
+    return result;
+  }
+
   console.log(`handleSaveLesson lesson`, lesson);
   const newLesson = {
     title: lesson.title,

apps/dashboard/src/lib/components/Course/components/Navigation/index.svelte

@@ -280,7 +280,7 @@
                       size="sm"
                       shape="rounded-full"
                     />
-                    <span>{item.title}</span>
+                    <span class="w-[70%] text-ellipsis line-clamp-2">{item.title}</span>
                     <span class="grow" />
                     {#if !item.is_unlocked}
                       <span class="text-md ml-2" title="This lesson is locked.">

apps/dashboard/src/lib/utils/functions/validator.js

@@ -11,6 +11,18 @@ const getSiteNameValidation = () =>
 const getNewsfeedValidation = () =>
   z.string().min(5, { message: 'Field must contain 5 or more characters' });
 
+const lessonSchema = z.object({
+  title: z.string().nonempty({ message: 'Title cannot be empty' }),
+  lesson_at: z.string().optional(),
+  call_url: z.string().nullable().optional(),
+  profile: z
+    .object({
+      id: z.string().optional()
+    })
+    .optional(),
+  is_unlocked: z.boolean()
+});
+
 const createQuizValidationSchema = z.object({
   title: z.string().min(6, {
     message: 'Must be 6 or more characters long',
@@ -143,7 +155,11 @@ export const processErrors = (error, mapToId) => {
 
 export const authValidation = (fields = {}) => {
   const { error } = authValidationSchema.safeParse(fields);
+  return processErrors(error);
+};
 
+export const lessonValidation = (lesson = {}) => {
+  const { error } = lessonSchema.safeParse(lesson);
   return processErrors(error);
 };
 

apps/dashboard/src/routes/courses/[id]/+page.svelte

@@ -237,7 +237,6 @@
   $: initNewsFeed(data.courseId);
 
   $: setAuthor($group, $profile.id);
-
   $: $newsFeed = $newsFeed.sort((a, b) => Number(b.isPinned) - Number(a.isPinned));
 </script>
 

apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte

@@ -25,7 +25,7 @@
   import Avatar from '$lib/components/Apps/components/Poll/components/Avatar.svelte';
   import { course, group } from '$lib/components/Course/store';
   import DateField from '$lib/components/Form/Date.svelte';
-  import type { Lesson } from '$lib/utils/types';
+  import type { Course, Lesson } from '$lib/utils/types';
   import { t } from '$lib/utils/functions/translations.js';
   import { goto } from '$app/navigation';
 
@@ -41,6 +41,19 @@
 
   const flipDurationMs = 300;
 
+  let errors: Record<string, string> = {};
+
+  async function saveLesson(lesson: Lesson, courseId: Course['id']) {
+    const validationRes = await handleSaveLesson(lesson, courseId);
+
+    if (validationRes && Object.keys(validationRes).length) {
+      errors = validationRes;
+    } else {
+      errors = {};
+      lessonEditing = undefined;
+    }
+  }
+
   function addLesson() {
     $handleAddLessonWidget.open = true;
   }
@@ -181,7 +194,12 @@
             <div class="w-4/5">
               <!-- Lesson Title -->
               {#if lessonEditing === lesson.id}
-                <TextField bind:value={lesson.title} autoFocus={true} className="max-w-lg" />
+                <TextField
+                  bind:value={lesson.title}
+                  autoFocus={true}
+                  className="max-w-lg"
+                  errorMessage={errors?.title}
+                />
               {:else}
                 <h3 class="m-0 flex items-center text-lg dark:text-white">
                   <a
@@ -293,8 +311,7 @@
                       : $t('course.navItem.lessons.add_lesson.edit')}
                     on:click={() => {
                       if (lessonEditing === lesson.id) {
-                        lessonEditing = undefined;
-                        handleSaveLesson(lesson, $course.id);
+                        saveLesson(lesson, $course.id);
                       } else {
                         lessonEditing = lesson.id;
                       }