From 7f1a4ebde3ec32a703f04c989b4802b800f65c57 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 16 Aug 2020 23:15:28 +0300
Subject: feat: add elevation to PollCard

---
 src/components/PollCard/PollCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 749c6b7..80a1386 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -94,7 +94,7 @@ const PollCard: React.FC<PropTypes> = React.memo(({ poll, setPoll }) => {
   const dominant: Which = left.votes >= right.votes ? 'left' : 'right';
 
   return (
-    <Card>
+    <Card elevation={3}>
       <UserStrip user={author} info={date} />
       <div className={classes.media}>
         <CardActionArea onDoubleClick={handleLeft} className={classes.media}>
-- 
cgit v1.2.3


From 11fc5a34909d6de54821ec496f4d05e7c9ad779c Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 16 Aug 2020 23:16:19 +0300
Subject: feat: move ErrorBoundary inside Page root element

---
 src/containers/Page/Page.tsx | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/containers/Page/Page.tsx b/src/containers/Page/Page.tsx
index a1d6456..4aa48eb 100644
--- a/src/containers/Page/Page.tsx
+++ b/src/containers/Page/Page.tsx
@@ -22,6 +22,10 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
+const ErrorFallback: React.FC = () => (
+  <EmptyState variant="error" message="Try reloading the page." />
+);
+
 const Page: React.FC = () => {
   const classes = useStyles();
   const theme = useTheme();
@@ -35,26 +39,24 @@ const Page: React.FC = () => {
   }, [history]);
 
   return (
-    <ErrorBoundary
-      FallbackComponent={() => <EmptyState variant="error" message="Try reloading the page." />}
+    <SnackbarProvider
+      preventDuplicate
+      maxSnack={isMobile ? 1 : 3}
+      anchorOrigin={{
+        vertical: 'top',
+        horizontal: 'right'
+      }}
     >
-      <SnackbarProvider
-        preventDuplicate
-        maxSnack={isMobile ? 1 : 3}
-        anchorOrigin={{
-          vertical: 'top',
-          horizontal: 'right'
-        }}
-      >
-        <div className={classes.root}>
+      <div className={classes.root}>
+        <ErrorBoundary FallbackComponent={ErrorFallback}>
           <Suspense fallback={<Loading />}>
             <DynoWaiter>
               <Router />
             </DynoWaiter>
           </Suspense>
-        </div>
-      </SnackbarProvider>
-    </ErrorBoundary>
+        </ErrorBoundary>
+      </div>
+    </SnackbarProvider>
   );
 };
 
-- 
cgit v1.2.3


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')

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')

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