Add "new" badge and title
This commit is contained in:
parent
3a76e4733c
commit
1d2f3f72e4
5 changed files with 42 additions and 10 deletions
|
@ -2,7 +2,14 @@ import db from "./db";
|
|||
|
||||
class SubscriptionManager {
|
||||
async all() {
|
||||
return db.subscriptions.toArray();
|
||||
// All subscriptions, including "new count"; this is a JOIN, see https://dexie.org/docs/API-Reference#joining
|
||||
const subscriptions = await db.subscriptions.toArray();
|
||||
await Promise.all(subscriptions.map(async s => {
|
||||
s.new = await db.notifications
|
||||
.where({ subscriptionId: s.id, new: 1 })
|
||||
.count();
|
||||
}));
|
||||
return subscriptions;
|
||||
}
|
||||
|
||||
async get(subscriptionId) {
|
||||
|
@ -14,7 +21,6 @@ class SubscriptionManager {
|
|||
}
|
||||
|
||||
async updateState(subscriptionId, state) {
|
||||
console.log(`Update state: ${subscriptionId} ${state}`)
|
||||
db.subscriptions.update(subscriptionId, { state: state });
|
||||
}
|
||||
|
||||
|
@ -41,10 +47,15 @@ class SubscriptionManager {
|
|||
if (exists) {
|
||||
return false;
|
||||
}
|
||||
await db.notifications.add({ ...notification, subscriptionId }); // FIXME consider put() for double tab
|
||||
await db.subscriptions.update(subscriptionId, {
|
||||
last: notification.id
|
||||
});
|
||||
try {
|
||||
notification.new = 1; // New marker (used for bubble indicator); cannot be boolean; Dexie index limitation
|
||||
await db.notifications.add({ ...notification, subscriptionId }); // FIXME consider put() for double tab
|
||||
await db.subscriptions.update(subscriptionId, {
|
||||
last: notification.id
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(`[SubscriptionManager] Error adding notification`, e);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
|
@ -69,6 +80,12 @@ class SubscriptionManager {
|
|||
.delete();
|
||||
}
|
||||
|
||||
async markNotificationsRead(subscriptionId) {
|
||||
await db.notifications
|
||||
.where({subscriptionId: subscriptionId, new: 1})
|
||||
.modify({new: 0});
|
||||
}
|
||||
|
||||
async pruneNotifications(thresholdTimestamp) {
|
||||
await db.notifications
|
||||
.where("time").below(thresholdTimestamp)
|
||||
|
|
|
@ -10,7 +10,7 @@ const db = new Dexie('ntfy');
|
|||
|
||||
db.version(1).stores({
|
||||
subscriptions: '&id,baseUrl',
|
||||
notifications: '&id,subscriptionId,time',
|
||||
notifications: '&id,subscriptionId,time,new,[subscriptionId+new]', // compound key for query performance
|
||||
users: '&baseUrl,username',
|
||||
prefs: '&key'
|
||||
});
|
||||
|
|
|
@ -46,6 +46,7 @@ const Root = () => {
|
|||
const users = useLiveQuery(() => userManager.all());
|
||||
const subscriptions = useLiveQuery(() => subscriptionManager.all());
|
||||
const selectedSubscription = findSelected(location, subscriptions);
|
||||
const newNotificationsCount = subscriptions?.reduce((prev, cur) => prev + cur.new, 0) || 0;
|
||||
|
||||
useWorkers();
|
||||
useConnectionListeners();
|
||||
|
@ -54,6 +55,11 @@ const Root = () => {
|
|||
connectionManager.refresh(subscriptions, users);
|
||||
}, [subscriptions, users]); // Dangle!
|
||||
|
||||
useEffect(() => {
|
||||
console.log(`hello ${newNotificationsCount}`)
|
||||
document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy web` : "ntfy web";
|
||||
}, [newNotificationsCount]);
|
||||
|
||||
return (
|
||||
<Box sx={{display: 'flex'}}>
|
||||
<CssBaseline/>
|
||||
|
|
|
@ -12,12 +12,13 @@ import SettingsIcon from "@mui/icons-material/Settings";
|
|||
import HomeIcon from '@mui/icons-material/Home';
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
import SubscribeDialog from "./SubscribeDialog";
|
||||
import {Alert, AlertTitle, CircularProgress, ListSubheader} from "@mui/material";
|
||||
import {Alert, AlertTitle, Badge, CircularProgress, ListSubheader} from "@mui/material";
|
||||
import Button from "@mui/material/Button";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import {subscriptionRoute, topicShortUrl, topicUrl} from "../app/utils";
|
||||
import {ConnectionState} from "../app/Connection";
|
||||
import {useLocation, useNavigate} from "react-router-dom";
|
||||
import subscriptionManager from "../app/SubscriptionManager";
|
||||
|
||||
const navWidth = 240;
|
||||
|
||||
|
@ -134,12 +135,16 @@ const SubscriptionItem = (props) => {
|
|||
const subscription = props.subscription;
|
||||
const icon = (subscription.state === ConnectionState.Connecting)
|
||||
? <CircularProgress size="24px"/>
|
||||
: <ChatBubbleOutlineIcon/>;
|
||||
: <Badge badgeContent={subscription.new} invisible={subscription.new === 0} color="primary"><ChatBubbleOutlineIcon/></Badge>;
|
||||
const label = (subscription.baseUrl === window.location.origin)
|
||||
? subscription.topic
|
||||
: topicShortUrl(subscription.baseUrl, subscription.topic);
|
||||
const handleClick = async () => {
|
||||
navigate(subscriptionRoute(subscription));
|
||||
await subscriptionManager.markNotificationsRead(subscription.id);
|
||||
};
|
||||
return (
|
||||
<ListItemButton onClick={() => navigate(subscriptionRoute(subscription))} selected={props.selected}>
|
||||
<ListItemButton onClick={handleClick} selected={props.selected}>
|
||||
<ListItemIcon>{icon}</ListItemIcon>
|
||||
<ListItemText primary={label}/>
|
||||
</ListItemButton>
|
||||
|
|
|
@ -80,6 +80,10 @@ const NotificationItem = (props) => {
|
|||
alt={`Priority ${notification.priority}`}
|
||||
style={{ verticalAlign: 'bottom' }}
|
||||
/>}
|
||||
{notification.new === 1 &&
|
||||
<svg style={{ width: '8px', height: '8px', marginLeft: '4px' }} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="50" cy="50" r="50" fill="#338574"/>
|
||||
</svg>}
|
||||
</Typography>
|
||||
{notification.title && <Typography variant="h5" component="div">{formatTitle(notification)}</Typography>}
|
||||
<Typography variant="body1" sx={{ whiteSpace: 'pre-line' }}>{formatMessage(notification)}</Typography>
|
||||
|
|
Loading…
Reference in a new issue