Merge pull request #11 from ilyayudovin/poll-functionality

Add functionality to Poll component

4 files changed, 76 insertions, 19 deletions

diff --git a/.eslintrc.json b/.eslintrc.json
index 0789840..4899960 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -15,6 +15,7 @@
     "max-len": ["error", { "code": 120 }],
     "arrow-parens": [2, "as-needed"],
     "comma-dangle": ["error", "never"],
+    "import/extensions": ["error", { "ts": "never", "tsx": "never" }],
     "arrow-body-style": 0,
     "no-cond-assign": 0,
     "linebreak-style": 0,
@@ -22,4 +23,4 @@
     "react/no-children-prop": 0,
     "react/no-danger": 0
   }
-}
\ No newline at end of file
+}
diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx
index 05e941c..07449fb 100644
--- a/src/PollCard/PollCard.tsx
+++ b/src/PollCard/PollCard.tsx
@@ -7,6 +7,12 @@ import {
   Avatar,
   CardHeader
 } from '@material-ui/core/';
+import { Poll } from '../types';
+
+interface PercentageBarPropTypes {
+  value: number;
+  which: 'left' | 'right';
+}
 
 const useStyles = makeStyles({
   root: {
@@ -21,55 +27,69 @@ 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<Poll> = ({ 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>
   );
 };
diff --git a/src/types.d.ts b/src/types.d.ts
new file mode 100644
index 0000000..9b4d16a
--- /dev/null
+++ b/src/types.d.ts
@@ -0,0 +1,16 @@
+interface ImageData {
+  url: string;
+  votes: number;
+}
+
+export interface Poll {
+  author: {
+    name: string;
+    avatarUrl: string;
+  };
+  contents: {
+    left: ImageData;
+    right: ImageData;
+  };
+}
+