Moved entityInUpdate to app state. It applies for apps, categories and bookmarks

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css

@@ -10,6 +10,10 @@
   text-transform: uppercase;
 }
 
+.BookmarkCard h3:hover {
+  cursor: pointer;
+}
+
 .Bookmarks {
   display: flex;
   flex-direction: column;

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

@@ -1,14 +1,17 @@
 import { Fragment } from 'react';
 
-import { useSelector } from 'react-redux';
+// Redux
+import { useDispatch, useSelector } from 'react-redux';
 import { State } from '../../../store/reducers';
+import { bindActionCreators } from 'redux';
+import { actionCreators } from '../../../store';
 
+// Typescript
 import { Bookmark, Category } from '../../../interfaces';
 
+// Other
 import classes from './BookmarkCard.module.css';
-
 import { Icon } from '../../UI';
-
 import { iconParser, isImage, isSvg, isUrl, urlParser } from '../../../utility';
 
 interface Props {
@@ -18,9 +21,19 @@ interface Props {
 export const BookmarkCard = (props: Props): JSX.Element => {
   const { config } = useSelector((state: State) => state.config);
 
+  const dispatch = useDispatch();
+  const { setEditCategory } = bindActionCreators(actionCreators, dispatch);
+
   return (
     <div className={classes.BookmarkCard}>
-      <h3>{props.category.name}</h3>
+      <h3
+        onClick={() => {
+          setEditCategory(props.category);
+        }}
+      >
+        {props.category.name}
+      </h3>
+
       <div className={classes.Bookmarks}>
         {props.category.bookmarks.map((bookmark: Bookmark) => {
           const redirectUrl = urlParser(bookmark.url)[1];

client/src/components/Bookmarks/Bookmarks.tsx

@@ -19,9 +19,6 @@ import { Container, Headline, ActionButton, Spinner, Modal } from '../UI';
 // Components
 import { BookmarkGrid } from './BookmarkGrid/BookmarkGrid';
 import { Form } from './Form/Form';
-
-// Utils
-import { bookmarkTemplate, categoryTemplate } from '../../utility';
 import { Table } from './Table/Table';
 
 interface Props {
@@ -36,13 +33,14 @@ export enum ContentType {
 export const Bookmarks = (props: Props): JSX.Element => {
   // Get Redux state
   const {
-    bookmarks: { loading, categories },
+    bookmarks: { loading, categories, categoryInEdit },
     auth: { isAuthenticated },
   } = useSelector((state: State) => state);
 
   // Get Redux action creators
   const dispatch = useDispatch();
-  const { getCategories } = bindActionCreators(actionCreators, dispatch);
+  const { getCategories, setEditCategory, setEditBookmark } =
+    bindActionCreators(actionCreators, dispatch);
 
   // Load categories if array is empty
   useEffect(() => {
@@ -55,10 +53,6 @@ export const Bookmarks = (props: Props): JSX.Element => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [formContentType, setFormContentType] = useState(ContentType.category);
   const [isInUpdate, setIsInUpdate] = useState(false);
-  const [categoryInUpdate, setCategoryInUpdate] =
-    useState<Category>(categoryTemplate);
-  const [bookmarkInUpdate, setBookmarkInUpdate] =
-    useState<Bookmark>(bookmarkTemplate);
 
   // Table
   const [showTable, setShowTable] = useState(false);
@@ -74,6 +68,13 @@ export const Bookmarks = (props: Props): JSX.Element => {
     }
   }, [isAuthenticated]);
 
+  useEffect(() => {
+    if (categoryInEdit && !showTable) {
+      setTableContentType(ContentType.bookmark);
+      setShowTable(true);
+    }
+  }, [categoryInEdit]);
+
   // Form actions
   const toggleModal = (): void => {
     setModalIsOpen(!modalIsOpen);
@@ -94,10 +95,10 @@ export const Bookmarks = (props: Props): JSX.Element => {
 
     if (instanceOfCategory(data)) {
       setFormContentType(ContentType.category);
-      setCategoryInUpdate(data);
+      setEditCategory(data);
     } else {
       setFormContentType(ContentType.bookmark);
-      setBookmarkInUpdate(data);
+      setEditBookmark(data);
     }
 
     toggleModal();
@@ -121,8 +122,6 @@ export const Bookmarks = (props: Props): JSX.Element => {
           modalHandler={toggleModal}
           contentType={formContentType}
           inUpdate={isInUpdate}
-          category={categoryInUpdate}
-          bookmark={bookmarkInUpdate}
         />
       </Modal>
 
@@ -145,11 +144,11 @@ export const Bookmarks = (props: Props): JSX.Element => {
             icon="mdiPencil"
             handler={() => showTableForEditing(ContentType.category)}
           />
-          {/* <ActionButton
+          <ActionButton
             name="Edit Bookmarks"
             icon="mdiPencil"
             handler={() => showTableForEditing(ContentType.bookmark)}
-          /> */}
+          />
         </div>
       )}
 

client/src/components/Bookmarks/Form/Form.tsx

@@ -1,22 +1,26 @@
 // Typescript
-import { Bookmark, Category } from '../../../interfaces';
 import { ContentType } from '../Bookmarks';
 
 // Utils
 import { CategoryForm } from './CategoryForm';
 import { BookmarksForm } from './BookmarksForm';
 import { Fragment } from 'react';
+import { useSelector } from 'react-redux';
+import { State } from '../../../store/reducers';
+import { bookmarkTemplate, categoryTemplate } from '../../../utility';
 
 interface Props {
   modalHandler: () => void;
   contentType: ContentType;
   inUpdate?: boolean;
-  category?: Category;
-  bookmark?: Bookmark;
 }
 
 export const Form = (props: Props): JSX.Element => {
-  const { modalHandler, contentType, inUpdate, category, bookmark } = props;
+  const { categoryInEdit, bookmarkInEdit } = useSelector(
+    (state: State) => state.bookmarks
+  );
+
+  const { modalHandler, contentType, inUpdate } = props;
 
   return (
     <Fragment>
@@ -33,9 +37,15 @@ export const Form = (props: Props): JSX.Element => {
         // form: update
         <Fragment>
           {contentType === ContentType.category ? (
-            <CategoryForm modalHandler={modalHandler} category={category} />
+            <CategoryForm
+              modalHandler={modalHandler}
+              category={categoryInEdit || categoryTemplate}
+            />
           ) : (
-            <BookmarksForm modalHandler={modalHandler} bookmark={bookmark} />
+            <BookmarksForm
+              modalHandler={modalHandler}
+              bookmark={bookmarkInEdit || bookmarkTemplate}
+            />
           )}
         </Fragment>
       )}