Bookmarks Form

client/src/components/Apps/Apps.tsx

@@ -3,10 +3,10 @@ import { Link } from 'react-router-dom';
 
 // Redux
 import { connect } from 'react-redux';
-import { getApps, pinApp, addApp } from '../../store/actions';
+import { getApps } from '../../store/actions';
 
 // Typescript
-import { App, GlobalState, NewApp } from '../../interfaces';
+import { App, GlobalState } from '../../interfaces';
 
 // CSS
 import classes from './Apps.module.css';
@@ -25,7 +25,6 @@ import AppTable from './AppTable/AppTable';
 
 interface ComponentProps {
   getApps: Function;
-  addApp: (formData: NewApp) => void;
   apps: App[];
   loading: boolean;
 }
@@ -120,4 +119,4 @@ const mapStateToProps = (state: GlobalState) => {
   }
 }
 
-export default connect(mapStateToProps, { getApps, addApp })(Apps);
+export default connect(mapStateToProps, { getApps })(Apps);

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

@@ -0,0 +1,132 @@
+import { useState, SyntheticEvent, Fragment, ChangeEvent, useEffect } from 'react';
+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 { getCategories } from '../../../store/actions';
+
+interface ComponentProps {
+  modalHandler: () => void;
+  contentType: FormContentType;
+  categories: Category[];
+}
+
+const BookmarkForm = (props: ComponentProps): JSX.Element => {
+  const [categoryName, setCategoryName] = useState<NewCategory>({
+    name: ''
+  })
+
+  const [formData, setFormData] = useState<NewBookmark>({
+    name: '',
+    url: '',
+    categoryId: -1
+  })
+
+  const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
+    e.preventDefault();
+    
+    if (formData.categoryId === -1) {
+      alert('select category');
+    }
+  }
+
+  const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  const selectChangeHandler = (e: ChangeEvent<HTMLSelectElement>): void => {
+    setFormData({
+      ...formData,
+      categoryId: parseInt(e.target.value)
+    })
+  }
+
+  return (
+    <ModalForm
+      modalHandler={props.modalHandler}
+      formHandler={formSubmitHandler}
+    >
+      {props.contentType === FormContentType.category
+        ? (
+          <Fragment>
+            <InputGroup>
+              <label htmlFor='categoryName'>Category Name</label>
+              <input
+                type='text'
+                name='categoryName'
+                id='categoryName'
+                placeholder='Social Media'
+                required
+                value={categoryName.name}
+                onChange={(e) => setCategoryName({ name: e.target.value })}
+              />
+            </InputGroup>
+          </Fragment>
+        )
+        : (
+          <Fragment>
+            <InputGroup>
+              <label htmlFor='name'>Bookmark Name</label>
+              <input
+                type='text'
+                name='name'
+                id='name'
+                placeholder='Reddit'
+                required
+                value={formData.name}
+                onChange={(e) => inputChangeHandler(e)}
+              />
+            </InputGroup>
+            <InputGroup>
+              <label htmlFor='url'>Bookmark URL</label>
+              <input
+                type='text'
+                name='url'
+                id='url'
+                placeholder='reddit.com'
+                required
+                value={formData.url}
+                onChange={(e) => inputChangeHandler(e)}
+              />
+            </InputGroup>
+            <InputGroup>
+              <label htmlFor='categoryId'>Bookmark Category</label>
+              <select
+                name='categoryId'
+                id='categoryId'
+                required
+                onChange={(e) => selectChangeHandler(e)}
+              >
+                <option value={-1}>Select category</option>
+                {props.categories.map((category: Category): JSX.Element => {
+                  return (
+                    <option
+                      key={category.id}
+                      value={category.id}
+                    >
+                      {category.name}
+                    </option>
+                  )
+                })}
+              </select>
+            </InputGroup>
+          </Fragment>
+        )
+      }
+      <button type='submit'>add</button>
+    </ModalForm>
+  )
+}
+
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    categories: state.bookmark.categories
+  }
+}
+
+export default connect(mapStateToProps, { getCategories })(BookmarkForm);

client/src/components/Bookmarks/Bookmarks.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { getCategories } from '../../store/actions';
@@ -12,6 +12,8 @@ import ActionButton from '../UI/Buttons/ActionButton/ActionButton';
 import BookmarkGrid from './BookmarkGrid/BookmarkGrid';
 import { Category, GlobalState } from '../../interfaces';
 import Spinner from '../UI/Spinner/Spinner';
+import Modal from '../UI/Modal/Modal';
+import BookmarkForm from './BookmarkForm/BookmarkForm';
 
 interface ComponentProps {
   loading: boolean;
@@ -19,15 +21,45 @@ interface ComponentProps {
   getCategories: () => void;
 }
 
+export enum FormContentType {
+  category,
+  bookmark
+}
+
 const Bookmarks = (props: ComponentProps): JSX.Element => {
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const [formContentType, setFormContentType] = useState(FormContentType.category);
+
   useEffect(() => {
     if (props.categories.length === 0) {
       props.getCategories();
     }
   }, [props.getCategories])
 
+  const toggleModal = (): void => {
+    setModalIsOpen(!modalIsOpen);
+  }
+
+  const addActionHandler = (contentType: FormContentType) => {
+    setFormContentType(contentType);
+    toggleModal();
+  }
+
   return (
     <Container>
+      <Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
+        {formContentType === FormContentType.category
+          ? <BookmarkForm
+              modalHandler={toggleModal}
+              contentType={FormContentType.category}
+            />
+          : <BookmarkForm
+              modalHandler={toggleModal}
+              contentType={FormContentType.bookmark}
+            />
+        }
+      </Modal>
+
       <Headline
         title='All Bookmarks'
         subtitle={(<Link to='/'>Go back</Link>)}
@@ -35,11 +67,21 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
       
       <div className={classes.ActionsContainer}>
         <ActionButton
-          name='Add'
+          name='Add Category'
           icon='mdiPlusBox'
+          handler={() => addActionHandler(FormContentType.category)}
         />
         <ActionButton
-          name='Edit'
+          name='Add Bookmark'
+          icon='mdiPlusBox'
+          handler={() => addActionHandler(FormContentType.bookmark)}
+        />
+        <ActionButton
+          name='Edit Categories'
+          icon='mdiPencil'
+        />
+        <ActionButton
+          name='Edit Bookmarks'
           icon='mdiPencil'
         />
       </div>

client/src/interfaces/Bookmark.ts

@@ -4,4 +4,10 @@ export interface Bookmark extends Model {
   name: string;
   url: string;
   categoryId: number;
+}
+
+export interface NewBookmark {
+  name: string;
+  url: string;
+  categoryId: number;
 }

controllers/bookmark.js

@@ -18,7 +18,9 @@ exports.createBookmark = asyncWrapper(async (req, res, next) => {
 // @route     GET /api/bookmarks
 // @access    Public
 exports.getBookmarks = asyncWrapper(async (req, res, next) => {
-  const bookmarks = await Bookmark.findAll();
+  const bookmarks = await Bookmark.findAll({
+    order: [['name', 'ASC']]
+  });
 
   res.status(200).json({
     success: true,