Skip to content

Commit 5331f9c

Browse files
johnstcnjohnstcn
committed
ui fixes
1 parent e8b6083 commit 5331f9c

File tree

3 files changed

+34
-22
lines changed

3 files changed

+34
-22
lines changed

‎site/src/contexts/usePushNotifications.ts renamed to ‎site/src/contexts/useWebpushNotifications.ts

+13-6
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
11
import { API } from "api/api";
22
import { buildInfo } from "api/queries/buildInfo";
3+
import { experiments } from "api/queries/experiments";
34
import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
45
import { useEffect, useState } from "react";
56
import { useQuery } from "react-query";
67

7-
interface PushNotifications {
8+
interface WebpushNotifications {
9+
readonly enabled: boolean;
810
readonly subscribed: boolean;
911
readonly loading: boolean;
1012

1113
subscribe(): Promise<void>;
1214
unsubscribe(): Promise<void>;
1315
}
1416

15-
export const usePushNotifications = (): PushNotifications => {
17+
export const useWebpushNotifications = (): WebpushNotifications => {
1618
const { metadata } = useEmbeddedMetadata();
1719
const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));
20+
const enabledExperimentsQuery = useQuery(experiments(metadata.experiments));
1821

1922
const [subscribed, setSubscribed] = useState<boolean>(false);
2023
const [loading, setLoading] = useState<boolean>(true);
24+
const [enabled, setEnabled] = useState<boolean>(false);
2125

2226
useEffect(() => {
27+
// Check if the experiment is enabled.
28+
if (enabledExperimentsQuery.data?.includes("web-push")) {
29+
setEnabled(true);
30+
}
31+
2332
// Check if browser supports push notifications
2433
if (!("Notification" in window) || !("serviceWorker" in navigator)) {
2534
setSubscribed(false);
@@ -41,14 +50,12 @@ export const usePushNotifications = (): PushNotifications => {
4150
};
4251

4352
checkSubscription();
44-
}, []);
53+
}, [enabledExperimentsQuery.data]);
4554

4655
const subscribe = async (): Promise<void> => {
4756
try {
4857
setLoading(true);
4958
const registration = await navigator.serviceWorker.ready;
50-
51-
// Note: You'd typically get this key from your server
5259
const vapidPublicKey = buildInfoQuery.data?.webpush_public_key;
5360

5461
const subscription = await registration.pushManager.subscribe({
@@ -66,7 +73,6 @@ export const usePushNotifications = (): PushNotifications => {
6673
p256dh_key: json.keys.p256dh,
6774
});
6875

69-
// Send subscription to your server here
7076
setSubscribed(true);
7177
} catch (error) {
7278
console.error("Subscription failed:", error);
@@ -96,6 +102,7 @@ export const usePushNotifications = (): PushNotifications => {
96102

97103
return {
98104
subscribed,
105+
enabled,
99106
loading: loading || buildInfoQuery.isLoading,
100107
subscribe,
101108
unsubscribe,

‎site/src/modules/dashboard/Navbar/NavbarView.tsx

+19-11
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import { API } from "api/api";
2+
import { experiments } from "api/queries/experiments";
23
import type * as TypesGen from "api/typesGenerated";
4+
import { Button } from "components/Button/Button";
35
import { ExternalImage } from "components/ExternalImage/ExternalImage";
46
import { CoderIcon } from "components/Icons/CoderIcon";
57
import type { ProxyContextValue } from "contexts/ProxyContext";
6-
import { usePushNotifications } from "contexts/usePushNotifications";
8+
import { useWebpushNotifications } from "contexts/useWebpushNotifications";
9+
import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
710
import { NotificationsInbox } from "modules/notifications/NotificationsInbox/NotificationsInbox";
811
import type { FC } from "react";
12+
import { useQuery } from "react-query";
913
import { NavLink, useLocation } from "react-router-dom";
1014
import { cn } from "utils/cn";
1115
import { DeploymentDropdown } from "./DeploymentDropdown";
@@ -44,8 +48,8 @@ export const NavbarView: FC<NavbarViewProps> = ({
4448
canViewAuditLog,
4549
proxyContextValue,
4650
}) => {
47-
const { subscribed, loading, subscribe, unsubscribe } =
48-
usePushNotifications();
51+
const { subscribed, enabled, loading, subscribe, unsubscribe } =
52+
useWebpushNotifications();
4953

5054
return (
5155
<div className="border-0 border-b border-solid h-[72px] flex items-center leading-none px-6">
@@ -59,14 +63,6 @@ export const NavbarView: FC<NavbarViewProps> = ({
5963

6064
<NavItems className="ml-4" />
6165

62-
{/* // TODO: styling required here.
63-
{subscribed ? (
64-
<button onClick={unsubscribe}>Unsubscribe</button>
65-
) : (
66-
<button onClick={subscribe}>Subscribe</button>
67-
)}
68-
*/}
69-
7066
<div className=" hidden md:flex items-center gap-3 ml-auto">
7167
{proxyContextValue && (
7268
<div className="hidden md:block">
@@ -83,6 +79,18 @@ export const NavbarView: FC<NavbarViewProps> = ({
8379
/>
8480
</div>
8581

82+
{enabled ? (
83+
subscribed ? (
84+
<Button variant="outline" disabled={loading} onClick={unsubscribe}>
85+
Disable WebPush
86+
</Button>
87+
) : (
88+
<Button variant="outline" disabled={loading} onClick={subscribe}>
89+
Enable WebPush
90+
</Button>
91+
)
92+
) : null}
93+
8694
<NotificationsInbox
8795
fetchNotifications={API.getInboxNotifications}
8896
markAllAsRead={API.markAllInboxNotificationsAsRead}

‎site/src/serviceWorker.ts

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
/// <reference lib="webworker" />
22

3-
import {
4-
type PushNotification,
5-
PushNotificationAction,
6-
} from "api/typesGenerated";
3+
import type { WebpushMessage } from "api/typesGenerated";
74

85
// @ts-ignore
96
declare const self: ServiceWorkerGlobalScope;
@@ -21,7 +18,7 @@ self.addEventListener("push", (event) => {
2118
return;
2219
}
2320

24-
let payload: PushNotification;
21+
let payload: WebpushMessage;
2522
try {
2623
payload = event.data.json();
2724
} catch (e) {

0 commit comments

Comments
 (0)