Shawn and Sarah news-site-V solution

src/App.js

@@ -5,6 +5,8 @@ import AppNav from './components/AppNav/AppNav.js';
 import HomePage from './pages/HomePage.js';
 import ArticlePage from './pages/ArticlePage.js';
 import SectionPage from './pages/SectionPage.js';
+import AddArticlePage from './pages/AddArticlePage';
+import LoginPage from './pages/LoginPage';
 
 class App extends Component {
   render() {
@@ -16,6 +18,8 @@ class App extends Component {
             <Route exact path="/" component={HomePage} />
             <Route exact path="/articles/:articleID" component={ArticlePage} />
             <Route exact path="/sections/:sectionID" component={SectionPage} />
+            <Route exact path="/add-article" component={AddArticlePage} />
+            <Route exact path="/login" component={LoginPage} />
           </div>
         </Router>
       </div>

src/api/ArticlesAPI.js

@@ -25,9 +25,35 @@ const searchArticles = async (textToSearchFor) => {
   return data;
 }
 
+const addArticle = async (articleObject) => {
+  try {
+    let response = await fetch(BASE_URL, {
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      method: "POST",
+      body: JSON.stringify(articleObject)
+    })
+    let data = await response.json();
+
+    if (data.error) {
+      return {'message': "You done goofed. Try again."}
+    }
+    else {
+      return {"message": "You good, carry on."}
+    }
+  }
+
+  catch (e) {
+    console.error(e)
+  }
+
+}
+
 export {
   fetchArticleByID,
   fetchArticles,
   fetchArticlesBySection,
   searchArticles,
+  addArticle,
 };

src/components/AppNav/AppNav.js

@@ -6,13 +6,17 @@ import navItems from '../../config/Sections.json';
 class AppNav extends Component {
   render() {
     return (
-      <Navbar color="light">
-        {navItems.map((navItem) =>
-          <Link to={`/sections/${navItem.value}`} >
-            { navItem.label }
-          </Link>
-        )}
-      </Navbar>
+      <div>
+        <Navbar color="light">
+          {navItems.map((navItem) =>
+            <Link to={`/sections/${navItem.value}`} >
+              { navItem.label }
+            </Link>
+          )}
+          <Link to={`/add-article`} >Add an Article</Link>
+          <Link to={`/login`} >Login</Link>
+        </Navbar>
+      </div>
     )
   }
 }

src/pages/AddArticlePage.js

@@ -0,0 +1,47 @@
+import React, {useState} from 'react';
+import { Form, FormGroup, Label, Input, Button } from "reactstrap"
+import { addArticle } from '../api/ArticlesAPI';
+
+const AddArticlePage = () => {
+  const [articleMsg, addArticleMsg] = useState(undefined)
+
+  const handleFormSubmit = async (evt) => {
+    evt.preventDefault();
+    const articleObject = {
+     "title" : evt.target.title.value,
+     "byline" : evt.target.byline.value,
+     "abstract": evt.target.abstract.value, 
+    }
+    addArticle(articleObject)
+      .then(response => {
+        addArticleMsg(response.message);
+        console.log(response);
+      })
+  }
+
+  return (
+    <div>
+    <h1>Add an Article</h1>  
+    { articleMsg != "You good, carry on." ?
+      <Form onSubmit={handleFormSubmit}>
+        <FormGroup>
+          <Label for="Title">Title</Label>
+          <Input type="text" name="title" id="article-title" placeholder="Enter Title" required/>
+        </FormGroup>
+          <FormGroup>
+          <Label for="byline">Byline</Label>
+          <Input type="text" name="byline" id="article-byline" placeholder="Enter byline" required />
+        </FormGroup>
+        <FormGroup>
+          <Label for="Abstract">Abstract</Label>
+         <Input type="textarea" name="abstract" id="article-abstract" required/>
+        </FormGroup>
+        <Button>Submit</Button>
+      </Form>
+      : <h1>Victory! You are now a published journalist!</h1>
+    }
+    </div>
+  );
+};
+
+export default AddArticlePage;

src/pages/LoginPage.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Form, FormGroup, Label, Input, Button } from 'reactstrap';
+
+const LoginPage = () => {
+  return (
+    <div>
+      <Form>
+        <FormGroup>
+          <Label for="Email">Email</Label>
+          <Input type="email" name="email" id="Email" placeholder="Enter your email" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="Password">Password</Label>
+          <Input type="password" name="password" id="Password" placeholder="Enter your password" />
+        </FormGroup>
+        <Button>Submit</Button>
+      </Form>
+    </div>
+  );
+};
+
+export default LoginPage;