feat: improve PollCard component

2 files changed, 73 insertions, 18 deletions

diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx
index 05e941c..ee81b7d 100644
--- a/src/PollCard/PollCard.tsx
+++ b/src/PollCard/PollCard.tsx
@@ -8,6 +8,28 @@ import {
   CardHeader
 } from '@material-ui/core/';
 
+interface ImageData {
+  url: string;
+  votes: number;
+}
+
+interface PropTypes {
+  author: {
+    name: string;
+    avatarUrl: string;
+  };
+  contents: {
+    left: ImageData;
+    right: ImageData;
+  };
+}
+
+interface PercentageBarPropTypes {
+  value: number;
+  which: 'left' | 'right';
+}
+
+
 const useStyles = makeStyles({
   root: {
     maxWidth: 600,
@@ -21,55 +43,68 @@ const useStyles = makeStyles({
   imagesBlock: {
     display: 'flex'
   },
-  percentageLeft: {
+  percentage: {
     position: 'absolute',
     color: 'white',
     top: '86%',
-    left: 30,
     fontSize: 20
   },
+  percentageLeft: {
+    left: 30
+  },
   percentageRight: {
-    position: 'absolute',
-    color: 'white',
-    top: '86%',
-    right: 30,
-    fontSize: 20
+    right: 30
   }
-
 });
 
-const PollCard: React.FC = () => {
+
+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> = ({ author, contents: { left, right } }) => {
+  const classes = useStyles();
+
+  const leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes)));
+  const rightPercentage = 100 - leftPercentage;
 
   return (
     <Card className={classes.root}>
       <CardHeader
         avatar={(
           <Avatar aria-label="avatar">
-            R
+            <img src={author.avatarUrl} alt={author.name[0].toUpperCase()} />
           </Avatar>
         )}
-        title="Nick Name"
+        title={author.name}
       />
       <div className={classes.imagesBlock}>
         <CardActionArea>
           <CardMedia
             className={classes.images}
-            // eslint-disable-next-line max-len
-            image="https://images.pexels.com/photos/556666/pexels-photo-556666.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
+            image={left.url}
           />
-          <div className={classes.percentageLeft}>25%</div>
+          <PercentageBar value={leftPercentage} which="left" />
         </CardActionArea>
         <CardActionArea>
           <CardMedia
             className={classes.images}
-            // eslint-disable-next-line max-len
-            image="https://cdn.psychologytoday.com/sites/default/files/field_blog_entry_images/2019-06/pexels-photo-556667.jpeg"
+            image={right.url}
           />
-          <div className={classes.percentageRight}>75%</div>
+          <PercentageBar value={rightPercentage} which="right" />
         </CardActionArea>
       </div>
     </Card>
   );
 };
 export default PollCard;
+
diff --git a/src/index.tsx b/src/index.tsx
index b59876b..d7efbf7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -21,6 +21,26 @@ const theme = createMuiTheme({
   }
 });
 
+const pollProps = {
+  author: {
+    name: 'John Doe',
+    avatarUrl: ''
+  },
+  contents: {
+    left: {
+      // eslint-disable-next-line max-len
+      url: 'https://images.pexels.com/photos/556666/pexels-photo-556666.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
+      votes: 15
+    },
+    right: {
+      // eslint-disable-next-line max-len
+      url: 'https://cdn.psychologytoday.com/sites/default/files/field_blog_entry_images/2019-06/pexels-photo-556667.jpeg',
+      votes: 17
+    }
+  }
+};
+
+
 const App: React.FC = () => {
   const [page, setPage] = useState('feed');
 
@@ -28,7 +48,7 @@ const App: React.FC = () => {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Header page={page} setPage={setPage} />
-      <PollCard />
+      <PollCard author={pollProps.author} contents={pollProps.contents} />
     </ThemeProvider>
   );
 };