diff --git a/src/components/Forms/CourseForm/CourseForm.tsx b/src/components/Forms/CourseForm/CourseForm.tsx index 530b5f1..bac67e9 100644 --- a/src/components/Forms/CourseForm/CourseForm.tsx +++ b/src/components/Forms/CourseForm/CourseForm.tsx @@ -25,6 +25,7 @@ import { useErrorHandler } from 'react-error-boundary'; * Services */ import { CategoryServiceInstance, UserServiceInstance } from '@educt/services'; +import { DESCRIPTION_MAX_LENGTH, EDUCATION_DESCRIPTION_MAX_LENGTH } from './CourseForm.validator'; export type InputFields = { title: string; @@ -113,8 +114,11 @@ const CourseForm: React.FC = ({ onSubmit, buttonLabel, isLo {errors.description?.message} - 250 ? 'red.500' : 'gray.500'}> - {watchDescription?.length || 0}/250 + DESCRIPTION_MAX_LENGTH ? 'red.500' : 'gray.500'} + > + {watchDescription?.length || 0}/{DESCRIPTION_MAX_LENGTH} @@ -130,10 +134,12 @@ const CourseForm: React.FC = ({ onSubmit, buttonLabel, isLo 250 ? 'red.500' : 'gray.500' + !!errors.education_description || watchEducationDescription.length > EDUCATION_DESCRIPTION_MAX_LENGTH + ? 'red.500' + : 'gray.500' } > - {watchEducationDescription.length || 0}/250 + {watchEducationDescription.length || 0}/{EDUCATION_DESCRIPTION_MAX_LENGTH} )} diff --git a/src/components/Forms/CourseForm/CourseForm.validator.ts b/src/components/Forms/CourseForm/CourseForm.validator.ts index 4df1c54..4f4b49d 100644 --- a/src/components/Forms/CourseForm/CourseForm.validator.ts +++ b/src/components/Forms/CourseForm/CourseForm.validator.ts @@ -1,15 +1,20 @@ import yup from '@educt/schema'; -const FILE_SIZE = 1000 * 1024; -const SUPPORTED_FORMATS = ['image/jpg', 'image/jpeg', 'image/png', 'image/webp']; +export const FILE_SIZE = 1000 * 1024; +export const SUPPORTED_FORMATS = ['image/jpg', 'image/jpeg', 'image/png', 'image/webp']; +export const DESCRIPTION_MAX_LENGTH = 250; +export const EDUCATION_DESCRIPTION_MAX_LENGTH = 250; const CreateCourseSchema = yup.object().shape({ title: yup.string().required('Title field name is required').max(90, 'Title must be at most 90 characters'), description: yup .string() .required('Description field name is required') - .max(250, 'Description must be at most 250 characters'), - education_description: yup.string().max(250, 'This section must be at most 250 characters').nullable(), + .max(DESCRIPTION_MAX_LENGTH, 'Description must be at most 250 characters'), + education_description: yup + .string() + .max(EDUCATION_DESCRIPTION_MAX_LENGTH, 'This section must be at most 250 characters') + .nullable(), image: yup .mixed() .test('fileSize', 'File size is too large', (value: File) => { diff --git a/src/components/Forms/LessonForm/LessonForm.tsx b/src/components/Forms/LessonForm/LessonForm.tsx index 75591e0..7b6b3e2 100644 --- a/src/components/Forms/LessonForm/LessonForm.tsx +++ b/src/components/Forms/LessonForm/LessonForm.tsx @@ -19,6 +19,7 @@ import VideoUploader from '@educt/components/VideoUploader'; import FilesUploader from '@educt/components/FilesUploader'; import { FileSupportedFormatsEnum, VideoSupportedFormatsEnum } from '@educt/enums'; import type { AttachmentFileType, LessonVideoType } from '@educt/types'; +import { DESCRIPTION_MAX_LENGTH } from './LessonForm.validator'; export type InputFields = { title: string; @@ -48,9 +49,12 @@ const LessonForm: React.FC = ({ const { control, register, + watch, formState: { errors, isDirty }, } = reactHookForm; + const watchDescription = watch('description'); + return (
@@ -72,6 +76,12 @@ const LessonForm: React.FC = ({ {errors.description?.message} + DESCRIPTION_MAX_LENGTH ? 'red.500' : 'gray.500'} + > + {watchDescription?.length || 0}/{DESCRIPTION_MAX_LENGTH} + diff --git a/src/components/Forms/LessonForm/LessonForm.validator.ts b/src/components/Forms/LessonForm/LessonForm.validator.ts index 873d2f8..79f13d8 100644 --- a/src/components/Forms/LessonForm/LessonForm.validator.ts +++ b/src/components/Forms/LessonForm/LessonForm.validator.ts @@ -1,8 +1,9 @@ import * as helpers from '@educt/helpers'; import yup from '@educt/schema'; -const VIDEO_FILE_SIZE = 5000 * 1024 * 1024; -const MATERIAL_FILE_SIZE = 100000 * 1024; +export const VIDEO_FILE_SIZE = 5000 * 1024 * 1024; +export const MATERIAL_FILE_SIZE = 100000 * 1024; +export const DESCRIPTION_MAX_LENGTH = 250; const CreateLessonFormSchema = yup .object({ @@ -10,7 +11,7 @@ const CreateLessonFormSchema = yup description: yup .string() .required('Description field name is required') - .max(250, 'Description must be at most 250 characters'), + .max(DESCRIPTION_MAX_LENGTH, 'Description must be at most 250 characters'), duration: yup.string().required('Duration field name is required'), video: yup .mixed()