bubble/educt-client
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/educt-client.git synced 2026-10-11 10:19:22 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: added consts for max length to validator

Browse Source
This commit is contained in:
Sergey Yarkov 2022-06-08 01:14:13 +03:00
parent 25ba924555
commit b4a94e3da5
4 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Forms/CourseForm/CourseForm.tsx
View File

@ -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'}>
{watchDescription?.length || 0}/250
<Text
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>

13
src/components/Forms/CourseForm/CourseForm.validator.ts
View File

@ -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) => {

10
src/components/Forms/LessonForm/LessonForm.tsx
View File

@ -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>

7
src/components/Forms/LessonForm/LessonForm.validator.ts
View File

@ -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<File>()