login

friends/src/App.js

@@ -1,17 +1,35 @@
 import React from 'react';
 import './App.css';
-import { BrowserRouter as Router, Route} from 'react-router-dom';
+import { BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';
+import PrivateRoute from './components/PrivateRoute';
+import Login from './components/login';
+import Logout from './components/logout';
+import Friends from './components/friends';
 
 
-const Login = ()=> {
-  return (<h2>Login</h2>)
-}
-
 function App() {
   return (
+    <Router>
     <div className="App">
       <h2>Client Auth Project</h2>
+      <ul>
+          <li>
+            <Link to="/login">Login</Link>
+          </li>
+          <li>
+            <Link to="/logout">Logout</Link>
+          </li>
+          <li>
+            <Link to='/friends'>Friends</Link>
+          </li>
+        </ul>
+        <Switch>
+          <PrivateRoute exact path= '/friends' component={Friends} />
+          <Route path='/login' component={Login} />
+          <Route path='/logout' component={Logout} />
+        </Switch>
     </div>
+    </Router>
   );
 }
 

friends/src/components/PrivateRoute.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+
+const PrivateRoute = ({component:Component, ...rest}) => {
+    return <Route {...rest} render={(props)=> {
+        if (localStorage.getItem("token")) {
+            return <Component {...props}/>
+        } else {
+            return <Redirect to="/login"/>
+        }
+    }}/>
+}
+
+export default PrivateRoute;

friends/src/components/addFriend.js

@@ -0,0 +1,60 @@
+import React, {useHistory} from "react";
+import axios from "axios";
+import axiosWithAuth from "../utils/axiosWithAuth";
+
+
+class AddFriend extends React.Component {
+    state = {
+        credentials: 
+            {   
+                id: '',
+                name: '',
+                age: '',
+                email: '',
+              }
+    }
+    handleChange = e => {
+        this.setState({
+          credentials: {
+            ...this.state.credentials,
+            [e.target.name]: e.target.value
+          }
+        });
+      };
+
+    handleOnSubmit = e => {
+        axiosWithAuth.post('/friends', this.state.credentials)
+        .then(res => {
+            this.props.history.push('/friends')
+        })
+    }
+
+    render(){
+        return (
+            <div>
+                <form onSubmit = {this.handleOnSubmit} >
+                    <input 
+                    type="text"
+                    name="name"
+                    value={this.state.credentials.name}
+                    onChange={this.handleChange}
+                    />
+                    <input 
+                    type="text"
+                    name="age"
+                    value={this.state.credentials.age}
+                    onChange={this.handleChange}
+                    />
+                    <input 
+                    type="text"
+                    name="email"
+                    value={this.state.credentials.email}
+                    onChange={this.handleChange}
+                    />
+                    <button>Add Friend</button>
+                </form>
+            </div>
+        )
+    }
+}
+export default AddFriend

friends/src/components/friends.js

@@ -0,0 +1,55 @@
+import React from "react";
+import axiosWithAuth from "../utils/axiosWithAuth";
+import AddFriend from "./addFriend";
+
+class Friends extends React.Component {
+
+    state = {
+        list: []
+    };
+
+    componentDidMount(){
+        axiosWithAuth()
+        .get('/friends')
+        .then(res=>{
+            this.setState({
+                ...this.state,
+                list: res.data
+            });
+        })
+        .catch(err=>{
+            console.log(err)
+        })
+    }
+    componentDidUpdate(){
+        console.log(this.state.list)
+    }
+    render()
+
+    {
+        return(
+            <div>
+                {this.state.list.map(friend => {
+                    return (
+                    <div>
+                    <h1>{friend.name}</h1>
+                    <p>{friend.email}</p>
+                    </div>
+                    )
+                })}
+                {this.state.list.length > 0 && 
+                    (
+                    <div>
+                    <h1>{this.state.list.length} Friends </h1>
+                    </div>
+                    )}
+
+                <div>
+                    <AddFriend />
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Friends;

friends/src/components/login.js

@@ -0,0 +1,65 @@
+import React, { useHistory } from "react";
+import axios from "axios";
+
+class Login extends React.Component {
+    state={
+        credentials: {
+            username: '',
+            password: ''
+        },
+        isLoading: false
+    }
+
+    handleChange = e => {
+        this.setState({
+            credentials: {
+                ...this.state.credentials,
+                [e.target.name]: e.target.value
+            }
+        })
+    }
+
+    login = e => {
+        e.preventDefault();
+
+        axios.post('http://localhost:5000/api/login', this.state.credentials)
+        .then(res => {
+            localStorage.setItem('token', res.data.payload);
+            this.props.history.push('/friends');
+        })
+        .catch(err => {
+            console.log(err);
+        })
+    };
+
+    componentDidMount(){
+        setTimeout(() => { this.setState({
+            isLoading: !this.state.isLoading
+        }) }, 1000)
+    }
+
+    render() {
+        return (
+          <div>
+            {this.state.isLoading === false && <h1>Loading User Login</h1>}
+            {this.state.isLoading && <form onSubmit={this.login}>
+              <input
+                type="text"
+                name="username"
+                value={this.state.credentials.username}
+                onChange={this.handleChange}
+              />
+              <input
+                type="password"
+                name="password"
+                value={this.state.credentials.password}
+                onChange={this.handleChange}
+              />
+              <button>Log in</button>
+            </form>}
+          </div>
+        );
+      }
+}
+
+export default Login;

friends/src/components/logout.js

@@ -0,0 +1,20 @@
+import React, { useEffect } from "react";
+import { useHistory } from "react-router";
+
+import axiosWithAuth from "../utils/axiosWithAuth";
+
+const Logout = (props) => {
+    const {push} = useHistory();
+
+    useEffect(()=>{
+        axiosWithAuth()
+        .post('/logout')
+        .then(res => {
+            localStorage.removeItem('token')
+            push('/login')
+        })
+    }, []);
+    return (<div></div>)
+}
+
+export default Logout

friends/src/utils/axiosWithAuth.js

@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+const axiosWithAuth = ()=> {
+    const payload = localStorage.getItem('token');
+
+    return axios.create({
+        headers: {
+            authorization: payload
+        },
+        baseURL: 'http://localhost:5000/api'
+    });
+}
+
+export default axiosWithAuth;

package.json

@@ -18,4 +18,3 @@
   "author": "Lambda School",
   "license": "ISC"
 }
-