diff --git a/package-lock.json b/package-lock.json index 2bcda27..ab1fdf9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1072,9 +1072,9 @@ } }, "@hookform/resolvers": { - "version": "2.8.2", - "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-2.8.2.tgz", - "integrity": "sha512-oDTGrm7yHxT4VIv4kJcfjvWvozCbdcL0/jrpbAkeo39FYn78XnKOrrGTNmrXdfu+EQVkNIdZ47IYRFManZ4jUA==" + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-2.8.5.tgz", + "integrity": "sha512-n7eFm4snsejpfZVH8q2NU7YJbsGhF61IHB0TxgK11nmg08RymEr3KscnbTAZaPd9RaXa3vUPoULgBRN2nVDtMg==" }, "@humanwhocodes/config-array": { "version": "0.9.2", @@ -3320,9 +3320,9 @@ } }, "react-hook-form": { - "version": "7.17.4", - "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.17.4.tgz", - "integrity": "sha512-7XhbCr7d9fDC1TgcK/BUbt7D3q0VJMu7jPErfsa0JrxVjv/nni41xWdJcy0Zb7R+Np8OsCkQ2lMyloAtE3DLiQ==" + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.22.5.tgz", + "integrity": "sha512-Q2zaeQFXdVQ8l3hcywhltH+Nzj4vo50wMVujHDVN/1Xy9IOaSZJwYBXA2CYTpK6rq41fnXviw3jTLb04c7Gu9Q==" }, "react-icons": { "version": "4.3.1", diff --git a/package.json b/package.json index fad5354..45caf72 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "@chakra-ui/react": "^1.6.10", "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@hookform/resolvers": "^2.8.0", + "@hookform/resolvers": "^2.8.5", "axios": "^0.21.1", "framer-motion": "^4.0.0", "js-cookie": "^3.0.0", @@ -26,7 +26,7 @@ "react-dom": "^17.0.0", "react-error-boundary": "^3.1.3", "react-helmet": "^6.1.0", - "react-hook-form": "^7.12.2", + "react-hook-form": "^7.22.5", "react-icons": "^4.3.1", "react-player": "^2.9.0", "react-router-dom": "^5.2.0", diff --git a/src/components/FilesUploader/FilesUploader.tsx b/src/components/FilesUploader/FilesUploader.tsx new file mode 100644 index 0000000..5069c1c --- /dev/null +++ b/src/components/FilesUploader/FilesUploader.tsx @@ -0,0 +1,101 @@ +import React from 'react'; +import * as helpres from '@educt/helpers'; +import { Stack, Flex, Box, Icon, Text, Input, IconButton, Button } from '@chakra-ui/react'; +import { MdOutlineFilePresent } from 'react-icons/md'; +import { AddIcon, CloseIcon } from '@chakra-ui/icons'; + +/** + * Hooks + */ +import { useRef } from 'react'; +import { FileSupportedFormatsEnum } from '@educt/enums'; + +type FilesUploaderPropsType = { + onChange: (files: File[]) => void; + files?: File[] | undefined; +}; + +const FilesUploader: React.FC = ({ onChange, files }) => { + const fileInputRef = useRef(null); + + const onSelectFileHandler = () => { + if (fileInputRef.current) { + fileInputRef.current.click(); + } + }; + + /** + * Detach file + */ + const onRemoveSelectedFileHandler = (selectedFile: File) => () => { + onChange([...Array.from(files?.filter(file => file.name !== selectedFile.name) || [])]); + }; + + /** + * Attach file + */ + const onChangeFileHandler = (e: React.ChangeEvent) => { + e.preventDefault(); + + if (e.target.files && e.target.files.length !== 0) { + const isAlreadySelected = (files || []).find(selectedFile => + Array.from(e.target.files || []).some(file => file.name === selectedFile.name) + ); + + if (isAlreadySelected) return; + onChange([...Array.from(files || []), ...e.target.files]); + } + }; + + return ( + + `.${ext.toLowerCase()}`) + .join(', ')} + /> + {files && ( + + {files.map((file, index) => ( + + + + + {file.name} +
+ + {helpres.transformBytes(file.size)} + +
+
+ } + /> +
+ ))} +
+ )} + +
+ ); +}; + +export default FilesUploader; diff --git a/src/components/FilesUploader/index.ts b/src/components/FilesUploader/index.ts new file mode 100644 index 0000000..9ba1ae9 --- /dev/null +++ b/src/components/FilesUploader/index.ts @@ -0,0 +1,3 @@ +import FilesUploader from './FilesUploader'; + +export default FilesUploader; diff --git a/src/components/Forms/LessonForm/CreateLessonForm.tsx b/src/components/Forms/LessonForm/CreateLessonForm.tsx index 3165be4..b00c241 100644 --- a/src/components/Forms/LessonForm/CreateLessonForm.tsx +++ b/src/components/Forms/LessonForm/CreateLessonForm.tsx @@ -1,20 +1,41 @@ -import { yupResolver } from '@hookform/resolvers/yup'; import React from 'react'; +import { yupResolver } from '@hookform/resolvers/yup'; import { SubmitHandler, useForm } from 'react-hook-form'; +import type { InputFields } from './LessonForm'; import { LessonForm } from '.'; -import { InputFields } from './LessonForm'; + +/** + * Validator + */ import LessonFormSchema from './LessonForm.validator'; +/** + * Hooks + */ +import { useCreateLesson } from '@educt/hooks/queries'; +import { useHistory, useParams } from 'react-router-dom'; + const CreateLessonForm: React.FC = () => { const form = useForm({ resolver: yupResolver(LessonFormSchema) }); + const { createLesson, isLoading } = useCreateLesson(); + const { id: course_id } = useParams<{ id: string }>(); + const history = useHistory(); const onSubmit: SubmitHandler = async data => { - console.log('creating...'); + await createLesson({ + title: data.title, + description: data.description, + duration: data.duration, + video: data.video, + materials: Array.from(data.materials || []), + course_id, + }); + history.push(`/courses/edit/${course_id}`); }; return ( = ({ onSubmit, buttonLabel, isLo const { control, register, - watch, formState: { errors, isDirty }, } = reactHookForm; @@ -42,15 +48,15 @@ const LessonForm: React.FC = ({ onSubmit, buttonLabel, isLo - e.g Variables in Javascript {errors.title?.message} + e.g Introduction Description -