deleted protected routes

This commit is contained in:
Joshua Hsueh 2021-04-10 12:52:03 -04:00
parent 8d67ec2b49
commit 4598a26121
7 changed files with 17 additions and 149 deletions

View File

@ -12,7 +12,6 @@ import Main from './components/Main';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import './App.css';
import ProtectedRoute from './components/ProtectedRoute.js';
function App() {
return (
@ -23,11 +22,11 @@ function App() {
<Route component={Signup} path="/register" />
<Route component={Signin} path="/login" />
<Route component={Main} path="/about" />
<ProtectedRoute component={CreatePool} path="/create_pool" />
<ProtectedRoute component={UpdatePool} path="/update_pool" />
<ProtectedRoute component={Pools} path="/pools" />
<ProtectedRoute component={Pool} path="/pool/:id" />
<ProtectedRoute component={Profile} path="/profile" />
<Route component={CreatePool} path="/create_pool" />
<Route component={UpdatePool} path="/update_pool" />
<Route component={Pools} path="/pools" />
<Route component={Pool} path="/pool/:id" />
<Route component={Profile} path="/profile" />
</Switch>
</BrowserRouter>
</div>

View File

@ -3,15 +3,8 @@ import React, { useState, useEffect } from 'react';
const CreatePool = (props) => {
const onSubmit = (e) => {
e.preventDefault();
const requestOptions = {
method: 'Pool',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
body: JSON.stringify({ Poolid: props.id }),
};
fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`, requestOptions)
fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`)
.then((response) => response.json())
.then((data) => {
console.log(data);

View File

@ -13,15 +13,8 @@ const Pool = (props) => {
comments: ['What is the covid vaccination status of all the participants?'],
});
const requestOptions = {
method: 'GET',
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
};
const callAPI = () => {
fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`, requestOptions)
fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`)
.then((response) => response.json())
.then((data) => {
if (data !== undefined) {
@ -31,15 +24,8 @@ const Pool = (props) => {
};
const onComment = (e) => {
e.preventDefault();
const requestOptions = {
method: 'pool',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
body: JSON.stringify({ poolid: props.id }),
};
fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/comments`, requestOptions)
fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/comments`)
.then((response) => response.json())
.then((data) => {
console.log(data);

View File

@ -54,15 +54,8 @@ const Pools = (props) => {
],
});
const requestOptions = {
method: 'GET',
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
};
const callAPI = () => {
fetch(`${process.env.REACT_APP_API_ENDPOINT}/Pools/`, requestOptions)
fetch(`${process.env.REACT_APP_API_ENDPOINT}/pools/`)
.then((response) => response.json())
.then((data) => {
if (data !== undefined) {

View File

@ -43,17 +43,9 @@ const Profile = (props) => {
],
groups: [],
});
const [stocks, setStocks] = useState([]);
const requestOptions = {
method: 'GET',
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
};
const callAPI = () => {
fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile/`, requestOptions)
fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile/`)
.then((response) => response.json())
.then((data) => {
if (data !== undefined) {

View File

@ -1,82 +0,0 @@
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")}` },
};
const response = await fetch(
`${process.env.REACT_APP_API_ENDPOINT}/profile`,
requestOptions
);
console.log(`Checking status! ${response.status}`);
if (response.status === 200) {
return true;
} else {
const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: { refresh: localStorage.getItem("refresh") },
};
const response = await fetch(
`${process.env.REACT_APP_API_ENDPOINT}/token/refresh/`,
requestOptions
);
const data = response.json();
localStorage.setItem("token", data.access);
return false;
}
} catch (e) {
const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: { refresh: localStorage.getItem("refresh") },
};
const response = await fetch(
`${process.env.REACT_APP_API_ENDPOINT}/token/refresh/`,
requestOptions
);
const data = response.json();
localStorage.setItem("token", data.access);
return false;
}
};
return (
<Route
{...rest}
render={(props) => {
if (isAuthenticated()) {
return <Component {...props} {...rest} />;
} else {
return (
<Redirect
to={{
pathname: "/login",
state: {
from: props.location,
},
}}
/>
);
}
}}
/>
);
};
export default ProtectedRoute;

View File

@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react';
const UpdatePool = (props) => {
const id = props.match.params.id;
const [state, setState] = useState({
id: 1,
pool_title: 'TJ Carpool',
pool_text: 'Carpool from TJ track to homes',
start_time: '4/10/2021 3:00 PM',
@ -11,15 +12,9 @@ const UpdatePool = (props) => {
participants: [],
comments: ['What is the covid vaccination status of all the participants?'],
});
const requestOptions = {
method: 'GET',
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
};
const callAPI = () => {
fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`, requestOptions)
fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`)
.then((response) => response.json())
.then((data) => {
if (data !== undefined) {
@ -29,15 +24,7 @@ const UpdatePool = (props) => {
};
const onSubmit = (e) => {
e.preventDefault();
const requestOptions = {
method: 'Pool',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
body: JSON.stringify({ Poolid: props.id }),
};
fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`, requestOptions)
fetch(`${process.env.REACT_APP_API_ENDPOINT}/create_pool`)
.then((response) => response.json())
.then((data) => {
console.log(data);
@ -58,7 +45,7 @@ const UpdatePool = (props) => {
<form onSubmit={onSubmit}>
<div className="form-group">
<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
Create Pool
Update Pool
</h1>
<label className="" for="title">
Pool Title:{' '}
@ -124,7 +111,7 @@ const UpdatePool = (props) => {
<input
className="btn btn-success text-left"
type="submit"
value="Submit"
value="Update"
/>
<br />
</form>