mvp

friends/src/App.js

@@ -1,18 +1,40 @@
 import React from 'react';
+import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
 import './App.css';
-import { BrowserRouter as Router, Route} from 'react-router-dom';
 
-
-const Login = ()=> {
-  return (<h2>Login</h2>)
-}
+import Login from './components/Login';
+import Logout from './components/Logout';
+import Friends from './components/Friends';
+import PrivateRoute from './components/PrivateRoute';
 
 function App() {
+  const isLoggedin = localStorage.getItem("token");
+
   return (
-    <div className="App">
-      <h2>Client Auth Project</h2>
-    </div>
+    <Router>
+     <div className="App">
+      <ul>
+        <li>
+          <Link to="/login">Login</Link>
+        </li>
+        <li>
+          <Link to='/logout'>Logout</Link>
+        </li>
+        <li>
+          { isLoggedin && <Link to='/friends'>Friends</Link>}
+        </li>
+        <li>
+          { isLoggedin ? <p className='welcome'>Welcome {localStorage.getItem("username")}</p> : <div></div>}
+        </li>
+      </ul>
+      <Switch>
+        <PrivateRoute exact path="/friends" component={Friends} />
+        <PrivateRoute path='/logout' component={Logout} />
+        <Route path='/login' component={Login} />
+      </Switch>
+     </div>
+    </Router>
   );
 }
 
-export default App;
+export default App;

friends/src/components/AddFriend.js

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const initialCred = {
+    id: 0,
+    name: '',
+    age: 0,
+    email: ''
+}
+
+const AddFriend = (props) => {
+    const [cred, setCred] = useState(initialCred)
+
+    const handleChange = e => {
+        setCred({
+            ...cred,
+            [e.target.name]:e.target.value
+        });
+    }
+
+const add = () => {
+    const token = localStorage.getItem('token');
+    console.log(cred);
+    axios.post('http://localhost:5000/api/friends', cred, {headers: {authorization:token}})
+    .then(res => {
+        console.log(res)
+        setCred(res.data)
+    })
+    .catch(err => {
+        console.log(err)
+    })
+}
+return(
+    <div className='add-friend'>
+        <form onSubmit={add}>
+            <label>Name
+                <input type='text' name='name' value={cred.name} onChange={handleChange} />
+            </label>
+            <label>Age
+                <input type='number' name='age' value={cred.age} onChange={handleChange} />
+            </label>
+            <label>Email
+                <input type='email' name='email' value={cred.email} onChange={handleChange} />
+            </label>
+            <button className='add-submit'>ADD</button>
+        </form>
+    </div>
+)
+}
+export default AddFriend;

friends/src/components/Friends.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import axiosWithAuth from '../utils/axiosWithAuth';
+import { BrowserRouter as Router, Link, Switch } from 'react-router-dom';
+import PrivateRoute from './PrivateRoute';
+import AddFriend from './AddFriend';
+
+class Friends extends React.Component {
+    state ={
+        friends: []
+    };
+
+    componentDidMount() {
+        axiosWithAuth()
+        .get('/api/friends', {
+        })
+        .then(res => {
+            this.setState({
+                ...this.state,
+                friends: res.data
+            })
+        }).catch(err => {
+            console.log(err)
+        })
+    }
+    formatData = () => {
+        const formattedData = [];
+        this.state.friends.forEach((item, index) => {
+            formattedData.push({
+                id: index+1,
+                name: item.name,
+                age: item.age,
+                email: item.email
+            })
+        })
+        return formattedData
+    }
+
+    render(){
+        const friendsList = this.formatData();
+        return(
+            <div>
+                {friendsList.map(item => (
+                    <div key={item.id} className='friends-list'>
+                        <div className='friend-card'>
+                            <h4>{item.name}</h4>
+                            <p>{item.age}</p>
+                            <p>{item.email}</p>
+                        </div>
+                    </div>
+                ))}
+                <Router>
+                    <div>
+                        <Link to='/add'>Add Friends</Link>
+                        <Switch>
+                            <PrivateRoute path='/add' component={AddFriend} />
+                        </Switch>
+                    </div>
+                </Router>
+            </div>
+        )
+    }
+}
+export default Friends;

friends/src/components/Login.js

@@ -0,0 +1,59 @@
+import React from "react";
+import axios from 'axios';
+
+class Login extends React.Component {
+    state = {
+        credentials: {
+            username: '',
+            password: ''
+        }
+    };
+
+    handleChange = e => {
+        this.setState({
+            credentials: {
+                ...this.state.credentials,
+                [e.target.name]: e.target.value
+            }
+        });
+    };
+
+    login = () => {
+
+        axios.post('http://localhost:5000/api/login',
+        this.state.credentials)
+        .then(res => {
+            console.log(res);
+            localStorage.setItem("token", res.data.payload);
+            localStorage.setItem("username", this.state.credentials.username);
+            this.props.history.push('/protected');
+        })
+        .catch(err => {
+            console.error(err);
+        })
+    };
+
+    render() {
+        return (
+            <div>
+                <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,19 @@
+import React, {useEffect} from 'react';
+import axiosWithAuth from "../utils/axiosWithAuth";
+
+const Logout = (props)=> {
+    useEffect(() => {
+        axiosWithAuth()
+        .post("/api/logout", {
+        }).then(res => {
+            localStorage.removeItem('token');
+            localStorage.removeItem('username');
+            props.history.push("/login")
+        }).catch(err => {
+            console.log(err);
+        })
+    }, [])
+    return(<div></div>);
+}
+
+export default Logout;

friends/src/components/PrivateRoute.js

@@ -0,0 +1,14 @@
+import {Route, Redirect} from "react-router-dom";
+import React from "react";
+
+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/utils/axiosWithAuth.js

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