Updating categories using form

client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx

@@ -3,16 +3,20 @@ import { connect } from 'react-redux';
 
 import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
 import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
-import { Category, GlobalState, NewBookmark, NewCategory } from '../../../interfaces';
+import { Category, GlobalState, NewBookmark, NewCategory, NewNotification } from '../../../interfaces';
 import { ContentType } from '../Bookmarks';
-import { getCategories, addCategory, addBookmark } from '../../../store/actions';
+import { getCategories, addCategory, addBookmark, updateCategory, createNotification } from '../../../store/actions';
+import Button from '../../UI/Buttons/Button/Button';
 
 interface ComponentProps {
   modalHandler: () => void;
   contentType: ContentType;
   categories: Category[];
+  category?: Category;
   addCategory: (formData: NewCategory) => void;
   addBookmark: (formData: NewBookmark) => void;
+  updateCategory: (id: number, formData: NewCategory) => void;
+  createNotification: (notification: NewNotification) => void;
 }
 
 const BookmarkForm = (props: ComponentProps): JSX.Element => {
@@ -26,24 +30,46 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
     categoryId: -1
   })
 
+  useEffect(() => {
+    if (props.category) {
+      setCategoryName({ name: props.category.name });
+    } else {
+      setCategoryName({ name: '' });
+    }
+  }, [props.category])
+
   const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
     e.preventDefault();
-    
-    if (props.contentType === ContentType.category) {
-      props.addCategory(categoryName);
-      setCategoryName({ name: '' });
-    } else if (props.contentType === ContentType.bookmark) {
-      if (formData.categoryId === -1) {
-        alert('select category');
-        return;
+
+    if (!props.category) {
+      // Add new
+      if (props.contentType === ContentType.category) {
+        props.addCategory(categoryName);
+        setCategoryName({ name: '' });
+      } else if (props.contentType === ContentType.bookmark) {
+        if (formData.categoryId === -1) {
+          props.createNotification({
+            title: 'Error',
+            message: 'Please select category'
+          })
+          return;
+        }
+  
+        props.addBookmark(formData);
+        setFormData({
+          name: '',
+          url: '',
+          categoryId: formData.categoryId
+        })
+      }
+    } else {
+      // Update
+      if (props.contentType === ContentType.category) {
+        props.updateCategory(props.category.id, categoryName);
+        setCategoryName({ name: '' });
       }
 
-      props.addBookmark(formData);
-      setFormData({
-        name: '',
-        url: '',
-        categoryId: formData.categoryId
-      })
+      props.modalHandler();
     }
   }
 
@@ -133,7 +159,10 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
           </Fragment>
         )
       }
-      <button type='submit'>add</button>
+      {!props.category
+        ? <Button>Add new category</Button>
+        : <Button>Update category</Button>
+      }
     </ModalForm>
   )
 }
@@ -144,4 +173,12 @@ const mapStateToProps = (state: GlobalState) => {
   }
 }
 
-export default connect(mapStateToProps, { getCategories, addCategory, addBookmark })(BookmarkForm);
+const dispatchMap = {
+  getCategories,
+  addCategory,
+  addBookmark,
+  updateCategory,
+  createNotification
+}
+
+export default connect(mapStateToProps, dispatchMap)(BookmarkForm);

client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx

@@ -13,6 +13,7 @@ interface ComponentProps {
   categories: Category[];
   pinCategory: (category: Category) => void;
   deleteCategory: (id: number) => void;
+  updateCategoryHandler: (category: Category) => void;
 }
 
 const BookmarkTable = (props: ComponentProps): JSX.Element => {
@@ -50,7 +51,7 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
                 </div>
                 <div
                   className={classes.TableAction}
-                  // onClick={() => props.updateAppHandler(app)}
+                  onClick={() => props.updateCategoryHandler(category)}
                   // onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
                   tabIndex={0}>
                   <Icon icon='mdiPencil' />

client/src/components/Bookmarks/Bookmarks.tsx

@@ -32,6 +32,15 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
   const [formContentType, setFormContentType] = useState(ContentType.category);
   const [isInEdit, setIsInEdit] = useState(false);
   const [tableContentType, setTableContentType] = useState(ContentType.category);
+  const [isInUpdate, setIsInUpdate] = useState(false);
+  const [categoryInUpdate, setCategoryInUpdate] = useState<Category>({
+    name: '',
+    id: -1,
+    isPinned: false,
+    bookmarks: [],
+    createdAt: new Date(),
+    updatedAt: new Date()
+  })
 
   useEffect(() => {
     if (props.categories.length === 0) {
@@ -45,6 +54,7 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
 
   const addActionHandler = (contentType: ContentType) => {
     setFormContentType(contentType);
+    setIsInUpdate(false);
     toggleModal();
   }
 
@@ -62,10 +72,21 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
     }
   }
 
+  const goToUpdateMode = (category: Category): void => {
+    setIsInUpdate(true);
+    setCategoryInUpdate(category);
+    toggleModal();
+  }
+
+  let modalForm: JSX.Element;
+
   return (
     <Container>
       <Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
-        <BookmarkForm modalHandler={toggleModal} contentType={formContentType} />
+        {!isInUpdate
+          ? <BookmarkForm modalHandler={toggleModal} contentType={formContentType} />
+          : <BookmarkForm modalHandler={toggleModal} contentType={formContentType} category={categoryInUpdate} />
+        }
       </Modal>
 
       <Headline
@@ -101,8 +122,13 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
         : (!isInEdit
           ? props.categories.length > 0
             ? <BookmarkGrid categories={props.categories} />
-            : <p className={classes.BookmarksMessage}>You don't have any bookmarks. You can a new one from <Link to='/bookmarks'>/bookmarks</Link> menu</p>
-          : <BookmarkTable contentType={tableContentType} categories={props.categories} />)
+            : <p className={classes.BookmarksMessage}>You don't have any bookmarks. You can add a new one from <Link to='/bookmarks'>/bookmarks</Link> menu</p>
+          : (<BookmarkTable
+              contentType={tableContentType}
+              categories={props.categories}
+              updateCategoryHandler={goToUpdateMode}
+            />)
+          )
       }
     </Container>
   )