Working infinite scroll
This commit is contained in:
parent
9757983046
commit
6d140d6a86
5 changed files with 66 additions and 14 deletions
33
web/package-lock.json
generated
33
web/package-lock.json
generated
|
@ -15,6 +15,7 @@
|
||||||
"dexie-react-hooks": "^1.1.1",
|
"dexie-react-hooks": "^1.1.1",
|
||||||
"react": "latest",
|
"react": "latest",
|
||||||
"react-dom": "latest",
|
"react-dom": "latest",
|
||||||
|
"react-infinite-scroll-component": "^6.1.0",
|
||||||
"react-router-dom": "^6.2.2",
|
"react-router-dom": "^6.2.2",
|
||||||
"react-scripts": "^3.0.1"
|
"react-scripts": "^3.0.1"
|
||||||
}
|
}
|
||||||
|
@ -13697,6 +13698,17 @@
|
||||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
|
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
|
||||||
"integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
|
"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": {
|
"node_modules/react-is": {
|
||||||
"version": "17.0.2",
|
"version": "17.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
|
||||||
"integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo="
|
"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": {
|
"node_modules/through": {
|
||||||
"version": "2.3.8",
|
"version": "2.3.8",
|
||||||
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
|
||||||
"integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
|
"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": {
|
"react-is": {
|
||||||
"version": "17.0.2",
|
"version": "17.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
|
||||||
"integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo="
|
"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": {
|
"through": {
|
||||||
"version": "2.3.8",
|
"version": "2.3.8",
|
||||||
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
"dexie-react-hooks": "^1.1.1",
|
"dexie-react-hooks": "^1.1.1",
|
||||||
"react": "latest",
|
"react": "latest",
|
||||||
"react-dom": "latest",
|
"react-dom": "latest",
|
||||||
|
"react-infinite-scroll-component": "^6.1.0",
|
||||||
"react-router-dom": "^6.2.2",
|
"react-router-dom": "^6.2.2",
|
||||||
"react-scripts": "^3.0.1"
|
"react-scripts": "^3.0.1"
|
||||||
},
|
},
|
||||||
|
|
|
@ -40,7 +40,8 @@ class SubscriptionManager {
|
||||||
// It's actually fine, because the reading and filtering is quite fast. The rendering is what's
|
// 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
|
// 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
|
return db.notifications
|
||||||
.orderBy("time") // Sort by time first
|
.orderBy("time") // Sort by time first
|
||||||
.filter(n => n.subscriptionId === subscriptionId)
|
.filter(n => n.subscriptionId === subscriptionId)
|
||||||
|
|
|
@ -92,6 +92,7 @@ const Root = () => {
|
||||||
const Main = (props) => {
|
const Main = (props) => {
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
|
id="main"
|
||||||
component="main"
|
component="main"
|
||||||
sx={{
|
sx={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
|
|
|
@ -20,6 +20,7 @@ import {useLiveQuery} from "dexie-react-hooks";
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
import Button from "@mui/material/Button";
|
import Button from "@mui/material/Button";
|
||||||
import subscriptionManager from "../app/SubscriptionManager";
|
import subscriptionManager from "../app/SubscriptionManager";
|
||||||
|
import InfiniteScroll from "react-infinite-scroll-component";
|
||||||
|
|
||||||
const Notifications = (props) => {
|
const Notifications = (props) => {
|
||||||
if (props.mode === "all") {
|
if (props.mode === "all") {
|
||||||
|
@ -47,21 +48,37 @@ const SingleSubscription = (props) => {
|
||||||
} else if (notifications.length === 0) {
|
} else if (notifications.length === 0) {
|
||||||
return <NoNotifications subscription={subscription}/>;
|
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 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 (
|
return (
|
||||||
<Container maxWidth="md" sx={{marginTop: 3, marginBottom: 3}}>
|
<InfiniteScroll
|
||||||
<Stack spacing={3}>
|
dataLength={count}
|
||||||
{sortedNotifications.map(notification =>
|
next={() => setCount(prev => Math.min(notifications.length, prev + 20))}
|
||||||
<NotificationItem
|
hasMore={count < notifications.length}
|
||||||
key={notification.id}
|
loader={<h1>aa</h1>}
|
||||||
notification={notification}
|
scrollThreshold="400px"
|
||||||
/>)}
|
scrollableTarget="main"
|
||||||
</Stack>
|
>
|
||||||
</Container>
|
<Container maxWidth="md" sx={{marginTop: 3, marginBottom: 3}}>
|
||||||
|
<Stack spacing={3}>
|
||||||
|
{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>
|
<Button onClick={() => openUrl(attachment.url)}>Open attachment</Button>
|
||||||
</>}
|
</>}
|
||||||
{showClickAction && <Button onClick={() => openUrl(notification.click)}>Open link</Button>}
|
{showClickAction && <Button onClick={() => openUrl(notification.click)}>Open link</Button>}
|
||||||
</CardActions>
|
</CardActions>}
|
||||||
}
|
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue