From 3529993b8addef1afee3709f73f55d8498625e01 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sat, 22 Jan 2022 19:19:53 +0300 Subject: [PATCH] feat: category updating --- package-lock.json | 5 +++++ package.json | 1 + .../AddCategoryModal.validator.ts | 2 +- .../EditCategoryModal/EditCategoryModal.tsx | 7 ++++--- .../EditCategoryModal.validator.ts | 7 +++++-- .../CategoryTableList/CategoryTableList.tsx | 14 +++++++++++--- src/config.ts | 1 - src/pages/lessons/lessons.tsx | 18 ------------------ src/types/index.d.ts | 2 +- 9 files changed, 28 insertions(+), 29 deletions(-) delete mode 100644 src/pages/lessons/lessons.tsx diff --git a/package-lock.json b/package-lock.json index ab1fdf9..8195a89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2570,6 +2570,11 @@ "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", "dev": true }, + "immutability-helper": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-3.1.1.tgz", + "integrity": "sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ==" + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", diff --git a/package.json b/package.json index 45caf72..d331997 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@hookform/resolvers": "^2.8.5", "axios": "^0.21.1", "framer-motion": "^4.0.0", + "immutability-helper": "^3.1.1", "js-cookie": "^3.0.0", "mobx": "^6.3.2", "mobx-react": "^7.2.0", diff --git a/src/components/Modals/AddCategoryModal/AddCategoryModal.validator.ts b/src/components/Modals/AddCategoryModal/AddCategoryModal.validator.ts index 9f979d2..4d3dd70 100644 --- a/src/components/Modals/AddCategoryModal/AddCategoryModal.validator.ts +++ b/src/components/Modals/AddCategoryModal/AddCategoryModal.validator.ts @@ -1,7 +1,7 @@ import yup from '@educt/schema'; const AddCategorySchema = yup.object().shape({ - title: yup.string().required('Title field name is required'), + title: yup.string().min(2, 'Title must be greater than 2 characters').required('Title field name is required'), description: yup.string().optional(), }); diff --git a/src/components/Modals/EditCategoryModal/EditCategoryModal.tsx b/src/components/Modals/EditCategoryModal/EditCategoryModal.tsx index aedd665..7dbecde 100644 --- a/src/components/Modals/EditCategoryModal/EditCategoryModal.tsx +++ b/src/components/Modals/EditCategoryModal/EditCategoryModal.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import * as helpers from '@educt/helpers'; import BaseModal from '@educt/components/Modal'; import { ICategory } from '@educt/interfaces'; import { MdModeEdit } from 'react-icons/md'; @@ -27,7 +28,7 @@ type EditCategoryModalPropsType = { type UpdateCategoryInputType = { title?: string | undefined; - description?: string | undefined; + description?: string | null | undefined; }; const EditCategoryModal: React.FC = props => { @@ -40,7 +41,7 @@ const EditCategoryModal: React.FC = props => { register, handleSubmit, reset, - formState: { errors, isDirty }, + formState: { errors, isDirty, dirtyFields }, } = useForm({ resolver: yupResolver(EditCategorySchema), defaultValues: useMemo(() => { @@ -51,7 +52,7 @@ const EditCategoryModal: React.FC = props => { const onSubmit = async (data: UpdateCategoryParamsType) => { try { - const updated = await updateCategory(category.id, data); + const updated = await updateCategory(category.id, helpers.getDirtyFields(dirtyFields, data)); onClose(); onEdited && onEdited(updated); } catch (error) { diff --git a/src/components/Modals/EditCategoryModal/EditCategoryModal.validator.ts b/src/components/Modals/EditCategoryModal/EditCategoryModal.validator.ts index 20a827e..6a043fd 100644 --- a/src/components/Modals/EditCategoryModal/EditCategoryModal.validator.ts +++ b/src/components/Modals/EditCategoryModal/EditCategoryModal.validator.ts @@ -1,8 +1,11 @@ import yup from '@educt/schema'; const EditCategorySchema = yup.object().shape({ - title: yup.string().optional(), - desctiption: yup.string().optional(), + title: yup.string().min(2, 'Title must be greater than 2 characters').optional(), + description: yup + .string() + .transform(val => (!val ? null : val)) + .nullable(true), }); export default EditCategorySchema; diff --git a/src/components/Tables/CategoryTableList/CategoryTableList.tsx b/src/components/Tables/CategoryTableList/CategoryTableList.tsx index 7e3e43d..cdfb0b3 100644 --- a/src/components/Tables/CategoryTableList/CategoryTableList.tsx +++ b/src/components/Tables/CategoryTableList/CategoryTableList.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import update from 'immutability-helper'; import { Flex, Box, Text, Table, Tbody } from '@chakra-ui/react'; import { CreateButton } from '@educt/components/Buttons'; import { ICategory } from '@educt/interfaces'; @@ -30,12 +31,19 @@ const CategoryTableList: React.FC = props => { const isEmptyRows = rows.length === 0; - const handleAddRow = (category: ICategory) => setRows(prev => [...prev, category]); + const handleAddRow = (category: ICategory) => setRows(rows => [...rows, category]); - const handleRemoveRow = (removed: ICategory) => setRows(prev => prev.filter(category => category.id !== removed.id)); + const handleRemoveRow = (removed: ICategory) => setRows(rows => rows.filter(category => category.id !== removed.id)); const handleEditRow = (edited: ICategory) => { - console.log(edited); + const index = rows.findIndex(row => row.id === edited.id); + const updated = update(rows, { + [index]: { + title: { $set: edited.title }, + description: { $set: edited.description }, + }, + }); + setRows(updated); }; const handleDelete = (category: ICategory) => () => { diff --git a/src/config.ts b/src/config.ts index 923074a..b36b9ff 100644 --- a/src/config.ts +++ b/src/config.ts @@ -3,7 +3,6 @@ import { MdOutlineHome, MdOutlineMessage, MdOutlineCollectionsBookmark, - MdOutlineVideoLibrary, MdOutlineGroup, MdOutlineAccountCircle, MdOutlineCategory, diff --git a/src/pages/lessons/lessons.tsx b/src/pages/lessons/lessons.tsx deleted file mode 100644 index 5ba5fcb..0000000 --- a/src/pages/lessons/lessons.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { Box, Heading, Text } from '@chakra-ui/react'; - -import { IPageProps } from '@educt/interfaces'; - -/** - * Lessons page - */ -const LessonsPage: React.FC = () => { - return ( - - Lessons page - List of all created lessons in the system. - - ); -}; - -export default LessonsPage; diff --git a/src/types/index.d.ts b/src/types/index.d.ts index c47f467..8abc3ef 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -186,5 +186,5 @@ export type CreateCategoryParamsType = { export type UpdateCategoryParamsType = { title?: string | undefined; - description?: string | undefined; + description?: string | null | undefined; };