feat: added consts for max length to validator

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<CourseFormPropsType> = ({ onSubmit, buttonLabel, isLo
             <Text as='small' color='red.500'>
               {errors.description?.message}
             </Text>
-            <Text as='small' color={!!errors.description || watchDescription?.length > 250 ? 'red.500' : 'gray.500'}>
+            <Text
-              {watchDescription?.length || 0}/250
+              as='small'
+              color={!!errors.description || watchDescription?.length > DESCRIPTION_MAX_LENGTH ? 'red.500' : 'gray.500'}
+            >
+              {watchDescription?.length || 0}/{DESCRIPTION_MAX_LENGTH}
             </Text>
           </Flex>
         </FormControl>
@@ -130,10 +134,12 @@ const CourseForm: React.FC<CourseFormPropsType> = ({ onSubmit, buttonLabel, isLo
               <Text
                 as='small'
                 color={
-                  !!errors.education_description || watchEducationDescription.length > 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}
               </Text>
             )}
           </Flex>

src/components/Forms/CourseForm/CourseForm.validator.ts

@@ -1,15 +1,20 @@
 import yup from '@educt/schema';
 
-const FILE_SIZE = 1000 * 1024;
+export const FILE_SIZE = 1000 * 1024;
-const SUPPORTED_FORMATS = ['image/jpg', 'image/jpeg', 'image/png', 'image/webp'];
+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'),
+    .max(DESCRIPTION_MAX_LENGTH, 'Description must be at most 250 characters'),
-  education_description: yup.string().max(250, 'This section must be at most 250 characters').nullable(),
+  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) => {

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<LessonFormPropsType> = ({
   const {
     control,
     register,
+    watch,
     formState: { errors, isDirty },
   } = reactHookForm;
 
+  const watchDescription = watch('description');
+
   return (
     <form onSubmit={onSubmit}>
       <Stack spacing={'5'}>
@@ -72,6 +76,12 @@ const LessonForm: React.FC<LessonFormPropsType> = ({
             <Text as='small' color='red.500'>
               {errors.description?.message}
             </Text>
+            <Text
+              as='small'
+              color={!!errors.description || watchDescription?.length > DESCRIPTION_MAX_LENGTH ? 'red.500' : 'gray.500'}
+            >
+              {watchDescription?.length || 0}/{DESCRIPTION_MAX_LENGTH}
+            </Text>
           </Flex>
         </FormControl>
 

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;
+export const VIDEO_FILE_SIZE = 5000 * 1024 * 1024;
-const MATERIAL_FILE_SIZE = 100000 * 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<File>()