From 14b70c34a1b88c83e89f483399debd60560ed70b Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 14 Jun 2020 20:59:43 +0300
Subject: refactor: move PercentageBar to separate class

---
 src/components/PollCard/PercentageBar.tsx | 38 +++++++++++++++++++++++++++++++
 src/components/PollCard/PollCard.tsx      | 33 ++-------------------------
 2 files changed, 40 insertions(+), 31 deletions(-)
 create mode 100644 src/components/PollCard/PercentageBar.tsx

(limited to 'src/components')

diff --git a/src/components/PollCard/PercentageBar.tsx b/src/components/PollCard/PercentageBar.tsx
new file mode 100644
index 0000000..bf88815
--- /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(theme => ({
+  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..d5c99cc 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -8,16 +8,12 @@ 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';
-}
-
 const useStyles = makeStyles(theme => ({
   root: {
     maxWidth: theme.spacing(75),
@@ -31,35 +27,9 @@ 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 classes = useStyles();
   const { author, contents } = poll;
@@ -96,5 +66,6 @@ const PollCard: React.FC<PropTypes> = ({ poll }) => {
   );
 };
 
+
 export default PollCard;
 
-- 
cgit v1.2.3


From c311c538a3442aed8d77449736f28be66feea57c Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 14 Jun 2020 22:42:52 +0300
Subject: feat: configure navigation

---
 src/components/Feed/Feed.tsx         |  5 +++--
 src/components/Header/Header.tsx     |  8 ++++----
 src/components/PollCard/PollCard.tsx | 20 ++++++++++++++++----
 3 files changed, 23 insertions(+), 10 deletions(-)

(limited to 'src/components')

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}
       />
-- 
cgit v1.2.3


From 2a65284a385915818ca5f3e3b7354554e19af9cb Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 15 Jun 2020 15:52:40 +0300
Subject: style: fix eslint errors

---
 src/components/PollCard/PercentageBar.tsx |  4 ++--
 src/components/PollCard/PollCard.tsx      | 19 ++++++++-----------
 2 files changed, 10 insertions(+), 13 deletions(-)

(limited to 'src/components')

diff --git a/src/components/PollCard/PercentageBar.tsx b/src/components/PollCard/PercentageBar.tsx
index bf88815..6a50a9e 100644
--- a/src/components/PollCard/PercentageBar.tsx
+++ b/src/components/PollCard/PercentageBar.tsx
@@ -6,7 +6,7 @@ interface PropTypes {
   which: 'left' | 'right';
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles({
   root: {
     position: 'absolute',
     color: 'white',
@@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({
   right: {
     right: 30
   }
-}));
+});
 
 const PercentageBar: React.FC<PropTypes> = ({ value, which }) => {
   const classes = useStyles();
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 7f587f3..23dc342 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -5,8 +5,7 @@ import {
   CardActionArea,
   CardMedia,
   Avatar,
-  CardHeader,
-Link
+  CardHeader
 } from '@material-ui/core/';
 import { Poll } from '../../types';
 import PercentageBar from './PercentageBar';
@@ -28,7 +27,7 @@ const useStyles = makeStyles(theme => ({
   },
   imagesBlock: {
     display: 'flex'
-  },
+  }
 }));
 
 
@@ -47,14 +46,12 @@ const PollCard: React.FC<PropTypes> = ({ poll, navigate }) => {
     <Card className={classes.root}>
       <CardHeader
         avatar={(
-          <Link href="#">
-            <Avatar
-              aria-label="avatar"
-              src={author.avatarUrl}
-              alt={author.name[0].toUpperCase()}
-              onClick={handleNavigate}
-            />
-          </Link>
+          <Avatar
+            aria-label="avatar"
+            src={author.avatarUrl}
+            alt={author.name[0].toUpperCase()}
+            onClick={handleNavigate}
+          />
         )}
         title={author.name}
       />
-- 
cgit v1.2.3