feat: category updating

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",

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",

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(),
 });
 

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<EditCategoryModalPropsType> = props => {
@@ -40,7 +41,7 @@ const EditCategoryModal: React.FC<EditCategoryModalPropsType> = props => {
     register,
     handleSubmit,
     reset,
-    formState: { errors, isDirty },
+    formState: { errors, isDirty, dirtyFields },
   } = useForm<UpdateCategoryInputType>({
     resolver: yupResolver(EditCategorySchema),
     defaultValues: useMemo(() => {
@@ -51,7 +52,7 @@ const EditCategoryModal: React.FC<EditCategoryModalPropsType> = 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) {

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;

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<CategoryTableListPropsType> = 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) => () => {

src/config.ts

@@ -3,7 +3,6 @@ import {
   MdOutlineHome,
   MdOutlineMessage,
   MdOutlineCollectionsBookmark,
-  MdOutlineVideoLibrary,
   MdOutlineGroup,
   MdOutlineAccountCircle,
   MdOutlineCategory,

src/pages/lessons/lessons.tsx

@@ -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<IPageProps> = () => {
-  return (
-    <Box>
-      <Heading as='h1'>Lessons page</Heading>
-      <Text mt='2'>List of all created lessons in the system.</Text>
-    </Box>
-  );
-};
-
-export default LessonsPage;

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;
 };