Master

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",

src/AddFolder/AddFolder.css

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

src/AddFolder/AddFolder.js

@@ -0,0 +1,72 @@
+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'
+
+export default class AddFolder extends Component {
+  state = {
+    errorMessage: "",
+  }
+
+  static defaultProps = {
+    history: {
+      push: () => { }
+    },
+  }
+  static contextType = ApiContext;
+
+  handleSubmit = e => {
+    e.preventDefault()
+    const folder = {
+      folder_name: e.target['folder-name'].value
+    }
+    if (folder.name === ""){
+      this.setState({errorMessage: "Folder name is required."});
+    }
+    else {
+      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 onSubmit={this.handleSubmit}>
+          <div className='field'>
+            <label htmlFor='folder-name-input'>
+              Name
+            </label>
+            <input type='text' id='folder-name-input' name='folder-name' />
+          </div>
+          <ErrorMessage errorMessage={this.state.errorMessage} />
+          <div className='buttons'>
+            <button type='submit'>
+              Add folder
+            </button>
+          </div>
+        </NotefulForm>
+      </section>
+    )
+  }
+}

src/AddFolder/AddFolder.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { shallow } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import AddFolder from './AddFolder'
+
+describe(`AddItemForm component`, () => {
+  it('renders the complete form', () => {
+    const wrapper = shallow(<AddFolder />)
+    expect(toJson(wrapper)).toMatchSnapshot()
+  })
+})

src/AddFolder/__snapshots__/AddFolder.test.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddItemForm component renders the complete form 1`] = `
+<section
+  className="AddFolder"
+>
+  <h2>
+    Create a folder
+  </h2>
+  <NotefulForm>
+    <div
+      className="field"
+    >
+      <label
+        htmlFor="folder-name-input"
+      >
+        Name
+      </label>
+      <input
+        id="folder-name-input"
+        type="text"
+      />
+    </div>
+    <div
+      className="buttons"
+    >
+      <button
+        type="submit"
+      >
+        Add folder
+      </button>
+    </div>
+  </NotefulForm>
+</section>
+`;

src/AddNote/AddNote.css

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