From 13fc0cc8ffb61d8f184707feed1f9010798c45f1 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 18 Sep 2020 22:20:29 +0300
Subject: feat!: allow dynamic item height in PollsList

---
 src/components/PollsList/PollsList.tsx  | 14 +++++++++++---
 src/components/PollsList/RenderItem.tsx | 22 ++++++++++++++++------
 2 files changed, 27 insertions(+), 9 deletions(-)

(limited to 'src/components/PollsList')

diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx
index 039639d..bf2079a 100644
--- a/src/components/PollsList/PollsList.tsx
+++ b/src/components/PollsList/PollsList.tsx
@@ -3,7 +3,8 @@ import {
   WindowScroller,
   AutoSizer,
   List,
-  InfiniteLoader
+  InfiniteLoader,
+  CellMeasurerCache
 } from 'react-virtualized';
 import _ from 'lodash';
 import { Poll } from 'which-types';
@@ -15,17 +16,23 @@ interface PropTypes {
   mutate: (polls: Poll[], refetch: boolean) => void;
 }
 
+const cache = new CellMeasurerCache({
+  fixedWidth: true,
+});
+
 const PAGE_SIZE = 10;
 
 const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
   const [displayCount, setDisplayCount] = useState<number>(PAGE_SIZE);
 
-  const rowRenderer = useCallback(({ index, style, key }) => (
+  const rowRenderer = useCallback(({ index, style, key, parent }) => (
     <RenderItem
       polls={polls}
       mutate={mutate}
       index={index}
       style={style}
+      cache={cache}
+      parent={parent}
       key={key}
       _key={key}
     />
@@ -68,7 +75,7 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
                     isScrolling={isScrolling}
                     onScroll={onChildScroll}
                     rowCount={rowCount}
-                    rowHeight={550}
+                    rowHeight={cache.rowHeight}
                     rowRenderer={rowRenderer}
                     scrollTop={scrollTop}
                     width={width}
@@ -76,6 +83,7 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
                     overscanRowCount={2}
                     onRowsRendered={onRowsRendered}
                     ref={ref}
+                    deferredMeasurementCache={cache}
                   />
                 )}
               </InfiniteLoader>
diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx
index beed259..ce6f0c9 100644
--- a/src/components/PollsList/RenderItem.tsx
+++ b/src/components/PollsList/RenderItem.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { Poll } from 'which-types';
 import PollCard from '../PollCard/PollCard';
+import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
 
 
 interface PropTypes {
@@ -8,6 +9,8 @@ interface PropTypes {
   mutate: (polls: Poll[], refetch: boolean) => void;
   index: number;
   style: React.CSSProperties;
+  cache: CellMeasurerCache;
+  parent: List;
   _key: string; // https://reactjs.org/warnings/special-props.html
 }
 
@@ -15,13 +18,13 @@ 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;
+  // Only listen for height changes in style
+  if (oldProps.style.height !== newProps.style.height) return false;
   return true;
 };
 
 const RenderItem: React.FC<PropTypes> = React.memo(({
-  polls, mutate, index, style, _key
+  polls, mutate, index, style, cache, parent, _key
 }) => {
   const poll = polls[index];
 
@@ -35,9 +38,16 @@ const RenderItem: React.FC<PropTypes> = React.memo(({
   }, [mutate, index, polls]);
 
   return (
-    <div key={`${_key}-${poll._id}`} style={style}>
-      <PollCard poll={poll} setPoll={setPoll} />
-    </div>
+    <CellMeasurer
+      cache={cache}
+      columnIndex={0}
+      rowIndex={index}
+      parent={parent}
+    >
+      <div key={`${_key}-${poll._id}`} style={{...style, paddingBottom: '40px' }}>
+        <PollCard poll={poll} setPoll={setPoll} />
+      </div>
+    </CellMeasurer>
   );
 }, compareProps);
 
-- 
cgit v1.2.3


From 3aa75f9454332342fdb76d3b8466ef52f058cf4d Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Sat, 19 Sep 2020 01:12:34 +0300
Subject: clear cache on polls size change

---
 src/components/PollsList/PollsList.tsx  | 6 +++++-
 src/components/PollsList/RenderItem.tsx | 3 +--
 2 files changed, 6 insertions(+), 3 deletions(-)

(limited to 'src/components/PollsList')

diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx
index bf2079a..3eeed2b 100644
--- a/src/components/PollsList/PollsList.tsx
+++ b/src/components/PollsList/PollsList.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useMemo } from 'react';
+import React, {useCallback, useState, useMemo, useRef, useEffect} from 'react';
 import {
   WindowScroller,
   AutoSizer,
@@ -25,6 +25,10 @@ const PAGE_SIZE = 10;
 const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
   const [displayCount, setDisplayCount] = useState<number>(PAGE_SIZE);
 
+  useEffect(()=> {
+    cache.clearAll();
+  },[polls]);
+
   const rowRenderer = useCallback(({ index, style, key, parent }) => (
     <RenderItem
       polls={polls}
diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx
index ce6f0c9..fcac20c 100644
--- a/src/components/PollsList/RenderItem.tsx
+++ b/src/components/PollsList/RenderItem.tsx
@@ -27,7 +27,6 @@ const RenderItem: React.FC<PropTypes> = React.memo(({
   polls, mutate, index, style, cache, parent, _key
 }) => {
   const poll = polls[index];
-
   const setPoll = useCallback((newPoll: Poll) => {
     const newPolls = [...polls];
     newPolls[index] = newPoll;
@@ -44,7 +43,7 @@ const RenderItem: React.FC<PropTypes> = React.memo(({
       rowIndex={index}
       parent={parent}
     >
-      <div key={`${_key}-${poll._id}`} style={{...style, paddingBottom: '40px' }}>
+      <div key={`${_key}-${poll._id}`} style={{...style, paddingBottom: '20px' }}>
         <PollCard poll={poll} setPoll={setPoll} />
       </div>
     </CellMeasurer>
-- 
cgit v1.2.3


From 2a8d307b53b1b7fa5962e73b5e506c7466b79a7e Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Sat, 19 Sep 2020 01:22:20 +0300
Subject: fix eslint errors

---
 src/components/PollsList/PollsList.tsx  | 8 ++++----
 src/components/PollsList/RenderItem.tsx | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/components/PollsList')

diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx
index 3eeed2b..1ad7763 100644
--- a/src/components/PollsList/PollsList.tsx
+++ b/src/components/PollsList/PollsList.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useState, useMemo, useRef, useEffect} from 'react';
+import React, { useCallback, useState, useMemo, useEffect } from 'react';
 import {
   WindowScroller,
   AutoSizer,
@@ -17,7 +17,7 @@ interface PropTypes {
 }
 
 const cache = new CellMeasurerCache({
-  fixedWidth: true,
+  fixedWidth: true
 });
 
 const PAGE_SIZE = 10;
@@ -25,9 +25,9 @@ const PAGE_SIZE = 10;
 const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
   const [displayCount, setDisplayCount] = useState<number>(PAGE_SIZE);
 
-  useEffect(()=> {
+  useEffect(() => {
     cache.clearAll();
-  },[polls]);
+  }, [polls]);
 
   const rowRenderer = useCallback(({ index, style, key, parent }) => (
     <RenderItem
diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx
index fcac20c..6a99167 100644
--- a/src/components/PollsList/RenderItem.tsx
+++ b/src/components/PollsList/RenderItem.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { Poll } from 'which-types';
-import PollCard from '../PollCard/PollCard';
 import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
+import PollCard from '../PollCard/PollCard';
 
 
 interface PropTypes {
@@ -43,7 +43,7 @@ const RenderItem: React.FC<PropTypes> = React.memo(({
       rowIndex={index}
       parent={parent}
     >
-      <div key={`${_key}-${poll._id}`} style={{...style, paddingBottom: '20px' }}>
+      <div key={`${_key}-${poll._id}`} style={{ ...style, paddingBottom: '20px' }}>
         <PollCard poll={poll} setPoll={setPoll} />
       </div>
     </CellMeasurer>
-- 
cgit v1.2.3


From 0930745ca23f881c97a3cf641c913466c692af64 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 8 Oct 2020 22:43:13 +0300
Subject: feat: increase spacing between polls

---
 src/components/PollsList/RenderItem.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'src/components/PollsList')

diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx
index 6a99167..28411ec 100644
--- a/src/components/PollsList/RenderItem.tsx
+++ b/src/components/PollsList/RenderItem.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 import { Poll } from 'which-types';
 import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
 import PollCard from '../PollCard/PollCard';
@@ -14,6 +15,12 @@ interface PropTypes {
   _key: string; // https://reactjs.org/warnings/special-props.html
 }
 
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingBottom: theme.spacing(8)
+  }
+}));
+
 const compareProps = (oldProps: PropTypes, newProps: PropTypes) => {
   if (oldProps._key !== newProps._key) return false;
   if (oldProps.index !== newProps.index) return false;
@@ -26,6 +33,7 @@ const compareProps = (oldProps: PropTypes, newProps: PropTypes) => {
 const RenderItem: React.FC<PropTypes> = React.memo(({
   polls, mutate, index, style, cache, parent, _key
 }) => {
+  const classes = useStyles();
   const poll = polls[index];
   const setPoll = useCallback((newPoll: Poll) => {
     const newPolls = [...polls];
@@ -43,7 +51,7 @@ const RenderItem: React.FC<PropTypes> = React.memo(({
       rowIndex={index}
       parent={parent}
     >
-      <div key={`${_key}-${poll._id}`} style={{ ...style, paddingBottom: '20px' }}>
+      <div key={`${_key}-${poll._id}`} className={classes.root} style={style}>
         <PollCard poll={poll} setPoll={setPoll} />
       </div>
     </CellMeasurer>
-- 
cgit v1.2.3