forked from Kieran/snort
subscribe to notifications from nav sidebar notifs click
This commit is contained in:
parent
14692aceb9
commit
b38527ca1f
@ -1,9 +1,11 @@
|
|||||||
import { TaggedNostrEvent, EventKind, MetadataCache } from "@snort/system";
|
import { TaggedNostrEvent, EventKind, MetadataCache, EventPublisher } from "@snort/system";
|
||||||
import { MentionRegex } from "@/Const";
|
import { MentionRegex } from "@/Const";
|
||||||
import { defaultAvatar, tagFilterOfTextRepost, getDisplayName } from "@/SnortUtils";
|
import { defaultAvatar, tagFilterOfTextRepost, getDisplayName } from "@/SnortUtils";
|
||||||
import { UserCache } from "@/Cache";
|
import { UserCache } from "@/Cache";
|
||||||
import { LoginSession } from "@/Login";
|
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 {
|
export interface NotificationRequest {
|
||||||
title: string;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -11,6 +11,8 @@ import classNames from "classnames";
|
|||||||
import { getCurrentSubscription } from "@/Subscription";
|
import { getCurrentSubscription } from "@/Subscription";
|
||||||
import { HasNotificationsMarker } from "@/Pages/Layout/HasNotificationsMarker";
|
import { HasNotificationsMarker } from "@/Pages/Layout/HasNotificationsMarker";
|
||||||
import NavLink from "@/Element/Button/NavLink";
|
import NavLink from "@/Element/Button/NavLink";
|
||||||
|
import { subscribeToNotifications } from "@/Notifications";
|
||||||
|
import useEventPublisher from "@/Hooks/useEventPublisher";
|
||||||
|
|
||||||
const MENU_ITEMS = [
|
const MENU_ITEMS = [
|
||||||
{
|
{
|
||||||
@ -77,6 +79,7 @@ export default function NavSidebar({ narrow = false }) {
|
|||||||
}));
|
}));
|
||||||
const profile = useUserProfile(publicKey);
|
const profile = useUserProfile(publicKey);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
const { publisher } = useEventPublisher();
|
||||||
const sub = getCurrentSubscription(subscriptions);
|
const sub = getCurrentSubscription(subscriptions);
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
|
|
||||||
@ -114,8 +117,17 @@ export default function NavSidebar({ narrow = false }) {
|
|||||||
if (!item.nonLoggedIn && !publicKey) {
|
if (!item.nonLoggedIn && !publicKey) {
|
||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
|
const onClick = () => {
|
||||||
|
if (item.label === "Notifications") {
|
||||||
|
subscribeToNotifications(publisher);
|
||||||
|
}
|
||||||
|
};
|
||||||
return (
|
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}-outline`} className="icon-outline" size={24} />
|
||||||
<Icon name={`${item.icon}-solid`} className="icon-solid" size={24} />
|
<Icon name={`${item.icon}-solid`} className="icon-solid" size={24} />
|
||||||
{item.label === "Notifications" && <HasNotificationsMarker />}
|
{item.label === "Notifications" && <HasNotificationsMarker />}
|
||||||
|
@ -1,15 +1,13 @@
|
|||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { base64 } from "@scure/base";
|
|
||||||
import { unwrap } from "@snort/shared";
|
|
||||||
import Icon from "@/Icons/Icon";
|
import Icon from "@/Icons/Icon";
|
||||||
import useKeyboardShortcut from "@/Hooks/useKeyboardShortcut";
|
import useKeyboardShortcut from "@/Hooks/useKeyboardShortcut";
|
||||||
import { isFormElement } from "@/SnortUtils";
|
import { isFormElement } from "@/SnortUtils";
|
||||||
import useLogin from "@/Hooks/useLogin";
|
import useLogin from "@/Hooks/useLogin";
|
||||||
import useEventPublisher from "@/Hooks/useEventPublisher";
|
import useEventPublisher from "@/Hooks/useEventPublisher";
|
||||||
import SnortApi from "@/External/SnortApi";
|
|
||||||
import { HasNotificationsMarker } from "@/Pages/Layout/HasNotificationsMarker";
|
import { HasNotificationsMarker } from "@/Pages/Layout/HasNotificationsMarker";
|
||||||
import NavLink from "@/Element/Button/NavLink";
|
import NavLink from "@/Element/Button/NavLink";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
|
import { subscribeToNotifications } from "@/Notifications";
|
||||||
|
|
||||||
const NotificationsHeader = () => {
|
const NotificationsHeader = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@ -27,40 +25,6 @@ const NotificationsHeader = () => {
|
|||||||
}));
|
}));
|
||||||
const { publisher } = useEventPublisher();
|
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) {
|
if (!publicKey) {
|
||||||
return (
|
return (
|
||||||
<button onClick={() => navigate("/login/sign-up")} className="mr-3 primary p-2">
|
<button onClick={() => navigate("/login/sign-up")} className="mr-3 primary p-2">
|
||||||
@ -73,7 +37,7 @@ const NotificationsHeader = () => {
|
|||||||
<NavLink
|
<NavLink
|
||||||
className={({ isActive }) => classNames({ active: isActive }, "px-2 py-3 flex")}
|
className={({ isActive }) => classNames({ active: isActive }, "px-2 py-3 flex")}
|
||||||
to="/notifications"
|
to="/notifications"
|
||||||
onClick={goToNotifications}>
|
onClick={() => subscribeToNotifications(publisher)}>
|
||||||
<Icon name="bell-solid" className="icon-solid" size={24} />
|
<Icon name="bell-solid" className="icon-solid" size={24} />
|
||||||
<Icon name="bell-outline" className="icon-outline" size={24} />
|
<Icon name="bell-outline" className="icon-outline" size={24} />
|
||||||
<HasNotificationsMarker />
|
<HasNotificationsMarker />
|
||||||
|
Loading…
Reference in New Issue
Block a user