refactor: move PercentageBar to separate class

2 files changed, 40 insertions, 31 deletions

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;