From 933e891b37a7b42760f1535e49cd5295b056a663 Mon Sep 17 00:00:00 2001 From: Martti Malmi Date: Fri, 15 Dec 2023 15:23:24 +0200 Subject: [PATCH] notifications status in settings --- packages/app/src/Element/User/BadgeList.tsx | 2 +- .../app/src/Pages/settings/Notifications.tsx | 135 +++++++++++++++--- packages/app/src/Pages/settings/Root.tsx | 2 - packages/app/src/Pages/settings/messages.ts | 10 ++ packages/app/src/lang.json | 36 +++++ packages/app/src/translations/en.json | 12 ++ 6 files changed, 171 insertions(+), 26 deletions(-) diff --git a/packages/app/src/Element/User/BadgeList.tsx b/packages/app/src/Element/User/BadgeList.tsx index 38591041..f641b3e1 100644 --- a/packages/app/src/Element/User/BadgeList.tsx +++ b/packages/app/src/Element/User/BadgeList.tsx @@ -36,7 +36,7 @@ export default function BadgeList({ badges }: { badges: TaggedNostrEvent[] }) { {showModal && ( setShowModal(false)}>
- setShowModal(false)} /> + setShowModal(false)} />

diff --git a/packages/app/src/Pages/settings/Notifications.tsx b/packages/app/src/Pages/settings/Notifications.tsx index 292a7889..88f1fb61 100644 --- a/packages/app/src/Pages/settings/Notifications.tsx +++ b/packages/app/src/Pages/settings/Notifications.tsx @@ -1,39 +1,128 @@ -import "./Preferences.css"; - import { FormattedMessage } from "react-intl"; +import { useEffect, useState } from "react"; +import Icon from "@/Icons/Icon"; import useLogin from "@/Hooks/useLogin"; -import { updatePreferences } from "@/Login"; -import { useLocale } from "@/IntlProvider"; +import { subscribeToNotifications } from "@/Notifications"; +import useEventPublisher from "@/Hooks/useEventPublisher"; +import messages from "./messages"; + +const StatusIndicator = ({ status, enabledMessage, disabledMessage }) => { + return status ? ( +
+ + +
+ ) : ( +
+ + +
+ ); +}; const PreferencesPage = () => { - const { id, perf } = useLogin(s => ({ id: s.id, perf: s.appData.item.preferences })); - const { lang } = useLocale(); + const login = useLogin(); + const { publisher } = useEventPublisher(); + const [serviceWorkerReady, setServiceWorkerReady] = useState(false); + const hasNotificationsApi = "Notification" in window; + const [notificationsAllowed, setNotificationsAllowed] = useState( + hasNotificationsApi && Notification.permission === "granted", + ); + const [subscribedToPush, setSubscribedToPush] = useState(false); + const allGood = !login.readonly && hasNotificationsApi && notificationsAllowed && serviceWorkerReady; + + useEffect(() => { + if ("serviceWorker" in navigator) { + navigator.serviceWorker.ready.then(registration => { + if (registration.active) { + setServiceWorkerReady(true); + } + }); + } + }, []); + + const trySubscribePush = async () => { + try { + if (allGood && publisher && !subscribedToPush) { + await subscribeToNotifications(publisher); + setSubscribedToPush(true); + } + } catch (e) { + console.error(e); + } + }; + + useEffect(() => { + trySubscribePush(); + }, [allGood, publisher]); + + const requestNotificationPermission = () => { + Notification.requestPermission().then(permission => { + const allowed = permission === "granted"; + setNotificationsAllowed(allowed); + if (!allowed) { + alert("Please allow notifications in your browser settings and try again."); + } + }); + }; + + if (!login.publicKey) { + return null; + } return ( -
+

-
-

- -

-
- +

+ +

+ +
+ + +
+ + {hasNotificationsApi && !notificationsAllowed && ( + + )} +
+ +
+ + {allGood && !subscribedToPush && ( + + )}
); }; + export default PreferencesPage; diff --git a/packages/app/src/Pages/settings/Root.tsx b/packages/app/src/Pages/settings/Root.tsx index ad1755c1..54a726f0 100644 --- a/packages/app/src/Pages/settings/Root.tsx +++ b/packages/app/src/Pages/settings/Root.tsx @@ -39,13 +39,11 @@ const SettingsIndex = () => { { icon: "shield-tick", message: , path: "moderation" }, { icon: "badge", message: , path: "handle" }, { icon: "gear", message: , path: "preferences" }, - /* { icon: "bell-outline", message: , path: "notifications", }, - */ { icon: "wallet", message: , path: "wallet" }, { icon: "heart", message: , path: "/donate" }, { icon: "hard-drive", message: , path: "cache" }, diff --git a/packages/app/src/Pages/settings/messages.ts b/packages/app/src/Pages/settings/messages.ts index f6f855e0..5cf7df3c 100644 --- a/packages/app/src/Pages/settings/messages.ts +++ b/packages/app/src/Pages/settings/messages.ts @@ -66,4 +66,14 @@ export default defineMessages({ ReactionEmoji: { defaultMessage: "Reaction emoji", id: "eHAneD" }, ReactionEmojiHelp: { defaultMessage: "Emoji to send when reactiong to a note", id: "gDzDRs" }, SocialGraph: { defaultMessage: "Social Graph", id: "CzHZoc" }, + HasWriteAccess: { defaultMessage: "Logged in with write access", id: "+UjDmN" }, + NoWriteAccess: { defaultMessage: "Logged in with read-only access", id: "bMphls" }, + NotificationsApiEnabled: { defaultMessage: "Notifications API Enabled", id: "5PRWs7" }, + NotificationsApiDisabled: { defaultMessage: "Notifications API Disabled", id: "qcJFEJ" }, + NotificationsAllowed: { defaultMessage: "Notifications Allowed", id: "nGGDsi" }, + NotificationsNotAllowed: { defaultMessage: "Notifications Not Allowed", id: "J1iLmb" }, + ServiceWorkerRunning: { defaultMessage: "Service Worker Running", id: "bG00/W" }, + ServiceWorkerNotRunning: { defaultMessage: "Service Worker Not Running", id: "RDha9y" }, + SubscribedToPush: { defaultMessage: "Subscribed to Push", id: 'G3A56c' }, + NotSubscribedToPush: { defaultMessage: "Not Subscribed to Push", id: 'd2ebEu' }, }); diff --git a/packages/app/src/lang.json b/packages/app/src/lang.json index e46403a6..a8f6180e 100644 --- a/packages/app/src/lang.json +++ b/packages/app/src/lang.json @@ -5,6 +5,9 @@ "+PzQ9Y": { "defaultMessage": "Payout Now" }, + "+UjDmN": { + "defaultMessage": "Logged in with write access" + }, "+Vxixo": { "defaultMessage": "Secret Group Chat" }, @@ -207,6 +210,9 @@ "5CB6zB": { "defaultMessage": "Zap Splits" }, + "5PRWs7": { + "defaultMessage": "Notifications API Enabled" + }, "5oTnfy": { "defaultMessage": "Buy Handle" }, @@ -494,6 +500,9 @@ "G1BGCg": { "defaultMessage": "Select Wallet" }, + "G3A56c": { + "defaultMessage": "Subscribed to Push" + }, "GFOoEE": { "defaultMessage": "Salt" }, @@ -579,6 +588,9 @@ "J+dIsA": { "defaultMessage": "Subscriptions" }, + "J1iLmb": { + "defaultMessage": "Notifications Not Allowed" + }, "J2HeQ+": { "defaultMessage": "Use commas to separate words e.g. word1, word2, word3" }, @@ -777,6 +789,9 @@ "R81upa": { "defaultMessage": "People you follow" }, + "RDha9y": { + "defaultMessage": "Service Worker Not Running" + }, "RSr2uB": { "defaultMessage": "Username must only contain lowercase letters and numbers" }, @@ -1000,9 +1015,15 @@ "b5vAk0": { "defaultMessage": "Your handle will act like a lightning address and will redirect to your chosen LNURL or Lightning address" }, + "bG00/W": { + "defaultMessage": "Service Worker Running" + }, "bLZL5a": { "defaultMessage": "Get Address" }, + "bMphls": { + "defaultMessage": "Logged in with read-only access" + }, "bQdA2k": { "defaultMessage": "Sensitive Content" }, @@ -1055,6 +1076,9 @@ "d+6YsV": { "defaultMessage": "Lists to mute:" }, + "d2ebEu": { + "defaultMessage": "Not Subscribed to Push" + }, "d6CyG5": { "defaultMessage": "History", "description": "Wallet transation history" @@ -1333,6 +1357,9 @@ "nGBrvw": { "defaultMessage": "Bookmarks" }, + "nGGDsi": { + "defaultMessage": "Notifications Allowed" + }, "nihgfo": { "defaultMessage": "Listen to this article" }, @@ -1387,6 +1414,9 @@ "qZsKBR": { "defaultMessage": "Renew {tier}" }, + "qcJFEJ": { + "defaultMessage": "Notifications API Disabled" + }, "qdGuQo": { "defaultMessage": "Your Private Key Is (do not share this with anyone)" }, @@ -1459,6 +1489,9 @@ "ttxS0b": { "defaultMessage": "Supporter Badge" }, + "tzMNF3": { + "defaultMessage": "Status" + }, "u+LyXc": { "defaultMessage": "Interactions" }, @@ -1578,6 +1611,9 @@ "xybOUv": { "defaultMessage": "FAN" }, + "y/bmsG": { + "defaultMessage": "Subscribe" + }, "y1Z3or": { "defaultMessage": "Language" }, diff --git a/packages/app/src/translations/en.json b/packages/app/src/translations/en.json index 82f959a8..e91bff10 100644 --- a/packages/app/src/translations/en.json +++ b/packages/app/src/translations/en.json @@ -1,6 +1,7 @@ { "+D82kt": "Are you sure you want to repost: {id}", "+PzQ9Y": "Payout Now", + "+UjDmN": "Logged in with write access", "+Vxixo": "Secret Group Chat", "+aZY2h": "Zap Type", "+tShPg": "following", @@ -68,6 +69,7 @@ "4rYCjn": "Note to Self", "5BVs2e": "zap", "5CB6zB": "Zap Splits", + "5PRWs7": "Notifications API Enabled", "5oTnfy": "Buy Handle", "5u6iEc": "Transfer to Pubkey", "5vMmmR": "Usernames are not unique on Nostr. The nostr address is your unique human-readable address that is unique to you upon registration.", @@ -163,6 +165,7 @@ "FvanT6": "Accounts", "G/yZLu": "Remove", "G1BGCg": "Select Wallet", + "G3A56c": "Subscribed to Push", "GFOoEE": "Salt", "GL8aXW": "Bookmarks ({n})", "GQPtfk": "Join Stream", @@ -191,6 +194,7 @@ "IoQq+a": "Click here to load anyway", "Ix8l+B": "Trending Notes", "J+dIsA": "Subscriptions", + "J1iLmb": "Notifications Not Allowed", "J2HeQ+": "Use commas to separate words e.g. word1, word2, word3", "JCIgkj": "Username", "JGrt9q": "Send sats to {name}", @@ -256,6 +260,7 @@ "Qxv0B2": "You currently have {number} sats in your zap pool.", "R/6nsx": "Subscription", "R81upa": "People you follow", + "RDha9y": "Service Worker Not Running", "RSr2uB": "Username must only contain lowercase letters and numbers", "RahCRH": "Expired", "RfhLwC": "By: {author}", @@ -329,7 +334,9 @@ "aWpBzj": "Show more", "b12Goz": "Mnemonic", "b5vAk0": "Your handle will act like a lightning address and will redirect to your chosen LNURL or Lightning address", + "bG00/W": "Service Worker Running", "bLZL5a": "Get Address", + "bMphls": "Logged in with read-only access", "bQdA2k": "Sensitive Content", "bep9C3": "Public Key", "bfvyfs": "Anon", @@ -347,6 +354,7 @@ "cuV2gK": "name is registered", "cyR7Kh": "Back", "d+6YsV": "Lists to mute:", + "d2ebEu": "Not Subscribed to Push", "d6CyG5": "History", "d7d0/x": "LN Address", "d8gpCh": "Try to use less than 5 hashtags to stay on topic 🙏", @@ -439,6 +447,7 @@ "n1Whvj": "Switch", "nDejmx": "Unblock", "nGBrvw": "Bookmarks", + "nGGDsi": "Notifications Allowed", "nihgfo": "Listen to this article", "nwZXeh": "{n} blocked", "o7e+nJ": "{n} followers", @@ -457,6 +466,7 @@ "qMx1sA": "Default Zap amount", "qUJTsT": "Blocked", "qZsKBR": "Renew {tier}", + "qcJFEJ": "Notifications API Disabled", "qdGuQo": "Your Private Key Is (do not share this with anyone)", "qfmMQh": "This note has been muted", "qkvYUb": "Add to Profile", @@ -481,6 +491,7 @@ "thnRpU": "Getting NIP-05 verified can help:", "tjpYlr": "Relay Metrics", "ttxS0b": "Supporter Badge", + "tzMNF3": "Status", "u+LyXc": "Interactions", "u/vOPu": "Paid", "u4bHcR": "Check out the code here: {link}", @@ -520,6 +531,7 @@ "xl4s/X": "Additional Terms:", "xmcVZ0": "Search", "xybOUv": "FAN", + "y/bmsG": "Subscribe", "y1Z3or": "Language", "yCLnBC": "LNURL or Lightning Address", "yNBPJp": "Help fund the development of {site}",