From 0a23633aa49ece18897a6ceaa56fdd3cd837b8e8 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Tue, 15 Sep 2020 00:15:30 +0300 Subject: feat: add description to poll --- src/components/PollCard/PollCard.tsx | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'src/components') diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index 540679f..e2d06ee 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -42,6 +42,9 @@ const useStyles = makeStyles(theme => ({ height: theme.spacing(2), backgroundColor: theme.palette.primary.light, transitionDuration: '0.5s' + }, + description: { + padding: '0px 16px 10px' } })); @@ -93,6 +96,7 @@ const PollCard: React.FC = React.memo(({ poll, setPoll }) => { return ( +
{poll.description}
-- cgit v1.2.3 From 12b52a29d27736075d71f97937f678650bfc6339 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Fri, 18 Sep 2020 20:54:25 +0300 Subject: dont show description if it is empty --- src/components/PollCard/PollCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index e2d06ee..b6fdfaa 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -96,7 +96,7 @@ const PollCard: React.FC = React.memo(({ poll, setPoll }) => { return ( -
{poll.description}
+ {poll.description &&
{poll.description}
}
-- cgit v1.2.3 From 13fc0cc8ffb61d8f184707feed1f9010798c45f1 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 18 Sep 2020 22:20:29 +0300 Subject: feat!: allow dynamic item height in PollsList --- src/components/PollsList/PollsList.tsx | 14 +++++++++++--- src/components/PollsList/RenderItem.tsx | 22 ++++++++++++++++------ 2 files changed, 27 insertions(+), 9 deletions(-) (limited to 'src/components') diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx index 039639d..bf2079a 100644 --- a/src/components/PollsList/PollsList.tsx +++ b/src/components/PollsList/PollsList.tsx @@ -3,7 +3,8 @@ import { WindowScroller, AutoSizer, List, - InfiniteLoader + InfiniteLoader, + CellMeasurerCache } from 'react-virtualized'; import _ from 'lodash'; import { Poll } from 'which-types'; @@ -15,17 +16,23 @@ interface PropTypes { mutate: (polls: Poll[], refetch: boolean) => void; } +const cache = new CellMeasurerCache({ + fixedWidth: true, +}); + const PAGE_SIZE = 10; const PollsList: React.FC = ({ polls, mutate }) => { const [displayCount, setDisplayCount] = useState(PAGE_SIZE); - const rowRenderer = useCallback(({ index, style, key }) => ( + const rowRenderer = useCallback(({ index, style, key, parent }) => ( @@ -68,7 +75,7 @@ const PollsList: React.FC = ({ polls, mutate }) => { isScrolling={isScrolling} onScroll={onChildScroll} rowCount={rowCount} - rowHeight={550} + rowHeight={cache.rowHeight} rowRenderer={rowRenderer} scrollTop={scrollTop} width={width} @@ -76,6 +83,7 @@ const PollsList: React.FC = ({ polls, mutate }) => { overscanRowCount={2} onRowsRendered={onRowsRendered} ref={ref} + deferredMeasurementCache={cache} /> )} diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx index beed259..ce6f0c9 100644 --- a/src/components/PollsList/RenderItem.tsx +++ b/src/components/PollsList/RenderItem.tsx @@ -1,6 +1,7 @@ import React, { useCallback } from 'react'; import { Poll } from 'which-types'; import PollCard from '../PollCard/PollCard'; +import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized'; interface PropTypes { @@ -8,6 +9,8 @@ interface PropTypes { mutate: (polls: Poll[], refetch: boolean) => void; index: number; style: React.CSSProperties; + cache: CellMeasurerCache; + parent: List; _key: string; // https://reactjs.org/warnings/special-props.html } @@ -15,13 +18,13 @@ const compareProps = (oldProps: PropTypes, newProps: PropTypes) => { if (oldProps._key !== newProps._key) return false; if (oldProps.index !== newProps.index) return false; if (oldProps.polls !== newProps.polls) return false; - // TODO: uncomment line below to listen to style updates - // if (JSON.stringify(oldProps.style)!== JSON.stringify(newProps.style)) return false; + // Only listen for height changes in style + if (oldProps.style.height !== newProps.style.height) return false; return true; }; const RenderItem: React.FC = React.memo(({ - polls, mutate, index, style, _key + polls, mutate, index, style, cache, parent, _key }) => { const poll = polls[index]; @@ -35,9 +38,16 @@ const RenderItem: React.FC = React.memo(({ }, [mutate, index, polls]); return ( -
- -
+ +
+ +
+ ); }, compareProps); -- cgit v1.2.3 From 3aa75f9454332342fdb76d3b8466ef52f058cf4d Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sat, 19 Sep 2020 01:12:34 +0300 Subject: clear cache on polls size change --- src/components/PollCard/PollCard.tsx | 3 ++- src/components/PollsList/PollsList.tsx | 6 +++++- src/components/PollsList/RenderItem.tsx | 3 +-- 3 files changed, 8 insertions(+), 4 deletions(-) (limited to 'src/components') diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index b6fdfaa..d909b79 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -44,7 +44,8 @@ const useStyles = makeStyles(theme => ({ transitionDuration: '0.5s' }, description: { - padding: '0px 16px 10px' + padding: '0px 16px 10px', + overflowWrap: 'break-word' } })); diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx index bf2079a..3eeed2b 100644 --- a/src/components/PollsList/PollsList.tsx +++ b/src/components/PollsList/PollsList.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState, useMemo } from 'react'; +import React, {useCallback, useState, useMemo, useRef, useEffect} from 'react'; import { WindowScroller, AutoSizer, @@ -25,6 +25,10 @@ const PAGE_SIZE = 10; const PollsList: React.FC = ({ polls, mutate }) => { const [displayCount, setDisplayCount] = useState(PAGE_SIZE); + useEffect(()=> { + cache.clearAll(); + },[polls]); + const rowRenderer = useCallback(({ index, style, key, parent }) => ( = React.memo(({ polls, mutate, index, style, cache, parent, _key }) => { const poll = polls[index]; - const setPoll = useCallback((newPoll: Poll) => { const newPolls = [...polls]; newPolls[index] = newPoll; @@ -44,7 +43,7 @@ const RenderItem: React.FC = React.memo(({ rowIndex={index} parent={parent} > -
+
-- cgit v1.2.3 From 2a8d307b53b1b7fa5962e73b5e506c7466b79a7e Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sat, 19 Sep 2020 01:22:20 +0300 Subject: fix eslint errors --- src/components/PollsList/PollsList.tsx | 8 ++++---- src/components/PollsList/RenderItem.tsx | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) (limited to 'src/components') diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx index 3eeed2b..1ad7763 100644 --- a/src/components/PollsList/PollsList.tsx +++ b/src/components/PollsList/PollsList.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useState, useMemo, useRef, useEffect} from 'react'; +import React, { useCallback, useState, useMemo, useEffect } from 'react'; import { WindowScroller, AutoSizer, @@ -17,7 +17,7 @@ interface PropTypes { } const cache = new CellMeasurerCache({ - fixedWidth: true, + fixedWidth: true }); const PAGE_SIZE = 10; @@ -25,9 +25,9 @@ const PAGE_SIZE = 10; const PollsList: React.FC = ({ polls, mutate }) => { const [displayCount, setDisplayCount] = useState(PAGE_SIZE); - useEffect(()=> { + useEffect(() => { cache.clearAll(); - },[polls]); + }, [polls]); const rowRenderer = useCallback(({ index, style, key, parent }) => ( = React.memo(({ rowIndex={index} parent={parent} > -
+
-- cgit v1.2.3 From 0930745ca23f881c97a3cf641c913466c692af64 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 8 Oct 2020 22:43:13 +0300 Subject: feat: increase spacing between polls --- src/components/PollsList/RenderItem.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx index 6a99167..28411ec 100644 --- a/src/components/PollsList/RenderItem.tsx +++ b/src/components/PollsList/RenderItem.tsx @@ -1,4 +1,5 @@ import React, { useCallback } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; import { Poll } from 'which-types'; import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized'; import PollCard from '../PollCard/PollCard'; @@ -14,6 +15,12 @@ interface PropTypes { _key: string; // https://reactjs.org/warnings/special-props.html } +const useStyles = makeStyles(theme => ({ + root: { + paddingBottom: theme.spacing(8) + } +})); + const compareProps = (oldProps: PropTypes, newProps: PropTypes) => { if (oldProps._key !== newProps._key) return false; if (oldProps.index !== newProps.index) return false; @@ -26,6 +33,7 @@ const compareProps = (oldProps: PropTypes, newProps: PropTypes) => { const RenderItem: React.FC = React.memo(({ polls, mutate, index, style, cache, parent, _key }) => { + const classes = useStyles(); const poll = polls[index]; const setPoll = useCallback((newPoll: Poll) => { const newPolls = [...polls]; @@ -43,7 +51,7 @@ const RenderItem: React.FC = React.memo(({ rowIndex={index} parent={parent} > -
+
-- cgit v1.2.3 From 86a0796c859bbb0bd735fdc3bdc67d1687ddaf1c Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 8 Oct 2020 22:43:30 +0300 Subject: feat: tweak description paddings --- src/components/PollCard/PollCard.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'src/components') diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index d909b79..eb025f2 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import { Card, CardActionArea } from '@material-ui/core/'; +import { Card, CardActionArea, Typography } from '@material-ui/core/'; import { Which, Poll } from 'which-types'; import { useSnackbar } from 'notistack'; @@ -44,8 +44,7 @@ const useStyles = makeStyles(theme => ({ transitionDuration: '0.5s' }, description: { - padding: '0px 16px 10px', - overflowWrap: 'break-word' + padding: theme.spacing(0.5, 2) } })); @@ -97,7 +96,11 @@ const PollCard: React.FC = React.memo(({ poll, setPoll }) => { return ( - {poll.description &&
{poll.description}
} + {poll.description && ( + + {poll.description} + + )}
-- cgit v1.2.3 From 8c8e38f93dba84f67624959540cd2b2042dd5089 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 8 Oct 2020 23:31:08 +0300 Subject: feat: make PollCreation input same as description --- src/components/PollCard/PollCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/components') diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index eb025f2..6886534 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -44,7 +44,7 @@ const useStyles = makeStyles(theme => ({ transitionDuration: '0.5s' }, description: { - padding: theme.spacing(0.5, 2) + padding: theme.spacing(1, 2) } })); @@ -97,7 +97,7 @@ const PollCard: React.FC = React.memo(({ poll, setPoll }) => { {poll.description && ( - + {poll.description} )} -- cgit v1.2.3 From 2f35115f03c8080424ef24302091c5125ff68ff0 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 8 Oct 2020 23:42:49 +0300 Subject: fix: preserve all whitespaces in description --- src/components/PollCard/PollCard.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index 6886534..a06bad8 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -44,7 +44,9 @@ const useStyles = makeStyles(theme => ({ transitionDuration: '0.5s' }, description: { - padding: theme.spacing(1, 2) + padding: theme.spacing(1, 2), + wordWrap: 'break-word', + whiteSpace: 'pre-wrap' } })); -- cgit v1.2.3 From 388ccd1ae73e0dcc710e9b497e95c70a131c73cc Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 9 Oct 2020 00:21:58 +0300 Subject: feat: remove gap between header on mobile --- src/components/ModalScreen/ModalScreen.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx index c6f0565..cf76272 100644 --- a/src/components/ModalScreen/ModalScreen.tsx +++ b/src/components/ModalScreen/ModalScreen.tsx @@ -27,7 +27,9 @@ const useStyles = makeStyles(theme => ({ backgroundColor: theme.palette.background.default }, content: { - padding: theme.spacing(6, 0) + [theme.breakpoints.up('md')]: { + padding: theme.spacing(4) + } }, toolbar: { display: 'flex', -- cgit v1.2.3