From b9ab4b1c608c7022d15a264ec123f2c1a476c33d Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 3 Jul 2020 16:13:36 +0300
Subject: feat: successfully virtualize list

---
 src/components/Feed/Feed.tsx | 49 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 12 deletions(-)

(limited to 'src/components/Feed')

diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx
index 7636573..785dd79 100644
--- a/src/components/Feed/Feed.tsx
+++ b/src/components/Feed/Feed.tsx
@@ -1,26 +1,51 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { Poll } from 'which-types';
 import PollCard from '../PollCard/PollCard';
+import { WindowScroller, AutoSizer, List } from 'react-virtualized';
 
 interface PropTypes {
   polls: Poll[];
 }
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    position: 'relative',
-    maxWidth: theme.spacing(75),
-    margin: '0 auto'
-  }
-}));
+interface RenderPropTypes {
+  index: number;
+  key: string;
+  style: React.CSSProperties;
+}
 
 const Feed: React.FC<PropTypes> = ({ polls }) => {
-  const classes = useStyles();
+
+  const RenderItem: React.FC<RenderPropTypes> = ({ index, style, key }) => {
+    const poll = polls[index];
+    return (
+      <div key={key} style={style}>
+        <PollCard initialPoll={poll} />
+      </div>
+    )
+  };
+
   return (
-    <div className={classes.root}>
-      {polls.map(poll => <PollCard initialPoll={poll} key={poll._id} />)}
-    </div>
+    <WindowScroller>
+      {({height, isScrolling, registerChild, onChildScroll, scrollTop}) => (
+        <AutoSizer disableHeight>
+          {({width}) => (
+            <div ref={registerChild}>
+              <List
+                autoHeight
+                height={height}
+                isScrolling={isScrolling}
+                onScroll={onChildScroll}
+                rowCount={polls.length}
+                rowHeight={600}
+                rowRenderer={RenderItem}
+                scrollTop={scrollTop}
+                width={width}
+              />
+            </div>
+          )}
+        </AutoSizer>
+      )}
+    </WindowScroller>
   );
 };
 
-- 
cgit v1.2.3


From 9dfbf0377663d92a2f34ebe0cf435b473ee5445b Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 3 Jul 2020 17:06:28 +0300
Subject: style: fix eslint errors

---
 src/components/Feed/Feed.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

(limited to 'src/components/Feed')

diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx
index 785dd79..c532f45 100644
--- a/src/components/Feed/Feed.tsx
+++ b/src/components/Feed/Feed.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Poll } from 'which-types';
-import PollCard from '../PollCard/PollCard';
 import { WindowScroller, AutoSizer, List } from 'react-virtualized';
 
+import PollCard from '../PollCard/PollCard';
+
 interface PropTypes {
   polls: Poll[];
 }
@@ -14,21 +15,26 @@ interface RenderPropTypes {
 }
 
 const Feed: React.FC<PropTypes> = ({ polls }) => {
-
   const RenderItem: React.FC<RenderPropTypes> = ({ index, style, key }) => {
     const poll = polls[index];
     return (
       <div key={key} style={style}>
         <PollCard initialPoll={poll} />
       </div>
-    )
+    );
   };
 
   return (
     <WindowScroller>
-      {({height, isScrolling, registerChild, onChildScroll, scrollTop}) => (
+      {({
+        height,
+        isScrolling,
+        registerChild,
+        onChildScroll,
+        scrollTop
+      }) => (
         <AutoSizer disableHeight>
-          {({width}) => (
+          {({ width }) => (
             <div ref={registerChild}>
               <List
                 autoHeight
-- 
cgit v1.2.3