bloominstituteoftechnology · kwnie · Mar 15, 2021 · Mar 15, 2021 · Mar 15, 2021
diff --git a/friends/.gitignore b/friends/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/friends/package-lock.json b/friends/package-lock.json
diff --git a/friends/package.json b/friends/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "friends",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.8.3",
+    "axios": "^0.21.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/friends/public/index.html b/friends/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Auth Friends</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/friends/src/AddFriend.js b/friends/src/AddFriend.js
@@ -0,0 +1,62 @@
+import React from 'react';
+
+class AddFriend extends React.Component {
+    state = {
+        id: Date.now(),
+        name: '',
+        age: '',
+        email: '',
+    }
+
+    handleChange = e => {
+        this.setState({
+            ...this.state,
+            [e.target.name]: e.target.value
+        })
+    };
+
+    addFriend = e => {
+        e.preventDefault();
+        axios.post("http://localhost:5000/api", this.state.credentials)
+          .then(res => {
+            console.log(res);
+            localStorage.setItem("authToken", res.data.payload);
+            this.props.history.push("/protected");
+          })
+          .catch(err => console.log(err));
+    };
+
+    render(){
+        return(
+            <form onSubmit={this.addFriend}>
+
+                <label>Name:</label>
+                <input
+                    type='text'
+                    name='name'
+                    value={this.state.name}
+                    onChange={this.handleChange}
+                />
+
+                <label>Age:</label>
+                <input
+                    type='text'
+                    name='age'
+                    value={this.state.age}
+                    onChange={this.handleChange}
+                />
+
+                <label>Email:</label>
+                <input
+                    type='email'
+                    name='email'
+                    value={this.state.email}
+                    onChange={this.handleChange}
+                />
+
+                <button>Submit</button>
+
+            </form>
+        )
+    }
+}
diff --git a/friends/src/App.js b/friends/src/App.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
+import PrivateRoute from './PrivateRoute';
+import Friends from './Friends';
+import Login from './Login';
+import Logout from './Logout';
+
+function App() {
+  return (
+    <Router>
+
+      <ul>
+        <li><Link to='/login'>Login</Link></li>
+        <li><Logout /></li>
+        <li><Link to='/protected'>Protected</Link></li>
+      </ul>
+
+      <Switch>
+
+        <PrivateRoute exact path='/protected'>
+          <Friends />
+        </PrivateRoute>
+
+        <Route path='/login'>
+          <Login />
+        </Route>
+
+        <Route>
+          <Login />
+        </Route>
+
+     </Switch>
+    </Router>
+  );
+}
+
+export default App;
diff --git a/friends/src/App.test.js b/friends/src/App.test.js
@@ -0,0 +1,6 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders app', () => {
+  render(<App />);
+});
diff --git a/friends/src/Friends.js b/friends/src/Friends.js
@@ -0,0 +1,41 @@
+import React from 'react';
+// import Loader from 'react-loader-spinner';
+import { axiosWithAuth } from "./axiosWithAuth";
+
+class Friends extends React.Component {
+    state = {
+        friends: []
+    }
+
+    componentDidMount() {
+        this.getData()
+    };
+
+    getData = () => {
+        // const token = localStorage.getItem('authToken');
+        axiosWithAuth().get('/friends')
+            .then(res => {
+                this.setState({
+                    ...this.state,
+                    friends: res.data
+                })
+            })
+            .catch(err => console.log(err))
+    }
+
+    render(){
+        return(
+            <div>
+                {this.state.friends.map(friend => (
+                    <div key={friend.id}>
+                        <h2>{friend.name}</h2>
+                        <h3>{friend.age}</h3>
+                        <h3>{friend.email}</h3>
+                    </div>
+                ))}
+            </div>
+        )
+    }
+};
+
+export default Friends;
diff --git a/friends/src/Login.js b/friends/src/Login.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import axios from 'axios';
+import Loader from 'react-loader-spinner';
+
+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 => {
+            console.log(res);
+            localStorage.setItem("authToken", res.data.payload);
+            this.props.history.push("/protected");
+          })
+          .catch(err => console.log(err));
+    };
+
+    loading = e => {
+        this.setState({
+           credentials: {
+               ...this.state.credentials,
+               isLoading: !this.state.isLoading
+
+
+           }
+        })
+    }
+
+
+
+    render(){
+        return(
+            <div>
+                <form onSubmit={this.login}>
+
+                    <label>Username:</label>
+                    <input
+                        type='text'
+                        name='username'
+                        value={this.state.credentials.username}
+                        onChange={this.handleChange}
+                    />
+
+                    <label>Password:</label>
+                    <input
+                        type='text'
+                        name='password'
+                        value={this.state.credentials.password}
+                        onChange={this.handleChange}
+                    />
+
+                    <button onClick={this.loading}>Login</button>
+
+                    {this.state.isLoading === true && <Loader />}
+
+                </form>
+            </div>
+        )
+    }
+};
+
+export default Login;
diff --git a/friends/src/Logout.js b/friends/src/Logout.js
@@ -0,0 +1,16 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+
+const Logout = () => {
+    let history = useHistory();
+    const logout = () => {
+      localStorage.removeItem("authToken");
+      history.push("/");
+    };
+
+    return (
+      <div onClick={logout}>Logout</div>
+    )
+  }
+
+  export default Logout;
diff --git a/friends/src/PrivateRoute.js b/friends/src/PrivateRoute.js
@@ -0,0 +1,17 @@
+import React from "react";
+import { Route, Redirect } from "react-router-dom";
+
+const PrivateRoute = ({ component: Component, ...rest }) => {
+    return (
+      <Route {...rest} render={(props) => {
+        if (localStorage.getItem("authToken")) {
+          return <Component {...props} />;
+        }
+        else { 
+          return <Redirect to="/login" />;
+        }
+      }}/>
+    )
+}
+
+  export default PrivateRoute;
diff --git a/friends/src/axiosWithAuth.js b/friends/src/axiosWithAuth.js
@@ -0,0 +1,9 @@
+import axios from "axios";
+
+export const axiosWithAuth = () => {
+    const token = localStorage.getItem("authToken");
+    return axios.create({
+        baseURL: "http://localhost:5000/api",
+        headers: { Authorization: token }
+    });
+}
diff --git a/friends/src/index.js b/friends/src/index.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+    <App />,
+  document.getElementById('root')
+);