/
App.js
76 lines (68 loc) · 1.55 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import React from 'react';
import {
BrowserRouter as Router,
Route,
Switch,
Redirect,
useLocation
} from 'react-router-dom';
import './App.css';
import LoginForm from "./LoginForm";
import VerifyTokenForm from "./VerifyTokenForm";
import authService from './AuthService';
import Dashboard from "./Dashboard";
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route exact path="/">
<Login />
</Route>
<Route path="/verify">
<Verify />
</Route>
<IsAuthenticatedRoute path="/dashboard">
<Dashboard />
</IsAuthenticatedRoute>
<Route path="/404">
<NoMatch />
</Route>
<Redirect to="/404" />
</Switch>
</Router>
</div>
);
}
function useQuery() {
return new URLSearchParams(useLocation().search);
}
function Login() {
return <LoginForm />;
}
function Verify() {
const query = useQuery();
const location = useLocation();
const email = query.get('email');
if (!email) {
return <Redirect to={{
pathname: "/",
state: {from: location}
}} />
}
return <VerifyTokenForm email={email}/>;
}
const IsAuthenticatedRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (
authService.isAuthenticated() === true
? <Component {...props} />
: <Redirect to={{
pathname: '/',
state: { from: props.location }
}} />
)} />
);
function NoMatch() {
return <h3>404 Sorry!</h3>;
}
export default App;