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

Add Home

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

20184
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

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

4
src/App.js
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'; import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Nav from './components/Nav'; import Nav from './components/Nav';
import Signin from './components/auth/Signin'; import Signin from './components/auth/Signin';
@ -8,6 +8,7 @@ import Pool from './components/Pool';
import Profile from './components/Profile'; import Profile from './components/Profile';
import CreatePool from './components/CreatePool'; import CreatePool from './components/CreatePool';
import UpdatePool from './components/UpdatePool'; import UpdatePool from './components/UpdatePool';
import Home from './components/Home';
import Main from './components/Main'; 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';
@ -20,6 +21,7 @@ function App() {
<BrowserRouter> <BrowserRouter>
<Nav /> <Nav />
<Switch> <Switch>
<Route component={Home} path="/" />
<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" />

2
src/components/CreatePool.js
View File

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

138
src/components/ProtectedRoute.js
View File

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

12
src/components/UpdatePool.js
View File

@ -1,8 +1,8 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, useCallback } 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 [pool, setPool] = useState({
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',
@ -18,15 +18,15 @@ const UpdatePool = (props) => {
}, },
}; };
const callAPI = () => { const callAPI = useCallback(() => {
fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`, requestOptions) fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`, requestOptions)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
if (data !== undefined) { if (data !== undefined) {
setState(data); setPool(data);
} }
}); });
}; }, [id, requestOptions]);
const onSubmit = (e) => { const onSubmit = (e) => {
e.preventDefault(); e.preventDefault();
const requestOptions = { const requestOptions = {
@ -45,7 +45,7 @@ const UpdatePool = (props) => {
}; };
useEffect(() => { useEffect(() => {
callAPI(); callAPI();
}, []); }, [callAPI]);
return ( return (
<div <div
className="bg-dark" className="bg-dark"