Merge pull request #72 from which-ecosystem/feat/routing

Add basic routing

2 files changed, 15 insertions, 12 deletions

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 41aeec7..5aa66ba 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,11 +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';
 
+
 const useStyles = makeStyles(theme => ({
   mobile: {
     top: 'auto',
@@ -40,28 +41,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('/');
   };
 
   const handleFeed = (): void => {
-    navigate('feed');
+    history.push('/feed');
   };
 
   const handleProfile = (): void => {
-    if (user) navigate('profile');
-    else navigate('auth');
+    if (user) history.push(`/profile/${user.username}`);
+    else history.push('/login');
   };
 
   const handleNotifications = (): void => {
-    navigate('notifications');
+    history.push('/notifications');
   };
 
   const FeedButton = (
diff --git a/src/components/Header/SearchBar.tsx b/src/components/Header/SearchBar.tsx
index ba0943b..f541589 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,10 +11,9 @@ 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';
-
 
 const INTERVAL = 300;
 const LIMIT = 7;
@@ -41,7 +41,7 @@ const SearchBar: React.FC = () => {
   const [results, setResults] = useState<User[]>([]);
   const [query, setQuery] = useState<string>('');
   const [debouncedQuery, setDebouncedQuery] = useState<string>(query);
-  const { navigate } = useNavigate();
+  const history = useHistory();
   const classes = useStyles();
 
   useEffect(() => {
@@ -69,7 +69,8 @@ const SearchBar: React.FC = () => {
   };
 
   const handleNavigate = (index: number) => () => {
-    navigate('profile', results[index]._id);
+    const { username } = results[index];
+    history.push(`/profile/${username}`);
     handleClose();
   };