From 6d140d6a86f66abf723d65e50e0b91b1ed5694c2 Mon Sep 17 00:00:00 2001 From: Philipp Heckel Date: Mon, 7 Mar 2022 23:07:07 -0500 Subject: [PATCH] Working infinite scroll --- web/package-lock.json | 33 +++++++++++++++++++++++ web/package.json | 1 + web/src/app/SubscriptionManager.js | 3 ++- web/src/components/App.js | 1 + web/src/components/Notifications.js | 42 ++++++++++++++++++++--------- 5 files changed, 66 insertions(+), 14 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index 4946e7c5..58475fff 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -15,6 +15,7 @@ "dexie-react-hooks": "^1.1.1", "react": "latest", "react-dom": "latest", + "react-infinite-scroll-component": "^6.1.0", "react-router-dom": "^6.2.2", "react-scripts": "^3.0.1" } @@ -13697,6 +13698,17 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "node_modules/react-infinite-scroll-component": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz", + "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==", + "dependencies": { + "throttle-debounce": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16.0.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -16200,6 +16212,14 @@ "resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz", "integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=" }, + "node_modules/throttle-debounce": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz", + "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==", + "engines": { + "node": ">=8" + } + }, "node_modules/through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", @@ -28357,6 +28377,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "react-infinite-scroll-component": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz", + "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==", + "requires": { + "throttle-debounce": "^2.1.0" + } + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -30351,6 +30379,11 @@ "resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz", "integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=" }, + "throttle-debounce": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz", + "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==" + }, "through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", diff --git a/web/package.json b/web/package.json index 5f110242..7a8e10c7 100644 --- a/web/package.json +++ b/web/package.json @@ -16,6 +16,7 @@ "dexie-react-hooks": "^1.1.1", "react": "latest", "react-dom": "latest", + "react-infinite-scroll-component": "^6.1.0", "react-router-dom": "^6.2.2", "react-scripts": "^3.0.1" }, diff --git a/web/src/app/SubscriptionManager.js b/web/src/app/SubscriptionManager.js index bbaede28..fb9f3d30 100644 --- a/web/src/app/SubscriptionManager.js +++ b/web/src/app/SubscriptionManager.js @@ -40,7 +40,8 @@ class SubscriptionManager { // It's actually fine, because the reading and filtering is quite fast. The rendering is what's // killing performance. See https://dexie.org/docs/Collection/Collection.offset()#a-better-paging-approach - const pageSize = 20; + console.log(`getNotifications(${subscriptionId}, ${offset})`) + const pageSize = 2000; return db.notifications .orderBy("time") // Sort by time first .filter(n => n.subscriptionId === subscriptionId) diff --git a/web/src/components/App.js b/web/src/components/App.js index 04c5e285..026257f6 100644 --- a/web/src/components/App.js +++ b/web/src/components/App.js @@ -92,6 +92,7 @@ const Root = () => { const Main = (props) => { return ( { if (props.mode === "all") { @@ -47,21 +48,37 @@ const SingleSubscription = (props) => { } else if (notifications.length === 0) { return ; } - return setOffset(prev => prev + 20)}/>; + return { + console.log(`setOffset`) + setOffset(prev => prev + 20) + }}/>; } const NotificationList = (props) => { - const sortedNotifications = props.notifications; + const notifications = props.notifications; + const pageSize = 20; + const [count, setCount] = useState(Math.min(notifications.length, pageSize)); + + console.log(`count ${count}`) return ( - - - {sortedNotifications.map(notification => - )} - - + setCount(prev => Math.min(notifications.length, prev + 20))} + hasMore={count < notifications.length} + loader={

aa

} + scrollThreshold="400px" + scrollableTarget="main" + > + + + {notifications.slice(0, count).map(notification => + )} + + + ); } @@ -111,8 +128,7 @@ const NotificationItem = (props) => { } {showClickAction && } - - } + } ); }