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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { HashRouter, Switch, Route, Redirect } from 'react-router-dom'
import PropTypes from 'prop-types'
import CircularProgress from '@material-ui/core/CircularProgress'
import Navbar from './components/Shared/Navbar'
import Dashboard from './pages/Dashboard'
import Gallery from './pages/Gallery'
import Home from './pages/Home'
import Login from './pages/Login'
import NotFound from './pages/NotFound'
import SchematicEditor from './pages/SchematicEditor'
import SignUp from './pages/signUp'
import { loadUser } from './redux/authSlice'
// Controls Private routes, this are accessible for authenticated users. [ e.g : dashboard ]
// and restricted routes disabled for authenticated users. [ e.g : login , signup ]
const PrivateRoute = ({ component: Component, ...rest }) => {
const isAuthenticated = useSelector(state => state.auth.isAuthenticated)
const isLoading = useSelector(state => state.auth.isLoading)
const dispatch = useDispatch()
useEffect(() => {
dispatch(loadUser())
}, [dispatch])
return (
<Route
{...rest} render={props => {
if (isLoading) {
return <CircularProgress style={{ margin: '50vh 50vw' }} />
} else if (!isAuthenticated) {
return <Redirect to='/login' />
} else {
return <Component {...props} />
}
}}
/>
)
}
PrivateRoute.propTypes = {
component: PropTypes.func
}
// Public routes accessible to all users. [ e.g. editor, gallery ]
const PublicRoute = ({ component: Component, restricted, nav, ...rest }) => {
const isAuthenticated = useSelector(state => state.auth.isAuthenticated)
const isLoading = useSelector(state => state.auth.isLoading)
const dispatch = useDispatch()
useEffect(() => {
dispatch(loadUser())
}, [dispatch])
return (
<Route
{...rest} render={props => {
if (isLoading) {
return <CircularProgress style={{ margin: '50vh 50vw' }} />
} else if (isAuthenticated && restricted) {
return <Redirect to='/dashboard' />
} else if (nav) {
return (<><Navbar /><Component {...props} /></>)
} else {
return <Component {...props} />
}
}}
/>
)
}
PublicRoute.propTypes = {
component: PropTypes.func,
nav: PropTypes.bool,
restricted: PropTypes.bool
}
const App = () => {
return (
// Handles Routing for an application
<HashRouter>
<Switch>
<PublicRoute exact path='/login' restricted nav={false} component={Login} />
<PublicRoute exact path='/signup' restricted nav={false} component={SignUp} />
<PublicRoute exact path='/' restricted={false} nav component={Home} />
{localStorage.getItem(process.env.REACT_APP_NAME + '_token') !== null
? <PublicRoute exact path='/editor' restricted={false} nav={false} component={SchematicEditor} />
: <Route path='/editor' component={SchematicEditor} />}
<PublicRoute exact path='/gallery' restricted={false} nav component={Gallery} />
<PrivateRoute path='/dashboard' component={Dashboard} />
<PublicRoute restricted={false} nav component={NotFound} />
</Switch>
</HashRouter>
)
}
export default App
|
