diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/ModalScreen/ModalScreen.tsx | 4 | ||||
| -rw-r--r-- | src/components/PollCard/PollCard.tsx | 12 | ||||
| -rw-r--r-- | src/components/PollsList/PollsList.tsx | 20 | ||||
| -rw-r--r-- | src/components/PollsList/RenderItem.tsx | 31 |
4 files changed, 54 insertions, 13 deletions
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', diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index 540679f..a06bad8 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'; @@ -42,6 +42,11 @@ const useStyles = makeStyles(theme => ({ height: theme.spacing(2), backgroundColor: theme.palette.primary.light, transitionDuration: '0.5s' + }, + description: { + padding: theme.spacing(1, 2), + wordWrap: 'break-word', + whiteSpace: 'pre-wrap' } })); @@ -93,6 +98,11 @@ const PollCard: React.FC<PropTypes> = React.memo(({ poll, setPoll }) => { return ( <Card elevation={3}> <UserStrip user={author} info={date} /> + {poll.description && ( + <Typography className={classes.description}> + {poll.description} + </Typography> + )} <div className={classes.media}> <CardActionArea onDoubleClick={handleVote('left')} className={classes.media}> <BackgroundImage src={left.url} /> diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx index 039639d..1ad7763 100644 --- a/src/components/PollsList/PollsList.tsx +++ b/src/components/PollsList/PollsList.tsx @@ -1,9 +1,10 @@ -import React, { useCallback, useState, useMemo } from 'react'; +import React, { useCallback, useState, useMemo, useEffect } from 'react'; import { WindowScroller, AutoSizer, List, - InfiniteLoader + InfiniteLoader, + CellMeasurerCache } from 'react-virtualized'; import _ from 'lodash'; import { Poll } from 'which-types'; @@ -15,17 +16,27 @@ interface PropTypes { mutate: (polls: Poll[], refetch: boolean) => void; } +const cache = new CellMeasurerCache({ + fixedWidth: true +}); + const PAGE_SIZE = 10; const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => { const [displayCount, setDisplayCount] = useState<number>(PAGE_SIZE); - const rowRenderer = useCallback(({ index, style, key }) => ( + useEffect(() => { + cache.clearAll(); + }, [polls]); + + const rowRenderer = useCallback(({ index, style, key, parent }) => ( <RenderItem polls={polls} mutate={mutate} index={index} style={style} + cache={cache} + parent={parent} key={key} _key={key} /> @@ -68,7 +79,7 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => { isScrolling={isScrolling} onScroll={onChildScroll} rowCount={rowCount} - rowHeight={550} + rowHeight={cache.rowHeight} rowRenderer={rowRenderer} scrollTop={scrollTop} width={width} @@ -76,6 +87,7 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => { overscanRowCount={2} onRowsRendered={onRowsRendered} ref={ref} + deferredMeasurementCache={cache} /> )} </InfiniteLoader> diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx index beed259..28411ec 100644 --- a/src/components/PollsList/RenderItem.tsx +++ b/src/components/PollsList/RenderItem.tsx @@ -1,5 +1,7 @@ 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'; @@ -8,23 +10,31 @@ 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 } +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; 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<PropTypes> = React.memo(({ - polls, mutate, index, style, _key + polls, mutate, index, style, cache, parent, _key }) => { + const classes = useStyles(); const poll = polls[index]; - const setPoll = useCallback((newPoll: Poll) => { const newPolls = [...polls]; newPolls[index] = newPoll; @@ -35,9 +45,16 @@ const RenderItem: React.FC<PropTypes> = React.memo(({ }, [mutate, index, polls]); return ( - <div key={`${_key}-${poll._id}`} style={style}> - <PollCard poll={poll} setPoll={setPoll} /> - </div> + <CellMeasurer + cache={cache} + columnIndex={0} + rowIndex={index} + parent={parent} + > + <div key={`${_key}-${poll._id}`} className={classes.root} style={style}> + <PollCard poll={poll} setPoll={setPoll} /> + </div> + </CellMeasurer> ); }, compareProps); |