From 2710e4fd795642a99d4a0dcf6f43363a4c404637 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 16 Aug 2020 23:23:00 +0300
Subject: feat: show polls gradually in PollsList

---
 src/components/PollsList/PollsList.tsx | 62 ++++++++++++++++++++++++++--------
 1 file changed, 47 insertions(+), 15 deletions(-)

(limited to 'src/components/PollsList/PollsList.tsx')

diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx
index 41f9966..b9cf313 100644
--- a/src/components/PollsList/PollsList.tsx
+++ b/src/components/PollsList/PollsList.tsx
@@ -1,6 +1,13 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
+import {
+  WindowScroller,
+  AutoSizer,
+  List,
+  InfiniteLoader
+} from 'react-virtualized';
+import _ from 'lodash';
 import { Poll } from 'which-types';
-import { WindowScroller, AutoSizer, List } from 'react-virtualized';
+
 import RenderItem from './RenderItem';
 
 interface PropTypes {
@@ -8,7 +15,11 @@ interface PropTypes {
   mutate: (polls: Poll[], refetch: boolean) => void;
 }
 
+const PAGE_SIZE = 10;
+
 const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
+  const [displayCount, setDisplayCount] = useState<number>(PAGE_SIZE);
+
   const rowRenderer = useCallback(({ index, style, key }) => (
     <RenderItem
       polls={polls}
@@ -20,6 +31,16 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
     />
   ), [polls, mutate]);
 
+  const loadMoreRows = useCallback(async () => {
+    setDisplayCount(previousCount => {
+      return _.min([polls.length, previousCount + PAGE_SIZE]) || polls.length;
+    });
+  }, [polls]);
+
+  const isRowLoaded = useCallback(({ index }) => {
+    return index < displayCount - 1 || displayCount === polls.length;
+  }, [displayCount, polls]);
+
   return (
     <WindowScroller>
       {({
@@ -32,19 +53,30 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
         <AutoSizer disableHeight>
           {({ width }) => (
             <div ref={registerChild}>
-              <List
-                autoHeight
-                height={height}
-                isScrolling={isScrolling}
-                onScroll={onChildScroll}
-                rowCount={polls.length}
-                rowHeight={550}
-                rowRenderer={rowRenderer}
-                scrollTop={scrollTop}
-                width={width}
-                containerStyle={{ pointerEvents: 'auto' }}
-                overscanRowCount={2}
-              />
+              <InfiniteLoader
+                isRowLoaded={isRowLoaded}
+                loadMoreRows={loadMoreRows}
+                rowCount={displayCount}
+                threshold={1}
+              >
+                {({ onRowsRendered, registerChild: ref }) => (
+                  <List
+                    autoHeight
+                    height={height}
+                    isScrolling={isScrolling}
+                    onScroll={onChildScroll}
+                    rowCount={displayCount}
+                    rowHeight={550}
+                    rowRenderer={rowRenderer}
+                    scrollTop={scrollTop}
+                    width={width}
+                    containerStyle={{ pointerEvents: 'auto' }}
+                    overscanRowCount={2}
+                    onRowsRendered={onRowsRendered}
+                    ref={ref}
+                  />
+                )}
+              </InfiniteLoader>
             </div>
           )}
         </AutoSizer>
-- 
cgit v1.2.3


From e5d067dcc433e7086845946946f632565b2d5e1c Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 16 Aug 2020 23:29:20 +0300
Subject: fix: memoize rowCount

---
 src/components/PollsList/PollsList.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

(limited to 'src/components/PollsList/PollsList.tsx')

diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx
index b9cf313..039639d 100644
--- a/src/components/PollsList/PollsList.tsx
+++ b/src/components/PollsList/PollsList.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useMemo } from 'react';
 import {
   WindowScroller,
   AutoSizer,
@@ -32,15 +32,17 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
   ), [polls, mutate]);
 
   const loadMoreRows = useCallback(async () => {
-    setDisplayCount(previousCount => {
-      return _.min([polls.length, previousCount + PAGE_SIZE]) || polls.length;
-    });
-  }, [polls]);
+    setDisplayCount(previousCount => previousCount + PAGE_SIZE);
+  }, []);
 
   const isRowLoaded = useCallback(({ index }) => {
     return index < displayCount - 1 || displayCount === polls.length;
   }, [displayCount, polls]);
 
+  const rowCount = useMemo(() => {
+    return _.min([displayCount, polls.length]) || polls.length;
+  }, [displayCount, polls.length]);
+
   return (
     <WindowScroller>
       {({
@@ -56,7 +58,7 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
               <InfiniteLoader
                 isRowLoaded={isRowLoaded}
                 loadMoreRows={loadMoreRows}
-                rowCount={displayCount}
+                rowCount={rowCount}
                 threshold={1}
               >
                 {({ onRowsRendered, registerChild: ref }) => (
@@ -65,7 +67,7 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
                     height={height}
                     isScrolling={isScrolling}
                     onScroll={onChildScroll}
-                    rowCount={displayCount}
+                    rowCount={rowCount}
                     rowHeight={550}
                     rowRenderer={rowRenderer}
                     scrollTop={scrollTop}
-- 
cgit v1.2.3

