mirror of
https://github.com/myfatemi04/wheelshare-frontend.git
synced 2025-04-21 11:20:17 -04:00
Add Home
This commit is contained in:
parent
8d67ec2b49
commit
25cb69e979
20184
package-lock.json
generated
20184
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
@ -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": {}
|
||||
}
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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
21
src/components/Home.js
Normal 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>
|
||||
);
|
||||
}
|
|
@ -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,
|
||||
},
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue
Block a user