Organizing code

package.json

@@ -7,9 +7,9 @@
     "@fortawesome/free-solid-svg-icons": "^5.6.0",
     "@fortawesome/react-fontawesome": "^0.1.3",
     "date-fns": "^1.30.1",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
-    "react-router-dom": "^4.3.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "2.1.1",
     "typeface-roboto": "0.0.54"
   },

src/AddFolder/AddFolder.css

@@ -1,8 +0,0 @@
-
-.AddFolder {
-  color: #dedede;
-}
-
-.AddFolder h2 {
-  margin-left: 16px;
-}

src/AddFolder/AddFolder.js

@@ -1,26 +1,41 @@
-import React, { Component } from 'react'
-import NotefulForm from '../NotefulForm/NotefulForm'
+import React, { useState } from 'react';
 import './AddFolder.css'
+import {useHistory} from "react-router-dom"
+import config from '../config';
 
-export default class AddFolder extends Component {
-  render() {
-    return (
-      <section className='AddFolder'>
-        <h2>Create a folder</h2>
-        <NotefulForm>
-          <div className='field'>
-            <label htmlFor='folder-name-input'>
-              Name
-            </label>
-            <input type='text' id='folder-name-input' />
-          </div>
-          <div className='buttons'>
-            <button type='submit'>
-              Add folder
-            </button>
-          </div>
-        </NotefulForm>
-      </section>
-    )
-  }
-}
+export default function AddFolder({setFolders}) {
+    const [name, setFolderName] = useState('');
+    const [error, setError] = useState(false);
+    let history = useHistory();
+    const handleAddFolder = (event) => {
+        event.preventDefault()
+        fetch(`${config.API_ENDPOINT}/folders`,  {
+            method: 'POST',
+            headers: {
+            'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({name})
+        })
+        .then(resp => resp.json())
+        .then(data => {
+            setFolders(data)
+            setError(false)
+            history.push(`/`)
+        })
+        .catch(function(error){
+            setError(true)
+            console.log(error)
+        })
+
+
+    }
+
+  return (
+    <form onSubmit={ (event)=>{handleAddFolder(event)} }>
+        <h3 style={{color: "white", marginBottom: "5px"}}>Add a New Folder:</h3>
+        <input type="text" name="foldername" onChange={(event) => setFolderName(event.target.value)} /><br/>        
+        <input type="submit" value="Submit" />
+        {error && <h1>An Error has occured</h1>}
+    </form> 
+  )
+}

src/AddNote/AddNote.css

@@ -1,8 +0,0 @@
-
-.AddNote {
-  color: #dedede;
-}
-
-.AddNote h2 {
-  margin-left: 16px;
-}

src/AddNote/AddNote.js

@@ -1,49 +1,69 @@
-import React, { Component } from 'react'
-import NotefulForm from '../NotefulForm/NotefulForm'
+import React, { useState } from 'react';
 import './AddNote.css'
+import {useHistory} from "react-router-dom"
+import config from '../config';
 
-export default class AddNote extends Component {
-  static defaultProps = {
-    folders: [],
-  }
-  render() {
-    const { folders } = this.props
-    return (
-      <section className='AddNote'>
-        <h2>Create a note</h2>
-        <NotefulForm>
-          <div className='field'>
-            <label htmlFor='note-name-input'>
-              Name
-            </label>
-            <input type='text' id='note-name-input' />
-          </div>
-          <div className='field'>
-            <label htmlFor='note-content-input'>
-              Content
-            </label>
-            <textarea id='note-content-input' />
-          </div>
-          <div className='field'>
-            <label htmlFor='note-folder-select'>
-              Folder
-            </label>
-            <select id='note-folder-select'>
-              <option value={null}>...</option>
-              {folders.map(folder =>
-                <option key={folder.id} value={folder.id}>
-                  {folder.name}
-                </option>
-              )}
-            </select>
-          </div>
-          <div className='buttons'>
-            <button type='submit'>
-              Add note
-            </button>
-          </div>
-        </NotefulForm>
-      </section>
-    )
-  }
-}
+export default function AddNote({folders, setNotes}) {
+    const [name, setNoteName] = useState('');
+    const [content, setNoteContent] = useState('');
+    const [error, setError] = useState(false);
+    const [folderId, setFolder] = useState(folders[0].id)
+    let history = useHistory();
+    const validateNoteName = () => {
+        const notename = name.trim();
+        if (notename.length === 0) {
+          return 'A note name is required';
+        }
+    };
+    const handleAddNotes = (event) => {
+        event.preventDefault()
+        let today = new Date(),
+            modified = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate()
+        fetch(`${config.API_ENDPOINT}/notes`,  {
+            method: 'POST',
+            headers: {
+            'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({name,modified,folderId,content})
+        })
+        .then(resp => resp.json())
+        .then(data => {
+            setNotes(data)
+            setError(false)
+            history.push(`/`)
+        })
+        .catch(function(error){
+            setError(true)
+            console.log(error)
+        })
+
+
+    }
+
+  return (
+    // "id": "cbc787a0-ffaf-11e8-8eb2-f2801f1b9fd1",
+    // "name": "Dogs",
+    // "modified": "2019-01-03T00:00:00.000Z",
+    // "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
+    // "content": faker.lorem.paragraphs()
+      //capture the name, content and folder for a new Note
+    <form onSubmit={ (event)=>{handleAddNotes(event)} }>
+        <h3 style={{color: "white", marginBottom: "5px"}}>Add a New Note:</h3>
+        <h3>Name:</h3>
+        <input type="text" name="notename" onChange={(event) => setNoteName(event.target.value)} /><br/>
+        <h3>Content:</h3>        
+        <textarea rows="10" cols="25" name="notename" onChange={(event) => setNoteContent(event.target.value)} /><br/>        
+        <h3>Folder:</h3>
+        <select placeholder="Select Folder" value={folderId} onChange={(event)=>{setFolder(event.target.value)}}>
+            {
+                folders.map((folder)=>{
+                    return <option key={folder.id} value={folder.id}>{folder.name}</option> 
+                })
+            }
+        </select>
+        <br/>
+        <input disabled={validateNoteName()} type="submit" value="Submit" />
+        {error && <h1>An Error has occured</h1>}
+    </form> 
+  )
+}