HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions Activity

feat: add column element

Browse Source
This commit is contained in:
Paul Makles
2022-05-30 16:15:52 +01:00
parent 906f15f103
commit 81bf325990
7 changed files with 140 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/pages/settings/panes/Notifications.tsx
View File

@@ -4,7 +4,7 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { Checkbox } from "@revoltchat/ui";
import { Checkbox, Column } from "@revoltchat/ui";
import { urlBase64ToUint8Array } from "../../../lib/conversion";
@@ -36,96 +36,103 @@ export const Notifications = observer(() => {
<h3>
<Text id="app.settings.pages.notifications.push_notifications" />
</h3>
<Checkbox
disabled={!("Notification" in window)}
value={settings.get("notifications:desktop", false)!}
title={
<Text id="app.settings.pages.notifications.enable_desktop" />
}
description={
<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
}
onChange={async (desktopEnabled) => {
if (desktopEnabled) {
const permission =
await Notification.requestPermission();
if (permission !== "granted") {
return openScreen({
id: "error",
error: "DeniedNotification",
});
}
<Column>
<Checkbox
disabled={!("Notification" in window)}
value={settings.get("notifications:desktop", false)!}
title={
<Text id="app.settings.pages.notifications.enable_desktop" />
}
description={
<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
}
onChange={async (desktopEnabled) => {
if (desktopEnabled) {
const permission =
await Notification.requestPermission();
settings.set("notifications:desktop", desktopEnabled);
}}
/>
<Checkbox
disabled={typeof pushEnabled === "undefined"}
value={pushEnabled ?? false}
title={
<Text id="app.settings.pages.notifications.enable_push" />
}
description={
<Text id="app.settings.pages.notifications.descriptions.enable_push" />
}
onChange={async (pushEnabled) => {
try {
const reg =
await navigator.serviceWorker?.getRegistration();
if (reg) {
if (pushEnabled) {
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(
client.configuration!.vapid,
),
if (permission !== "granted") {
return openScreen({
id: "error",
error: "DeniedNotification",
});
// tell the server we just subscribed
const json = sub.toJSON();
if (json.keys) {
client.api.post("/push/subscribe", {
endpoint: sub.endpoint,
...(json.keys as {
p256dh: string;
auth: string;
}),
});
setPushEnabled(true);
}
} else {
const sub =
await reg.pushManager.getSubscription();
sub?.unsubscribe();
setPushEnabled(false);
client.api.post("/push/unsubscribe");
}
}
} catch (err) {
console.error("Failed to enable push!", err);
settings.set("notifications:desktop", desktopEnabled);
}}
/>
<Checkbox
disabled={typeof pushEnabled === "undefined"}
value={pushEnabled ?? false}
title={
<Text id="app.settings.pages.notifications.enable_push" />
}
}}
/>
description={
<Text id="app.settings.pages.notifications.descriptions.enable_push" />
}
onChange={async (pushEnabled) => {
try {
const reg =
await navigator.serviceWorker?.getRegistration();
if (reg) {
if (pushEnabled) {
const sub = await reg.pushManager.subscribe(
{
userVisibleOnly: true,
applicationServerKey:
urlBase64ToUint8Array(
client.configuration!.vapid,
),
},
);
// tell the server we just subscribed
const json = sub.toJSON();
if (json.keys) {
client.api.post("/push/subscribe", {
endpoint: sub.endpoint,
...(json.keys as {
p256dh: string;
auth: string;
}),
});
setPushEnabled(true);
}
} else {
const sub =
await reg.pushManager.getSubscription();
sub?.unsubscribe();
setPushEnabled(false);
client.api.post("/push/unsubscribe");
}
}
} catch (err) {
console.error("Failed to enable push!", err);
}
}}
/>
</Column>
<h3>
<Text id="app.settings.pages.notifications.sounds" />
</h3>
{settings.sounds.getState().map(({ id, enabled }) => (
<Checkbox
key={id}
value={enabled}
title={
<Text
id={`app.settings.pages.notifications.sound.${id}`}
/>
}
onChange={(enabled) =>
settings.sounds.setEnabled(id, enabled)
}
/>
))}
<Column>
{settings.sounds.getState().map(({ id, enabled }) => (
<Checkbox
key={id}
value={enabled}
title={
<Text
id={`app.settings.pages.notifications.sound.${id}`}
/>
}
onChange={(enabled) =>
settings.sounds.setEnabled(id, enabled)
}
/>
))}
</Column>
</div>
);
});