adding JS to submit note

Author: WordsofDefiance

src/components/add-note/AddNote.component.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
+import { Link, Redirect } from 'react-router-dom'
 import { StatusBox } from '../status-box/status-box.component'
 import './add-note.styles.css'
+import { Button } from '../button/Button.component'
 
 
 export class AddNote extends React.Component {
@@ -33,6 +34,27 @@ export class AddNote extends React.Component {
             this.setState({status: 'You must fill out both title and body.'})
         } else {
             this.setState({status: ''})
+            fetch("/api/add_note", {
+                method: "post",
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+
+                //make sure to serialize your JSON body
+                body: JSON.stringify({
+                    title: this.state.title,
+                    body: this.state.body
+                })
+            })
+            .then( (response) => { 
+                //do something awesome that makes the world a better place
+                console.log(response)
+                this.setState({status: 'Note Saved Successfully! Returning to home page.'})
+                setTimeout( () => {                       
+                    window.location.href = '/'
+                }, 500)
+            });
         }
     }
 
@@ -43,25 +65,11 @@ export class AddNote extends React.Component {
             <form id="add-note" onSubmit={this.handleSubmit}>
                 <input id="title" value={this.state.title} type='text' placeholder='Enter a Title' onChange={this.handleTitleChange}></input>
                 <textarea onChange={this.handleBodyChange} id="body" placeholder='Enter the note'></textarea>
-                <button type="submit">ADDING NOTES COMING SOON!</button>
+                <Button type="submit">Add Note</Button>
             </form>
             <StatusBox status={this.state.status}></StatusBox>
-            {/* <div className="status-box">{this.state.status}</div> */}
             <Link to='/'>Go Back</Link>
             </>
         )
     }
-}
-// export const AddNote = () => {
-//     return (
-//         <> //         <h1>Add Note (To Do)</h1>
-//         <form id="add-note" action='/'>
-//             <input id="title" type='text' placeholder='Enter a Title'></input>
-//             <textarea id="body" placeholder='Enter the note'></textarea>
-//             <button onClick={e => e.preventDefault()} type="submit">ADDING NOTES COMING SOON!</button>
-//         </form>
-//         <Link to='/'>Go Back</Link>
-//         </>
-//     )
-
-// }
+}