Adding Categories and Bookmarks using form

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx

@@ -14,7 +14,7 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
           <a
             href={`http://${bookmark.url}`}
             target='blank'
-            key={bookmark.id}>
+            key={`bookmark-${bookmark.id}`}>
             {bookmark.name}
           </a>
         ))}

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

@@ -5,12 +5,14 @@ import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
 import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
 import { Category, GlobalState, NewBookmark, NewCategory } from '../../../interfaces';
 import { FormContentType } from '../Bookmarks';
-import { getCategories } from '../../../store/actions';
+import { getCategories, addCategory, addBookmark } from '../../../store/actions';
 
 interface ComponentProps {
   modalHandler: () => void;
   contentType: FormContentType;
   categories: Category[];
+  addCategory: (formData: NewCategory) => void;
+  addBookmark: (formData: NewBookmark) => void;
 }
 
 const BookmarkForm = (props: ComponentProps): JSX.Element => {
@@ -27,8 +29,21 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
   const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
     e.preventDefault();
     
-    if (formData.categoryId === -1) {
-      alert('select category');
+    if (props.contentType === FormContentType.category) {
+      props.addCategory(categoryName);
+      setCategoryName({ name: '' });
+    } else if (props.contentType === FormContentType.bookmark) {
+      if (formData.categoryId === -1) {
+        alert('select category');
+        return;
+      }
+
+      props.addBookmark(formData);
+      setFormData({
+        name: '',
+        url: '',
+        categoryId: formData.categoryId
+      })
     }
   }
 
@@ -129,4 +144,4 @@ const mapStateToProps = (state: GlobalState) => {
   }
 }
 
-export default connect(mapStateToProps, { getCategories })(BookmarkForm);
+export default connect(mapStateToProps, { getCategories, addCategory, addBookmark })(BookmarkForm);

client/src/components/UI/Forms/InputGroup/InputGroup.module.css

@@ -8,7 +8,8 @@
   display: block;
 }
 
-.InputGroup input {
+.InputGroup input,
+.InputGroup select {
   margin: 8px 0;
   width: 100%;
   border: none;