diff --git a/src/App.tsx b/src/App.tsx index 9d9a8cf2fb268834f1755ec0703b0b474d02b9fc..0a7b221e86417816a42e8a0da01c47456ad858d1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,14 +3,16 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import { HomePage } from 'components/HomePage/HomePage'; import { AuthUser } from 'components/AuthUser/AuthUser'; import { LandingPage } from 'components/LandingPage/LandingPage'; +import { PrivateRoute } from 'components/api/PrivateRoute/PrivateRoute'; +import { AuthRoutes, NonAuthRoutes } from 'components/api/routes'; export const App: FC = () => ( <Router> <div data-testid="App"> <Switch> - <Route path="/auth" component={AuthUser} /> - <Route exact path="/" component={LandingPage} /> - <Route exact path="/home" component={HomePage} /> + <Route path={NonAuthRoutes.login} component={AuthUser} /> + <Route exact path={NonAuthRoutes.home} component={LandingPage} /> + <PrivateRoute path={AuthRoutes.dashboard} Component={HomePage} /> </Switch> </div> </Router> diff --git a/src/components/LandingPage/LandingPage.tsx b/src/components/LandingPage/LandingPage.tsx index 01cd0fe5da4c0a187e8f8e8e12fa68afe43bb75a..df5cc0b53af919c30d511576ac898abbd1b50ce6 100644 --- a/src/components/LandingPage/LandingPage.tsx +++ b/src/components/LandingPage/LandingPage.tsx @@ -1,11 +1,12 @@ import React, { FC } from 'react'; import Button from '@material-ui/core/Button'; import { Link } from 'react-router-dom'; +import { NonAuthRoutes } from 'components/api/routes'; export const LandingPage: FC = () => ( <> <Button variant="contained"> - <Link to="/auth">Login</Link> + <Link to={NonAuthRoutes.login}>Login</Link> </Button> <section> <h2>What is MoveAid?</h2> diff --git a/src/components/api/PrivateRoute/PrivateRoute.tsx b/src/components/api/PrivateRoute/PrivateRoute.tsx new file mode 100644 index 0000000000000000000000000000000000000000..89c5962bfc29c5d79a961e6b47f555fae77c7aa3 --- /dev/null +++ b/src/components/api/PrivateRoute/PrivateRoute.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { Route, Redirect, RouteProps } from 'react-router-dom'; +import { NonAuthRoutes } from 'components/api/routes'; + +/** + * A wrapper for <Route> that redirects to the login screen if you're not yet authenticated. + * */ + +type Props = { + Component: React.FC<RouteProps>; + path: string; +}; + +/* eslint-disable react/jsx-props-no-spreading */ +export const PrivateRoute = ({ Component, path }: Props): JSX.Element => { + const isAuthed = false; + const message = 'Please log in to view this page'; + return ( + <Route + exact={false} + path={path} + render={(props: RouteProps) => + isAuthed ? ( + <Component {...props} /> + ) : ( + <Redirect + to={{ + pathname: NonAuthRoutes.login, + state: { + message, + requestedPath: path, + }, + }} + /> + ) + } + /> + ); +}; diff --git a/src/components/api/routes.ts b/src/components/api/routes.ts new file mode 100644 index 0000000000000000000000000000000000000000..52ee5982734df8730522c6ee2199b15419da4e74 --- /dev/null +++ b/src/components/api/routes.ts @@ -0,0 +1,10 @@ +export enum AuthRoutes { + dashboard = '/dashboard', + account = '/account', +} + +export enum NonAuthRoutes { + home = '/', + login = '/login', + unauthorized = '/unauthorized', +}