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 ++------------------ 1 file changed, 2 insertions(+), 18 deletions(-) (limited to 'src/components/Feed/Feed.tsx') 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; -- 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/Feed/Feed.tsx') 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 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src/components/Feed/Feed.tsx') 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 -
+
); -- 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/Feed/Feed.tsx') 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 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 -------------------------------------------- 1 file changed, 63 deletions(-) delete mode 100644 src/components/Feed/Feed.tsx (limited to 'src/components/Feed/Feed.tsx') 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; - -- cgit v1.2.3