mvp met

src/App.js

@@ -1,13 +1,28 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
-import { BrowserRouter as Router, Route} from 'react-router-dom';
+import { BrowserRouter as Router,Route,Routes} from 'react-router-dom';
+import Header from './components/Header';
+import FriendList from './components/FriendList';
+import Login from './components/Login';
+import AddFriend from './components/AddFriend';
+import Logout from './components/Logout';
+import PrivateRoutes from "./components/PrivateRoutes"
 
 function App() {
+  const [friends,setFriends] = useState([])
+
   return (
-    <div className="App">
-      <h2>Client Auth Project</h2>
-    </div>
+    <>
+    <Header />
+
+    <Routes>
+          <Route path='/' element={<Login />}/>
+          <Route path='/friendlist' element={<PrivateRoutes><FriendList friends={friends} setFriends={setFriends}/></PrivateRoutes>}/>
+          <Route path='/addfriend' element={<PrivateRoutes><AddFriend /></PrivateRoutes>}/>
+          <Route path='/logout' element={<PrivateRoutes><Logout /></PrivateRoutes>}/>
+    </Routes>
+    </>
   );
 }
 
-export default App;
+export default App;

src/components/AddFriend.js

@@ -0,0 +1,59 @@
+import axios from "axios";
+import React, {useState} from "react";
+
+const initialFormValues = {
+    name: '',
+    email: '',
+    age: ''
+}
+
+const AddFriend = () => {
+    const token = localStorage.getItem('token')
+    const[formValues,setFormValues] = useState(initialFormValues)
+
+    function handleChange(e){
+        setFormValues(() => {
+            return{
+                ...formValues,
+                [e.target.name]: e.target.value
+            }
+        })
+    }
+
+    function handleSubmit(e){
+        e.preventDefault();
+        axios.create({ headers: { Authorization: token}})
+        .post(`http://localhost:9000/api/friends`, formValues)
+            .then(res => console.log(res))
+            .catch(err => console.error(err))
+    }
+
+    return(
+        <>
+        <form onSubmit={(e) => handleSubmit(e)}>
+            <input 
+                type='text'
+                name="name"
+                value={formValues.name}
+                onChange={(e) => handleChange(e)}
+                />
+                <input 
+                type='number'
+                name="age"
+                value={formValues.age}
+                onChange={(e) => handleChange(e)}
+                />
+                <input 
+                type='email'
+                name="email"
+                value={formValues.email}
+                onChange={(e) => handleChange(e)}
+                />
+            <button >Submit</button>
+        </form>
+        </>
+    )
+
+}
+
+export default AddFriend;

src/components/Friend.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+const Friend = ({friend}) => {
+    return(
+        <>
+            <li key={friend.id}>
+                <p>{friend.name} - {friend.age ? `age: ${friend.age} -` : ""}  {friend.email}</p>
+            </li>
+        </>
+    )
+}
+
+export default Friend

src/components/FriendList.js

@@ -0,0 +1,36 @@
+import React, {useEffect} from "react";
+import axios from "axios";
+import Friend from "./Friend";
+import { useNavigate } from "react-router-dom";
+
+
+const FriendList = (props) => {
+    const token = localStorage.getItem('token')
+    let navigate = useNavigate();
+
+    useEffect(()=> {
+        axios.create({ headers: { Authorization: token}})
+        .get('http://localhost:9000/api/friends')
+            .then(res => props.setFriends(res.data))
+            .catch(err => {
+                navigate('/')
+            })
+    }, [])
+
+    return( 
+        <>
+        <h1>FriendList</h1>
+        {props.friends.length != 0 ? 
+        <ul>
+        {props.friends.map((friend) => {
+            return (<Friend friend={friend} key={friend.id}/>)            
+        })}
+        </ul>
+        :
+        <h2>No friends to display</h2>
+        }
+        </>
+    )
+}
+
+export default FriendList;

