From b124be4d5067570a8f5db4813d45e1bf49d95f56 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 7 Aug 2020 22:53:53 +0300
Subject: feat: support routing in Header

---
 src/components/Header/Header.tsx | 19 +++++++++++--------
 src/index.tsx                    |  5 +++--
 src/pages/Page.tsx               | 40 +++++++++++++++++++---------------------
 src/pages/urls.ts                |  2 +-
 4 files changed, 34 insertions(+), 32 deletions(-)

(limited to 'src')

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 41aeec7..ef5f9fb 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import {
   AppBar,
   Toolbar,
@@ -11,10 +12,11 @@ import { makeStyles, useTheme } from '@material-ui/core/styles';
 import AccountCircle from '@material-ui/icons/AccountCircle';
 import NotificationsIcon from '@material-ui/icons/Notifications';
 import HomeIcon from '@material-ui/icons/Home';
-import { useAuth } from '../../hooks/useAuth';
-import { useNavigate } from '../../hooks/useNavigate';
 
+import { useAuth } from '../../hooks/useAuth';
 import SearchBar from './SearchBar';
+import urls from '../../pages/urls';
+
 
 const useStyles = makeStyles(theme => ({
   mobile: {
@@ -40,28 +42,29 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
+
 const Header: React.FC = () => {
   const classes = useStyles();
   const { user } = useAuth();
-  const { navigate } = useNavigate();
   const theme = useTheme();
+  const history = useHistory();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   const handleHome = (): void => {
-    navigate('home');
+    history.push(urls.home);
   };
 
   const handleFeed = (): void => {
-    navigate('feed');
+    history.push(urls.feed)
   };
 
   const handleProfile = (): void => {
-    if (user) navigate('profile');
-    else navigate('auth');
+    if (user) history.push(urls.profile(user.username));
+    else history.push(urls.login);
   };
 
   const handleNotifications = (): void => {
-    navigate('notifications');
+    history.push(urls.notifications);
   };
 
   const FeedButton = (
diff --git a/src/index.tsx b/src/index.tsx
index e8fbce1..16c5fe3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import { CssBaseline } from '@material-ui/core';
+import { BrowserRouter } from 'react-router-dom';
 import teal from '@material-ui/core/colors/teal';
 import 'typeface-roboto';
 
@@ -23,7 +24,7 @@ const theme = createMuiTheme({
 
 const App: React.FC = () => {
   return (
-    <NavigationProvider>
+    <BrowserRouter>
       <AuthProvider>
         <ThemeProvider theme={theme}>
           <CssBaseline />
@@ -32,7 +33,7 @@ const App: React.FC = () => {
           <ScrollTopArrow />
         </ThemeProvider>
       </AuthProvider>
-    </NavigationProvider>
+    </BrowserRouter>
   );
 };
 
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
index 47f5f50..f5c975c 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -2,7 +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 } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
 
 import ProfilePage from './ProfilePage/ProfilePage';
 import FeedPage from './FeedPage/FeedPage';
@@ -32,26 +32,24 @@ const Page: React.FC = () => {
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   return (
-    <BrowserRouter>
-      <SnackbarProvider
-        maxSnack={3}
-        anchorOrigin={{
-          vertical: isMobile ? 'top' : 'bottom',
-          horizontal: 'right'
-        }}
-      >
-        <div className={classes.root}>
-          <Switch>
-            <Route exact path={urls.home} component={HomePage} />
-            <Route exact path={urls.login} component={LoginPage} />
-            <Route exact path={urls.registration} component={RegistrationPage} />
-            <Route exact path={urls.feed} component={FeedPage} />
-            <Route exact path={urls.notifications} component={NotificationsPage} />
-            <Route path={urls.profile} component={ProfilePage} />
-          </Switch>
-        </div>
-      </SnackbarProvider>
-    </BrowserRouter>
+    <SnackbarProvider
+      maxSnack={3}
+      anchorOrigin={{
+        vertical: isMobile ? 'top' : 'bottom',
+        horizontal: 'right'
+      }}
+    >
+      <div className={classes.root}>
+        <Switch>
+          <Route exact path={urls.home} component={HomePage} />
+          <Route exact path={urls.login} component={LoginPage} />
+          <Route exact path={urls.registration} component={RegistrationPage} />
+          <Route exact path={urls.feed} component={FeedPage} />
+          <Route exact path={urls.notifications} component={NotificationsPage} />
+          <Route path={urls.profile()} component={ProfilePage} />
+        </Switch>
+      </div>
+    </SnackbarProvider>
   );
 };
 
diff --git a/src/pages/urls.ts b/src/pages/urls.ts
index 3a05f39..e10edac 100644
--- a/src/pages/urls.ts
+++ b/src/pages/urls.ts
@@ -2,7 +2,7 @@ export default {
   home: '/',
   login: '/login',
   registration: '/registration',
-  profile: '/profile',
+  profile: (username: string = '') => `/profile/${username.toLowerCase()}`,
   feed: '/feed',
   notifications: '/notifications'
 };
-- 
cgit v1.2.3