From b7a09c30fa256a95040cb95c14ea0ccc1a8d7a5a Mon Sep 17 00:00:00 2001
From: Thomas Hudspith-Tatham <iammotivated@gmail.com>
Date: Sat, 15 Dec 2018 20:58:17 +0000
Subject: [PATCH 01/15] refactors from prop drilling to use context

---
 src/AddFolder/AddFolder.js            |  1 +
 src/AddNote/AddNote.js                |  8 +--
 src/AddNote/AddNote.test.js           |  6 +-
 src/ApiContext.js                     |  6 ++
 src/App/App.js                        | 91 ++++++++-----------------
 src/NoteListMain/NoteListMain.js      | 72 +++++++++++---------
 src/NoteListMain/NoteListMain.test.js | 77 +++++++++++----------
 src/NoteListNav/NoteListNav.js        | 72 ++++++++++----------
 src/NoteListNav/NoteListNav.test.js   | 98 +++++++++++++--------------
 src/NotePageMain/NotePageMain.js      | 46 +++++++------
 src/NotePageMain/NotePageMain.test.js | 69 +++++++++++++------
 src/NotePageNav/NotePageNav.js        | 60 +++++++++-------
 src/NotePageNav/NotePageNav.test.js   | 25 ++++---
 13 files changed, 340 insertions(+), 291 deletions(-)
 create mode 100644 src/ApiContext.js

