1st

README.md

@@ -1,4 +1,4 @@
-# Auth Friends
+# Auth Friends cheyenne
 
 Topics:
 

friends/public/index.html

@@ -4,6 +4,8 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"

friends/src/App.css

@@ -1,38 +1,16 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 0.5fr 1fr;
+  gap: 0px 0px;
+  grid-auto-flow: row;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  justify-items: stretch;
+  grid-template-areas:
+    "nav nav nav"
+    "main main main";
 }
 
-.App-link {
-  color: #61dafb;
-}
+.nav { grid-area: nav; }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.main { grid-area: main; }

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 React from 'react'
+import Login from './components/login/Login'
+import Nav from './components/nav/Nav'
+import Home from './components/home/Home'
+import PrivateRoute from './components/privateRoute/PrivateRoute'
+import FriendsPage from './components/friendsPage/FriendsPage'
+import Logout from './components/logout/Logout'
+import './App.css'
+import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
 
+function App() {
+  const isLoggedIn = localStorage.getItem('token')
 
-const Login = ()=> {
-  return (<h2>Login</h2>)
-}
 
-function App() {
   return (
+    <Router>
     <div className="App">
-      <h2>Client Auth Project</h2>
+    <div className="nav">
+      <Nav isLoggedIn={isLoggedIn} />
+      </div>
+      <div className="container">
+      <div className="main"></div>
+    </div>
+    <Switch>
+      <Route exact path="/" component={Home} />
+      <Route exact path="/login" component={Login} />
+      <Route exact path="/logout" component={Logout} />
+      <PrivateRoute exact path='/protected' component={FriendsPage} />
+    </Switch>
     </div>
+
+    </Router>
   );
 }
 

friends/src/components/friendsPage/FriendsPage.js

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react'
+import axiosWithAuth from '../../utils/axiosWithAuth'
+import { Link } from 'react-router-dom';
+import NewFriend from '../newFriend/NewFriend';
+import './styles.css'
+
+const FriendsPage = () => {
+    const [friends, setFriends] = useState()
+    const [addNew, setAddNew] = useState(false)
+
+    const getFriends = () => {
+        axiosWithAuth()
+        .get('/friends')
+        .then(resp=> {
+        setFriends(resp.data)
+    })
+    .catch(err=> {
+    console.log(err);
+  })
+    }
+
+    useEffect(() => {
+        if (!addNew) {
+            getFriends()
+        }
+    }, [addNew])
+
+
+      const handleClick = () => {
+        setAddNew(!addNew)
+      }
+      const FriendsList = () => {
+          return (
+            <div className="main-container">
+            <div className="cards">
+              <div className="card card-1 add-new" onClick={handleClick}>
+              <h2 className="card__title">Add New Friend</h2>
+              </div>
+              {
+                  friends ? friends.map(friend => (
+                      <div className="card card-1" key={friend.id}>
+                          <h2 className="card__title">{`Name: ${friend.name} Age: ${friend.age}`}</h2>
+                          <h3 className='card__apply'>{friend.email}</h3>
+                      </div>
+                  )) : null
+              }
+            </div>
+          </div>
+          )
+      }
+    // Final Return
+    return (
+        addNew ?
+        <NewFriend handleClick={handleClick} /> : <FriendsList />
+    )
+}
+
+export default FriendsPage

friends/src/components/friendsPage/styles.css

@@ -0,0 +1,127 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  }
+
+  .main-container {
+    padding: 30px;
+  }
+
+  /* HEADING */
+
+  .heading {
+    text-align: center;
+  }
+
+  .heading__title {
+    font-weight: 600;
+  }
+
+  .heading__credits {
+    margin: 10px 0px;
+    color: #888888;
+    font-size: 25px;
+    transition: all 0.5s;
+  }
+
+  .heading__link {
+    text-decoration: none;
+  }
+
+  .heading__credits .heading__link {
+    color: inherit;
+  }
+
+  /* CARDS */
+
+  .cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .card {
+    margin: 20px;
+    padding: 20px;
+    width: 500px;
+    min-height: 200px;
+    display: grid;
+    grid-template-rows: 20px 50px 1fr 50px;
+    border-radius: 10px;
+    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
+    transition: all 0.2s;
+  }
+
+  .card:hover {
+    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
+    transform: scale(1.01);
+  }
+
+  .card-age,
+  .card__exit,
+  .card__icon {
+    position: relative;
+    text-decoration: none;
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  .card-age::after {
+    position: absolute;
+    top: 25px;
+    left: 0;
+    content: "";
+    width: 0%;
+    height: 3px;
+    background-color: rgba(255, 255, 255, 0.6);
+    transition: all 0.5s;
+  }
+
+  .card-age:hover::after {
+    width: 100%;
+  }
+
+  .add-new {
+      cursor: pointer;
+  }
+
+  .card__exit {
+    grid-row: 1/2;
+    justify-self: end;
+  }
+
+  .card__icon {
+    grid-row: 2/3;
+    font-size: 30px;
+  }
+
+  .card__title {
+    grid-row: 3/4;
+    font-weight: 400;
+    color: #ffffff;
+  }
+
+  .card__apply {
+    grid-row: 4/5;
+    align-self: center;
+  }
+
+  /* CARD BACKGROUNDS */
+
+  .card-1 {
+    background: radial-gradient(#1fe4f5, #3fbafe);
+  }
+
+  /* RESPONSIVE */
+
+  @media (max-width: 1600px) {
+    .cards {
+      justify-content: center;
+    }
+  }
+

friends/src/components/home/Home.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Home = () => {
+    return (
+        <h2>Client Auth Project</h2>
+    )
+}
+
+export default Home

friends/src/components/loading/Spinner.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import './styles.css'
+
+const Spinner = () => {
+    return (
+        <div className='centered'>
+            <svg width="140" height="140" viewBox="0 0 280 280" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g>
+    <line x1="59.9833" y1="140.333" x2="219.978" y2="139" stroke="#000" stroke-width="4"/>
+    <circle cx="60" cy="140" r="5" fill="#000"/>
+    <circle cx="220" cy="139" r="5" fill="#000"/>
+    </g>
+    <path className="circle" d="M109.957 122.655L140 105.309L170.043 122.655V157.345L140 174.691L109.957 157.345V122.655Z" stroke="#000" stroke-width="4"/>
+    <circle className="circle" cx="140" cy="140" r="13" stroke="#f5d77b" stroke-width="4"/>
+    <circle className="circle" cx="110" cy="192" r="13" stroke="#f7a78f" stroke-width="4"/>
+    <circle className="circle circle_s" cx="85" cy="232" r="8" stroke="#82c7c5" stroke-width="4"/>
+    <circle className="circle" cx="170" cy="88" r="13" stroke="#82c7c5" stroke-width="4"/>
+    <circle className="circle circle_s" cx="110" cy="192" r="5" fill="#f7a78f"/>
+    <circle className="circle circle_s" cx="185" cy="61" r="5" fill="#f5d77b"/>
+    </svg>
+        </div>
+    )
+}
+
+export default Spinner

friends/src/components/loading/styles.css

@@ -0,0 +1,32 @@
+@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;500&display=swap");
+@keyframes rotation {
+  from {
+    -webkit-transform: rotate(359deg);
+  }
+  to {
+    -webkit-transform: rotate(0deg);
+  }
+}
+
+svg * {
+  -webkit-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+}
+
+.circle {
+  -webkit-animation: rotation 8s infinite linear;
+  animation: rotation 8s infinite linear;
+}
+.circle_s {
+  -webkit-animation: rotation 4s infinite linear;
+  animation: rotation 4s infinite linear;
+}
+
+.centered {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    /* bring your own prefixes */
+    transform: translate(-50%, -50%);
+  }