From b9ab4b1c608c7022d15a264ec123f2c1a476c33d Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Jul 2020 16:13:36 +0300 Subject: feat: successfully virtualize list --- package-lock.json | 27 ++++++++++++++++++++++++ package.json | 2 ++ src/components/Feed/Feed.tsx | 49 +++++++++++++++++++++++++++++++++----------- 3 files changed, 66 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index e7f7059..896898a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1686,6 +1686,15 @@ "@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==", + "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", @@ -10784,6 +10793,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", @@ -11153,6 +11167,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 f75c0e8..15972e6 100644 --- a/package.json +++ b/package.json @@ -5,12 +5,14 @@ "dependencies": { "@material-ui/core": "^4.10.1", "@material-ui/icons": "^4.9.1", + "@types/react-virtualized": "^9.21.10", "axios": "^0.19.2", "lodash": "^4.17.15", "react": "^16.13.1", "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" }, 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 = ({ polls }) => { - const classes = useStyles(); + + const RenderItem: React.FC = ({ index, style, key }) => { + const poll = polls[index]; + return ( +
+ +
+ ) + }; + return ( -
- {polls.map(poll => )} -
+ + {({height, isScrolling, registerChild, onChildScroll, scrollTop}) => ( + + {({width}) => ( +
+ +
+ )} + + )} + ); }; -- cgit v1.2.3 From 9dfbf0377663d92a2f34ebe0cf435b473ee5445b Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Jul 2020 17:06:28 +0300 Subject: style: fix eslint errors --- package-lock.json | 1 + package.json | 2 +- src/components/Feed/Feed.tsx | 16 +++++++++++----- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 896898a..6f3ba0a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1690,6 +1690,7 @@ "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": "*" diff --git a/package.json b/package.json index 15972e6..4073159 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,6 @@ "dependencies": { "@material-ui/core": "^4.10.1", "@material-ui/icons": "^4.9.1", - "@types/react-virtualized": "^9.21.10", "axios": "^0.19.2", "lodash": "^4.17.15", "react": "^16.13.1", @@ -40,6 +39,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 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 = ({ polls }) => { - const RenderItem: React.FC = ({ index, style, key }) => { const poll = polls[index]; return (
- ) + ); }; return ( - {({height, isScrolling, registerChild, onChildScroll, scrollTop}) => ( + {({ + height, + isScrolling, + registerChild, + onChildScroll, + scrollTop + }) => ( - {({width}) => ( + {({ width }) => (