Working infinite scroll

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",

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"
   },

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)

web/src/components/App.js

@@ -92,6 +92,7 @@ const Root = () => {
 const Main = (props) => {
     return (
         <Box
+            id="main"
             component="main"
             sx={{
                 display: 'flex',

web/src/components/Notifications.js

@@ -20,6 +20,7 @@ import {useLiveQuery} from "dexie-react-hooks";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import subscriptionManager from "../app/SubscriptionManager";
+import InfiniteScroll from "react-infinite-scroll-component";
 
 const Notifications = (props) => {
     if (props.mode === "all") {
@@ -47,21 +48,37 @@ const SingleSubscription = (props) => {
     } else if (notifications.length === 0) {
         return <NoNotifications subscription={subscription}/>;
     }
-    return <NotificationList notifications={notifications} onScroll={() => setOffset(prev => prev + 20)}/>;
+    return <NotificationList notifications={notifications} onFetch={() => {
+        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 (
+        <InfiniteScroll
+            dataLength={count}
+            next={() => setCount(prev => Math.min(notifications.length, prev + 20))}
+            hasMore={count < notifications.length}
+            loader={<h1>aa</h1>}
+            scrollThreshold="400px"
+            scrollableTarget="main"
+        >
             <Container maxWidth="md" sx={{marginTop: 3, marginBottom: 3}}>
                 <Stack spacing={3}>
-                {sortedNotifications.map(notification =>
+                    {notifications.slice(0, count).map(notification =>
                         <NotificationItem
                             key={notification.id}
                             notification={notification}
                         />)}
                 </Stack>
             </Container>
+        </InfiniteScroll>
     );
 }
 
@@ -111,8 +128,7 @@ const NotificationItem = (props) => {
                         <Button onClick={() => openUrl(attachment.url)}>Open attachment</Button>
                     </>}
                     {showClickAction && <Button onClick={() => openUrl(notification.click)}>Open link</Button>}
-                </CardActions>
+                </CardActions>}
-            }
         </Card>
     );
 }