vbatts/ntfy
1
0
Fork 0
Code Pull requests Activity

Working infinite scroll

Browse source
This commit is contained in:
Philipp Heckel 2022-03-07 23:07:07 -05:00
parent 9757983046
commit 6d140d6a86
5 changed files with 66 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
web/package-lock.json generated
View file

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

1
web/package.json
View file

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

3
web/src/app/SubscriptionManager.js
View file

@ -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)

1
web/src/components/App.js
View file

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

42
web/src/components/Notifications.js
View file

@ -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 (
<Container maxWidth="md" sx={{marginTop: 3, marginBottom: 3}}>
<Stack spacing={3}>
{sortedNotifications.map(notification =>
<NotificationItem
key={notification.id}
notification={notification}
/>)}
</Stack>
</Container>
<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}>
{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>
);
}