Nelson maldonado

friends/src/App.js

@@ -1,18 +1,37 @@
-import React from 'react';
-import './App.css';
-import { BrowserRouter as Router, Route} from 'react-router-dom';
-
-
-const Login = ()=> {
-  return (<h2>Login</h2>)
-}
-
+import React from "react"
+import "./App.css"
+import Login from "./components/Login"
+import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom"
+import PrivateRoute from "./components/PrivateRoute"
+import FriendsList from "./components/FriendsList"
+import AddFriendForm from "./components/AddFriendForm"
 function App() {
   return (
-    <div className="App">
-      <h2>Client Auth Project</h2>
-    </div>
-  );
+    <Router>
+      <div className="App">
+        <h2>Client Auth Project</h2>
+        <Link to="/friends" style={{ marginRight: "20px" }}>
+          See Friends
+        </Link>
+        <Link to="/friends/add-new">Add Friends</Link>
+        <Switch>
+          <PrivateRoute
+            path="/friends/add-new"
+            component={AddFriendForm}
+          ></PrivateRoute>
+          <PrivateRoute path="/friends" component={FriendsList}></PrivateRoute>
+
+          <Route path="/login">
+            <Login />
+          </Route>
+
+          <Route>
+            <Login />
+          </Route>
+        </Switch>
+      </div>
+    </Router>
+  )
 }
 
-export default App;
+export default App

friends/src/components/AddFriendForm.js

@@ -0,0 +1,65 @@
+import React, { useState } from "react"
+import { axiosWithAuth } from "../utils/axiosWithAuth"
+import { useHistory } from "react-router"
+const initialValues = {
+  name: "",
+  age: "",
+  email: "",
+}
+
+const AddFriendForm = () => {
+  const { push } = useHistory()
+  const [formValues, setFormValues] = useState(initialValues)
+
+  const handleChange = (e) => {
+    setFormValues({ ...formValues, [e.target.name]: e.target.value })
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    axiosWithAuth()
+      .post("/api/friends", formValues)
+      .then((res) => {
+        console.log(res)
+        push("/friends")
+      })
+      .catch((err) => {
+        console.log({ err })
+      })
+  }
+
+  return (
+    <div>
+      <h3>Here you can add a new friend</h3>
+      <form onSubmit={handleSubmit}>
+        <label htmlFor="name">Name</label>
+        <input
+          id="name"
+          name="name"
+          value={formValues.name}
+          onChange={handleChange}
+        />
+
+        <label htmlFor="age">Age</label>
+        <input
+          id="age"
+          name="age"
+          value={formValues.age}
+          onChange={handleChange}
+        />
+
+        <label htmlFor="email">Email</label>
+        <input
+          id="email"
+          name="email"
+          value={formValues.email}
+          onChange={handleChange}
+        />
+
+        <button>Send</button>
+      </form>
+    </div>
+  )
+}
+
+export default AddFriendForm

friends/src/components/FriendsList.js

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from "react"
+import { axiosWithAuth } from "../utils/axiosWithAuth"
+
+const FriendsList = (props) => {
+  const [friends, setFriends] = useState([])
+
+  useEffect(() => {
+    axiosWithAuth()
+      .get("http://localhost:5000/api/friends")
+      .then((res) => {
+        setFriends(res.data)
+        console.log(res)
+      })
+      .catch((error) => {
+        console.log({ error })
+      })
+  }, [])
+
+  return (
+    <div>
+      <h3>Current Friends in Private </h3>
+      {friends.map((item) => (
+        <div key={item.id}>
+          <h5>{item.name}</h5>
+          <h6>{item.email}</h6>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default FriendsList

friends/src/components/Login.js

@@ -0,0 +1,50 @@
+import axios from "axios"
+import React, { useState } from "react"
+import { useHistory } from "react-router"
+const initialValues = { username: "", password: "" }
+
+const Login = () => {
+  const { push } = useHistory()
+  const [formValues, setFormValues] = useState(initialValues)
+
+  const handleChanges = (e) => {
+    setFormValues({ ...formValues, [e.target.name]: e.target.value })
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    axios
+      .post("http://localhost:5000/api/friends", formValues)
+      .then((res) => {
+        console.log(res)
+        window.localStorage.setItem("token", res.data.payload)
+        push("/friends")
+      })
+      .catch((error) => {
+        console.log(error)
+      })
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label htmlFor="username">Username</label>
+      <input
+        id="username"
+        name="username"
+        value={formValues.username}
+        onChange={handleChanges}
+      />
+      <label htmlFor="password">Password</label>
+      <input
+        id="password"
+        name="password"
+        type="password"
+        value={formValues.password}
+        onChange={handleChanges}
+      />
+      <button>Submit</button>
+    </form>
+  )
+}
+
+export default Login

friends/src/components/PrivateRoute.js

@@ -0,0 +1,19 @@
+import React from "react"
+import { Route, Redirect } from "react-router-dom"
+
+const PrivateRoute = ({ component: Component, ...rest }) => {
+  return (
+    <Route
+      {...rest}
+      render={() => {
+        if (window.localStorage.getItem("token")) {
+          return <Component />
+        } else {
+          return <Redirect to="/login" />
+        }
+      }}
+    />
+  )
+}
+
+export default PrivateRoute

friends/src/utils/axiosWithAuth.js

@@ -0,0 +1,12 @@
+import axios from "axios"
+
+export const axiosWithAuth = () => {
+  const token = window.localStorage.getItem("token")
+
+  return axios.create({
+    headers: {
+      Authorization: token,
+    },
+    baseURL: "http://localhost:5000",
+  })
+}