Merge pull request #36 from ilyayudovin/other-profiles

Profiles

4 files changed, 59 insertions, 40 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/PercentageBar.tsx b/src/components/PollCard/PercentageBar.tsx
new file mode 100644
index 0000000..6a50a9e
--- /dev/null
+++ b/src/components/PollCard/PercentageBar.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+
+interface PropTypes {
+  value: number;
+  which: 'left' | 'right';
+}
+
+const useStyles = makeStyles({
+  root: {
+    position: 'absolute',
+    color: 'white',
+    top: '86%',
+    fontSize: 20,
+    textShadow: '0 0 3px black'
+  },
+  left: {
+    left: 30
+  },
+  right: {
+    right: 30
+  }
+});
+
+const PercentageBar: React.FC<PropTypes> = ({ value, which }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={`${classes.root} ${classes[which]}`}>
+      {value}
+      %
+    </div>
+  );
+};
+
+
+export default PercentageBar;
+
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 8995a30..23dc342 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -8,14 +8,11 @@ import {
   CardHeader
 } from '@material-ui/core/';
 import { Poll } from '../../types';
+import PercentageBar from './PercentageBar';
 
 interface PropTypes {
   poll: Poll;
-}
-
-interface PercentageBarPropTypes {
-  value: number;
-  which: 'left' | 'right';
+  navigate: (prefix: string, id: string) => void;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -30,49 +27,31 @@ const useStyles = makeStyles(theme => ({
   },
   imagesBlock: {
     display: 'flex'
-  },
-  percentage: {
-    position: 'absolute',
-    color: 'white',
-    top: '86%',
-    fontSize: 20,
-    textShadow: '0 0 3px black'
-  },
-  percentageLeft: {
-    left: 30
-  },
-  percentageRight: {
-    right: 30
   }
 }));
 
 
-const PercentageBar: React.FC<PercentageBarPropTypes> = ({ value, which }) => {
-  const classes = useStyles();
-  const positionClassName = which === 'left' ? 'percentageLeft' : 'percentageRight';
-
-  return (
-    <div className={`${classes.percentage} ${classes[positionClassName]}`}>
-      {value}
-      %
-    </div>
-  );
-};
-
-
-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()} />
+          <Avatar
+            aria-label="avatar"
+            src={author.avatarUrl}
+            alt={author.name[0].toUpperCase()}
+            onClick={handleNavigate}
+          />
         )}
         title={author.name}
       />
@@ -96,5 +75,6 @@ const PollCard: React.FC<PropTypes> = ({ poll }) => {
   );
 };
 
+
 export default PollCard;