Renos solution news-site-VI

src/App.js

@@ -7,19 +7,39 @@ import LoginPage from './pages/LoginPage.js';
 import AddArticlePage from './pages/AddArticlePage.js';
 import ArticlePage from './pages/ArticlePage.js';
 import SectionPage from './pages/SectionPage.js';
+import UserContext from './contexts/UserContext.js';
 
 class App extends Component {
+
+  state = {
+    user: null
+  }
+
+  handleLogin = (user) => {
+    this.setState({
+      user: user
+    })
+  }
+
+  renderLoginPage = (routeProps) => {
+    return(
+      <LoginPage handleLogin={this.handleLogin} {...routeProps}/>
+    )
+  }
+
   render() {
     return (
       <div>
         <Router>
           <div>
-            <AppNav />
-            <Route exact path="/" component={HomePage} />
-            <Route exact path="/login" component={LoginPage} />
-            <Route exact path="/add-article" component={AddArticlePage} />
-            <Route exact path="/articles/:articleID" component={ArticlePage} />
-            <Route exact path="/sections/:sectionID" component={SectionPage} />
+            <UserContext.Provider value={{user: this.state.user}}>
+              <AppNav />
+              <Route exact path="/" component={HomePage} />
+              <Route exact path="/login" render={this.renderLoginPage}/>
+              <Route exact path="/add-article" component={AddArticlePage} />
+              <Route exact path="/articles/:articleID" component={ArticlePage} />
+              <Route exact path="/sections/:sectionID" component={SectionPage} />
+            </UserContext.Provider>
           </div>
         </Router>
       </div>

src/api/ArticlesAPI.js

@@ -25,10 +25,11 @@ const searchArticles = async (textToSearchFor) => {
   return data;
 };
 
-const addArticle = (articleObject) => {
+const addArticle = (articleObject, token) => {
   return fetch(BASE_URL, {
     headers: {
-      'Content-Type': 'application/json'
+      'Content-Type': 'application/json',
+      'Authorization': token
     },
     method: "POST",
     body: JSON.stringify(articleObject)

src/api/UsersAPI.js

@@ -1,6 +1,20 @@
+
+const BASE_URL = "http://localhost:3001/api/users/login?include=user";
+
 const login = (credentialsObject) => {
+  console.log(credentialsObject)
+  return fetch(BASE_URL, {
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    method: "POST",
+    body: JSON.stringify(credentialsObject)
+  })
+  .then(data => data.json())
+  .then(data => data.id)
+
 }
 
 export default {
-  login: login
+  login
 }

src/components/AppNav/AppNav.js

@@ -3,10 +3,13 @@ import { Link } from 'react-router-dom';
 import { Navbar, NavItem } from 'reactstrap';
 import navItems from '../../config/Sections.json';
 
+
 class AppNav extends Component {
   render() {
     return (
       <Navbar color="light">
+        <Link to="/">HOME</Link>
+        <Link to="/login">LOGIN</Link>
         {navItems.map((navItem) =>
           <NavItem>
             <Link to={`/sections/${navItem.value}`} >

src/contexts/UserContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+const UserContext = createContext({
+  user: null, // default user value will be null
+  setUser: () => {}, // for now, we'll simply create an empty setUser function
+});
+
+export default UserContext;

src/pages/AddArticlePage.js

@@ -2,6 +2,11 @@ import React, { Component } from 'react';
 import { addArticle } from '../api/ArticlesAPI';
 import { Redirect } from 'react-router-dom';
 import { Button, Form, FormGroup, Input, Label } from 'reactstrap'
+import UserContext from '../contexts/UserContext';
+
+
+
+// in the render()
 
 class AddArticlePage extends Component {
   state = {
@@ -10,14 +15,15 @@ class AddArticlePage extends Component {
 
   handleFormSubmit = async (event) => {
     event.preventDefault();
+    let token = user.user.id
     const articleObject = {
       title: event.target.elements[0].value,
       byline: event.target.elements[1].value,
       abstract: event.target.elements[2].value
     }
 
     try {
-      const response = await addArticle(articleObject);
+      const response = await addArticle(articleObject, token);
       if (response.status === 200) {
         // redirect the user back to Home Page upon successful POST
         this.setState({ redirect: true });
@@ -57,6 +63,7 @@ class AddArticlePage extends Component {
     )
   }
 }
+AddArticlePage.contextType = UserContext
 
 export default AddArticlePage;
 

src/pages/LoginPage.js

@@ -1,14 +1,24 @@
 import React, { Component } from 'react';
 import { Button, Form, FormGroup, Input, Label } from 'reactstrap';
+import UserAPI from '../api/UsersAPI'
 
 class LoginPage extends Component {
 
-  handleFormSubmit = (event) => {
+
+  handleFormSubmit = async (event) => {
     event.preventDefault();
-    console.log(event.target.elements[0].value);
-    console.log(event.target.elements[1].value);
-  };
 
+    console.log('EMAIL:', event.target.email.value)
+    console.log('PASSWORD:', event.target.password.value)
+
+    let userObj = {
+      email: event.target.email.value,
+      password: event.target.password.value
+    }
+    let response = await UserAPI.login(userObj)
+    this.props.handleLogin(response)
+    return this.props.history.push('/')
+  };
   render() {
     return (
       <div style={{padding: '20px'}}>
@@ -25,8 +35,7 @@ class LoginPage extends Component {
           <Button>Submit</Button>
         </Form>
       </div>
-    )
-  }
+    )}
 }
 
 export default LoginPage;