From 236062c6c6278c4b433463fef9fa37eebf3fd760 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 9 Aug 2020 16:09:21 +0300 Subject: feat: lazy-load pages --- src/components/Feed/Feed.tsx | 20 ++------------------ src/components/Loading/Loading.tsx | 24 ++++++++++++++++++++++++ 2 files changed, 26 insertions(+), 18 deletions(-) create mode 100644 src/components/Loading/Loading.tsx (limited to 'src/components') diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx index 03358da..9918a3d 100644 --- a/src/components/Feed/Feed.tsx +++ b/src/components/Feed/Feed.tsx @@ -1,9 +1,8 @@ import React from 'react'; import { Poll } from 'which-types'; import { WindowScroller, AutoSizer, List } from 'react-virtualized'; -import CircularProgress from '@material-ui/core/CircularProgress'; -import { makeStyles } from '@material-ui/core'; import PollCard from '../PollCard/PollCard'; +import Loading from '../Loading/Loading'; interface PropTypes { polls: Poll[]; @@ -15,17 +14,8 @@ interface RenderPropTypes { style: React.CSSProperties; } -const useStyles = makeStyles(theme => ({ - loader: { - width: '100%', - textAlign: 'center', - marginTop: theme.spacing(10) - } -})); const Feed: React.FC = ({ polls }) => { - const classes = useStyles(); - const RenderItem: React.FC = ({ index, style, key }) => { const poll = polls[index]; @@ -36,12 +26,6 @@ const Feed: React.FC = ({ polls }) => { ); }; - const loader = ( -
- -
- ); - const list = ( {({ @@ -74,7 +58,7 @@ const Feed: React.FC = ({ polls }) => { ); - return polls.length ? list : loader; + return polls.length ? list : ; }; export default Feed; diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx new file mode 100644 index 0000000..30b8cda --- /dev/null +++ b/src/components/Loading/Loading.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import CircularProgress from '@material-ui/core/CircularProgress'; +import { makeStyles } from '@material-ui/core'; + +const useStyles = makeStyles(theme => ({ + loader: { + width: '100%', + textAlign: 'center', + marginTop: theme.spacing(10) + } +})); + +const Loading: React.FC = () => { + const classes = useStyles(); + + return ( +
+ +
+ ); +}; + +export default Loading; + -- cgit v1.2.3 From 992b12d3bab79e749bc25eb5a17981853ff3c216 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 9 Aug 2020 21:16:40 +0300 Subject: fix: re-render Feed correctly --- src/components/Feed/Feed.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx index 9918a3d..b857cc0 100644 --- a/src/components/Feed/Feed.tsx +++ b/src/components/Feed/Feed.tsx @@ -20,7 +20,8 @@ const Feed: React.FC = ({ polls }) => { const RenderItem: React.FC = ({ index, style, key }) => { const poll = polls[index]; return ( -
+ // To re-render on list resize, add this info to key +
); -- cgit v1.2.3 From fd6e663a1bcc43cfc49bda99ccbfab380489324b Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 10 Aug 2020 00:02:24 +0300 Subject: feat!: add useLocalStorage hook --- src/components/Feed/Feed.tsx | 3 +-- src/components/PollCard/PollCard.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) (limited to 'src/components') diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx index b857cc0..5805e35 100644 --- a/src/components/Feed/Feed.tsx +++ b/src/components/Feed/Feed.tsx @@ -16,12 +16,11 @@ interface RenderPropTypes { const Feed: React.FC = ({ polls }) => { - const RenderItem: React.FC = ({ index, style, key }) => { const poll = polls[index]; return ( // To re-render on list resize, add this info to key -
+
); diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index 98ae001..2378945 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -58,7 +58,7 @@ const PollCard: React.FC = ({ initialPoll }) => { const date: string = new Date(poll.createdAt).toLocaleString('default', DATE_FORMAT); const handleVote = (which: Which) => { - if (!isAuthenticated()) { + if (!isAuthenticated) { enqueueSnackbar('Unauthorized users can not vote in polls', { variant: 'error' }); -- cgit v1.2.3 From dfa6f0a8d1415539e1ff6a3ca848627bbe87b470 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 10 Aug 2020 00:19:17 +0300 Subject: fix: show Feed loading correctly --- src/components/Feed/Feed.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'src/components') diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx index 5805e35..bf3c5b7 100644 --- a/src/components/Feed/Feed.tsx +++ b/src/components/Feed/Feed.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Poll } from 'which-types'; import { WindowScroller, AutoSizer, List } from 'react-virtualized'; import PollCard from '../PollCard/PollCard'; -import Loading from '../Loading/Loading'; + interface PropTypes { polls: Poll[]; @@ -26,7 +26,7 @@ const Feed: React.FC = ({ polls }) => { ); }; - const list = ( + return ( {({ height, @@ -57,8 +57,6 @@ const Feed: React.FC = ({ polls }) => { )} ); - - return polls.length ? list : ; }; export default Feed; -- cgit v1.2.3 From 08e9e3abb9830b6c46f46aacb6a40ba32c4c665f Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 10 Aug 2020 00:49:49 +0300 Subject: feat: memoize static components --- src/components/Header/Header.tsx | 4 ++-- src/components/Header/SearchBar.tsx | 4 ++-- src/components/Loading/Loading.tsx | 4 ++-- src/components/ScrollTopArrow/ScrollTopArrow.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) (limited to 'src/components') diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 5aa66ba..c3a678c 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -42,7 +42,7 @@ const useStyles = makeStyles(theme => ({ })); -const Header: React.FC = () => { +const Header: React.FC = React.memo(() => { const classes = useStyles(); const { user } = useAuth(); const theme = useTheme(); @@ -118,7 +118,7 @@ const Header: React.FC = () => { ); return isMobile ? MobileVersion : BrowserVersion; -}; +}); export default Header; diff --git a/src/components/Header/SearchBar.tsx b/src/components/Header/SearchBar.tsx index f541589..8bfe0fb 100644 --- a/src/components/Header/SearchBar.tsx +++ b/src/components/Header/SearchBar.tsx @@ -37,7 +37,7 @@ const useStyles = makeStyles(theme => ({ } })); -const SearchBar: React.FC = () => { +const SearchBar: React.FC = React.memo(() => { const [results, setResults] = useState([]); const [query, setQuery] = useState(''); const [debouncedQuery, setDebouncedQuery] = useState(query); @@ -104,7 +104,7 @@ const SearchBar: React.FC = () => { {results.length > 0 && SearchResults}
); -}; +}); export default SearchBar; diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx index 30b8cda..34d436b 100644 --- a/src/components/Loading/Loading.tsx +++ b/src/components/Loading/Loading.tsx @@ -10,7 +10,7 @@ const useStyles = makeStyles(theme => ({ } })); -const Loading: React.FC = () => { +const Loading: React.FC = React.memo(() => { const classes = useStyles(); return ( @@ -18,7 +18,7 @@ const Loading: React.FC = () => {
); -}; +}); export default Loading; diff --git a/src/components/ScrollTopArrow/ScrollTopArrow.tsx b/src/components/ScrollTopArrow/ScrollTopArrow.tsx index 08b8591..8a5bb8f 100644 --- a/src/components/ScrollTopArrow/ScrollTopArrow.tsx +++ b/src/components/ScrollTopArrow/ScrollTopArrow.tsx @@ -23,7 +23,7 @@ const useStyles = makeStyles(theme => ({ } })); -const ScrollTopArrow: React.FC = () => { +const ScrollTopArrow: React.FC = React.memo(() => { const [showScroll, setShowScroll] = useState(false); const theme = useTheme(); const classes = useStyles(); @@ -52,6 +52,6 @@ const ScrollTopArrow: React.FC = () => { } ); -}; +}); export default ScrollTopArrow; -- cgit v1.2.3 From cab8de5c6b246e1aa1376fa2b8666f09b44b6469 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 10 Aug 2020 11:12:06 +0300 Subject: refator: Feed -> PollList --- src/components/Feed/Feed.tsx | 63 ---------------------------- src/components/PollCard/PollCard.tsx | 18 ++++---- src/components/PollsList/PollsList.tsx | 75 ++++++++++++++++++++++++++++++++++ 3 files changed, 85 insertions(+), 71 deletions(-) delete mode 100644 src/components/Feed/Feed.tsx create mode 100644 src/components/PollsList/PollsList.tsx (limited to 'src/components') diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx deleted file mode 100644 index bf3c5b7..0000000 --- a/src/components/Feed/Feed.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import { Poll } from 'which-types'; -import { WindowScroller, AutoSizer, List } from 'react-virtualized'; -import PollCard from '../PollCard/PollCard'; - - -interface PropTypes { - polls: Poll[]; -} - -interface RenderPropTypes { - index: number; - key: string; - style: React.CSSProperties; -} - - -const Feed: React.FC = ({ polls }) => { - const RenderItem: React.FC = ({ index, style, key }) => { - const poll = polls[index]; - return ( - // To re-render on list resize, add this info to key -
- -
- ); - }; - - return ( - - {({ - height, - isScrolling, - registerChild, - onChildScroll, - scrollTop - }) => ( - - {({ width }) => ( -
- -
- )} - - )} - - ); -}; - -export default Feed; - diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index 2378945..689e872 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { Card, @@ -14,7 +14,8 @@ import { post } from '../../requests'; import { useAuth } from '../../hooks/useAuth'; interface PropTypes { - initialPoll: Poll; + poll: Poll; + setPoll: (poll: Poll) => void; } const DATE_FORMAT = { @@ -49,8 +50,7 @@ const useStyles = makeStyles(theme => ({ } })); -const PollCard: React.FC = ({ initialPoll }) => { - const [poll, setPoll] = useState(initialPoll); +const PollCard: React.FC = ({ poll, setPoll }) => { const classes = useStyles(); const { author, contents: { left, right }, vote } = poll; const { enqueueSnackbar } = useSnackbar(); @@ -68,15 +68,17 @@ const PollCard: React.FC = ({ initialPoll }) => { }); } else { const newVote = ({ which, pollId: poll._id }); - post('votes/', newVote); - poll.contents[which].votes += 1; - poll.vote = { + const newPoll = { ...poll }; + newPoll.contents[which].votes += 1; + newPoll.vote = { _id: '', authorId: '', createdAt: new Date(), ...newVote }; - setPoll({ ...poll }); + setPoll(newPoll); + + post('votes/', newVote); } }; diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx new file mode 100644 index 0000000..0fd8fa4 --- /dev/null +++ b/src/components/PollsList/PollsList.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import { Poll } from 'which-types'; +import { WindowScroller, AutoSizer, List } from 'react-virtualized'; +import PollCard from '../PollCard/PollCard'; + + +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 = (poll: Poll) => { + const newPolls = [...polls]; + newPolls[index] = poll; + + // 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 +
+ +
+ ); + }; + + return ( + + {({ + height, + isScrolling, + registerChild, + onChildScroll, + scrollTop + }) => ( + + {({ width }) => ( +
+ +
+ )} + + )} + + ); +}; + +export default PollsList; + -- cgit v1.2.3 From 78218c0f3427ad79de003ac59cffb99b08f0ae7d Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 10 Aug 2020 13:47:02 +0300 Subject: fix: resolve eslint errors --- src/components/PollsList/PollsList.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'src/components') diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx index 0fd8fa4..c95bfde 100644 --- a/src/components/PollsList/PollsList.tsx +++ b/src/components/PollsList/PollsList.tsx @@ -17,13 +17,12 @@ interface RenderPropTypes { const PollsList: React.FC = ({ polls, mutate }) => { - const RenderItem: React.FC = ({ index, style, key }) => { const poll = polls[index]; - const setPoll = (poll: Poll) => { + const setPoll = (newPoll: Poll) => { const newPolls = [...polls]; - newPolls[index] = poll; + newPolls[index] = newPoll; // Force-update list-size so everything re-renders mutate([], false); -- cgit v1.2.3