React2-1st commit

use/src/App.js

@@ -5,6 +5,7 @@ import SignUp from './SignUp';
 import SignIn from './SignIn';
 import RenterForm from './RenterForm';
 import TechList from "./TechList";
+import PrivateRoute from './PrivateRoute'
 import './App.css';
 
 
@@ -20,27 +21,21 @@ function App() {
           </Link>
         </Navbar>
 
-        <Route exact path = '/'>
-
-          <Link to = '/sign-in' >
-              <Button>Sign In</Button>
-          </Link>
-
+        <PrivateRoute exact path = '/techlist'>
           <TechList />
+        </PrivateRoute>
 
-        </Route>
-
-        <Route path = '/sign-in'>
+        <Route path = '/'>
           <SignIn/>
         </Route>
 
         <Route path = '/sign-up'>
           <SignUp/>
         </Route>
 
-        <Route path = '/renter-form'>
+        <PrivateRoute path = '/renter-form'>
           <RenterForm/>
-        </Route>
+        </PrivateRoute>
 
       </header>
     </div>

use/src/PrivateRoute.js

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

use/src/SignIn.js

@@ -4,10 +4,11 @@ import {Card, Form, FormGroup, Input, Label, Button} from 'reactstrap';
 import axios from 'axios';
 import * as yup from 'yup';
 import styled from 'styled-components';
+import axiosWithAuth from './axiosWithAuth/axiosWithAuth';
 
-const SignIn = () => {
+const SignIn = (props) => {
     const [form, setForm] = useState({
-        userName: "",
+        username: "",
         password: ""
     })
 
@@ -22,19 +23,31 @@ const SignIn = () => {
     // validateChange(e);
     setForm(newForm);
     };
+
+    const inputSubmit = e => {
+        e.preventDefault();
+        axiosWithAuth()
+            .post("/auth/login", form)
+            .then( res => {
+                localStorage.setItem('token', res.data.token)
+                props.history.push('./TechList')
+                console.log(res); 
+            });
+    }
+
     return (
         <div>
         <Form className = 'Form'>
             <h1>Sign In</h1>
             <FormGroup className = 'FormGroup'>
                 <legend>Username</legend>
-                <Input className = 'Input' type="text" name="userName" value={form.userName} onChange={inputChange}/>
+                <Input className = 'Input' type="text" name="username" value={form.username} onChange={inputChange}/>
             </FormGroup>
             <FormGroup className = 'FormGroup'>
                 <legend>Password</legend>
                 <Input className = 'Input' type="password" name="password" value={form.password} onChange={inputChange}/>
             </FormGroup>
-            <Button>Sign In</Button>
+            <Button onSubmit={inputSubmit}>Sign In</Button>
         </Form>
         <Link to = '/sign-up'>
         Don't have an account? Sign up here.

use/src/SignUp.js

@@ -96,19 +96,18 @@ const SignUp = () => {
     //placeholder api so I can see some data.
     const formSubmit = e => {
         e.preventDefault();
-        console.log('default',e)
+        console.log('default', e)
 
         axios
-        .post('https://reqres.in/api/users', formData)
+        .post('https://usemy-techstuff.herokuapp.com/api/auth/register', formData)
         .then(res => {
             setUsers(res.data);
             console.log('SET POST', res.data);
 
             setFormData({
-                name:'',
-                email:'',
-                password:'',
-                terms: true
+                name: '',
+                email: '',
+                password: ''
             });
 
             // setServerError(null);

use/src/axiosWithAuth/axiosWithAuth.js

@@ -0,0 +1,14 @@
+import axios from "axios";
+
+const axiosWithAuth = () => {
+    const token = localStorage.getItem('token');
+
+    return axios.create({
+        baseURL: "https://usemy-techstuff.herokuapp.com/api",
+        headers: {
+            Authorization: token
+        }
+    });
+};
+
+export default axiosWithAuth;