rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

deleted protected routes

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.js
View File

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

11
src/components/CreatePool.js
View File

@ -3,15 +3,8 @@ import React, { useState, useEffect } from 'react';
const CreatePool = (props) => { const CreatePool = (props) => {
const onSubmit = (e) => { const onSubmit = (e) => {
e.preventDefault(); e.preventDefault();
const requestOptions = {
method: 'Pool', fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`)
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)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
console.log(data); console.log(data);

20
src/components/Pool.js
View File

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

9
src/components/Pools.js
View File

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

10
src/components/Profile.js
View File

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

82
src/components/ProtectedRoute.js
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;

23
src/components/UpdatePool.js
View File

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