From c3ebdfe3b959f0d4a670e08176e71906107041af Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 14 Aug 2020 17:52:40 +0300 Subject: feat: add EmptyState message in Profile --- src/containers/Profile/Profile.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/containers/Profile/Profile.tsx b/src/containers/Profile/Profile.tsx index 701aa06..a46dbde 100644 --- a/src/containers/Profile/Profile.tsx +++ b/src/containers/Profile/Profile.tsx @@ -28,6 +28,11 @@ const Profile: React.FC = () => { }, [username, history, user]); const isOwnProfile = useMemo(() => user?.username === username, [user, username]); + const message = useMemo(() => { + return isOwnProfile + ? 'Create a poll and it will show up here.' + : 'This user has not uploaded anything yet.'; + }, [isOwnProfile]); const totalVotes = useMemo(() => polls?.reduce( (total: number, current: Poll) => { @@ -48,7 +53,7 @@ const Profile: React.FC = () => { polls ? polls.length ? - : + : : isValidating && } {isOwnProfile && } -- cgit v1.2.3 From f78da28da3ee30b0c458c10c97db9ae7d2c6372d Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 14 Aug 2020 19:19:04 +0300 Subject: feat: memoize PollCard component --- src/components/PollCard/PollCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index a4c2144..749c6b7 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -45,7 +45,7 @@ const useStyles = makeStyles(theme => ({ } })); -const PollCard: React.FC = ({ poll, setPoll }) => { +const PollCard: React.FC = React.memo(({ poll, setPoll }) => { const classes = useStyles(); const { author, contents: { left, right }, vote } = poll; const { enqueueSnackbar } = useSnackbar(); @@ -114,6 +114,6 @@ const PollCard: React.FC = ({ poll, setPoll }) => { ); -}; +}); export default PollCard; -- cgit v1.2.3 From e4452e3e575b57031de83259bbd403faa7cdce2a Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 14 Aug 2020 19:24:00 +0300 Subject: perf: greatly bost PollsList performance :rocket: Get rid of unnesessary re-renders of the whole list on scroll. --- src/components/PollsList/PollsList.tsx | 44 +++++++++--------------------- src/components/PollsList/RenderItem.tsx | 47 +++++++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+), 31 deletions(-) create mode 100644 src/components/PollsList/RenderItem.tsx (limited to 'src') diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx index c95bfde..62273ef 100644 --- a/src/components/PollsList/PollsList.tsx +++ b/src/components/PollsList/PollsList.tsx @@ -1,41 +1,23 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import { Poll } from 'which-types'; import { WindowScroller, AutoSizer, List } from 'react-virtualized'; -import PollCard from '../PollCard/PollCard'; - +import RenderItem from './RenderItem'; interface PropTypes { polls: Poll[]; mutate: (polls: Poll[], refetch: boolean) => void; } -interface RenderPropTypes { - index: number; - key: string; - style: React.CSSProperties; -} - - const PollsList: React.FC = ({ polls, mutate }) => { - const RenderItem: React.FC = ({ index, style, key }) => { - const poll = polls[index]; - - const setPoll = (newPoll: Poll) => { - const newPolls = [...polls]; - newPolls[index] = newPoll; - - // Force-update list-size so everything re-renders - mutate([], false); - mutate(newPolls, false); - }; - - return ( - // To re-render on list resize, add this info to key -
- -
- ); - }; + const rowRenderer = useCallback(({ index, style, key }) => ( + + ), [polls, mutate]); return ( @@ -56,11 +38,11 @@ const PollsList: React.FC = ({ polls, mutate }) => { onScroll={onChildScroll} rowCount={polls.length} rowHeight={550} - rowRenderer={RenderItem} + rowRenderer={rowRenderer} scrollTop={scrollTop} width={width} containerStyle={{ pointerEvents: 'auto' }} - overscanRowCount={1} + overscanRowCount={2} /> )} diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx new file mode 100644 index 0000000..900dae6 --- /dev/null +++ b/src/components/PollsList/RenderItem.tsx @@ -0,0 +1,47 @@ +import React, { useCallback } from 'react'; +import { Poll } from 'which-types'; +import PollCard from '../PollCard/PollCard'; + + +interface PropTypes { + polls: Poll[]; + mutate: (polls: Poll[], refetch: boolean) => void; + index: number; + style: React.CSSProperties; + key: string; +} + +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; + return true; +}; + +const RenderItem: React.FC = React.memo(({ + polls, mutate, index, style, key +}) => { + const poll = polls[index]; + + const setPoll = useCallback((newPoll: Poll) => { + const newPolls = [...polls]; + newPolls[index] = newPoll; + + // Force-update list-size so everything re-renders + mutate([], false); + mutate(newPolls, false); + }, [mutate, index, polls]); + + return ( + // To re-render on list resize, add this info to key +
+ +
+ ); +}, compareProps); + + +export default RenderItem; + -- cgit v1.2.3 From 21e5bf9ee3dc4f284c10f7915921e1e407b65b5a Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 14 Aug 2020 20:42:45 +0300 Subject: fix: resolve SpecialProps warning --- src/components/PollsList/PollsList.tsx | 1 + src/components/PollsList/RenderItem.tsx | 9 ++++----- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx index 62273ef..41f9966 100644 --- a/src/components/PollsList/PollsList.tsx +++ b/src/components/PollsList/PollsList.tsx @@ -16,6 +16,7 @@ const PollsList: React.FC = ({ polls, mutate }) => { index={index} style={style} key={key} + _key={key} /> ), [polls, mutate]); diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx index 900dae6..5123bca 100644 --- a/src/components/PollsList/RenderItem.tsx +++ b/src/components/PollsList/RenderItem.tsx @@ -8,11 +8,11 @@ interface PropTypes { mutate: (polls: Poll[], refetch: boolean) => void; index: number; style: React.CSSProperties; - key: string; + _key: string; // https://reactjs.org/warnings/special-props.html } const compareProps = (oldProps: PropTypes, newProps: PropTypes) => { - if (oldProps.key !== newProps.key) return false; + 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 @@ -21,7 +21,7 @@ const compareProps = (oldProps: PropTypes, newProps: PropTypes) => { }; const RenderItem: React.FC = React.memo(({ - polls, mutate, index, style, key + polls, mutate, index, style, _key }) => { const poll = polls[index]; @@ -35,8 +35,7 @@ const RenderItem: React.FC = React.memo(({ }, [mutate, index, polls]); return ( - // To re-render on list resize, add this info to key -
+
); -- cgit v1.2.3