Merge pull request #57 from which-ecosystem/virtual-render

Virtualize Feed component

3 files changed, 73 insertions, 12 deletions

diff --git a/package-lock.json b/package-lock.json
index dc2f8b5..da2d1a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1686,6 +1686,16 @@
         "@types/react": "*"
       }
     },
+    "@types/react-virtualized": {
+      "version": "9.21.10",
+      "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.10.tgz",
+      "integrity": "sha512-f5Ti3A7gGdLkPPFNHTrvKblpsPNBiQoSorOEOD+JPx72g/Ng2lOt4MYfhvQFQNgyIrAro+Z643jbcKafsMW2ag==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/react": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -10793,6 +10803,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-scripts": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
@@ -11162,6 +11177,19 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-virtualized": {
+      "version": "9.21.2",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.21.2.tgz",
+      "integrity": "sha512-oX7I7KYiUM7lVXQzmhtF4Xg/4UA5duSA+/ZcAvdWlTLFCoFYq1SbauJT5gZK9cZS/wdYR6TPGpX/dqzvTqQeBA==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "clsx": "^1.0.1",
+        "dom-helpers": "^5.0.0",
+        "loose-envify": "^1.3.0",
+        "prop-types": "^15.6.0",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
diff --git a/package.json b/package.json
index 72bec20..d0cd06b 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "react-dom": "^16.13.1",
     "react-icons": "^3.10.0",
     "react-scripts": "3.4.1",
+    "react-virtualized": "^9.21.2",
     "typeface-roboto": "0.0.75",
     "which-types": "^1.6.1"
   },
@@ -39,6 +40,7 @@
     "@types/node": "^12.12.44",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
+    "@types/react-virtualized": "^9.21.10",
     "@typescript-eslint/eslint-plugin": "^3.1.0",
     "@typescript-eslint/parser": "^3.1.0",
     "eslint": "^6.8.0",
diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx
index 7636573..c532f45 100644
--- a/src/components/Feed/Feed.tsx
+++ b/src/components/Feed/Feed.tsx
@@ -1,26 +1,57 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { Poll } from 'which-types';
+import { WindowScroller, AutoSizer, List } from 'react-virtualized';
+
 import PollCard from '../PollCard/PollCard';
 
 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>
   );
 };