From 48ece125761c4dce8175265c3b4de717a249eb0e Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 7 Jun 2020 16:36:50 +0300 Subject: feat: improve PollCard component --- src/PollCard/PollCard.tsx | 69 +++++++++++++++++++++++++++++++++++------------ src/index.tsx | 22 ++++++++++++++- 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 = ({ value, which }) => { const classes = useStyles(); + const positionClassName = which === 'left' ? 'percentageLeft' : 'percentageRight'; + + return ( +
+ {value} + % +
+ ); +}; + + +const PollCard: React.FC = ({ author, contents: { left, right } }) => { + const classes = useStyles(); + + const leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes))); + const rightPercentage = 100 - leftPercentage; return ( - R + {author.name[0].toUpperCase()} )} - title="Nick Name" + title={author.name} />
-
25%
+ -
75%
+
); }; 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 = () => {
- + ); }; -- cgit v1.2.3 From 6153da81564c95f21f01a296dcd21b89f062626d Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 7 Jun 2020 16:44:29 +0300 Subject: feat: move Poll type to separate file :label: --- src/PollCard/PollCard.tsx | 21 +++------------------ src/types.d.ts | 16 ++++++++++++++++ 2 files changed, 19 insertions(+), 18 deletions(-) create mode 100644 src/types.d.ts diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx index ee81b7d..07449fb 100644 --- a/src/PollCard/PollCard.tsx +++ b/src/PollCard/PollCard.tsx @@ -7,29 +7,13 @@ import { Avatar, CardHeader } from '@material-ui/core/'; - -interface ImageData { - url: string; - votes: number; -} - -interface PropTypes { - author: { - name: string; - avatarUrl: string; - }; - contents: { - left: ImageData; - right: ImageData; - }; -} +import { Poll } from '../types'; interface PercentageBarPropTypes { value: number; which: 'left' | 'right'; } - const useStyles = makeStyles({ root: { maxWidth: 600, @@ -71,7 +55,7 @@ const PercentageBar: React.FC = ({ value, which }) => { }; -const PollCard: React.FC = ({ author, contents: { left, right } }) => { +const PollCard: React.FC = ({ author, contents: { left, right } }) => { const classes = useStyles(); const leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes))); @@ -106,5 +90,6 @@ const PollCard: React.FC = ({ author, contents: { left, right } }) => ); }; + export default PollCard; 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; + }; +} + -- cgit v1.2.3 From d549053615ce308b906ca406f8d6623c0730d636 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 7 Jun 2020 16:50:00 +0300 Subject: style: add import extension rule --- .eslintrc.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 +} -- cgit v1.2.3