Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit5331f9c

Browse files
committed
ui fixes
1 parente8b6083 commit5331f9c

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‎

Lines changed: 13 additions & 6 deletions
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-
interfacePushNotifications{
8+
interfaceWebpushNotifications{
9+
readonlyenabled:boolean;
810
readonlysubscribed:boolean;
911
readonlyloading:boolean;
1012

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

15-
exportconstusePushNotifications=():PushNotifications=>{
17+
exportconstuseWebpushNotifications=():WebpushNotifications=>{
1618
const{ metadata}=useEmbeddedMetadata();
1719
constbuildInfoQuery=useQuery(buildInfo(metadata["build-info"]));
20+
constenabledExperimentsQuery=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"inwindow)||!("serviceWorker"innavigator)){
2534
setSubscribed(false);
@@ -41,14 +50,12 @@ export const usePushNotifications = (): PushNotifications => {
4150
};
4251

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

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

5461
constsubscription=awaitregistration.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‎

Lines changed: 19 additions & 11 deletions
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
importtype*asTypesGenfrom"api/typesGenerated";
4+
import{Button}from"components/Button/Button";
35
import{ExternalImage}from"components/ExternalImage/ExternalImage";
46
import{CoderIcon}from"components/Icons/CoderIcon";
57
importtype{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
importtype{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
<divclassName="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
<NavItemsclassName="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
<divclassName=" hidden md:flex items-center gap-3 ml-auto">
7167
{proxyContextValue&&(
7268
<divclassName="hidden md:block">
@@ -83,6 +79,18 @@ export const NavbarView: FC<NavbarViewProps> = ({
8379
/>
8480
</div>
8581

82+
{enabled ?(
83+
subscribed ?(
84+
<Buttonvariant="outline"disabled={loading}onClick={unsubscribe}>
85+
Disable WebPush
86+
</Button>
87+
) :(
88+
<Buttonvariant="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‎

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

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

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

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

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp