Added axioswithauth get friend and added 6 components, actions, and r…

friends/package.json

@@ -9,8 +9,12 @@
     "axios": "^0.24.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.6",
     "react-router-dom": "^5.0.1",
     "react-scripts": "4.0.3",
+    "redux": "^4.1.2",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.4.0",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

friends/src/App.css

@@ -1,5 +1,17 @@
+*{
+  box-sizing: border-box;
+}
 .App {
   text-align: center;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  background-color:#ffffff;
+
+}
+body{
+  background-color: #fca311;
 }
 
 .App-logo {
@@ -14,7 +26,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #e5e5e5;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -36,3 +48,104 @@
     transform: rotate(360deg);
   }
 }
+
+.header{
+  display:flex;
+  width:100%;
+  justify-content:space-between;
+  background-color: #14213d;
+}
+.header h1{
+  width:30%;
+  display:flex;
+  color:white;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  text-decoration:underline;
+  text-decoration-color: #fca311;
+}
+nav{
+  display:flex;
+  justify-content:space-around;
+  align-items: center;
+  height:60px;
+}
+
+.linky{
+  text-decoration:none;
+  width:130px;
+  color:white;
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  height:40px;
+  margin: 0px 20px;
+}
+.linky:hover{
+  text-decoration: underline;
+  text-decoration-color:#fca311
+}
+
+.blinders{
+  border-radius:30px;
+  background-color:white;
+  color:#14213d;;
+}
+
+.friend-card{
+  width:300px;
+  height:300px;
+  background-color:#14213d;
+  color:white;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  flex-direction:column;
+  margin:20px;
+}
+.friend-card:hover{
+  text-decoration:underline;
+  text-decoration-color:#fca311;
+  border:3px solid #fca311;
+}
+
+.friendlist{
+  display:flex;
+  flex-wrap:wrap;
+  background-color: white;
+  width:100%;
+}
+
+.form-container{
+  width:300px;
+  height:300px;
+  background-color:#14213d;
+  color:white;
+  display:flex;
+  align-items:center;
+  flex-direction:column;
+  justify-content: space-around;
+  margin:20px;
+}
+.form-container:hover{
+  border:1px solid #fca311;
+}
+.form-grouped{
+  display:flex;
+  flex-direction:column;
+  justify-content:space-around;
+  height:200px;
+}
+.form{
+  width:300px;
+  height:300px;
+  background-color:#14213d;
+  color:white;
+  display:flex;
+  align-items:center;
+  flex-direction:column;
+  margin:20px;
+  justify-content: space-around;
+}
+

friends/src/App.js

@@ -1,18 +1,44 @@
 import React from 'react';
 import './App.css';
-import { BrowserRouter as Router, Route} from 'react-router-dom';
+import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
+import Login from './components/Login'
+import FriendsList from './components/FriendsList';
+import PrivateRoute from './components/PrivateRoute';
+import AddFriendForm from './components/AddFriendForm';
+import Logout from './components/Logout';
+import { connect } from 'react-redux';
 
+const App= (props) => {
+  const loggedIn = props.state.loggedIn
 
-const Login = ()=> {
-  return (<h2>Login</h2>)
-}
-
-function App() {
   return (
     <div className="App">
-      <h2>Client Auth Project</h2>
+      <Router>
+        <header className='header'>
+          <h1>Get'chya Fraynds</h1>
+          <nav>
+              {loggedIn && <Link className='linky' to="/friends">Friends</Link>}
+              {loggedIn && <Link className='linky' to="/newfriend">Add Friend</Link>}
+              {!loggedIn && <Link className='linky blinders' to="/login">Login</Link>}
+              {loggedIn && <Link className='linky blinders' to="/logout">Logout</Link>}
+          </nav>
+        </header>
+          <Switch>
+            <Route path="/login" component={Login} />
+            <Route path="/logout" component={Logout} />
+            <Route exact path="/" component={Login} />    
+            <PrivateRoute exact path="/friends" component={FriendsList} />    
+            <PrivateRoute exact path="/newfriend" component={AddFriendForm} />    
+          </Switch>
+        </Router>
     </div>
   );
 }
 
-export default App;
+const mapStateToProps=state=>{
+  return{
+     state
+  }
+}
+
+export default connect(mapStateToProps)(App);

friends/src/actions/index.js

@@ -0,0 +1,20 @@
+export const FETCH_START = "FETCH_START";
+export const SET_FRIENDS = "FETCH_FRIENDS";
+export const LOG_IN = "LOG_IN";
+export const LOG_OUT = "LOG_OUT";
+
+export const fetchStart = () => {
+    return({type: FETCH_START});
+}
+export const setFriends = (friends) => {
+    return({type: SET_FRIENDS, payload:friends});
+}
+
+export const logIn = () => {
+    return({type: LOG_IN});
+}
+
+export const logOut = () => {
+    console.log('action reached')
+    return({type: LOG_OUT});
+}