Table component. Bookmarks edit view

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

@@ -21,7 +21,8 @@
   transition: all 0.25s;
 }
 
-.BookmarkCard a:hover {
+.BookmarkCard a:hover,
+.BookmarkCard a:focus {
   text-decoration: underline;
   padding-left: 10px;
 }

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

@@ -4,12 +4,12 @@ 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 { FormContentType } from '../Bookmarks';
+import { ContentType } from '../Bookmarks';
 import { getCategories, addCategory, addBookmark } from '../../../store/actions';
 
 interface ComponentProps {
   modalHandler: () => void;
-  contentType: FormContentType;
+  contentType: ContentType;
   categories: Category[];
   addCategory: (formData: NewCategory) => void;
   addBookmark: (formData: NewBookmark) => void;
@@ -29,10 +29,10 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
   const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
     e.preventDefault();
     
-    if (props.contentType === FormContentType.category) {
+    if (props.contentType === ContentType.category) {
       props.addCategory(categoryName);
       setCategoryName({ name: '' });
-    } else if (props.contentType === FormContentType.bookmark) {
+    } else if (props.contentType === ContentType.bookmark) {
       if (formData.categoryId === -1) {
         alert('select category');
         return;
@@ -66,7 +66,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
       modalHandler={props.modalHandler}
       formHandler={formSubmitHandler}
     >
-      {props.contentType === FormContentType.category
+      {props.contentType === ContentType.category
         ? (
           <Fragment>
             <InputGroup>

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

@@ -0,0 +1,12 @@
+.TableActions {
+  display: flex;
+  align-items: center;
+}
+
+.TableAction {
+  width: 22px;
+}
+
+.TableAction:hover {
+  cursor: pointer;
+}

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

@@ -0,0 +1,103 @@
+import { ContentType } from '../Bookmarks';
+import classes from './BookmarkTable.module.css';
+
+import Table from '../../UI/Table/Table';
+import { Bookmark, Category } from '../../../interfaces';
+import Icon from '../../UI/Icons/Icon/Icon';
+
+interface ComponentProps {
+  contentType: ContentType;
+  categories: Category[];
+}
+
+const BookmarkTable = (props: ComponentProps): JSX.Element => {
+  if (props.contentType === ContentType.category) {
+    return (
+      <Table headers={[
+        'Name',
+        'Actions'
+      ]}>
+        {props.categories.map((category: Category) => {
+          return (
+            <tr key={category.id}>
+              <td>{category.name}</td>
+              <td className={classes.TableActions}>
+                <div
+                  className={classes.TableAction}
+                  // onClick={() => deleteAppHandler(app)}
+                  // onKeyDown={(e) => keyboardActionHandler(e, app, deleteAppHandler)}
+                  tabIndex={0}>
+                  <Icon icon='mdiDelete' />
+                </div>
+                <div
+                  className={classes.TableAction}
+                  // onClick={() => props.updateAppHandler(app)}
+                  // onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
+                  tabIndex={0}>
+                  <Icon icon='mdiPencil' />
+                </div>
+                <div
+                  className={classes.TableAction}
+                  // onClick={() => props.pinApp(app)}
+                  // onKeyDown={(e) => keyboardActionHandler(e, app, props.pinApp)}
+                  tabIndex={0}>
+                  {category.isPinned
+                    ? <Icon icon='mdiPinOff' color='var(--color-accent)' />
+                    : <Icon icon='mdiPin' />
+                  }
+                </div>
+              </td>
+            </tr>
+          )
+        })}
+      </Table>
+    )
+  } else {
+    const bookmarks: {bookmark: Bookmark, categoryName: string}[] = [];
+    props.categories.forEach((category: Category) => {
+      category.bookmarks.forEach((bookmark: Bookmark) => {
+        bookmarks.push({
+          bookmark,
+          categoryName: category.name
+        });
+      })
+    })
+
+    return (
+      <Table headers={[
+        'Name',
+        'URL',
+        'Category',
+        'Actions'
+      ]}>
+        {bookmarks.map((bookmark: {bookmark: Bookmark, categoryName: string}) => {
+          return (
+            <tr key={bookmark.bookmark.id}>
+              <td>{bookmark.bookmark.name}</td>
+              <td>{bookmark.bookmark.url}</td>
+              <td>{bookmark.categoryName}</td>
+              <td className={classes.TableActions}>
+                <div
+                  className={classes.TableAction}
+                  // onClick={() => deleteAppHandler(app)}
+                  // onKeyDown={(e) => keyboardActionHandler(e, app, deleteAppHandler)}
+                  tabIndex={0}>
+                  <Icon icon='mdiDelete' />
+                </div>
+                <div
+                  className={classes.TableAction}
+                  // onClick={() => props.updateAppHandler(app)}
+                  // onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
+                  tabIndex={0}>
+                  <Icon icon='mdiPencil' />
+                </div>
+              </td>
+            </tr>
+          )
+        })}
+      </Table>
+    )
+  }
+}
+
+export default BookmarkTable;

client/src/components/Bookmarks/Bookmarks.tsx

@@ -14,6 +14,7 @@ import { Category, GlobalState } from '../../interfaces';
 import Spinner from '../UI/Spinner/Spinner';
 import Modal from '../UI/Modal/Modal';
 import BookmarkForm from './BookmarkForm/BookmarkForm';
+import BookmarkTable from './BookmarkTable/BookmarkTable';
 
 interface ComponentProps {
   loading: boolean;
@@ -21,14 +22,16 @@ interface ComponentProps {
   getCategories: () => void;
 }
 
-export enum FormContentType {
+export enum ContentType {
   category,
   bookmark
 }
 
 const Bookmarks = (props: ComponentProps): JSX.Element => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
-  const [formContentType, setFormContentType] = useState(FormContentType.category);
+  const [formContentType, setFormContentType] = useState(ContentType.category);
+  const [isInEdit, setIsInEdit] = useState(false);
+  const [tableContentType, setTableContentType] = useState(ContentType.category);
 
   useEffect(() => {
     if (props.categories.length === 0) {
@@ -40,24 +43,29 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
     setModalIsOpen(!modalIsOpen);
   }
 
-  const addActionHandler = (contentType: FormContentType) => {
+  const addActionHandler = (contentType: ContentType) => {
     setFormContentType(contentType);
     toggleModal();
   }
 
+  const toggleEdit = (): void => {
+    setIsInEdit(!isInEdit);
+  }
+
+  const editActionHandler = (contentType: ContentType) => {
+    // We're in the edit mode and the same button was clicked - go back to list
+    if (isInEdit && contentType === tableContentType) {
+      setIsInEdit(false);
+    } else {
+      setIsInEdit(true);
+      setTableContentType(contentType);
+    }
+  }
+
   return (
     <Container>
       <Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
-        {formContentType === FormContentType.category
-          ? <BookmarkForm
-              modalHandler={toggleModal}
-              contentType={FormContentType.category}
-            />
-          : <BookmarkForm
-              modalHandler={toggleModal}
-              contentType={FormContentType.bookmark}
-            />
-        }
+        <BookmarkForm modalHandler={toggleModal} contentType={formContentType} />
       </Modal>
 
       <Headline
@@ -69,26 +77,30 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
         <ActionButton
           name='Add Category'
           icon='mdiPlusBox'
-          handler={() => addActionHandler(FormContentType.category)}
+          handler={() => addActionHandler(ContentType.category)}
         />
         <ActionButton
           name='Add Bookmark'
           icon='mdiPlusBox'
-          handler={() => addActionHandler(FormContentType.bookmark)}
+          handler={() => addActionHandler(ContentType.bookmark)}
         />
         <ActionButton
           name='Edit Categories'
           icon='mdiPencil'
+          handler={() => editActionHandler(ContentType.category)}
         />
         <ActionButton
           name='Edit Bookmarks'
           icon='mdiPencil'
+          handler={() => editActionHandler(ContentType.bookmark)}
         />
       </div>
 
       {props.loading
         ? <Spinner />
-        : <BookmarkGrid categories={props.categories} />
+        : (!isInEdit
+          ? <BookmarkGrid categories={props.categories} />
+          : <BookmarkTable contentType={tableContentType} categories={props.categories} />)
       }
     </Container>
   )