Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

subscribe to notifications from nav sidebar notifs click

Browse Source
This commit is contained in:
Martti Malmi 2023-12-14 13:01:10 +02:00
parent 14692aceb9
commit b38527ca1f
3 changed files with 53 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/app/src/Notifications.ts
View File

@ -1,9 +1,11 @@
import { TaggedNostrEvent, EventKind, MetadataCache } from "@snort/system";
import { TaggedNostrEvent, EventKind, MetadataCache, EventPublisher } from "@snort/system";
import { MentionRegex } from "@/Const";
import { defaultAvatar, tagFilterOfTextRepost, getDisplayName } from "@/SnortUtils";
import { UserCache } from "@/Cache";
import { LoginSession } from "@/Login";
import { removeUndefined } from "@snort/shared";
import { removeUndefined, unwrap } from "@snort/shared";
import SnortApi from "@/External/SnortApi";
import { base64 } from "@scure/base";
export interface NotificationRequest {
title: string;
@ -69,3 +71,37 @@ export async function sendNotification(state: LoginSession, req: NotificationReq
}
}
}
export async function subscribeToNotifications(publisher: EventPublisher) {
// request permissions to send notifications
if ("Notification" in window) {
try {
if (Notification.permission !== "granted") {
const res = await Notification.requestPermission();
console.debug(res);
}
} catch (e) {
console.error(e);
}
}
try {
if ("serviceWorker" in navigator) {
const reg = await navigator.serviceWorker.ready;
if (reg && publisher) {
const api = new SnortApi(undefined, publisher);
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: (await api.getPushNotificationInfo()).publicKey,
});
await api.registerPushNotifications({
endpoint: sub.endpoint,
p256dh: base64.encode(new Uint8Array(unwrap(sub.getKey("p256dh")))),
auth: base64.encode(new Uint8Array(unwrap(sub.getKey("auth")))),
scope: `${location.protocol}//${location.hostname}`,
});
}
}
} catch (e) {
console.error(e);
}
}

14
packages/app/src/Pages/Layout/NavSidebar.tsx
View File

@ -11,6 +11,8 @@ import classNames from "classnames";
import { getCurrentSubscription } from "@/Subscription";
import { HasNotificationsMarker } from "@/Pages/Layout/HasNotificationsMarker";
import NavLink from "@/Element/Button/NavLink";
import { subscribeToNotifications } from "@/Notifications";
import useEventPublisher from "@/Hooks/useEventPublisher";
const MENU_ITEMS = [
{
@ -77,6 +79,7 @@ export default function NavSidebar({ narrow = false }) {
}));
const profile = useUserProfile(publicKey);
const navigate = useNavigate();
const { publisher } = useEventPublisher();
const sub = getCurrentSubscription(subscriptions);
const { formatMessage } = useIntl();
@ -114,8 +117,17 @@ export default function NavSidebar({ narrow = false }) {
if (!item.nonLoggedIn && !publicKey) {
return "";
}
const onClick = () => {
if (item.label === "Notifications") {
subscribeToNotifications(publisher);
}
};
return (
<NavLink key={item.link} to={item.link} className={({ isActive }) => getNavLinkClass(isActive, narrow)}>
<NavLink
onClick={onClick}
key={item.link}
to={item.link}
className={({ isActive }) => getNavLinkClass(isActive, narrow)}>
<Icon name={`${item.icon}-outline`} className="icon-outline" size={24} />
<Icon name={`${item.icon}-solid`} className="icon-solid" size={24} />
{item.label === "Notifications" && <HasNotificationsMarker />}

40
packages/app/src/Pages/Layout/NotificationsHeader.tsx
View File

@ -1,15 +1,13 @@
import { useNavigate } from "react-router-dom";
import { base64 } from "@scure/base";
import { unwrap } from "@snort/shared";
import Icon from "@/Icons/Icon";
import useKeyboardShortcut from "@/Hooks/useKeyboardShortcut";
import { isFormElement } from "@/SnortUtils";
import useLogin from "@/Hooks/useLogin";
import useEventPublisher from "@/Hooks/useEventPublisher";
import SnortApi from "@/External/SnortApi";
import { HasNotificationsMarker } from "@/Pages/Layout/HasNotificationsMarker";
import NavLink from "@/Element/Button/NavLink";
import classNames from "classnames";
import { subscribeToNotifications } from "@/Notifications";
const NotificationsHeader = () => {
const navigate = useNavigate();
@ -27,40 +25,6 @@ const NotificationsHeader = () => {
}));
const { publisher } = useEventPublisher();
async function goToNotifications() {
// request permissions to send notifications
if ("Notification" in window) {
try {
if (Notification.permission !== "granted") {
const res = await Notification.requestPermission();
console.debug(res);
}
} catch (e) {
console.error(e);
}
}
try {
if ("serviceWorker" in navigator) {
const reg = await navigator.serviceWorker.ready;
if (reg && publisher) {
const api = new SnortApi(undefined, publisher);
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: (await api.getPushNotificationInfo()).publicKey,
});
await api.registerPushNotifications({
endpoint: sub.endpoint,
p256dh: base64.encode(new Uint8Array(unwrap(sub.getKey("p256dh")))),
auth: base64.encode(new Uint8Array(unwrap(sub.getKey("auth")))),
scope: `${location.protocol}//${location.hostname}`,
});
}
}
} catch (e) {
console.error(e);
}
}
if (!publicKey) {
return (
<button onClick={() => navigate("/login/sign-up")} className="mr-3 primary p-2">
@ -73,7 +37,7 @@ const NotificationsHeader = () => {
<NavLink
className={({ isActive }) => classNames({ active: isActive }, "px-2 py-3 flex")}
to="/notifications"
onClick={goToNotifications}>
onClick={() => subscribeToNotifications(publisher)}>
<Icon name="bell-solid" className="icon-solid" size={24} />
<Icon name="bell-outline" className="icon-outline" size={24} />
<HasNotificationsMarker />