Completed Proj

src/App.css

@@ -1,38 +1,49 @@
-.App {
-  text-align: center;
+* {
+  box-sizing: border-box;
 }
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+body {
+  margin: 0;
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+nav {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 3px solid black;
+  align-items: center;
+  gap: 2 rem;
+  padding: 0 1rem;
+  height: 75px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+nav ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
+  gap: 1rem;
+}
+
+ul a {
+  background-color: black;
   color: white;
+  text-decoration: none;
+  padding: 15px;
+}
+
+.heading {
+  text-decoration: none;
+  color: black;
+  font-size: 2rem;
 }
 
-.App-link {
-  color: #61dafb;
+.pgDef h1 {
+  text-align: center;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.inputs {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 500px;
+  text-align: center;
+  gap: 10px;
 }

src/App.js

@@ -1,11 +1,44 @@
-import React from 'react';
-import './App.css';
-import { BrowserRouter as Router, Route} from 'react-router-dom';
+import React from "react";
+import "./App.css";
+import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
+
+import LoginForm from "./components/LoginForm";
+import FriendsList from "./components/FriendsList";
+import AddFriends from "./components/AddFriends";
+import Logout from "./components/Logout";
+import PrivateRoutes from "./components/PrivateRoutes";
 
 function App() {
   return (
     <div className="App">
-      <h2>Client Auth Project</h2>
+      <nav>
+        <Link className="heading" to="/">
+          Friends Database
+        </Link>
+        <ul className="links">
+          <li>
+            <Link to="/">Login</Link>
+          </li>
+          <li>
+            <Link to="/friends">Friends</Link>
+          </li>
+          <li>
+            <Link to="/friends/add">Add Friends</Link>
+          </li>
+          <li>
+            <Link to="/logout/">Logout</Link>
+          </li>
+        </ul>
+      </nav>
+
+      <Routes>
+        <Route element={<PrivateRoutes />}>
+          <Route path="/friends" element={<FriendsList />} />
+          <Route path="/friends/add" element={<AddFriends />} />
+        </Route>
+        <Route path="/" element={<LoginForm />} />
+        <Route path="/logout" element={<Logout />} />
+      </Routes>
     </div>
   );
 }

src/components/AddFriends.js

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+
+const AddFriends = () => {
+  const navigate = useNavigate();
+  const [newFriend, setNewFriend] = useState({
+    name: "",
+    email: "",
+    age: "",
+  });
+
+  const handleChange = (e) => {
+    e.preventDefault();
+    setNewFriend({
+      ...newFriend,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    const token = localStorage.getItem("token");
+    e.preventDefault();
+    axios
+      .post("http://localhost:9000/api/friends", newFriend, {
+        headers: {
+          authorization: token,
+        },
+      })
+      .then((res) => navigate("/friends"))
+      .catch((err) => console.log(err));
+  };
+  return (
+    <div>
+      <form on onSubmit={handleSubmit}>
+        <div className="inputs">
+          <h1>ADD FRIEND</h1>
+          <label htmlFor="friendName">FRIEND NAME</label>
+          <input onChange={handleChange} type="text" id="name" name="name" />
+          <label htmlFor="friendEmail">FRIEND AGE</label>
+          <input type="number" id="age" name="age" onChange={handleChange} />
+
+          <label htmlFor="friendEmail">FRIEND EMAIL</label>
+          <input
+            type="email "
+            id="email"
+            name="email"
+            onChange={handleChange}
+          />
+          <button>Submit</button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default AddFriends;

src/components/FriendsList.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+const FriendsList = () => {
+  const [friends, setFriends] = useState([]);
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    axios
+      .get("http://localhost:9000/api/friends", {
+        headers: {
+          authorization: token,
+        },
+      })
+      .then((res) => {
+        console.log(res.data);
+        setFriends(res.data);
+      })
+      .catch((err) => console.log(err));
+  }, []);
+  return (
+    <div>
+      <h1>FRIENDS LIST</h1>
+      {friends === [] ? (
+        <p>Loading</p>
+      ) : (
+        <ul>
+          {friends.map((friend, idx) => {
+            return (
+              <li key={idx}>
+                {friend.name}-{friend.email}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default FriendsList;

src/components/LoginForm.js

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+
+const origState = {
+  username: "",
+  password: "",
+};
+
+const LoginForm = () => {
+  const navigate = useNavigate();
+
+  const [credentials, setCredentials] = useState({
+    username: "",
+    password: "",
+  });
+
+  const [error, setError] = useState("");
+
+  const handleChange = (e) => {
+    e.preventDefault();
+    setCredentials({
+      ...credentials,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const login = (e) => {
+    e.preventDefault();
+    axios
+      .post("http://localhost:9000/api/login", credentials)
+      .then((res) => localStorage.setItem("token", res.data.token))
+      .catch((err) => setError(err.response.data.error));
+    setCredentials({
+      username: "",
+      password: "",
+    });
+    navigate("/friends");
+  };
+  return (
+    <div className="pgDef">
+      <h1>Login</h1>
+      <form onSubmit={login}>
+        <div className="inputs">
+          <label htmlFor="username">USERNAME</label>
+          <input
+            onChange={handleChange}
+            type="text"
+            id="username"
+            name="username"
+          />
+          <label htmlFor="password">PASSWORD</label>
+          <input
+            type="password"
+            id="password"
+            name="password"
+            onChange={handleChange}
+          />
+          <button>Submit</button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default LoginForm;

src/components/Logout.js

@@ -0,0 +1,28 @@
+import React, { useEffect } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+
+const Logout = () => {
+  const navigate = useNavigate();
+  const token = localStorage.getItem("token");
+  useEffect(() => {
+    axios
+      .post(
+        "http://localhost:9000/api/logout",
+        {},
+        {
+          headers: {
+            authorization: token,
+          },
+        }
+      )
+      .then((res) => {
+        localStorage.removeItem("token");
+        navigate("/");
+      })
+      .catch((err) => console.log(err));
+  }, []);
+  return <div></div>;
+};
+
+export default Logout;

src/components/PrivateRoutes.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { Outlet, Navigate } from "react-router-dom";
+
+const PrivateRoutes = () => {
+  const token = localStorage.getItem("token");
+  return token ? <Outlet /> : <Navigate to="/" />;
+};
+
+export default PrivateRoutes;

src/index.js

@@ -1,12 +1,13 @@
-import React from 'react'
-import { BrowserRouter as Router } from "react-router-dom";
-import { createRoot } from 'react-dom/client'
-import App from './App'
+import React from "react";
 
-const root = createRoot(document.getElementById('root'))
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
 
 root.render(
-  <Router>
+  <BrowserRouter>
     <App />
-  </Router>
-)
+  </BrowserRouter>
+);