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

Merge branch 'main' of https://github.com/myfatemi04/Carpool-Frontend into main

Browse Source
This commit is contained in:
Michael Fatemi 2021-04-10 13:05:47 -04:00
commit 7b544abb07
7 changed files with 19 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.js
View File

@ -13,7 +13,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 (
@ -25,11 +24,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>

11
src/components/CreatePool.js
View File

@ -3,15 +3,8 @@ import React 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);

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?'],
});
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);

11
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 = () => {
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) {
@ -95,7 +88,7 @@ const Pools = (props) => {
<br></br>
{state.Pools.map((Pool, el) => {
let background;
if (el % 2 == 0) {
if (el % 2 === 0) {
background = '#F1EAE8';
} else {
background = '#FFFFFF';

10
src/components/Profile.js
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) {

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;

25
src/components/UpdatePool.js
View File

@ -3,6 +3,7 @@ import React, { useState, useEffect, useCallback } from 'react';
const UpdatePool = (props) => {
const id = props.match.params.id;
const [pool, setPool] = useState({
id: 1,
pool_title: 'TJ Carpool',
pool_text: 'Carpool from TJ track to homes',
start_time: '4/10/2021 3:00 PM',
@ -11,33 +12,19 @@ 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 = useCallback(() => {
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) {
setPool(data);
}
});
}, [id, requestOptions]);
}, [id]);
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>