src/components/Header.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Header = (props) => {
+    return(
+        <div id="header-container">
+            <div className="page-title">
+                <h1>FRIENDS DATABASE</h1>
+            </div>
+            <nav>
+                <Link to='/'><button>LOGIN.</button></Link>
+                <Link to='/friendlist'><button>FRIENDLIST.</button></Link>
+                <Link to='/addfriend'><button>ADDFRIEND.</button></Link>
+                <Link to='/logout'><button>LOGOUT.</button></Link>
+            </nav>
+        </div>
+    )
+}
+
+export default Header;

src/components/Login.js

@@ -0,0 +1,62 @@
+import axios from "axios";
+import React, {useState} from "react";
+import { useNavigate } from "react-router-dom";
+
+const initialFormValues = {
+    username: '',
+    password: '',
+}
+
+const Login = () => {
+    let navigate = useNavigate();
+
+    const[formValues,setFormValues] = useState(initialFormValues)
+    const[error,setError] = useState('')
+
+    function handleChange(e){
+        setFormValues(() => {
+            return{
+                ...formValues,
+                [e.target.name]: e.target.value
+            }
+        })
+    }
+
+    function handleSubmit(e){
+        e.preventDefault();
+        axios.post('http://localhost:9000/api/login', formValues)
+            .then(({data}) => {
+                localStorage.setItem('token', data.token)
+                navigate('/friendlist')
+            })
+            .catch(err => setError('Invalid login!'))
+        setFormValues(initialFormValues)
+    }
+    return(
+        <>
+        {error && <p>{error}</p>}
+        <label> LOGIN
+           <form onSubmit={(e) => handleSubmit(e)}>
+                <label htmlFor='username'>Username</label>
+                <input 
+                type='text'
+                name="username"
+                value={formValues.username}
+                onChange={(e) => handleChange(e)}
+                />
+                <label htmlFor='password'>Password</label>
+                <input 
+                type='password'
+                name='password'
+                value={formValues.password}
+                onChange={(e) => handleChange(e)}
+                />
+                <button>Submit</button>
+            </form> 
+        </label>
+        </>
+    )
+
+}
+
+export default Login;

src/components/PrivateRoutes.js

@@ -0,0 +1,12 @@
+import React, { Component } from "react";
+import { Route, Navigate, Routes } from "react-router-dom";
+
+const PrivateRoutes = ({ children }) => {
+    if(localStorage.getItem('token').length < 5){
+        return <Navigate to="/" />
+    }
+
+    return children;
+}
+
+export default PrivateRoutes

src/components/logout.js

@@ -0,0 +1,24 @@
+import React from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+
+const Logout = () => {
+    const navigate = useNavigate()
+    const token = localStorage.getItem('token')
+    function confirm(){
+        axios.create({ headers: { Authorization: token}})
+        .post(`http://localhost:9000/api/logout`)
+            .then(({data}) => 
+            {
+                localStorage.setItem('token', '' )
+                navigate('/')
+            })
+    }
+
+    return(
+        <button onClick={() => confirm()}>Logout</button>
+    )
+
+}
+
+export default Logout;

src/mocks/api.js

@@ -36,7 +36,7 @@ api.post('/api/login', (req, res) => {
 
 })
 
-api.post('/api/logout', authenticator, (req, res) => {
+api.post('/api/logout',authenticator,  (req, res) => {
   const {username, role, token}  = credentials;
   res.json({
     username,
@@ -45,7 +45,7 @@ api.post('/api/logout', authenticator, (req, res) => {
   })
 })
 
-api.get('/api/friends', authenticator, (req, res) => {
+api.get('/api/friends', authenticator,(req, res) => {
   res.json(Data.getAll())
 })
 
@@ -62,4 +62,4 @@ api.post('/api/friends', authenticator, (req, res) => {
 
 api.listen(9000, () => {
   console.log('listening on 9000')
-})
+})