This commit is contained in:
Michael Fatemi 2021-04-10 13:02:39 -04:00
parent 8d67ec2b49
commit 25cb69e979
7 changed files with 169 additions and 20198 deletions

20184
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -6,7 +6,10 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/bootstrap": "^5.0.12",
"bootstrap": "^4.6.0",
"jquery": "^3.6.0",
"popper.js": "^1.16.1",
"react": "^17.0.2",
"react-bootstrap": "^1.5.2",
"react-dom": "^17.0.2",
@ -37,5 +40,6 @@
"last 1 firefox version",
"last 1 safari version"
]
}
},
"devDependencies": {}
}

View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Nav from './components/Nav';
import Signin from './components/auth/Signin';
@ -8,6 +8,7 @@ import Pool from './components/Pool';
import Profile from './components/Profile';
import CreatePool from './components/CreatePool';
import UpdatePool from './components/UpdatePool';
import Home from './components/Home';
import Main from './components/Main';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
@ -20,6 +21,7 @@ function App() {
<BrowserRouter>
<Nav />
<Switch>
<Route component={Home} path="/" />
<Route component={Signup} path="/register" />
<Route component={Signin} path="/login" />
<Route component={Main} path="/about" />

View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React from 'react';
const CreatePool = (props) => {
const onSubmit = (e) => {

21
src/components/Home.js Normal file
View File

@ -0,0 +1,21 @@
export default function Home() {
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<h1>Home</h1>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<a href="/signin" className="mx-2">
Sign In
</a>
<a href="/signup" className="mx-2">
Sign Up
</a>
</div>
</div>
);
}

View File

@ -1,12 +1,12 @@
import React from "react";
import { Route, Redirect } from "react-router-dom";
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
const ProtectedRoute = ({ component: Component, ...rest }) => {
const isAuthenticated = async () => {
try {
const requestOptions = {
method: "GET",
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
method: 'GET',
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
};
const response = await fetch(
`${process.env.REACT_APP_API_ENDPOINT}/profile`,
@ -18,11 +18,11 @@ const ProtectedRoute = ({ component: Component, ...rest }) => {
return true;
} else {
const requestOptions = {
method: "POST",
method: 'POST',
headers: {
"Content-Type": "application/json",
'Content-Type': 'application/json',
},
body: { refresh: localStorage.getItem("refresh") },
body: { refresh: localStorage.getItem('refresh') },
};
const response = await fetch(
`${process.env.REACT_APP_API_ENDPOINT}/token/refresh/`,
@ -31,17 +31,17 @@ const ProtectedRoute = ({ component: Component, ...rest }) => {
const data = response.json();
localStorage.setItem("token", data.access);
localStorage.setItem('token', data.access);
return false;
}
} catch (e) {
const requestOptions = {
method: "POST",
method: 'POST',
headers: {
"Content-Type": "application/json",
'Content-Type': 'application/json',
},
body: { refresh: localStorage.getItem("refresh") },
body: { refresh: localStorage.getItem('refresh') },
};
const response = await fetch(
`${process.env.REACT_APP_API_ENDPOINT}/token/refresh/`,
@ -50,7 +50,7 @@ const ProtectedRoute = ({ component: Component, ...rest }) => {
const data = response.json();
localStorage.setItem("token", data.access);
localStorage.setItem('token', data.access);
return false;
}
@ -66,7 +66,7 @@ const ProtectedRoute = ({ component: Component, ...rest }) => {
return (
<Redirect
to={{
pathname: "/login",
pathname: '/login',
state: {
from: props.location,
},

View File

@ -1,8 +1,8 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
const UpdatePool = (props) => {
const id = props.match.params.id;
const [state, setState] = useState({
const [pool, setPool] = useState({
pool_title: 'TJ Carpool',
pool_text: 'Carpool from TJ track to homes',
start_time: '4/10/2021 3:00 PM',
@ -18,15 +18,15 @@ const UpdatePool = (props) => {
},
};
const callAPI = () => {
const callAPI = useCallback(() => {
fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`, requestOptions)
.then((response) => response.json())
.then((data) => {
if (data !== undefined) {
setState(data);
setPool(data);
}
});
};
}, [id, requestOptions]);
const onSubmit = (e) => {
e.preventDefault();
const requestOptions = {
@ -45,7 +45,7 @@ const UpdatePool = (props) => {
};
useEffect(() => {
callAPI();
}, []);
}, [callAPI]);
return (
<div
className="bg-dark"