feat: configure navigation

3 files changed, 23 insertions, 10 deletions

diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx
index 8dc3ec1..3b8e16f 100644
--- a/src/components/Feed/Feed.tsx
+++ b/src/components/Feed/Feed.tsx
@@ -5,6 +5,7 @@ import PollCard from '../PollCard/PollCard';
 
 interface PropTypes {
   polls: Poll[];
+  navigate: (prefix: string, id: string) => void;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -15,12 +16,12 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const Feed: React.FC<PropTypes> = ({ polls }) => {
+const Feed: React.FC<PropTypes> = ({ polls, navigate }) => {
   const classes = useStyles();
 
   return (
     <div className={classes.root}>
-      {polls.map(poll => <PollCard poll={poll} key={poll._id} />)}
+      {polls.map(poll => <PollCard poll={poll} key={poll._id} navigate={navigate} />)}
     </div>
   );
 };
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 0ee6b5f..4e25fa3 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -13,7 +13,7 @@ import HomeIcon from '@material-ui/icons/Home';
 import SearchBar from './SearchBar';
 
 interface PropTypes {
-  setPage: (newPage: string) => void;
+  navigate: (prefix: string) => void;
 }
 
 const useStyles = makeStyles({
@@ -28,15 +28,15 @@ const useStyles = makeStyles({
   }
 });
 
-const Header: React.FC<PropTypes> = ({ setPage }) => {
+const Header: React.FC<PropTypes> = ({ navigate }) => {
   const classes = useStyles();
 
   const handleHome = (): void => {
-    setPage('feed');
+    navigate('feed');
   };
 
   const handleProfile = (): void => {
-    setPage('profile');
+    navigate('profile');
   };
 
   const handleNotifications = (): void => {};
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index d5c99cc..7f587f3 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -5,13 +5,15 @@ import {
   CardActionArea,
   CardMedia,
   Avatar,
-  CardHeader
+  CardHeader,
+Link
 } from '@material-ui/core/';
 import { Poll } from '../../types';
 import PercentageBar from './PercentageBar';
 
 interface PropTypes {
   poll: Poll;
+  navigate: (prefix: string, id: string) => void;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -30,19 +32,29 @@ const useStyles = makeStyles(theme => ({
 }));
 
 
-const PollCard: React.FC<PropTypes> = ({ poll }) => {
+const PollCard: React.FC<PropTypes> = ({ poll, navigate }) => {
   const classes = useStyles();
   const { author, contents } = poll;
 
+  const handleNavigate = () => {
+    navigate('profile', poll.author._id);
+  };
+
   const leftPercentage = Math.round(100 * (contents.left.votes / (contents.left.votes + contents.right.votes)));
   const rightPercentage = 100 - leftPercentage;
 
-
   return (
     <Card className={classes.root}>
       <CardHeader
         avatar={(
-          <Avatar aria-label="avatar" src={author.avatarUrl} alt={author.name[0].toUpperCase()} />
+          <Link href="#">
+            <Avatar
+              aria-label="avatar"
+              src={author.avatarUrl}
+              alt={author.name[0].toUpperCase()}
+              onClick={handleNavigate}
+            />
+          </Link>
         )}
         title={author.name}
       />