diff --git a/src/AddFolder/AddFolder.js b/src/AddFolder/AddFolder.js
index 0307acb27..634d6ec84 100644
--- a/src/AddFolder/AddFolder.js
+++ b/src/AddFolder/AddFolder.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import NotefulForm from '../NotefulForm/NotefulForm'
+// import ApiContext from '../ApiContext'
 import './AddFolder.css'
 
 export default class AddFolder extends Component {
diff --git a/src/AddNote/AddNote.js b/src/AddNote/AddNote.js
index a1b17e422..2778a74c8 100644
--- a/src/AddNote/AddNote.js
+++ b/src/AddNote/AddNote.js
@@ -1,13 +1,13 @@
 import React, { Component } from 'react'
 import NotefulForm from '../NotefulForm/NotefulForm'
+import ApiContext from '../ApiContext'
 import './AddNote.css'
 
 export default class AddNote extends Component {
-  static defaultProps = {
-    folders: [],
-  }
+  static contextType = ApiContext;
+
   render() {
-    const { folders } = this.props
+    const { folders=[] } = this.context
     return (
       <section className='AddNote'>
         <h2>Create a note</h2>
diff --git a/src/AddNote/AddNote.test.js b/src/AddNote/AddNote.test.js
index 2412e7c2a..ed50d58db 100644
--- a/src/AddNote/AddNote.test.js
+++ b/src/AddNote/AddNote.test.js
@@ -24,8 +24,10 @@ describe(`AddNote component`, () => {
     expect(toJson(wrapper)).toMatchSnapshot()
   })
 
-  it('renders the select options from folders', () => {
-    const select = shallow(<AddNote folders={stubFolders} />)
+  // enzyme doesn't support React.createContext
+  it.skip('renders the select options from folders', () => {
+    const context = { folders: stubFolders }
+    const select = shallow(<AddNote />, context)
       .find('#note-folder-select')
     expect(toJson(select)).toMatchSnapshot()
   })
diff --git a/src/ApiContext.js b/src/ApiContext.js
new file mode 100644
index 000000000..18b52a861
--- /dev/null
+++ b/src/ApiContext.js
@@ -0,0 +1,6 @@
+import React from 'react'
+
+export default React.createContext({
+  notes: [],
+  folders: [],
+})
diff --git a/src/App/App.js b/src/App/App.js
index adc3ba283..2940a50a8 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -7,8 +7,8 @@ import NoteListMain from '../NoteListMain/NoteListMain'
 import NotePageMain from '../NotePageMain/NotePageMain'
 import AddFolder from '../AddFolder/AddFolder'
 import AddNote from '../AddNote/AddNote'
+import ApiContext from '../ApiContext'
 import dummyStore from '../dummy-store'
-import { getNotesForFolder, findNote, findFolder } from '../notes-helpers'
 import './App.css'
 
 class App extends Component {
@@ -23,7 +23,6 @@ class App extends Component {
   }
 
   renderNavRoutes() {
-    const { notes, folders } = this.state
     return (
       <>
         {['/', '/folder/:folderId'].map(path =>
@@ -31,28 +30,12 @@ class App extends Component {
             exact
             key={path}
             path={path}
-            render={routeProps =>
-              <NoteListNav
-                folders={folders}
-                notes={notes}
-                {...routeProps}
-              />
-            }
+            component={NoteListNav}
           />
         )}
         <Route
           path='/note/:noteId'
-          render={routeProps => {
-            const { noteId } = routeProps.match.params
-            const note = findNote(notes, noteId) || {}
-            const folder = findFolder(folders, note.folderId)
-            return (
-              <NotePageNav
-                {...routeProps}
-                folder={folder}
-              />
-            )
-          }}
+          component={NotePageNav}
         />
         <Route
           path='/add-folder'
@@ -67,7 +50,6 @@ class App extends Component {
   }
 
   renderMainRoutes() {
-    const { notes, folders } = this.state
     return (
       <>
         {['/', '/folder/:folderId'].map(path =>
@@ -75,30 +57,12 @@ class App extends Component {
             exact
             key={path}
             path={path}
-            render={routeProps => {
-              const { folderId } = routeProps.match.params
-              const notesForFolder = getNotesForFolder(notes, folderId)
-              return (
-                <NoteListMain
-                  {...routeProps}
-                  notes={notesForFolder}
-                />
-              )
-            }}
+            component={NoteListMain}
           />
         )}
         <Route
           path='/note/:noteId'
-          render={routeProps => {
-            const { noteId } = routeProps.match.params
-            const note = findNote(notes, noteId)
-            return (
-              <NotePageMain
-                {...routeProps}
-                note={note}
-              />
-            )
-          }}
+          component={NotePageMain}
         />
         <Route
           path='/add-folder'
@@ -106,36 +70,35 @@ class App extends Component {
         />
         <Route
           path='/add-note'
-          render={routeProps => {
-            return (
-              <AddNote
-                {...routeProps}
-                folders={folders}
-              />
-            )
-          }}
+          component={AddNote}
         />
       </>
     )
   }
 
   render() {
+    const value = {
+      notes: this.state.notes,
+      folders: this.state.folders,
+    }
     return (
-      <div className='App'>
-        <nav className='App__nav'>
-          {this.renderNavRoutes()}
-        </nav>
-        <header className='App__header'>
-          <h1>
-            <Link to='/'>Noteful</Link>
-            {' '}
-            <FontAwesomeIcon icon='check-double' />
-          </h1>
-        </header>
-        <main className='App__main'>
-          {this.renderMainRoutes()}
-        </main>
-      </div>
+      <ApiContext.Provider value={value}>
+        <div className='App'>
+          <nav className='App__nav'>
+            {this.renderNavRoutes()}
+          </nav>
+          <header className='App__header'>
+            <h1>
+              <Link to='/'>Noteful</Link>
+              {' '}
+              <FontAwesomeIcon icon='check-double' />
+            </h1>
+          </header>
+          <main className='App__main'>
+            {this.renderMainRoutes()}
+          </main>
+        </div>
+      </ApiContext.Provider>
     )
   }
 }
diff --git a/src/NoteListMain/NoteListMain.js b/src/NoteListMain/NoteListMain.js
index f0019206c..f20111dde 100644
--- a/src/NoteListMain/NoteListMain.js
+++ b/src/NoteListMain/NoteListMain.js
@@ -3,38 +3,48 @@ import { Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Note from '../Note/Note'
 import CircleButton from '../CircleButton/CircleButton'
+import ApiContext from '../ApiContext'
+import { getNotesForFolder } from '../notes-helpers'
 import './NoteListMain.css'
 
-export default function NoteListMain(props) {
-  return (
-    <section className='NoteListMain'>
-      <ul>
-        {props.notes.map(note =>
-          <li key={note.id}>
-            <Note
-              id={note.id}
-              name={note.name}
-              modified={note.modified}
-            />
-          </li>
-        )}
-      </ul>
-      <div className='NoteListMain__button-container'>
-        <CircleButton
-          tag={Link}
-          to='/add-note'
-          type='button'
-          className='NoteListMain__add-note-button'
-        >
-          <FontAwesomeIcon icon='plus' />
-          <br />
-          Note
-        </CircleButton>
-      </div>
-    </section>
-  )
-}
+export default class NoteListMain extends React.Component {
+  static defaultProps = {
+    match: {
+      params: {}
+    }
+  }
+  static contextType = ApiContext
 
-NoteListMain.defaultProps = {
-  notes: [],
+  render() {
+    const { folderId } = this.props.match.params
+    const { notes=[] } = this.context
+    const notesForFolder = getNotesForFolder(notes, folderId)
+    return (
+      <section className='NoteListMain'>
+        <ul>
+          {notesForFolder.map(note =>
+            <li key={note.id}>
+              <Note
+                id={note.id}
+                name={note.name}
+                modified={note.modified}
+              />
+            </li>
+          )}
+        </ul>
+        <div className='NoteListMain__button-container'>
+          <CircleButton
+            tag={Link}
+            to='/add-note'
+            type='button'
+            className='NoteListMain__add-note-button'
+          >
+            <FontAwesomeIcon icon='plus' />
+            <br />
+            Note
+          </CircleButton>
+        </div>
+      </section>
+    )
+  }
 }
diff --git a/src/NoteListMain/NoteListMain.test.js b/src/NoteListMain/NoteListMain.test.js
index b82066585..3ed1bd752 100644
--- a/src/NoteListMain/NoteListMain.test.js
+++ b/src/NoteListMain/NoteListMain.test.js
@@ -4,46 +4,53 @@ import toJson from 'enzyme-to-json'
 import NoteListMain from './NoteListMain'
 
 describe(`NoteListMain component`, () => {
-  const props = {
-    notes: [
-      {
-        "id": "cbc787a0-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "name": "Dogs",
-        "modified": "2019-01-03T00:00:00.000Z",
-        "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "content": "Corporis accusamus placeat.\n \rUnde."
-      },
-      {
-        "id": "d26e0034-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "name": "Cats",
-        "modified": "2018-08-15T23:00:00.000Z",
-        "folderId": "b07161a6-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "content": "Eos\n \rlaudantium."
-      },
-      {
-        "id": "d26e01a6-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "name": "Pigs",
-        "modified": "2018-03-01T00:00:00.000Z",
-        "folderId": "b07161a6-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "content": "Occaecati dignissimos\nvoluptatum nihil."
-      },
-      {
-        "id": "d26e0570-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "name": "Birds",
-        "modified": "2019-01-04T00:00:00.000Z",
-        "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "content": "Eum culpa odit."
-      },
-    ]
-  }
-
   it('renders a .NoteListMain by default', () => {
     const wrapper = shallow(<NoteListMain />)
     expect(toJson(wrapper)).toMatchSnapshot()
   })
 
-  it('renders a Note in ul for each notes in array', () => {
-    const ul = shallow(<NoteListMain {...props} />)
+  // enzyme doesn't yet support React.createContext
+  it.skip('renders a Note in ul for each notes in array', () => {
+    const props = {
+      match: {
+        params: {
+          folderId: 'THIS_FOLDER_ID'
+        }
+      }
+    }
+    const context = {
+      notes: [
+        {
+          "id": "cbc787a0-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "name": "Dogs",
+          "modified": "2019-01-03T00:00:00.000Z",
+          "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "content": "Corporis accusamus placeat.\n \rUnde."
+        },
+        {
+          "id": "d26e0034-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "name": "Cats",
+          "modified": "2018-08-15T23:00:00.000Z",
+          "folderId": "THIS_FOLDER_ID",
+          "content": "Eos\n \rlaudantium."
+        },
+        {
+          "id": "d26e01a6-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "name": "Pigs",
+          "modified": "2018-03-01T00:00:00.000Z",
+          "folderId": "THIS_FOLDER_ID",
+          "content": "Occaecati dignissimos\nvoluptatum nihil."
+        },
+        {
+          "id": "d26e0570-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "name": "Birds",
+          "modified": "2019-01-04T00:00:00.000Z",
+          "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "content": "Eum culpa odit."
+        },
+      ]
+    }
+    const ul = shallow(<NoteListMain {...props} />, context)
       .find('ul')
     expect(toJson(ul)).toMatchSnapshot()
   })
diff --git a/src/NoteListNav/NoteListNav.js b/src/NoteListNav/NoteListNav.js
index 3d2ee8956..ca44c187b 100644
--- a/src/NoteListNav/NoteListNav.js
+++ b/src/NoteListNav/NoteListNav.js
@@ -2,43 +2,45 @@ import React from 'react'
 import { NavLink, Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import CircleButton from '../CircleButton/CircleButton'
+import ApiContext from '../ApiContext'
 import { countNotesForFolder } from '../notes-helpers'
 import './NoteListNav.css'
 
-export default function NoteListNav(props) {
-  return (
-    <div className='NoteListNav'>
-      <ul className='NoteListNav__list'>
-        {props.folders.map(folder =>
-          <li key={folder.id}>
-            <NavLink
-              className='NoteListNav__folder-link'
-              to={`/folder/${folder.id}`}
-            >
-              <span className='NoteListNav__num-notes'>
-                {countNotesForFolder(props.notes, folder.id)}
-              </span>
-              {folder.name}
-            </NavLink>
-          </li>
-        )}
-      </ul>
-      <div className='NoteListNav__button-wrapper'>
-        <CircleButton
-          tag={Link}
-          to='/add-folder'
-          type='button'
-          className='NoteListNav__add-folder-button'
-        >
-          <FontAwesomeIcon icon='plus' />
-          <br />
-          Folder
-        </CircleButton>
-      </div>
-    </div>
-  )
-}
+export default class NoteListNav extends React.Component {
+  static contextType = ApiContext;
 
-NoteListNav.defaultProps = {
-  folders: []
+  render() {
+    const { folders=[], notes=[] } = this.context
+    return (
+      <div className='NoteListNav'>
+        <ul className='NoteListNav__list'>
+          {folders.map(folder =>
+            <li key={folder.id}>
+              <NavLink
+                className='NoteListNav__folder-link'
+                to={`/folder/${folder.id}`}
+              >
+                <span className='NoteListNav__num-notes'>
+                  {countNotesForFolder(notes, folder.id)}
+                </span>
+                {folder.name}
+              </NavLink>
+            </li>
+          )}
+        </ul>
+        <div className='NoteListNav__button-wrapper'>
+          <CircleButton
+            tag={Link}
+            to='/add-folder'
+            type='button'
+            className='NoteListNav__add-folder-button'
+          >
+            <FontAwesomeIcon icon='plus' />
+            <br />
+            Folder
+          </CircleButton>
+        </div>
+      </div>
+    )
+  }
 }
diff --git a/src/NoteListNav/NoteListNav.test.js b/src/NoteListNav/NoteListNav.test.js
index 0d595a9a0..ad848112d 100644
--- a/src/NoteListNav/NoteListNav.test.js
+++ b/src/NoteListNav/NoteListNav.test.js
@@ -4,60 +4,60 @@ import toJson from 'enzyme-to-json'
 import NoteListNav from './NoteListNav'
 
 describe(`NoteListNav component`, () => {
-  const props = {
-    notes: [
-      {
-        "id": "cbc787a0-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "name": "Dogs",
-        "modified": "2019-01-03T00:00:00.000Z",
-        "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "content": "Corporis accusamus placeat.\n \rUnde."
-      },
-      {
-        "id": "d26e0034-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "name": "Cats",
-        "modified": "2018-08-15T23:00:00.000Z",
-        "folderId": "b07161a6-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "content": "Eos\n \rlaudantium."
-      },
-      {
-        "id": "d26e01a6-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "name": "Pigs",
-        "modified": "2018-03-01T00:00:00.000Z",
-        "folderId": "b07161a6-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "content": "Occaecati dignissimos\nvoluptatum nihil."
-      },
-      {
-        "id": "d26e0570-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "name": "Birds",
-        "modified": "2019-01-04T00:00:00.000Z",
-        "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "content": "Eum culpa odit."
-      },
-    ],
-    folders: [
-      {
-        "id": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "name": "Important"
-      },
-      {
-        "id": "b07161a6-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "name": "Super"
-      },
-      {
-        "id": "b07162f0-ffaf-11e8-8eb2-f2801f1b9fd1",
-        "name": "Spangley"
-      }
-    ]
-  }
-
   it('renders a .NoteListNav by default', () => {
     const wrapper = shallow(<NoteListNav />)
     expect(toJson(wrapper)).toMatchSnapshot()
   })
 
-  it('renders a link in ul for each folder in array', () => {
-    const ul = shallow(<NoteListNav {...props} />)
+  // enzyme doesn't yet support React.createContext
+  it.skip('renders a link in ul for each folder in array', () => {
+    const context = {
+      notes: [
+        {
+          "id": "cbc787a0-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "name": "Dogs",
+          "modified": "2019-01-03T00:00:00.000Z",
+          "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "content": "Corporis accusamus placeat.\n \rUnde."
+        },
+        {
+          "id": "d26e0034-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "name": "Cats",
+          "modified": "2018-08-15T23:00:00.000Z",
+          "folderId": "b07161a6-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "content": "Eos\n \rlaudantium."
+        },
+        {
+          "id": "d26e01a6-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "name": "Pigs",
+          "modified": "2018-03-01T00:00:00.000Z",
+          "folderId": "b07161a6-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "content": "Occaecati dignissimos\nvoluptatum nihil."
+        },
+        {
+          "id": "d26e0570-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "name": "Birds",
+          "modified": "2019-01-04T00:00:00.000Z",
+          "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "content": "Eum culpa odit."
+        },
+      ],
+      folders: [
+        {
+          "id": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "name": "Important"
+        },
+        {
+          "id": "b07161a6-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "name": "Super"
+        },
+        {
+          "id": "b07162f0-ffaf-11e8-8eb2-f2801f1b9fd1",
+          "name": "Spangley"
+        }
+      ]
+    }
+    const ul = shallow(<NoteListNav />, context)
       .find('ul')
     expect(toJson(ul)).toMatchSnapshot()
   })
diff --git a/src/NotePageMain/NotePageMain.js b/src/NotePageMain/NotePageMain.js
index 85077ea82..e1f4b9788 100644
--- a/src/NotePageMain/NotePageMain.js
+++ b/src/NotePageMain/NotePageMain.js
@@ -1,26 +1,34 @@
 import React from 'react'
 import Note from '../Note/Note'
+import ApiContext from '../ApiContext'
+import { findNote } from '../notes-helpers'
 import './NotePageMain.css'
 
-export default function NotePageMain(props) {
-  return (
-    <section className='NotePageMain'>
-      <Note
-        id={props.note.id}
-        name={props.note.name}
-        modified={props.note.modified}
-      />
-      <div className='NotePageMain__content'>
-        {props.note.content.split(/\n \r|\n/).map((para, i) =>
-          <p key={i}>{para}</p>
-        )}
-      </div>
-    </section>
-  )
-}
+export default class NotePageMain extends React.Component {
+  static defaultProps = {
+    match: {
+      params: {}
+    }
+  }
+  static contextType = ApiContext
 
-NotePageMain.defaultProps = {
-  note: {
-    content: '',
+  render() {
+    const { notes=[] } = this.context
+    const { noteId } = this.props.match.params
+    const note = findNote(notes, noteId) || { content: '' }
+    return (
+      <section className='NotePageMain'>
+        <Note
+          id={note.id}
+          name={note.name}
+          modified={note.modified}
+        />
+        <div className='NotePageMain__content'>
+          {note.content.split(/\n \r|\n/).map((para, i) =>
+            <p key={i}>{para}</p>
+          )}
+        </div>
+      </section>
+    )
   }
 }
diff --git a/src/NotePageMain/NotePageMain.test.js b/src/NotePageMain/NotePageMain.test.js
index 961db2bc7..eb7da1ad5 100644
--- a/src/NotePageMain/NotePageMain.test.js
+++ b/src/NotePageMain/NotePageMain.test.js
@@ -4,34 +4,65 @@ import toJson from 'enzyme-to-json'
 import NotePageMain from './NotePageMain'
 
 describe(`NotePageMain component`, () => {
-  const props = {
-    note: {
-      "id": "cbc787a0-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Dogs",
-      "modified": "2019-01-03T00:00:00.000Z",
-      // "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "content": "Corporis accusamus placeat.\n \rUnde."
-    }
-  }
-
   it('renders a .NotePageMain by default', () => {
     const wrapper = shallow(<NotePageMain />)
     expect(toJson(wrapper)).toMatchSnapshot()
   })
 
-  it('renders a Note with note prop', () => {
-    const note = shallow(<NotePageMain {...props} />)
+  // enzyme doesn't yet support React.createContext
+  it.skip('renders a Note with note prop', () => {
+    const props = {
+      match: {
+        params: {
+          noteId: 'cbc787a0-ffaf-11e8-8eb2-f2801f1b9fd1'
+        }
+      }
+    }
+    const context = {
+      notes: [{
+        id: `cbc787a0-ffaf-11e8-8eb2-f2801f1b9fd1`,
+        name: `Dogs`,
+        modified: `2019-01-03T00:00:00.000Z`,
+        // folderId: b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1,
+        content: "Corporis accusamus placeat.\n \rUnde."
+      }]
+    }
+    const note = shallow(<NotePageMain {...props} />, context)
       .find('Note')
     expect(toJson(note)).toMatchSnapshot()
   })
 
-  it(`splits the content by \\n or \\n\\r, with a p foreach`, () => {
-    [{
-      note: { "content": "Content with n r.\n \rafter n r." }
-    }, {
-      note: { "content": "Content with n.\nafter." }
-    }].forEach(props => {
-      const content = shallow(<NotePageMain {...props} />)
+  // enzyme doesn't yet support React.createContext
+  it.skip(`splits the content by \\n or \\n\\r, with a p foreach`, () => {
+    const props = {
+      match: {
+        params: {
+          noteId: 'cbc787a0-ffaf-11e8-8eb2-f2801f1b9fd1'
+        }
+      }
+    }
+
+    const notesContextWithDifferentContent = [
+      {
+        notes: [
+          {
+            id: `cbc787a0-ffaf-11e8-8eb2-f2801f1b9fd1`,
+            content: "Content with n r.\n \rafter n r.",
+          }
+        ]
+      },
+      {
+        notes: [
+          {
+            id: `cbc787a0-ffaf-11e8-8eb2-f2801f1b9fd1`,
+            content: "Content with n.\nafter."
+          }
+        ]
+      }
+    ]
+
+    notesContextWithDifferentContent.forEach(context => {
+      const content = shallow(<NotePageMain {...props} />, context)
         .find('NotePageMain__content')
       expect(toJson(content)).toMatchSnapshot()
     })
diff --git a/src/NotePageNav/NotePageNav.js b/src/NotePageNav/NotePageNav.js
index 630f54ae5..ef33935eb 100644
--- a/src/NotePageNav/NotePageNav.js
+++ b/src/NotePageNav/NotePageNav.js
@@ -1,32 +1,44 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import CircleButton from '../CircleButton/CircleButton'
+import ApiContext from '../ApiContext'
+import { findNote, findFolder } from '../notes-helpers'
 import './NotePageNav.css'
 
-export default function NotePageNav(props) {
-  return (
-    <div className='NotePageNav'>
-      <CircleButton
-        tag='button'
-        role='link'
-        onClick={() => props.history.goBack()}
-        className='NotePageNav__back-button'
-      >
-        <FontAwesomeIcon icon='chevron-left' />
-        <br />
-        Back
-      </CircleButton>
-      {props.folder && (
-        <h3 className='NotePageNav__folder-name'>
-          {props.folder.name}
-        </h3>
-      )}
-    </div>
-  )
-}
+export default class NotePageNav extends React.Component {
+  static defaultProps = {
+    history: {
+      goBack: () => { }
+    },
+    match: {
+      params: {}
+    }
+  }
+  static contextType = ApiContext;
 
-NotePageNav.defaultProps = {
-  history: {
-    goBack: () => {}
+  render() {
+    const { notes, folders, } = this.context
+    const { noteId } = this.props.match.params
+    const note = findNote(notes, noteId) || {}
+    const folder = findFolder(folders, note.folderId)
+    return (
+      <div className='NotePageNav'>
+        <CircleButton
+          tag='button'
+          role='link'
+          onClick={() => this.props.history.goBack()}
+          className='NotePageNav__back-button'
+        >
+          <FontAwesomeIcon icon='chevron-left' />
+          <br />
+          Back
+        </CircleButton>
+        {folder && (
+          <h3 className='NotePageNav__folder-name'>
+            {folder.name}
+          </h3>
+        )}
+      </div>
+    )
   }
 }
diff --git a/src/NotePageNav/NotePageNav.test.js b/src/NotePageNav/NotePageNav.test.js
index 9a28d67a6..b41510573 100644
--- a/src/NotePageNav/NotePageNav.test.js
+++ b/src/NotePageNav/NotePageNav.test.js
@@ -1,22 +1,29 @@
-import React from 'react';
+import React from 'react'
 import { shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
 import NotePageNav from './NotePageNav'
 
 describe(`NotePageNav component`, () => {
-  const props = {
-    folder: {
-      "name": "Important"
-    }
-  }
-
   it('renders a .NotePageNav by default', () => {
     const wrapper = shallow(<NotePageNav />)
     expect(toJson(wrapper)).toMatchSnapshot()
   })
 
-  it('renders a h3 with folder name when in props', () => {
-    const h3 = shallow(<NotePageNav {...props} />)
+  // enzyme doesn't support React.createContext
+  it.skip('renders a h3 with folder name when in props', () => {
+    const props = {
+      match: {
+        params: {
+          noteId: 'test-note-id'
+        }
+      }
+    }
+    const context = {
+      notes: [{ id: 'test-note-id', folderId: 'test-folder-id' }],
+      folders: [{ id: 'test-folder-id', name: 'Important' }]
+    }
+
+    const h3 = shallow(<NotePageNav {...props} />, context)
       .find('.NotePageNav__folder-name')
     expect(toJson(h3)).toMatchSnapshot()
   })

From 12efa966856293893a625de5e1d0620f77a5831d Mon Sep 17 00:00:00 2001
From: Thomas Hudspith-Tatham <iammotivated@gmail.com>
Date: Sat, 15 Dec 2018 22:22:21 +0000
Subject: [PATCH 02/15] implements add note, add folder, delete note with
 context against json-server

---
 src/AddFolder/AddFolder.js       |  40 ++++++++++-
 src/AddNote/AddNote.js           |  43 ++++++++++--
 src/ApiContext.js                |   3 +
 src/App/App.js                   |  52 +++++++++++++-
 src/Note/Note.js                 |  81 +++++++++++++++------
 src/NotePageMain/NotePageMain.js |   5 ++
 src/config.js                    |   3 +
 src/dummy-store.js               | 116 -------------------------------
 8 files changed, 196 insertions(+), 147 deletions(-)
 create mode 100644 src/config.js
 delete mode 100644 src/dummy-store.js

diff --git a/src/AddFolder/AddFolder.js b/src/AddFolder/AddFolder.js
index 634d6ec84..3c573b3eb 100644
--- a/src/AddFolder/AddFolder.js
+++ b/src/AddFolder/AddFolder.js
@@ -1,19 +1,53 @@
 import React, { Component } from 'react'
 import NotefulForm from '../NotefulForm/NotefulForm'
-// import ApiContext from '../ApiContext'
+import ApiContext from '../ApiContext'
+import config from '../config'
 import './AddFolder.css'
 
 export default class AddFolder extends Component {
+  static defaultProps = {
+    history: {
+      push: () => { }
+    },
+  }
+  static contextType = ApiContext;
+
+  handleSubmit = e => {
+    e.preventDefault()
+    const folder = {
+      name: e.target['folder-name'].value
+    }
+    fetch(`${config.API_ENDPOINT}/folders`, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify(folder),
+    })
+      .then(res => {
+        if (!res.ok)
+          return res.json().then(e => Promise.reject(e))
+        return res.json()
+      })
+      .then(folder => {
+        this.context.addFolder(folder)
+        this.props.history.push(`/folder/${folder.id}`)
+      })
+      .catch(error => {
+        console.error({ error })
+      })
+  }
+
   render() {
     return (
       <section className='AddFolder'>
         <h2>Create a folder</h2>
-        <NotefulForm>
+        <NotefulForm onSubmit={this.handleSubmit}>
           <div className='field'>
             <label htmlFor='folder-name-input'>
               Name
             </label>
-            <input type='text' id='folder-name-input' />
+            <input type='text' id='folder-name-input' name='folder-name' />
           </div>
           <div className='buttons'>
             <button type='submit'>
diff --git a/src/AddNote/AddNote.js b/src/AddNote/AddNote.js
index 2778a74c8..b943b13d9 100644
--- a/src/AddNote/AddNote.js
+++ b/src/AddNote/AddNote.js
@@ -1,34 +1,69 @@
 import React, { Component } from 'react'
 import NotefulForm from '../NotefulForm/NotefulForm'
 import ApiContext from '../ApiContext'
+import config from '../config'
 import './AddNote.css'
 
 export default class AddNote extends Component {
+  static defaultProps = {
+    history: {
+      push: () => { }
+    },
+  }
   static contextType = ApiContext;
 
+  handleSubmit = e => {
+    e.preventDefault()
+    const newNote = {
+      name: e.target['note-name'].value,
+      content: e.target['note-content'].value,
+      folderId: e.target['note-folder-id'].value,
+      modified: new Date(),
+    }
+    fetch(`${config.API_ENDPOINT}/notes`, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify(newNote),
+    })
+      .then(res => {
+        if (!res.ok)
+          return res.json().then(e => Promise.reject(e))
+        return res.json()
+      })
+      .then(note => {
+        this.context.addNote(note)
+        this.props.history.push(`/folder/${note.folderId}`)
+      })
+      .catch(error => {
+        console.error({ error })
+      })
+  }
+
   render() {
     const { folders=[] } = this.context
     return (
       <section className='AddNote'>
         <h2>Create a note</h2>
-        <NotefulForm>
+        <NotefulForm onSubmit={this.handleSubmit}>
           <div className='field'>
             <label htmlFor='note-name-input'>
               Name
             </label>
-            <input type='text' id='note-name-input' />
+            <input type='text' id='note-name-input' name='note-name' />
           </div>
           <div className='field'>
             <label htmlFor='note-content-input'>
               Content
             </label>
-            <textarea id='note-content-input' />
+            <textarea id='note-content-input' name='note-content' />
           </div>
           <div className='field'>
             <label htmlFor='note-folder-select'>
               Folder
             </label>
-            <select id='note-folder-select'>
+            <select id='note-folder-select' name='note-folder-id'>
               <option value={null}>...</option>
               {folders.map(folder =>
                 <option key={folder.id} value={folder.id}>
diff --git a/src/ApiContext.js b/src/ApiContext.js
index 18b52a861..399df903f 100644
--- a/src/ApiContext.js
+++ b/src/ApiContext.js
@@ -3,4 +3,7 @@ import React from 'react'
 export default React.createContext({
   notes: [],
   folders: [],
+  addFolder: () => {},
+  addNote: () => {},
+  deleteNote: () => {},
 })
diff --git a/src/App/App.js b/src/App/App.js
index 2940a50a8..b0d11eecf 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -8,7 +8,7 @@ import NotePageMain from '../NotePageMain/NotePageMain'
 import AddFolder from '../AddFolder/AddFolder'
 import AddNote from '../AddNote/AddNote'
 import ApiContext from '../ApiContext'
-import dummyStore from '../dummy-store'
+import config from '../config'
 import './App.css'
 
 class App extends Component {
@@ -18,8 +18,51 @@ class App extends Component {
   };
 
   componentDidMount() {
-    // fake date loading from API call
-    setTimeout(() => this.setState(dummyStore), 600)
+    Promise.all([
+      fetch(`${config.API_ENDPOINT}/notes`),
+      fetch(`${config.API_ENDPOINT}/folders`)
+    ])
+      .then(([notesRes, foldersRes]) => {
+        if (!notesRes.ok)
+          return notesRes.json().then(e => Promise.reject(e))
+        if (!foldersRes.ok)
+          return foldersRes.json().then(e => Promise.reject(e))
+
+        return Promise.all([
+          notesRes.json(),
+          foldersRes.json(),
+        ])
+      })
+      .then(([notes, folders]) => {
+        this.setState({ notes, folders })
+      })
+      .catch(error => {
+        console.error({ error })
+      })
+  }
+
+  handleAddFolder = folder => {
+    this.setState({
+      folders: [
+        ...this.state.folders,
+        folder
+      ]
+    })
+  }
+
+  handleAddNote = note => {
+    this.setState({
+      notes: [
+        ...this.state.notes,
+        note
+      ]
+    })
+  }
+
+  handleDeleteNote = noteId => {
+    this.setState({
+      notes: this.state.notes.filter(note => note.id !== noteId)
+    })
   }
 
   renderNavRoutes() {
@@ -80,6 +123,9 @@ class App extends Component {
     const value = {
       notes: this.state.notes,
       folders: this.state.folders,
+      addFolder: this.handleAddFolder,
+      addNote: this.handleAddNote,
+      deleteNote: this.handleDeleteNote,
     }
     return (
       <ApiContext.Provider value={value}>
diff --git a/src/Note/Note.js b/src/Note/Note.js
index 532d44dc3..4e6687ed9 100644
--- a/src/Note/Note.js
+++ b/src/Note/Note.js
@@ -2,30 +2,69 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import { format } from 'date-fns'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import ApiContext from '../ApiContext'
+import config from '../config'
 import './Note.css'
 
-export default function Note(props) {
-  return (
-    <div className='Note'>
-      <h2 className='Note__title'>
-        <Link to={`/note/${props.id}`}>
-          {props.name}
-        </Link>
-      </h2>
-      <button className='Note__delete' type='button'>
-        <FontAwesomeIcon icon='trash-alt' />
-        {' '}
-        remove
-      </button>
-      <div className='Note__dates'>
-        <div className='Note__dates-modified'>
-          Modified
+export default class Note extends React.Component {
+  static defaultProps ={
+    onDeleteNote: () => {},
+  }
+  static contextType = ApiContext;
+
+  handleClickDelete = e => {
+    e.preventDefault()
+    const noteId = this.props.id
+
+    fetch(`${config.API_ENDPOINT}/notes/${noteId}`, {
+      method: 'DELETE',
+      headers: {
+        'content-type': 'application/json'
+      },
+    })
+      .then(res => {
+        if (!res.ok)
+          return res.json().then(e => Promise.reject(e))
+        return res.json()
+      })
+      .then(() => {
+        this.context.deleteNote(noteId)
+        // allow parent to perform extra behaviour
+        this.props.onDeleteNote(noteId)
+      })
+      .catch(error => {
+        console.error({ error })
+      })
+  }
+
+  render() {
+    const { name, id, modified } = this.props
+    return (
+      <div className='Note'>
+        <h2 className='Note__title'>
+          <Link to={`/note/${id}`}>
+            {name}
+          </Link>
+        </h2>
+        <button
+          className='Note__delete'
+          type='button'
+          onClick={this.handleClickDelete}
+        >
+          <FontAwesomeIcon icon='trash-alt' />
           {' '}
-          <span className='Date'>
-            {format(props.modified, 'Do MMM YYYY')}
-          </span>
+          remove
+        </button>
+        <div className='Note__dates'>
+          <div className='Note__dates-modified'>
+            Modified
+            {' '}
+            <span className='Date'>
+              {format(modified, 'Do MMM YYYY')}
+            </span>
+          </div>
         </div>
       </div>
-    </div>
-  )
+    )
+  }
 }
diff --git a/src/NotePageMain/NotePageMain.js b/src/NotePageMain/NotePageMain.js
index e1f4b9788..c634e80ef 100644
--- a/src/NotePageMain/NotePageMain.js
+++ b/src/NotePageMain/NotePageMain.js
@@ -12,6 +12,10 @@ export default class NotePageMain extends React.Component {
   }
   static contextType = ApiContext
 
+  handleDeleteNote = noteId => {
+    this.props.history.push(`/`)
+  }
+
   render() {
     const { notes=[] } = this.context
     const { noteId } = this.props.match.params
@@ -22,6 +26,7 @@ export default class NotePageMain extends React.Component {
           id={note.id}
           name={note.name}
           modified={note.modified}
+          onDeleteNote={this.handleDeleteNote}
         />
         <div className='NotePageMain__content'>
           {note.content.split(/\n \r|\n/).map((para, i) =>
diff --git a/src/config.js b/src/config.js
new file mode 100644
index 000000000..6bbc0a508
--- /dev/null
+++ b/src/config.js
@@ -0,0 +1,3 @@
+export default {
+  API_ENDPOINT: 'http://localhost:9090'
+}
diff --git a/src/dummy-store.js b/src/dummy-store.js
deleted file mode 100644
index aed01384f..000000000
--- a/src/dummy-store.js
+++ /dev/null
@@ -1,116 +0,0 @@
-export default {
-  "folders": [
-    {
-      "id": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Important"
-    },
-    {
-      "id": "b07161a6-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Super"
-    },
-    {
-      "id": "b07162f0-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Spangley"
-    }
-  ],
-  "notes": [
-    {
-      "id": "cbc787a0-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Dogs",
-      "modified": "2019-01-03T00:00:00.000Z",
-      "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "content": "Corporis accusamus placeat quas non voluptas. Harum fugit molestias qui. Velit ex animi reiciendis quasi. Suscipit totam delectus ut voluptas aut qui rerum. Non veniam eius molestiae rerum quam.\n \rUnde qui aperiam praesentium alias. Aut temporibus id quidem recusandae voluptatem ut eum. Consequatur asperiores et in quisquam corporis maxime dolorem soluta. Et officiis id est quia sunt qui iste reiciendis saepe. Ut aut doloribus minus non nisi vel corporis. Veritatis mollitia et molestias voluptas neque aspernatur reprehenderit.\n \rMaxime aut reprehenderit mollitia quia eos sit fugiat exercitationem. Minima dolore soluta. Quidem fuga ut sit voluptas nihil sunt aliquam dignissimos. Ex autem nemo quisquam voluptas consequuntur et necessitatibus minima velit. Consequatur quia quis tempora minima. Aut qui dolor et dignissimos ut repellat quas ad."
-    },
-    {
-      "id": "d26e0034-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Cats",
-      "modified": "2018-08-15T23:00:00.000Z",
-      "folderId": "b07161a6-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "content": "Eos laudantium quia ab blanditiis temporibus necessitatibus. Culpa et voluptas ut sed commodi. Est qui ducimus id. Beatae sint aspernatur error ullam quae illum sint eum. Voluptas corrupti praesentium soluta cumque illo impedit vero omnis nisi.\n \rNam sunt reprehenderit soluta quis explicabo impedit id. Repudiandae eligendi libero ad ut dolores. Laborum nihil sint et labore iusto reiciendis cum. Repellat quos recusandae natus nobis ullam autem veniam id.\n \rEsse blanditiis neque tempore ex voluptate commodi nemo. Velit sapiente at placeat eveniet ut rem. Quidem harum ut dignissimos. Omnis pariatur quas aperiam. Quasi voluptas qui nulla. Iure quas veniam aut quia et."
-    },
-    {
-      "id": "d26e01a6-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Pigs",
-      "modified": "2018-03-01T00:00:00.000Z",
-      "folderId": "b07161a6-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "content": "Occaecati dignissimos quam qui facere deserunt quia. Quaerat aut eos laudantium dolor odio officiis illum. Velit vel qui dolorem et.\n \rQui ut vel excepturi in at. Ut accusamus cumque quia sapiente ut ipsa nesciunt. Dolorum quod eligendi qui aliquid sint.\n \rAt id deserunt voluptatem et rerum. Voluptatem fuga tempora aut dignissimos est odio maiores illo. Fugiat in ad expedita voluptas voluptatum nihil."
-    },
-    {
-      "id": "d26e0570-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Birds",
-      "modified": "2019-01-04T00:00:00.000Z",
-      "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "content": "Eum culpa odit. Veniam porro molestiae dolores sunt reiciendis culpa. Atque accusamus dolore eos odio facilis. Dolores reprehenderit et provident dolores possimus mollitia.\n \rAdipisci dolor necessitatibus nihil quod quia vel veniam. Placeat qui vero. Cum cum amet at nisi. Distinctio rerum similique explicabo atque ratione. Recusandae omnis earum est. Quas iusto nihil itaque architecto ea.\n \rPerferendis neque doloremque quibusdam accusantium ut dolor illum dolorum. Vero et similique nihil beatae. In repellendus dolores praesentium. Optio alias rerum culpa placeat maiores natus sed. Ipsa et qui cum ex maiores."
-    },
-    {
-      "id": "d26e0714-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Bears",
-      "modified": "2018-07-12T23:00:00.000Z",
-      "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "content": "Distinctio dolor nihil ad iure quo tempore id ipsum. Doloremque sunt dicta odit. Id veritatis aut et doloremque natus.\n \rDeleniti temporibus repellendus molestias nemo. Cupiditate quae consectetur. Reiciendis corporis maxime consequatur qui quaerat cum aut. Quia officiis aut.\n \rAsperiores aut culpa voluptatem amet accusantium officia. Et et et adipisci ullam nesciunt eum magni totam. Quae repellendus suscipit animi vel laudantium sed enim nulla esse. Cupiditate quos minus laudantium autem eum quas tempore. Eos quibusdam quibusdam. Voluptatem molestiae qui accusamus blanditiis voluptates quia."
-    },
-    {
-      "id": "d26e0854-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Horses",
-      "modified": "2018-08-20T23:00:00.000Z",
-      "folderId": "b07161a6-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "content": "Aliquid magnam ut quis quas impedit molestiae laudantium adipisci et. Officiis ut dolor rerum molestiae. Natus rerum libero aperiam. Rem aut consequatur. Quas soluta modi rerum id qui quis et voluptatem perferendis.\n \rIpsum quod sed minima rerum. Voluptatem pariatur voluptatem iure. Voluptatem perferendis qui doloremque distinctio nobis praesentium corrupti unde sed.\n \rPlaceat deleniti in praesentium aut tenetur. Recusandae debitis sint voluptates quam sed eum et quos qui. Atque esse nostrum et architecto qui perspiciatis odit aut. Aut quis corrupti ut. Maiores ratione sit dolor consectetur eius iusto illo sequi. Mollitia fugit dolores."
-    },
-    {
-      "id": "d26e0980-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Tigers",
-      "modified": "2018-03-03T00:00:00.000Z",
-      "folderId": "b07162f0-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "content": "Eaque aliquid sit. Ducimus consequatur nam. Corporis ut dolorum amet molestiae minima ut quasi nesciunt. Ad omnis et. Dolorem nemo id non voluptatem mollitia sit laudantium. Consequatur quia consequuntur praesentium perferendis alias molestiae voluptatem qui temporibus.\n \rRerum tempore sed eum delectus excepturi odio. Ipsam omnis occaecati qui. Ut aspernatur et et est consequatur architecto laboriosam. Voluptates ullam beatae vero.\n \rAmet magnam neque temporibus totam aperiam aut dignissimos. Voluptas aut est ut quisquam totam. Dolor quibusdam nesciunt voluptatem cum sit harum in dicta. Sed nostrum et veniam id hic voluptatem inventore quo. Ipsam officiis unde dolor eum est dolores qui itaque aspernatur. Magnam aliquam qui qui."
-    },
-    {
-      "id": "d26e0aac-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Wolves",
-      "modified": "2018-05-16T23:00:00.000Z",
-      "folderId": "b07162f0-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "content": "Expedita mollitia et. Voluptates optio expedita. Esse ullam numquam quae rem. Cum esse itaque et. Corrupti nam illum debitis ipsa excepturi neque rem totam. Repellendus consequatur qui itaque distinctio ut esse ut est.\n \rCulpa a impedit dignissimos. Eos nam totam delectus tempora autem nulla. Id nobis dolores. Minima autem vel provident quo temporibus.\n \rQuis modi eius voluptas fugit dolorem est reiciendis blanditiis. Labore minus qui ab dolorem eos repellat deleniti. Omnis assumenda non. Distinctio voluptas ea fugit corporis. Maiores et occaecati."
-    },
-    {
-      "id": "d26e0bce-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Elephants",
-      "modified": "2018-04-11T23:00:00.000Z",
-      "folderId": "b07161a6-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "content": "Rem enim voluptatem autem fuga possimus. Perferendis voluptatem labore vero veritatis laborum aspernatur molestiae. Enim et quibusdam harum ab velit ad occaecati. Incidunt repellendus quidem rem quia quasi veritatis reiciendis. Quas omnis nam. Quo quisquam occaecati deleniti reiciendis quo temporibus cupiditate consequatur.\n \rSit ullam aut harum sunt rerum error. Quod omnis asperiores sed illum molestiae. Doloremque perspiciatis voluptas vel. Vel esse architecto ut quibusdam laudantium ut et.\n \rRecusandae quo sed quis ratione voluptates nam dolorem consequatur id. Dolores nesciunt illo possimus impedit. Perferendis ea sequi pariatur cumque. Iste nisi perspiciatis. Cumque repellendus optio voluptas maiores nobis. Accusantium sit hic eius occaecati veritatis qui asperiores illum."
-    },
-    {
-      "id": "d26e0f48-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Lions",
-      "modified": "2018-04-26T23:00:00.000Z",
-      "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "content": "Occaecati qui magni blanditiis. Et animi quas. Harum quo dolore quia nam amet numquam. Omnis et ex numquam et nostrum dolores voluptatibus. Ut dolores qui voluptatibus. Debitis fuga similique sapiente est perspiciatis.\n \rQuis magni quod iusto ipsum laboriosam suscipit excepturi. Dignissimos praesentium eum explicabo recusandae voluptates. Aliquid laboriosam aperiam sapiente aspernatur mollitia tempore deleniti.\n \rDolor ratione nam ut. Ad eum vel. Eos iusto modi praesentium. Nihil eos libero rerum expedita. Corrupti aut exercitationem eveniet sunt."
-    },
-    {
-      "id": "d26e1074-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Monkeys",
-      "modified": "2018-02-05T00:00:00.000Z",
-      "folderId": "b07162f0-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "content": "Tenetur deleniti vero. Qui et sit voluptatem et dolor voluptas. Aut adipisci autem dolorem ad excepturi ut facere.\n \rQuos recusandae vitae earum minima quidem sapiente repellat. Veniam inventore ut. Ad quibusdam aliquam id in nihil iste qui nobis. Quidem distinctio eos explicabo.\n \rEa enim rerum deleniti quo earum. Provident fugit eum dolore sequi nobis. Architecto molestias odio et doloremque pariatur facere modi. Eum et est blanditiis delectus at est maiores vel velit. Eligendi velit dicta enim omnis."
-    },
-    {
-      "id": "d26e11a0-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Bats",
-      "modified": "2018-12-01T00:00:00.000Z",
-      "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "content": "Tempore aliquam nobis amet dolor laborum aspernatur aspernatur. Non porro est mollitia nobis. Eveniet possimus non et mollitia non.\n \rNecessitatibus dolor eaque consectetur ullam quia ad vero. Dolores dolore minus consequatur itaque a corporis sit provident dicta. Ad in tempora ex consequuntur autem accusantium veritatis. Quia a odit qui autem repellendus et perspiciatis harum. Molestias iste at dicta optio vel nulla enim.\n \rAliquid recusandae optio numquam tempora totam voluptatum inventore. Minus ipsum vel officiis consectetur repudiandae unde necessitatibus in. Occaecati voluptatibus commodi et. Delectus suscipit saepe est reiciendis. Cupiditate laborum voluptatem autem explicabo voluptate. Quae et distinctio sequi dolorem temporibus aliquid."
-    },
-    {
-      "id": "d26e12c2-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Turtles",
-      "modified": "2018-09-11T23:00:00.000Z",
-      "folderId": "b07161a6-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "content": "Fugiat dolores et nostrum laborum id delectus sint reiciendis. Recusandae nulla repellendus. Labore eum hic nesciunt enim corporis necessitatibus. Iusto pariatur aut qui blanditiis.\n \rTempore et vel ut maxime et reprehenderit deleniti esse officia. Laboriosam et reiciendis distinctio qui enim. Amet suscipit sit.\n \rVitae id impedit reprehenderit eveniet nesciunt et soluta. Labore aliquam sed dolores voluptatibus est omnis quo molestias aut. Dolor optio sed alias excepturi delectus aut consequuntur veniam nemo."
-    },
-    {
-      "id": "d26e1452-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "name": "Zebras",
-      "modified": "2018-08-13T23:00:00.000Z",
-      "folderId": "b07161a6-ffaf-11e8-8eb2-f2801f1b9fd1",
-      "content": "Veritatis porro minima perspiciatis. Repellat veniam quo iste ut. Iusto voluptas quae quibusdam. Odit neque iusto cupiditate iste quam. Fuga itaque aut praesentium ullam saepe ut et vero.\n \rQuisquam doloremque molestiae. Enim rerum dolorem et velit itaque magnam laborum. Aut officiis porro.\n \rQuae eum eaque error. Sed itaque ipsam nam provident aut voluptate. Perferendis repudiandae sequi laudantium est est animi eum. Unde alias et doloribus est hic et. Sed distinctio incidunt maiores aut voluptatibus et omnis mollitia fugit."
-    }
-  ]
-}

From 882ed29fd7730f373f6ba7d67c11d23b1705d9e1 Mon Sep 17 00:00:00 2001
From: Nathan Ricciardi <nathan.ricciardi@gmail.com>
Date: Wed, 1 Jul 2020 14:51:11 -0700
Subject: [PATCH 03/15] npm install

---
 package-lock.json | 41 ++++++++++++++++++++++++++++++-----------
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a048fb7c2..d91f4ecdf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5637,7 +5637,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5655,11 +5656,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5672,15 +5675,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5783,7 +5789,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5793,6 +5800,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5805,17 +5813,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5832,6 +5843,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5904,7 +5916,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5914,6 +5927,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5989,7 +6003,8 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6019,6 +6034,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6036,6 +6052,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6074,11 +6091,13 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         }
       }
     },

From 4bd9c83c93938de64ecb7298a886f60de75a45c5 Mon Sep 17 00:00:00 2001
From: Nathan Ricciardi <nathan.ricciardi@gmail.com>
Date: Thu, 2 Jul 2020 12:19:17 -0700
Subject: [PATCH 04/15] Adds updates for error prevention

---
 package-lock.json                | 18 ++++++++----
 package.json                     |  1 +
 src/App/App.js                   | 50 ++++++++++++++++++++++----------
 src/CircleButton/CircleButton.js |  7 +++++
 src/Error/Error.js               | 23 +++++++++++++++
 src/Note/Note.js                 |  9 +++++-
 6 files changed, 87 insertions(+), 21 deletions(-)
 create mode 100644 src/Error/Error.js

diff --git a/package-lock.json b/package-lock.json
index d91f4ecdf..8fe365275 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11326,12 +11326,20 @@
       }
     },
     "prop-types": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
-      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
       "requires": {
-        "loose-envify": "^1.3.1",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
       }
     },
     "proxy-addr": {
diff --git a/package.json b/package.json
index 8ab0372eb..e57242095 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.6.0",
     "@fortawesome/react-fontawesome": "^0.1.3",
     "date-fns": "^1.30.1",
+    "prop-types": "^15.7.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-router-dom": "^4.3.1",
diff --git a/src/App/App.js b/src/App/App.js
index b0d11eecf..2bd7e560a 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -9,12 +9,14 @@ import AddFolder from '../AddFolder/AddFolder'
 import AddNote from '../AddNote/AddNote'
 import ApiContext from '../ApiContext'
 import config from '../config'
+import Error from '../Error/Error';
 import './App.css'
 
 class App extends Component {
   state = {
     notes: [],
     folders: [],
+    touch: false
   };
 
   componentDidMount() {
@@ -41,12 +43,27 @@ class App extends Component {
       })
   }
 
+  validateNote(){
+    const note = this.state.notes.value.trim();
+    if (note.length === 0){
+      return "Note is required";
+    }
+  }
+
+  validateFolder(){
+    const folder = this.state.folders.value.trim();
+    if (folder.length === 0){
+      return "Folder is required";
+    }
+  }
+
   handleAddFolder = folder => {
     this.setState({
       folders: [
         ...this.state.folders,
         folder
-      ]
+      ],
+      touch: true
     })
   }
 
@@ -55,7 +72,8 @@ class App extends Component {
       notes: [
         ...this.state.notes,
         note
-      ]
+      ],
+      touch: true
     })
   }
 
@@ -130,19 +148,21 @@ class App extends Component {
     return (
       <ApiContext.Provider value={value}>
         <div className='App'>
-          <nav className='App__nav'>
-            {this.renderNavRoutes()}
-          </nav>
-          <header className='App__header'>
-            <h1>
-              <Link to='/'>Noteful</Link>
-              {' '}
-              <FontAwesomeIcon icon='check-double' />
-            </h1>
-          </header>
-          <main className='App__main'>
-            {this.renderMainRoutes()}
-          </main>
+          <Error>
+            <nav className='App__nav'>
+              {this.renderNavRoutes()}
+            </nav>
+            <header className='App__header'>
+              <h1>
+                <Link to='/'>Noteful</Link>
+                {' '}
+                <FontAwesomeIcon icon='check-double' />
+              </h1>
+            </header>
+            <main className='App__main'>
+              {this.renderMainRoutes()}
+            </main>
+          </Error>
         </div>
       </ApiContext.Provider>
     )
diff --git a/src/CircleButton/CircleButton.js b/src/CircleButton/CircleButton.js
index 28f00cee6..a4ee951e0 100644
--- a/src/CircleButton/CircleButton.js
+++ b/src/CircleButton/CircleButton.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types';
 import './CircleButton.css'
 
 export default function NavCircleButton(props) {
@@ -17,3 +18,9 @@ export default function NavCircleButton(props) {
 NavCircleButton.defaultProps ={
   tag: 'a',
 }
+
+NavCircleButton.propTypes = {
+  tag: PropTypes.object.isRequired,
+  to: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,  
+}
diff --git a/src/Error/Error.js b/src/Error/Error.js
new file mode 100644
index 000000000..67e0b9f14
--- /dev/null
+++ b/src/Error/Error.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+export default class Error extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hasError: false
+        };
+    }
+
+    getDerivedStateFromError(error) {
+        return{ hasError: true };
+    }
+
+    render(){
+        if (this.state.hasError) {
+            return (
+                <h2>Could not display this without errors</h2>
+            )
+        }
+        return(this.props.children);
+    }
+}
\ No newline at end of file
diff --git a/src/Note/Note.js b/src/Note/Note.js
index 4e6687ed9..de6497d09 100644
--- a/src/Note/Note.js
+++ b/src/Note/Note.js
@@ -4,6 +4,7 @@ import { format } from 'date-fns'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import ApiContext from '../ApiContext'
 import config from '../config'
+import PropTypes from 'prop-types';
 import './Note.css'
 
 export default class Note extends React.Component {
@@ -66,5 +67,11 @@ export default class Note extends React.Component {
         </div>
       </div>
     )
-  }
+  }  
 }
+
+Note.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  modified: PropTypes.object.isRequired
+} 
\ No newline at end of file

From 64afed42c5c345a713cd237dd4497c0111306206 Mon Sep 17 00:00:00 2001
From: Nathan Ricciardi <nathan.ricciardi@gmail.com>
Date: Fri, 3 Jul 2020 12:02:36 -0700
Subject: [PATCH 05/15] Updated based on initial feedback

---
 src/AddFolder/AddFolder.js       | 48 ++++++++++++++++-------------
 src/AddNote/AddNote.js           | 52 ++++++++++++++++++--------------
 src/CircleButton/CircleButton.js |  5 ++-
 src/Error/Error.js               |  2 +-
 4 files changed, 59 insertions(+), 48 deletions(-)

diff --git a/src/AddFolder/AddFolder.js b/src/AddFolder/AddFolder.js
index 3c573b3eb..e52bb35fb 100644
--- a/src/AddFolder/AddFolder.js
+++ b/src/AddFolder/AddFolder.js
@@ -14,28 +14,34 @@ export default class AddFolder extends Component {
 
   handleSubmit = e => {
     e.preventDefault()
-    const folder = {
-      name: e.target['folder-name'].value
-    }
-    fetch(`${config.API_ENDPOINT}/folders`, {
-      method: 'POST',
-      headers: {
-        'content-type': 'application/json'
-      },
-      body: JSON.stringify(folder),
-    })
-      .then(res => {
-        if (!res.ok)
-          return res.json().then(e => Promise.reject(e))
-        return res.json()
-      })
-      .then(folder => {
-        this.context.addFolder(folder)
-        this.props.history.push(`/folder/${folder.id}`)
-      })
-      .catch(error => {
-        console.error({ error })
+    if (e.target['folder-name'].value === ""){
+      console.log("No folder :(");
+      return "Folder is required.";
+    } 
+    else {
+      const folder = {
+        name: e.target['folder-name'].value
+      }
+      fetch(`${config.API_ENDPOINT}/folders`, {
+        method: 'POST',
+        headers: {
+          'content-type': 'application/json'
+        },
+        body: JSON.stringify(folder),
       })
+        .then(res => {
+          if (!res.ok)
+            return res.json().then(e => Promise.reject(e))
+          return res.json()
+        })
+        .then(folder => {
+          this.context.addFolder(folder)
+          this.props.history.push(`/folder/${folder.id}`)
+        })
+        .catch(error => {
+          console.error({ error })
+        })
+    }    
   }
 
   render() {
diff --git a/src/AddNote/AddNote.js b/src/AddNote/AddNote.js
index b943b13d9..e08beb1b3 100644
--- a/src/AddNote/AddNote.js
+++ b/src/AddNote/AddNote.js
@@ -14,31 +14,37 @@ export default class AddNote extends Component {
 
   handleSubmit = e => {
     e.preventDefault()
-    const newNote = {
-      name: e.target['note-name'].value,
-      content: e.target['note-content'].value,
-      folderId: e.target['note-folder-id'].value,
-      modified: new Date(),
+    if( e.target['note-name'].value === "" || e.target['note-content'].value === "" || e.target['note-folder-id'].value === ""){
+      return "Note is required."
     }
-    fetch(`${config.API_ENDPOINT}/notes`, {
-      method: 'POST',
-      headers: {
-        'content-type': 'application/json'
-      },
-      body: JSON.stringify(newNote),
-    })
-      .then(res => {
-        if (!res.ok)
-          return res.json().then(e => Promise.reject(e))
-        return res.json()
-      })
-      .then(note => {
-        this.context.addNote(note)
-        this.props.history.push(`/folder/${note.folderId}`)
-      })
-      .catch(error => {
-        console.error({ error })
+    else {
+      const newNote = {
+        name: e.target['note-name'].value,
+        content: e.target['note-content'].value,
+        folderId: e.target['note-folder-id'].value,
+        modified: new Date(),
+      }
+      fetch(`${config.API_ENDPOINT}/notes`, {
+        method: 'POST',
+        headers: {
+          'content-type': 'application/json'
+        },
+        body: JSON.stringify(newNote),
       })
+        .then(res => {
+          if (!res.ok)
+            return res.json().then(e => Promise.reject(e))
+          return res.json()
+        })
+        .then(note => {
+          this.context.addNote(note)
+          this.props.history.push(`/folder/${note.folderId}`)
+        })
+        .catch(error => {
+          console.error({ error })
+        })
+    }
+    
   }
 
   render() {
diff --git a/src/CircleButton/CircleButton.js b/src/CircleButton/CircleButton.js
index a4ee951e0..c35b24bf6 100644
--- a/src/CircleButton/CircleButton.js
+++ b/src/CircleButton/CircleButton.js
@@ -20,7 +20,6 @@ NavCircleButton.defaultProps ={
 }
 
 NavCircleButton.propTypes = {
-  tag: PropTypes.object.isRequired,
-  to: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,  
+  to: PropTypes.string,
+  type: PropTypes.string  
 }
diff --git a/src/Error/Error.js b/src/Error/Error.js
index 67e0b9f14..8eb64c736 100644
--- a/src/Error/Error.js
+++ b/src/Error/Error.js
@@ -8,7 +8,7 @@ export default class Error extends Component {
         };
     }
 
-    getDerivedStateFromError(error) {
+    static getDerivedStateFromError(error) {
         return{ hasError: true };
     }
 

From 7b332fc0211d1cf9e868063f91a89a3f15cb650c Mon Sep 17 00:00:00 2001
From: Nathan Ricciardi <nathan.ricciardi@gmail.com>
Date: Mon, 6 Jul 2020 10:47:07 -0700
Subject: [PATCH 06/15] Adds error handling

---
 src/AddFolder/AddFolder.js | 43 +++++++++++++++++++-------------------
 src/AddNote/AddNote.js     |  4 +++-
 src/ApiContext.js          |  2 ++
 src/App/App.js             | 25 +++++++++-------------
 src/ErrorMessage.js        | 13 ++++++++++++
 5 files changed, 50 insertions(+), 37 deletions(-)
 create mode 100644 src/ErrorMessage.js

diff --git a/src/AddFolder/AddFolder.js b/src/AddFolder/AddFolder.js
index e52bb35fb..3fcf7c9e8 100644
--- a/src/AddFolder/AddFolder.js
+++ b/src/AddFolder/AddFolder.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import NotefulForm from '../NotefulForm/NotefulForm'
+import ErrorMessage from '../ErrorMessage'
 import ApiContext from '../ApiContext'
 import config from '../config'
 import './AddFolder.css'
@@ -14,14 +15,13 @@ export default class AddFolder extends Component {
 
   handleSubmit = e => {
     e.preventDefault()
-    if (e.target['folder-name'].value === ""){
-      console.log("No folder :(");
-      return "Folder is required.";
-    } 
+    const folder = {
+      name: e.target['folder-name'].value
+    }
+    if (folder.name === ""){
+      this.context.addErrorMessage("Folder name is required.")
+    }
     else {
-      const folder = {
-        name: e.target['folder-name'].value
-      }
       fetch(`${config.API_ENDPOINT}/folders`, {
         method: 'POST',
         headers: {
@@ -29,20 +29,20 @@ export default class AddFolder extends Component {
         },
         body: JSON.stringify(folder),
       })
-        .then(res => {
-          if (!res.ok)
-            return res.json().then(e => Promise.reject(e))
-          return res.json()
-        })
-        .then(folder => {
-          this.context.addFolder(folder)
-          this.props.history.push(`/folder/${folder.id}`)
-        })
-        .catch(error => {
-          console.error({ error })
-        })
-    }    
-  }
+      .then(res => {
+        if (!res.ok)
+          return res.json().then(e => Promise.reject(e))
+        return res.json()
+      })
+      .then(folder => {
+        this.context.addFolder(folder)
+        this.props.history.push(`/folder/${folder.id}`)
+      })
+      .catch(error => {
+        console.error({ error })
+      })       
+    }
+  }    
 
   render() {
     return (
@@ -55,6 +55,7 @@ export default class AddFolder extends Component {
             </label>
             <input type='text' id='folder-name-input' name='folder-name' />
           </div>
+          <ErrorMessage />
           <div className='buttons'>
             <button type='submit'>
               Add folder
diff --git a/src/AddNote/AddNote.js b/src/AddNote/AddNote.js
index e08beb1b3..e4eb4cb5d 100644
--- a/src/AddNote/AddNote.js
+++ b/src/AddNote/AddNote.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import NotefulForm from '../NotefulForm/NotefulForm'
+import ErrorMessage from '../ErrorMessage'
 import ApiContext from '../ApiContext'
 import config from '../config'
 import './AddNote.css'
@@ -15,7 +16,7 @@ export default class AddNote extends Component {
   handleSubmit = e => {
     e.preventDefault()
     if( e.target['note-name'].value === "" || e.target['note-content'].value === "" || e.target['note-folder-id'].value === ""){
-      return "Note is required."
+      this.context.addErrorMessage("All fields are required");
     }
     else {
       const newNote = {
@@ -78,6 +79,7 @@ export default class AddNote extends Component {
               )}
             </select>
           </div>
+          <ErrorMessage />
           <div className='buttons'>
             <button type='submit'>
               Add note
diff --git a/src/ApiContext.js b/src/ApiContext.js
index 399df903f..f4221a91f 100644
--- a/src/ApiContext.js
+++ b/src/ApiContext.js
@@ -3,7 +3,9 @@ import React from 'react'
 export default React.createContext({
   notes: [],
   folders: [],
+  errorMessage: "",
   addFolder: () => {},
   addNote: () => {},
   deleteNote: () => {},
+  addErrorMessage: () => {},
 })
diff --git a/src/App/App.js b/src/App/App.js
index edff0e426..f9db0fc53 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -16,7 +16,8 @@ class App extends Component {
   state = {
     notes: [],
     folders: [],
-    touch: false
+    touch: false,
+    errorMessage: "ERROR",
   };
 
   componentDidMount() {
@@ -43,20 +44,6 @@ class App extends Component {
       })
   }
 
-  validateNote(){
-    const note = this.state.notes.value.trim();
-    if (note.length === 0){
-      return "Note is required";
-    }
-  }
-
-  validateFolder(){
-    const folder = this.state.folders.value.trim();
-    if (folder.length === 0){
-      return "Folder is required";
-    }
-  }
-
   handleAddFolder = folder => {
     this.setState({
       folders: [
@@ -83,6 +70,12 @@ class App extends Component {
     })
   }
 
+  addErrorMessage = message => {
+    this.setState({
+      errorMessage : message,
+    })
+  }
+
   renderNavRoutes() {
     return (
       <>
@@ -141,9 +134,11 @@ class App extends Component {
     const value = {
       notes: this.state.notes,
       folders: this.state.folders,
+      errorMessage: this.state.errorMessage,
       addFolder: this.handleAddFolder,
       addNote: this.handleAddNote,
       deleteNote: this.handleDeleteNote,
+      addErrorMessage: this.addErrorMessage,
     }
     return (
       <ApiContext.Provider value={value}>
diff --git a/src/ErrorMessage.js b/src/ErrorMessage.js
new file mode 100644
index 000000000..0370f11cb
--- /dev/null
+++ b/src/ErrorMessage.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import ApiContext from './ApiContext';
+
+export default class ErrorMessage extends Component {
+    static contextType = ApiContext;
+    render(){
+        return(
+            <>
+                <span>{this.context.ErrorMessage}</span>
+            </>
+        )
+    }
+}
\ No newline at end of file

From 5a3d2a9985f9219a789c3388018dec130dd1aea3 Mon Sep 17 00:00:00 2001
From: Nathan Ricciardi <nathan.ricciardi@gmail.com>
Date: Mon, 6 Jul 2020 12:08:10 -0700
Subject: [PATCH 07/15] Fixes error handling messages

---
 src/AddFolder/AddFolder.js | 8 ++++++--
 src/AddNote/AddNote.js     | 7 +++++--
 src/ApiContext.js          | 2 --
 src/App/App.js             | 9 ---------
 src/ErrorMessage.js        | 4 +---
 5 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/AddFolder/AddFolder.js b/src/AddFolder/AddFolder.js
index 3fcf7c9e8..e24601a33 100644
--- a/src/AddFolder/AddFolder.js
+++ b/src/AddFolder/AddFolder.js
@@ -6,6 +6,10 @@ import config from '../config'
 import './AddFolder.css'
 
 export default class AddFolder extends Component {
+  state = {
+    errorMessage: "",
+  }
+
   static defaultProps = {
     history: {
       push: () => { }
@@ -19,7 +23,7 @@ export default class AddFolder extends Component {
       name: e.target['folder-name'].value
     }
     if (folder.name === ""){
-      this.context.addErrorMessage("Folder name is required.")
+      this.setState({errorMessage: "Folder name is required."});
     }
     else {
       fetch(`${config.API_ENDPOINT}/folders`, {
@@ -55,7 +59,7 @@ export default class AddFolder extends Component {
             </label>
             <input type='text' id='folder-name-input' name='folder-name' />
           </div>
-          <ErrorMessage />
+          <ErrorMessage errorMessage={this.state.errorMessage} />
           <div className='buttons'>
             <button type='submit'>
               Add folder
diff --git a/src/AddNote/AddNote.js b/src/AddNote/AddNote.js
index e4eb4cb5d..51a3b6ce0 100644
--- a/src/AddNote/AddNote.js
+++ b/src/AddNote/AddNote.js
@@ -6,6 +6,9 @@ import config from '../config'
 import './AddNote.css'
 
 export default class AddNote extends Component {
+  state = {
+    errorMessage: "",
+  }
   static defaultProps = {
     history: {
       push: () => { }
@@ -16,7 +19,7 @@ export default class AddNote extends Component {
   handleSubmit = e => {
     e.preventDefault()
     if( e.target['note-name'].value === "" || e.target['note-content'].value === "" || e.target['note-folder-id'].value === ""){
-      this.context.addErrorMessage("All fields are required");
+      this.setState({errorMessage: "All fields are required"});
     }
     else {
       const newNote = {
@@ -79,7 +82,7 @@ export default class AddNote extends Component {
               )}
             </select>
           </div>
-          <ErrorMessage />
+          <ErrorMessage errorMessage={this.state.errorMessage} />
           <div className='buttons'>
             <button type='submit'>
               Add note
diff --git a/src/ApiContext.js b/src/ApiContext.js
index f4221a91f..399df903f 100644
--- a/src/ApiContext.js
+++ b/src/ApiContext.js
@@ -3,9 +3,7 @@ import React from 'react'
 export default React.createContext({
   notes: [],
   folders: [],
-  errorMessage: "",
   addFolder: () => {},
   addNote: () => {},
   deleteNote: () => {},
-  addErrorMessage: () => {},
 })
diff --git a/src/App/App.js b/src/App/App.js
index f9db0fc53..285ef3209 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -17,7 +17,6 @@ class App extends Component {
     notes: [],
     folders: [],
     touch: false,
-    errorMessage: "ERROR",
   };
 
   componentDidMount() {
@@ -70,12 +69,6 @@ class App extends Component {
     })
   }
 
-  addErrorMessage = message => {
-    this.setState({
-      errorMessage : message,
-    })
-  }
-
   renderNavRoutes() {
     return (
       <>
@@ -134,11 +127,9 @@ class App extends Component {
     const value = {
       notes: this.state.notes,
       folders: this.state.folders,
-      errorMessage: this.state.errorMessage,
       addFolder: this.handleAddFolder,
       addNote: this.handleAddNote,
       deleteNote: this.handleDeleteNote,
-      addErrorMessage: this.addErrorMessage,
     }
     return (
       <ApiContext.Provider value={value}>
diff --git a/src/ErrorMessage.js b/src/ErrorMessage.js
index 0370f11cb..0323909ef 100644
--- a/src/ErrorMessage.js
+++ b/src/ErrorMessage.js
@@ -1,12 +1,10 @@
 import React, { Component } from 'react';
-import ApiContext from './ApiContext';
 
 export default class ErrorMessage extends Component {
-    static contextType = ApiContext;
     render(){
         return(
             <>
-                <span>{this.context.ErrorMessage}</span>
+                <span>{this.props.errorMessage}</span>
             </>
         )
     }

From cfe9743875f87ed298fb2043c8c129a2b53c8e2c Mon Sep 17 00:00:00 2001
From: Nathan Ricciardi <nathan.ricciardi@gmail.com>
Date: Mon, 6 Jul 2020 12:13:29 -0700
Subject: [PATCH 08/15] Fixes PropType error

---
 src/Note/Note.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Note/Note.js b/src/Note/Note.js
index de6497d09..3288a961e 100644
--- a/src/Note/Note.js
+++ b/src/Note/Note.js
@@ -73,5 +73,5 @@ export default class Note extends React.Component {
 Note.propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  modified: PropTypes.object.isRequired
+  modified: PropTypes.string.isRequired
 } 
\ No newline at end of file

From a49504cddfabd52d0aafa63cfd830eb08f0a0cc7 Mon Sep 17 00:00:00 2001
From: Nathan Ricciardi <nathan.ricciardi@gmail.com>
Date: Tue, 7 Jul 2020 11:34:41 -0700
Subject: [PATCH 09/15] Fixes error handling when adding notes

---
 src/AddNote/AddNote.js | 2 +-
 src/Note/Note.js       | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/AddNote/AddNote.js b/src/AddNote/AddNote.js
index 51a3b6ce0..16a5de003 100644
--- a/src/AddNote/AddNote.js
+++ b/src/AddNote/AddNote.js
@@ -18,7 +18,7 @@ export default class AddNote extends Component {
 
   handleSubmit = e => {
     e.preventDefault()
-    if( e.target['note-name'].value === "" || e.target['note-content'].value === "" || e.target['note-folder-id'].value === ""){
+    if( e.target['note-name'].value === "" || e.target['note-content'].value === "" || e.target['note-folder-id'].value === "..."){
       this.setState({errorMessage: "All fields are required"});
     }
     else {
diff --git a/src/Note/Note.js b/src/Note/Note.js
index 3288a961e..d79bf1841 100644
--- a/src/Note/Note.js
+++ b/src/Note/Note.js
@@ -71,7 +71,7 @@ export default class Note extends React.Component {
 }
 
 Note.propTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  modified: PropTypes.string.isRequired
+  id: PropTypes.string,
+  name: PropTypes.string,
+  modified: PropTypes.string
 } 
\ No newline at end of file

From a30d1ee5b24b814f0cc9c68a436b3c81e7e738de Mon Sep 17 00:00:00 2001
From: Nathan Ricciardi <nathan.ricciardi@gmail.com>
Date: Thu, 9 Jul 2020 12:21:07 -0700
Subject: [PATCH 10/15] Fixes additional errors

---
 src/App/App.js      | 2 +-
 src/ErrorMessage.js | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/App/App.js b/src/App/App.js
index 285ef3209..19764b5b1 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -9,7 +9,7 @@ import AddFolder from '../AddFolder/AddFolder'
 import AddNote from '../AddNote/AddNote'
 import ApiContext from '../ApiContext'
 import config from '../config'
-import Error from '../Error/Error';
+import Error from '../Error/Error'
 import './App.css'
 
 class App extends Component {
diff --git a/src/ErrorMessage.js b/src/ErrorMessage.js
index 0323909ef..c601e9f33 100644
--- a/src/ErrorMessage.js
+++ b/src/ErrorMessage.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export default class ErrorMessage extends Component {
     render(){
@@ -8,4 +9,8 @@ export default class ErrorMessage extends Component {
             </>
         )
     }
+}
+
+ErrorMessage.propTypes = {
+    message: PropTypes.string,
 }
\ No newline at end of file

From 12457da8f49a4fc793979553fb7367bcb12197ff Mon Sep 17 00:00:00 2001
From: Nathan Ricciardi <nathan.ricciardi@gmail.com>
Date: Fri, 10 Jul 2020 10:35:43 -0700
Subject: [PATCH 11/15] More proptype changes

---
 src/CircleButton/CircleButton.js | 3 ++-
 src/Note/Note.js                 | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/CircleButton/CircleButton.js b/src/CircleButton/CircleButton.js
index c35b24bf6..8337bc102 100644
--- a/src/CircleButton/CircleButton.js
+++ b/src/CircleButton/CircleButton.js
@@ -21,5 +21,6 @@ NavCircleButton.defaultProps ={
 
 NavCircleButton.propTypes = {
   to: PropTypes.string,
-  type: PropTypes.string  
+  type: PropTypes.string,  
+  className: PropTypes.string.isRequired,
 }
diff --git a/src/Note/Note.js b/src/Note/Note.js
index d79bf1841..7ea988642 100644
--- a/src/Note/Note.js
+++ b/src/Note/Note.js
@@ -71,7 +71,7 @@ export default class Note extends React.Component {
 }
 
 Note.propTypes = {
-  id: PropTypes.string,
-  name: PropTypes.string,
-  modified: PropTypes.string
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  modified: PropTypes.string.isRequired,
 } 
\ No newline at end of file

From d3a861c145b0e406c56d9bf0250a6aadbc0e03d7 Mon Sep 17 00:00:00 2001
From: Nathan Ricciardi <nathan.ricciardi@gmail.com>
Date: Fri, 10 Jul 2020 17:19:59 -0700
Subject: [PATCH 12/15] Proptype errors fixed

---
 src/NotePageMain/NotePageMain.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/NotePageMain/NotePageMain.js b/src/NotePageMain/NotePageMain.js
index c634e80ef..bb512f377 100644
--- a/src/NotePageMain/NotePageMain.js
+++ b/src/NotePageMain/NotePageMain.js
@@ -20,6 +20,9 @@ export default class NotePageMain extends React.Component {
     const { notes=[] } = this.context
     const { noteId } = this.props.match.params
     const note = findNote(notes, noteId) || { content: '' }
+    if (note.id === undefined) {
+      return null
+    }
     return (
       <section className='NotePageMain'>
         <Note

From 3a0cb91411d62d8c11d062db1cb40d05dfd82a20 Mon Sep 17 00:00:00 2001
From: Nathan Ricciardi <nathan.ricciardi@gmail.com>
Date: Wed, 4 Nov 2020 13:06:46 -0700
Subject: [PATCH 13/15] adjustments to function with api

---
 src/AddFolder/AddFolder.js       |  2 +-
 src/AddNote/AddNote.js           | 12 +++++++-----
 src/Note/Note.js                 |  4 ++--
 src/NoteListMain/NoteListMain.js |  4 ++--
 src/NoteListNav/NoteListNav.js   |  2 +-
 src/NotePageMain/NotePageMain.js | 11 +++++++----
 src/config.js                    |  2 +-
 src/notes-helpers.js             |  4 ++--
 8 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/AddFolder/AddFolder.js b/src/AddFolder/AddFolder.js
index e24601a33..e44170fc4 100644
--- a/src/AddFolder/AddFolder.js
+++ b/src/AddFolder/AddFolder.js
@@ -20,7 +20,7 @@ export default class AddFolder extends Component {
   handleSubmit = e => {
     e.preventDefault()
     const folder = {
-      name: e.target['folder-name'].value
+      folder_name: e.target['folder-name'].value
     }
     if (folder.name === ""){
       this.setState({errorMessage: "Folder name is required."});
diff --git a/src/AddNote/AddNote.js b/src/AddNote/AddNote.js
index 16a5de003..a5f1e3a91 100644
--- a/src/AddNote/AddNote.js
+++ b/src/AddNote/AddNote.js
@@ -23,11 +23,12 @@ export default class AddNote extends Component {
     }
     else {
       const newNote = {
-        name: e.target['note-name'].value,
-        content: e.target['note-content'].value,
-        folderId: e.target['note-folder-id'].value,
-        modified: new Date(),
+        note_name: e.target['note-name'].value,
+        note_content: e.target['note-content'].value,
+        folder_id: e.target['note-folder-id'].value,
+        date_modified: new Date(),
       }
+      console.log(newNote);
       fetch(`${config.API_ENDPOINT}/notes`, {
         method: 'POST',
         headers: {
@@ -53,6 +54,7 @@ export default class AddNote extends Component {
 
   render() {
     const { folders=[] } = this.context
+    console.log(folders)
     return (
       <section className='AddNote'>
         <h2>Create a note</h2>
@@ -77,7 +79,7 @@ export default class AddNote extends Component {
               <option value={null}>...</option>
               {folders.map(folder =>
                 <option key={folder.id} value={folder.id}>
-                  {folder.name}
+                  {folder.folder_name}
                 </option>
               )}
             </select>
diff --git a/src/Note/Note.js b/src/Note/Note.js
index 7ea988642..4577b190e 100644
--- a/src/Note/Note.js
+++ b/src/Note/Note.js
@@ -26,7 +26,7 @@ export default class Note extends React.Component {
       .then(res => {
         if (!res.ok)
           return res.json().then(e => Promise.reject(e))
-        return res.json()
+        return res
       })
       .then(() => {
         this.context.deleteNote(noteId)
@@ -71,7 +71,7 @@ export default class Note extends React.Component {
 }
 
 Note.propTypes = {
-  id: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   modified: PropTypes.string.isRequired,
 } 
\ No newline at end of file
diff --git a/src/NoteListMain/NoteListMain.js b/src/NoteListMain/NoteListMain.js
index f20111dde..1421a7d20 100644
--- a/src/NoteListMain/NoteListMain.js
+++ b/src/NoteListMain/NoteListMain.js
@@ -26,8 +26,8 @@ export default class NoteListMain extends React.Component {
             <li key={note.id}>
               <Note
                 id={note.id}
-                name={note.name}
-                modified={note.modified}
+                name={note.note_name}
+                modified={note.date_modified}
               />
             </li>
           )}
diff --git a/src/NoteListNav/NoteListNav.js b/src/NoteListNav/NoteListNav.js
index ca44c187b..5f330041a 100644
--- a/src/NoteListNav/NoteListNav.js
+++ b/src/NoteListNav/NoteListNav.js
@@ -23,7 +23,7 @@ export default class NoteListNav extends React.Component {
                 <span className='NoteListNav__num-notes'>
                   {countNotesForFolder(notes, folder.id)}
                 </span>
-                {folder.name}
+                {folder.folder_name}
               </NavLink>
             </li>
           )}
diff --git a/src/NotePageMain/NotePageMain.js b/src/NotePageMain/NotePageMain.js
index bb512f377..1ba7d494c 100644
--- a/src/NotePageMain/NotePageMain.js
+++ b/src/NotePageMain/NotePageMain.js
@@ -19,7 +19,10 @@ export default class NotePageMain extends React.Component {
   render() {
     const { notes=[] } = this.context
     const { noteId } = this.props.match.params
-    const note = findNote(notes, noteId) || { content: '' }
+    const note = findNote(notes, Number(noteId)) || { content: '' }
+    console.log(notes);
+    console.log(noteId);
+    console.log(note);
     if (note.id === undefined) {
       return null
     }
@@ -27,12 +30,12 @@ export default class NotePageMain extends React.Component {
       <section className='NotePageMain'>
         <Note
           id={note.id}
-          name={note.name}
-          modified={note.modified}
+          name={note.note_name}
+          modified={note.date_modified}
           onDeleteNote={this.handleDeleteNote}
         />
         <div className='NotePageMain__content'>
-          {note.content.split(/\n \r|\n/).map((para, i) =>
+          {note.note_content.split(/\n \r|\n/).map((para, i) =>
             <p key={i}>{para}</p>
           )}
         </div>
diff --git a/src/config.js b/src/config.js
index 6bbc0a508..28350bddb 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,3 +1,3 @@
 export default {
-  API_ENDPOINT: 'http://localhost:9090'
+  API_ENDPOINT: 'http://localhost:8000/api'
 }
diff --git a/src/notes-helpers.js b/src/notes-helpers.js
index 8b5d83e8a..f22b3c31a 100644
--- a/src/notes-helpers.js
+++ b/src/notes-helpers.js
@@ -8,8 +8,8 @@ export const findNote = (notes=[], noteId) =>
 export const getNotesForFolder = (notes=[], folderId) => (
   (!folderId)
     ? notes
-    : notes.filter(note => note.folderId === folderId)
+    : notes.filter(note => note.folder_id === Number(folderId))
 )
 
 export const countNotesForFolder = (notes=[], folderId) =>
-  notes.filter(note => note.folderId === folderId).length
+  notes.filter(note => note.folder_id === Number(folderId)).length

From 81e7c221ede9e08b542aabb4f36677fd5a4ce544 Mon Sep 17 00:00:00 2001
From: Nathan Ricciardi <nathan.ricciardi@gmail.com>
Date: Wed, 4 Nov 2020 13:37:59 -0700
Subject: [PATCH 14/15] alter API endpoint

---
 src/config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config.js b/src/config.js
index 28350bddb..0ac2bcc55 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,3 +1,3 @@
 export default {
-  API_ENDPOINT: 'http://localhost:8000/api'
+  API_ENDPOINT: 'https://shrouded-taiga-51280.herokuapp.com/api'
 }

From d16ede4d278c363d324854b3396b02ee9cedc833 Mon Sep 17 00:00:00 2001
From: Nathan Ricciardi <nathan.ricciardi@gmail.com>
Date: Thu, 12 Nov 2020 08:31:51 -0700
Subject: [PATCH 15/15] Updates add note return functionality

---
 src/AddNote/AddNote.js           | 2 +-
 src/NotePageMain/NotePageMain.js | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/AddNote/AddNote.js b/src/AddNote/AddNote.js
index a5f1e3a91..d7f50efd2 100644
--- a/src/AddNote/AddNote.js
+++ b/src/AddNote/AddNote.js
@@ -43,7 +43,7 @@ export default class AddNote extends Component {
         })
         .then(note => {
           this.context.addNote(note)
-          this.props.history.push(`/folder/${note.folderId}`)
+          this.props.history.push(`/note/${note.id}`)
         })
         .catch(error => {
           console.error({ error })
diff --git a/src/NotePageMain/NotePageMain.js b/src/NotePageMain/NotePageMain.js
index 1ba7d494c..b19db69bd 100644
--- a/src/NotePageMain/NotePageMain.js
+++ b/src/NotePageMain/NotePageMain.js
@@ -20,9 +20,6 @@ export default class NotePageMain extends React.Component {
     const { notes=[] } = this.context
     const { noteId } = this.props.match.params
     const note = findNote(notes, Number(noteId)) || { content: '' }
-    console.log(notes);
-    console.log(noteId);
-    console.log(note);
     if (note.id === undefined) {
       return null
     }