From eea76a129c7e8001eca00037e5915c79ed685169 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sun, 7 Jun 2020 19:10:15 +0300 Subject: feat: add Feed and fucntionality for creating polls --- src/Feed/Feed.tsx | 29 +++++++++++++++++++++++++++++ src/index.tsx | 25 +++++++++++++++++++++---- 2 files changed, 50 insertions(+), 4 deletions(-) create mode 100644 src/Feed/Feed.tsx diff --git a/src/Feed/Feed.tsx b/src/Feed/Feed.tsx new file mode 100644 index 0000000..03ba6c0 --- /dev/null +++ b/src/Feed/Feed.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Poll } from '../types'; +import PollCard from '../PollCard/PollCard'; + +interface PropTypes { + polls: Poll[], +} + +const usedStyles = makeStyles(() => ({ + feed: { + maxWidth: 600, + margin: '0 auto' + } +})); + +const Feed: React.FC = ({ polls }) => { + const classes = usedStyles(); + + return ( +
+ { + polls.map(poll => ) + } +
+ ); +}; + +export default Feed; diff --git a/src/index.tsx b/src/index.tsx index d7efbf7..9811de2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,7 +7,7 @@ import teal from '@material-ui/core/colors/teal'; import 'typeface-roboto'; import Header from './Header/Header'; -import PollCard from './PollCard/PollCard'; +import Feed from './Feed/Feed'; const theme = createMuiTheme({ palette: { @@ -21,7 +21,7 @@ const theme = createMuiTheme({ } }); -const pollProps = { +const polls = [{ author: { name: 'John Doe', avatarUrl: '' @@ -38,7 +38,24 @@ const pollProps = { votes: 17 } } -}; +}, { + 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 = () => { @@ -48,7 +65,7 @@ const App: React.FC = () => {
- + ); }; -- cgit v1.2.3 From 63d8c7cfdc941896e54071f2dce2274d1b602245 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sun, 7 Jun 2020 19:27:32 +0300 Subject: fix: changing px to spacing --- src/Feed/Feed.tsx | 4 ++-- src/PollCard/PollCard.tsx | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/Feed/Feed.tsx b/src/Feed/Feed.tsx index 03ba6c0..ef82b38 100644 --- a/src/Feed/Feed.tsx +++ b/src/Feed/Feed.tsx @@ -7,9 +7,9 @@ interface PropTypes { polls: Poll[], } -const usedStyles = makeStyles(() => ({ +const usedStyles = makeStyles(theme => ({ feed: { - maxWidth: 600, + maxWidth: theme.spacing(75), margin: '0 auto' } })); diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx index 07449fb..27a37a2 100644 --- a/src/PollCard/PollCard.tsx +++ b/src/PollCard/PollCard.tsx @@ -14,15 +14,15 @@ interface PercentageBarPropTypes { which: 'left' | 'right'; } -const useStyles = makeStyles({ +const useStyles = makeStyles(theme => ({ root: { - maxWidth: 600, - height: 500, + maxWidth: theme.spacing(75), + height: theme.spacing(63), margin: '20px auto' }, images: { - height: 400, - width: 300 + height: theme.spacing(50), + width: theme.spacing(38) }, imagesBlock: { display: 'flex' @@ -39,7 +39,7 @@ const useStyles = makeStyles({ percentageRight: { right: 30 } -}); +})); const PercentageBar: React.FC = ({ value, which }) => { -- cgit v1.2.3 From 9af3ee7da28c3acbd434602592c517b025d93252 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sun, 7 Jun 2020 19:46:21 +0300 Subject: fix: change Poll props --- src/PollCard/PollCard.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx index 27a37a2..e2ca518 100644 --- a/src/PollCard/PollCard.tsx +++ b/src/PollCard/PollCard.tsx @@ -55,10 +55,10 @@ const PercentageBar: React.FC = ({ value, which }) => { }; -const PollCard: React.FC = ({ author, contents: { left, right } }) => { +const PollCard: React.FC = (Poll) => { const classes = useStyles(); - const leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes))); + const leftPercentage = Math.round(100 * (Poll.contents.left.votes / (Poll.contents.left.votes + Poll.contents.right.votes))); const rightPercentage = 100 - leftPercentage; return ( @@ -66,23 +66,23 @@ const PollCard: React.FC = ({ author, contents: { left, right } }) => { - {author.name[0].toUpperCase()} + {Poll.author.name[0].toUpperCase()} )} - title={author.name} + title={Poll.author.name} />
-- cgit v1.2.3 From 5ff3d0a3a29ebba9c42603369bb16d7419a423d1 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sun, 7 Jun 2020 20:10:39 +0300 Subject: fix: change props again --- src/Feed/Feed.tsx | 2 +- src/PollCard/PollCard.tsx | 18 ++++++++++++------ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/Feed/Feed.tsx b/src/Feed/Feed.tsx index ef82b38..e5bc9aa 100644 --- a/src/Feed/Feed.tsx +++ b/src/Feed/Feed.tsx @@ -20,7 +20,7 @@ const Feed: React.FC = ({ polls }) => { return (
{ - polls.map(poll => ) + polls.map(poll => ) }
); diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx index e2ca518..588714a 100644 --- a/src/PollCard/PollCard.tsx +++ b/src/PollCard/PollCard.tsx @@ -9,6 +9,10 @@ import { } from '@material-ui/core/'; import { Poll } from '../types'; +interface PropTypes { + poll: Poll; +} + interface PercentageBarPropTypes { value: number; which: 'left' | 'right'; @@ -55,34 +59,36 @@ const PercentageBar: React.FC = ({ value, which }) => { }; -const PollCard: React.FC = (Poll) => { +const PollCard: React.FC = ({ poll }) => { const classes = useStyles(); + const { author, contents } = poll; - const leftPercentage = Math.round(100 * (Poll.contents.left.votes / (Poll.contents.left.votes + Poll.contents.right.votes))); + const leftPercentage = Math.round(100 * (contents.left.votes / (contents.left.votes + contents.right.votes))); const rightPercentage = 100 - leftPercentage; + return ( - {Poll.author.name[0].toUpperCase()} + {author.name[0].toUpperCase()} )} - title={Poll.author.name} + title={author.name} />
-- cgit v1.2.3