Merge pull request #54 from which-ecosystem/hooks

Use hooks logic

2 files changed, 14 insertions, 15 deletions

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index d0d9081..72e40f8 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -9,14 +9,11 @@ import { makeStyles } 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 SearchBar from './SearchBar';
 
-interface PropTypes {
-  userImage: string | undefined;
-  navigate: (prefix: string) => void;
-}
-
 const useStyles = makeStyles({
   root: {
     display: 'flex',
@@ -33,15 +30,18 @@ const useStyles = makeStyles({
   }
 });
 
-const Header: React.FC<PropTypes> = ({ navigate, userImage }) => {
+const Header: React.FC = () => {
   const classes = useStyles();
+  const { user } = useAuth();
+  const { navigate } = useNavigate();
 
   const handleHome = (): void => {
     navigate('feed');
   };
 
   const handleProfile = (): void => {
-    navigate('profile');
+    if (user) navigate('profile');
+    else navigate('auth');
   };
 
   const handleNotifications = (): void => {};
@@ -52,7 +52,7 @@ const Header: React.FC<PropTypes> = ({ navigate, userImage }) => {
         <Typography variant="h5" className={classes.logo}>
           Which
         </Typography>
-        <SearchBar navigate={navigate} />
+        <SearchBar />
         <div>
           <IconButton onClick={handleHome}>
             <HomeIcon />
@@ -62,8 +62,8 @@ const Header: React.FC<PropTypes> = ({ navigate, userImage }) => {
           </IconButton>
           <IconButton onClick={handleProfile}>
             {
-              userImage?.match(/\.(jpeg|jpg|gif|png)$/)
-                ? <Avatar className={classes.avatar} src={userImage} />
+              user?.avatarUrl?.match(/\.(jpeg|jpg|gif|png)$/)
+                ? <Avatar className={classes.avatar} src={user?.avatarUrl} />
                 : <AccountCircle />
             }
           </IconButton>
diff --git a/src/components/Header/SearchBar.tsx b/src/components/Header/SearchBar.tsx
index bff16a0..253e77f 100644
--- a/src/components/Header/SearchBar.tsx
+++ b/src/components/Header/SearchBar.tsx
@@ -12,10 +12,8 @@ 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';
 
-interface PropTypes {
-  navigate: (prefix: string, id: string) => void;
-}
 
 const INTERVAL = 300;
 const LIMIT = 7;
@@ -36,10 +34,11 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const SearchBar: React.FC<PropTypes> = ({ navigate }) => {
+const SearchBar: React.FC = () => {
   const [results, setResults] = useState<User[]>([]);
   const [query, setQuery] = useState<string>('');
   const [debouncedQuery, setDebouncedQuery] = useState<string>(query);
+  const { navigate } = useNavigate();
   const classes = useStyles();
 
   useEffect(() => {
@@ -79,7 +78,7 @@ const SearchBar: React.FC<PropTypes> = ({ navigate }) => {
           results.map((result, index) => (
             <div key={result._id}>
               <ListItem button onClick={handleNavigate(index)}>
-                <UserStrip user={result} navigate={navigate} />
+                <UserStrip user={result} />
               </ListItem>
               {(index < results.length - 1) && <Divider />}
             </div>