organizing react code checkpoint

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.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import config from '../config';
+import PropTypes from 'prop-types';
+
+
+
+class AddFolder extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+          name: {
+            value: '',
+            touched: false
+          }
+        }
+    } 
+
+    updateName(name) {
+        this.setState({name: {value: name, touched: true}});
+    }
+
+    handleSubmit(event) {
+        event.preventDefault();
+        const {name} = this.state;
+
+        console.log(name);
+        let options = {
+            method: 'POST', 
+            body: JSON.stringify({name: name.value }),
+            headers: { 'Content-Type': 'application/json'}
+        }
+        fetch(`${config.API_ENDPOINT}/folders`, options) 
+    }
+
+    // have a callback request that comes from App. this.props.addfolder 
+    // this set state adds to list of folder push name onto folder array.
+
+    validateName() {
+        const name = this.state.name.value.trim();
+        if (name.length === 0) {
+          return "Name is required";
+        } else if (name.length < 3) {
+          return "Name must be at least 3 characters long";
+        }
+    }
+
+    render() {
+        const nameError = this.validateName();
+
+        return (
+            <form className="registration" onSubmit={e => this.handleSubmit(e)}>
+                <h2>Add Folder</h2>
+                <div className="addfolder__hint">* required field</div>  
+                <div className="form-group">
+                <label htmlFor="name">Name *</label>
+                <input type="text" className="name__control"
+                    name="name" id="name" onChange={e => this.updateName(e.target.value)}/>
+                {this.state.name.touched}
+                </div>
+
+                <div className="addfolder__button__group">
+                <button type="reset" className="addfolder__button">
+                    Cancel
+                </button>
+                <button type="submit" className="addfolder__button">
+                    Save
+                </button>
+                </div>
+            </form>
+        )
+    }
+}
+
+AddFolder.propTypes = {
+    name: PropTypes.string,
+    value: PropTypes.string,
+    touched: PropTypes.boolean
+};
+
+export default AddFolder;

src/AddNote/AddNote.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ValidationError from '../AddNote/ValidationError';
+import { runInNewContext } from 'vm';
+import config from '../config';
+import NoteError from '../NoteError';
+import PropTypes from 'prop-types'
+
+class AddNote extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+          name: {
+            value: '',
+            touched: false
+          }
+        }
+    } 
+
+    updateName(name) {
+        this.setState({name: {value: name, touched: true}});
+    }
+
+    handleSubmit(event) {
+        event.preventDefault();
+        const {name} = this.state;
+
+        console.log(name);
+        let options = {
+            method: 'POST', 
+            body: JSON.stringify({name: name.value }),
+            headers: { 'Content-Type': 'application/json'}
+        }
+        fetch(`${config.API_ENDPOINT}/notes`, options) 
+    }
+
+    validateName() {
+        const name = this.state.name.value.trim();
+        if (name.length === 0) {
+          return "Name is required";
+        } else if (name.length < 3) {
+          return "Name must be at least 3 characters long";
+        }
+      }
+
+    render() {
+        const nameError = this.validateName();
+
+        return (
+            <form className="addnote" onSubmit={e => this.handleSubmit(e)}>
+                <h2>Add Note</h2>
+                <div className="addnote__hint">* required field</div>  
+                <div className="form-group">
+                <label htmlFor="name">Name *</label>
+                <input type="text" className="name__control"
+                    name="name" id="name" onChange={e => this.updateName(e.target.value)}/>
+                {this.state.name.touched && <ValidationError message={nameError} />}
+                </div>
+
+                <div className="addfolder__button__group">
+                <button 
+                    type="reset" 
+                    className="addnote__button">
+                    Cancel
+                </button>
+                <NoteError>
+                    <button 
+                        type="submit" 
+                        className="addnote__button"
+                        disabled={this.validateName()}>
+                        Save
+                    </button>
+                </NoteError>
+                </div>
+            </form>
+        )
+    }
+}
+
+AddNote.propTypes = {
+    name: PropTypes.string,
+    value: PropTypes.string,
+    touched: PropTypes.boolean
+};
+
+export default AddNote;

src/AddNote/ValidationError.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function ValidationError(props) {
+  if(props.message) {
+    return (
+      <div className="error">{props.message}</div>
+    );
+  }
+
+  return <></>
+}