From b124be4d5067570a8f5db4813d45e1bf49d95f56 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 7 Aug 2020 22:53:53 +0300 Subject: feat: support routing in Header --- src/components/Header/Header.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) (limited to 'src/components/Header') 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 = ( -- cgit v1.2.3 From cc1133ff817218f80476d91ec509c5eaa6be86e6 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 8 Aug 2020 09:11:28 +0300 Subject: feat: support routing in SearchBar --- src/components/Header/SearchBar.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'src/components/Header') diff --git a/src/components/Header/SearchBar.tsx b/src/components/Header/SearchBar.tsx index ba0943b..f54cf25 100644 --- a/src/components/Header/SearchBar.tsx +++ b/src/components/Header/SearchBar.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { useHistory } from 'react-router-dom'; import SearchIcon from '@material-ui/icons/Search'; import { InputBase, @@ -10,9 +11,10 @@ import { } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import { User } from 'which-types'; + import { get } from '../../requests'; import UserStrip from '../UserStrip/UserStrip'; -import { useNavigate } from '../../hooks/useNavigate'; +import urls from '../../pages/urls'; const INTERVAL = 300; @@ -41,7 +43,7 @@ const SearchBar: React.FC = () => { const [results, setResults] = useState([]); const [query, setQuery] = useState(''); const [debouncedQuery, setDebouncedQuery] = useState(query); - const { navigate } = useNavigate(); + const history = useHistory(); const classes = useStyles(); useEffect(() => { @@ -69,7 +71,8 @@ const SearchBar: React.FC = () => { }; const handleNavigate = (index: number) => () => { - navigate('profile', results[index]._id); + const { username } = results[index]; + history.push(urls.profile(username)); handleClose(); }; -- cgit v1.2.3 From 10e146ef0215d41527f0466b0e139a6805b96540 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 8 Aug 2020 09:33:45 +0300 Subject: refactor: remove urls file --- src/components/Header/Header.tsx | 11 +++++------ src/components/Header/SearchBar.tsx | 4 +--- 2 files changed, 6 insertions(+), 9 deletions(-) (limited to 'src/components/Header') diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index ef5f9fb..9c42c31 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -15,7 +15,6 @@ import HomeIcon from '@material-ui/icons/Home'; import { useAuth } from '../../hooks/useAuth'; import SearchBar from './SearchBar'; -import urls from '../../pages/urls'; const useStyles = makeStyles(theme => ({ @@ -51,20 +50,20 @@ const Header: React.FC = () => { const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const handleHome = (): void => { - history.push(urls.home); + history.push('/'); }; const handleFeed = (): void => { - history.push(urls.feed) + history.push('/feed') }; const handleProfile = (): void => { - if (user) history.push(urls.profile(user.username)); - else history.push(urls.login); + if (user) history.push(`/profile/${user.username}`); + else history.push('/login'); }; const handleNotifications = (): void => { - history.push(urls.notifications); + history.push('/notifications'); }; const FeedButton = ( diff --git a/src/components/Header/SearchBar.tsx b/src/components/Header/SearchBar.tsx index f54cf25..f541589 100644 --- a/src/components/Header/SearchBar.tsx +++ b/src/components/Header/SearchBar.tsx @@ -14,8 +14,6 @@ import { User } from 'which-types'; import { get } from '../../requests'; import UserStrip from '../UserStrip/UserStrip'; -import urls from '../../pages/urls'; - const INTERVAL = 300; const LIMIT = 7; @@ -72,7 +70,7 @@ const SearchBar: React.FC = () => { const handleNavigate = (index: number) => () => { const { username } = results[index]; - history.push(urls.profile(username)); + history.push(`/profile/${username}`); handleClose(); }; -- cgit v1.2.3 From b446a83ff24ed5ea2233c544446557ee29f44364 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 8 Aug 2020 09:49:38 +0300 Subject: refactor: use native Route component --- src/components/Header/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/Header') diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 9c42c31..5aa66ba 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -54,7 +54,7 @@ const Header: React.FC = () => { }; const handleFeed = (): void => { - history.push('/feed') + history.push('/feed'); }; const handleProfile = (): void => { -- cgit v1.2.3