feat: setup initial routing

2 files changed, 67 insertions, 15 deletions

diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
index 56d7372..62b6b61 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { useMediaQuery } from '@material-ui/core';
 import { SnackbarProvider } from 'notistack';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
 import ProfilePage from './ProfilePage/ProfilePage';
 import FeedPage from './FeedPage/FeedPage';
@@ -9,6 +10,7 @@ import AuthPage from './AuthPage/AuthPage';
 import HomePage from './HomePage/HomePage';
 import NotificationsPage from './NotificationsPage/NotificationsPage';
 import { useNavigate } from '../hooks/useNavigate';
+import PrivateRoute from './PrivateRoute';
 
 
 const useStyles = makeStyles(theme => ({
@@ -22,6 +24,16 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
+
+const urls = {
+  home: '/',
+  login: '/login',
+  registration: '/registration',
+  profile: '/profile',
+  feed: '/feed',
+  notifications: '/notifications'
+};
+
 const Page: React.FC = () => {
   const { page } = useNavigate();
   const classes = useStyles();
@@ -29,21 +41,25 @@ const Page: React.FC = () => {
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   return (
-    <SnackbarProvider
-      maxSnack={3}
-      anchorOrigin={{
-        vertical: isMobile ? 'top' : 'bottom',
-        horizontal: 'right'
-      }}
-    >
-      <div className={classes.root}>
-        { page.prefix === 'home' && <HomePage />}
-        { page.prefix === 'profile' && <ProfilePage />}
-        { page.prefix === 'feed' && <FeedPage /> }
-        { page.prefix === 'auth' && <AuthPage /> }
-        { page.prefix === 'notifications' && <NotificationsPage /> }
-      </div>
-    </SnackbarProvider>
+    <BrowserRouter>
+      <SnackbarProvider
+        maxSnack={3}
+        anchorOrigin={{
+          vertical: isMobile ? 'top' : 'bottom',
+          horizontal: 'right'
+        }}
+      >
+        <div className={classes.root}>
+          <Switch>
+            <PrivateRoute exact path={urls.home} component={HomePage} />
+            <PrivateRoute exact path={urls.login} component={AuthPage} />
+            <PrivateRoute exact path={urls.registration} component={AuthPage} />
+            <PrivateRoute exact path={urls.feed} component={FeedPage} />
+            <PrivateRoute exact path={urls.notifications} component={NotificationsPage} />
+          </Switch>
+        </div>
+      </SnackbarProvider>
+    </BrowserRouter>
   );
 };
 
diff --git a/src/pages/PrivateRoute.tsx b/src/pages/PrivateRoute.tsx
new file mode 100644
index 0000000..cdee67b
--- /dev/null
+++ b/src/pages/PrivateRoute.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import { useAuth } from '../hooks/useAuth';
+
+const urls = {
+  home: '/',
+  login: '/login',
+  registration: '/registration',
+  profile: '/profile',
+  feed: '/feed',
+  notifications: '/notifications'
+};
+
+const PrivateRoute: React.FC<any> = ({ component: ProtectedComponent, ...rest }) => {
+  const { isAuthenticated } = useAuth();
+
+  const getComponent: React.FC<any> = (props) => {
+    if (props.match.path === urls.login || props.match.path === urls.registration) {
+      return isAuthenticated() ? (
+        <Redirect to={urls.profile} />
+      ) : (
+        <ProtectedComponent {...props} />
+      );
+    }
+
+    return isAuthenticated() ? (
+      <ProtectedComponent {...props} />
+    ) : (
+      <Redirect to={{ pathname: urls.login, state: { from: props.location } }} />
+    );
+  }
+
+  return <Route {...rest} render={getComponent} />;
+};
+
+export default PrivateRoute;