From 1499c0126d1a7a2377b0267b761479100c636ee9 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Tue, 30 Jun 2020 00:41:09 +0300
Subject: feat!: create useNavigate hook

---
 src/components/Feed/Feed.tsx           |  5 ++---
 src/components/Header/Header.tsx       | 10 ++++------
 src/components/Header/SearchBar.tsx    |  9 ++++-----
 src/components/PollCard/PollCard.tsx   |  5 ++---
 src/components/UserStrip/UserStrip.tsx | 16 +++++-----------
 5 files changed, 17 insertions(+), 28 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx
index 0c4d84f..7636573 100644
--- a/src/components/Feed/Feed.tsx
+++ b/src/components/Feed/Feed.tsx
@@ -5,7 +5,6 @@ import PollCard from '../PollCard/PollCard';
 
 interface PropTypes {
   polls: Poll[];
-  navigate: (prefix: string, id: string) => void;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -16,11 +15,11 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const Feed: React.FC<PropTypes> = ({ polls, navigate }) => {
+const Feed: React.FC<PropTypes> = ({ polls }) => {
   const classes = useStyles();
   return (
     <div className={classes.root}>
-      {polls.map(poll => <PollCard initialPoll={poll} key={poll._id} navigate={navigate} />)}
+      {polls.map(poll => <PollCard initialPoll={poll} key={poll._id} />)}
     </div>
   );
 };
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 49f427f..546ecc3 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -10,13 +10,10 @@ 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 {
-  navigate: (prefix: string) => void;
-}
-
 const useStyles = makeStyles({
   root: {
     display: 'flex',
@@ -33,9 +30,10 @@ const useStyles = makeStyles({
   }
 });
 
-const Header: React.FC<PropTypes> = ({ navigate }) => {
+const Header: React.FC = () => {
   const classes = useStyles();
   const { user } = useAuth();
+  const { navigate } = useNavigate();
 
   const handleHome = (): void => {
     navigate('feed');
@@ -53,7 +51,7 @@ const Header: React.FC<PropTypes> = ({ navigate }) => {
         <Typography variant="h5" className={classes.logo}>
           Which
         </Typography>
-        <SearchBar navigate={navigate} />
+        <SearchBar />
         <div>
           <IconButton onClick={handleHome}>
             <HomeIcon />
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>
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 156315a..2a23522 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -13,7 +13,6 @@ import { post } from '../../requests';
 
 interface PropTypes {
   initialPoll: Poll;
-  navigate: (prefix: string, id: string) => void;
 }
 
 const DATE_FORMAT = {
@@ -54,7 +53,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => {
+const PollCard: React.FC<PropTypes> = ({ initialPoll }) => {
   const [poll, setPoll] = useState<Poll>(initialPoll);
   const classes = useStyles();
   const { author, contents: { left, right }, vote } = poll;
@@ -87,7 +86,7 @@ const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => {
 
   return (
     <Card className={classes.root}>
-      <UserStrip user={author} info={date} navigate={navigate} />
+      <UserStrip user={author} info={date} />
       <div className={classes.imagesBlock}>
         <CardActionArea onDoubleClick={handleLeft}>
           <CardMedia
diff --git a/src/components/UserStrip/UserStrip.tsx b/src/components/UserStrip/UserStrip.tsx
index f02adc3..bbd595e 100644
--- a/src/components/UserStrip/UserStrip.tsx
+++ b/src/components/UserStrip/UserStrip.tsx
@@ -1,16 +1,13 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import VerifiedIcon from '@material-ui/icons/CheckCircleOutline';
-import {
-  Avatar,
-  CardHeader
-} from '@material-ui/core/';
+import { Avatar, CardHeader } from '@material-ui/core/';
 import { User } from 'which-types';
+import { useNavigate } from '../../hooks/useNavigate';
 
 
 interface PropTypes {
   user: User;
-  navigate: (prefix: string, id: string) => void;
   info?: string | JSX.Element
 }
 
@@ -31,13 +28,10 @@ const useStyles = makeStyles(theme => ({
 }));
 
 
-const UserStrip: React.FC<PropTypes> = ({ user, info, navigate }) => {
+const UserStrip: React.FC<PropTypes> = ({ user, info }) => {
   const classes = useStyles();
-  const {
-    username,
-    avatarUrl,
-    verified
-  } = user;
+  const { navigate } = useNavigate(); 
+  const { username, avatarUrl, verified } = user;
 
   const handleNavigate = () => {
     navigate('profile', user._id);
-- 
cgit v1.2.3