upd: webpush

Deskripsi:
- database push notification
- update package
- memasang webpush

NO Issues

src/app/(application)/layout.tsx

@@ -1,3 +1,4 @@
+import { PushProvider } from "@/lib/PushProvider"
 import { WrapLayout } from "@/module/_global"
 import { funDetectCookies, funGetUserByCookies } from "@/module/auth"
 import _ from "lodash"
@@ -10,6 +11,7 @@ export default async function Layout({ children }: { children: React.ReactNode }
    const user = await funGetUserByCookies()
    return (
       <>
+         <PushProvider user={String(user.id)} />
          <WrapLayout role={user.idUserRole} theme={user.theme} user={user.id} village={user.idVillage}>
             {children}
          </WrapLayout>

src/app/api/get-subscribe/route.ts

@@ -1,6 +0,0 @@
-import prisma from "@/lib/prisma";
-
-export async function GET() {
-  const sub = await prisma.subscription.findMany();
-  return new Response(JSON.stringify({ data: sub }));
-}

src/app/api/push-notification/route.ts

@@ -0,0 +1,44 @@
+import { prisma } from "@/module/_global"
+import { WibuServerPush } from 'wibu-pkg'
+
+WibuServerPush.init({
+   NEXT_PUBLIC_VAPID_PUBLIC_KEY: process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!,
+   VAPID_PRIVATE_KEY: process.env.VAPID_PRIVATE_KEY!,
+})
+
+export async function POST(req: Request) {
+   const { user, subscription } = await req.json()
+   const upsert = await prisma.subscribe.upsert({
+      where: {
+         idUser: user
+      },
+      create: {
+         idUser: user,
+         subscription: JSON.stringify(subscription)
+      },
+      update: {
+         subscription: JSON.stringify(subscription)
+      }
+   })
+
+   return new Response(JSON.stringify(upsert))
+
+}
+
+export async function PUT(req: Request) {
+   const sub = await prisma.subscribe.findMany()
+   const subs: PushSubscription[] = sub.map((v) => JSON.parse(v.subscription)) as PushSubscription[]
+
+   const kirim = await WibuServerPush.sendMany({
+      subscriptions: subs as any,
+      data: {
+         body: "ini test ",
+         title: "test notif",
+         link: "/",
+         variant: "notification"
+      }
+   })
+
+   return new Response(JSON.stringify(kirim))
+
+}

src/app/api/send-notification/route.ts

@@ -1,70 +0,0 @@
-import webpush from "web-push";
-import prisma from "@/lib/prisma";
-
-// Set VAPID details for web-push
-webpush.setVapidDetails(
-  "mailto:bip.production.js@gmail.com",
-  process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!,
-  process.env.VAPID_PRIVATE_KEY!
-);
-
-export async function POST() {
-  try {
-    // Fetch all subscriptions from your database
-    const subscriptions = await prisma.subscription.findMany();
-
-    if (!subscriptions || subscriptions.length === 0) {
-      console.error("No subscriptions available to send notification");
-      return new Response("No subscriptions available", { status: 400 });
-    }
-
-    // Notification payload
-    const notificationPayload = JSON.stringify({
-      title: "Test Notification",
-      body: "This is a test notification | makuro",
-      icon: "/icon-192x192.png",
-      badge: "/icon-192x192.png",
-      image: "/icon-192x192.png",
-    });
-
-    let successCount = 0;
-    let failureCount = 0;
-
-    // Loop through all subscriptions and send notifications
-    for (const sub of subscriptions) {
-      try {
-        const subscriptionData = sub.data as any;
-
-        await webpush.sendNotification(subscriptionData, notificationPayload);
-        // console.log(
-        //   `Notification sent successfully to ${subscriptionData.endpoint}`
-        // );
-        successCount++;
-      } catch (error: any) {
-        console.error(
-          `Error sending push notification to subscription ${sub.id}:`,
-          error
-        );
-        failureCount++;
-      }
-    }
-
-    // Return a success or failure response
-    return new Response(
-      JSON.stringify({
-        message: `Notifications sent: ${successCount}, Failed: ${failureCount}`,
-        success: failureCount === 0
-      }),
-      { status: 200 }
-    );
-  } catch (error: any) {
-    console.error("Error during notification process:", error);
-    return new Response(
-      JSON.stringify({
-        success: false,
-        error: error.message || "Failed to process notifications"
-      }),
-      { status: 500 }
-    );
-  }
-}

src/app/api/set-subscribe/route.ts

@@ -1,25 +0,0 @@
-import webpush from "web-push";
-import prisma from "@/lib/prisma";
-webpush.setVapidDetails(
-  "mailto:bip.production.js@gmail.com",
-  process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!,
-  process.env.VAPID_PRIVATE_KEY!
-);
-
-export async function POST(req: Request) {
-  const { sub } = await req.json();
-  console.log(sub);
-  if (!sub || !sub.endpoint) {
-    console.error("Invalid subscription object");
-    return new Response("Invalid subscription object", { status: 400 });
-  }
-
-  const data = await prisma.subscription.create({
-    data: {
-      id: sub.keys.auth,
-      data: sub
-    }
-  });
-
-  return new Response(JSON.stringify({ data }));
-}

src/app/api/unsubscribe/route.ts

@@ -1,11 +0,0 @@
-import prisma from "@/lib/prisma";
-
-export async function POST(req: Request) {
-  const { sub } = await req.json();
-  const data = await prisma.subscription.delete({
-    where: {
-      id: sub.keys.auth
-    }
-  });
-  return new Response(JSON.stringify({ data }));
-}

src/app/icon.tsx

@@ -0,0 +1,39 @@
+import { ImageResponse } from 'next/og'
+
+// Image metadata
+export const size = {
+  width: 32,
+  height: 32,
+}
+export const contentType = 'image/png'
+
+// Image generation
+export default function Icon(): ImageResponse {
+  const { width, height } = size
+
+  return new ImageResponse(
+    (
+      // Element JSX yang berfungsi sebagai ikon
+      <div
+        style={{
+          fontSize: 24,
+          backgroundColor: 'black',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'white',
+        }}
+      >
+        B
+      </div>
+    ),
+    {
+      width,
+      height,
+    }
+  )
+}
+
+// wibu:1.0.87

src/app/layout.tsx

@@ -1,19 +1,13 @@
-import "@mantine/core/styles.css";
-import {
-  Box,
-  ColorSchemeScript,
-  Container,
-  MantineProvider,
-  rem,
-} from "@mantine/core";
-import { ScrollProvider, WARNA } from "@/module/_global";
-import { Lato } from "next/font/google";
-import '@mantine/carousel/styles.css';
-import { Toaster } from 'react-hot-toast';
-import '@mantine/dates/styles.css';
-import '@mantine/notifications/styles.css';
-import { Notifications } from '@mantine/notifications'
+import { ScrollProvider } from "@/module/_global";
 import LayoutBackground from "@/module/_global/layout/layout_background";
+import '@mantine/carousel/styles.css';
+import { Box, ColorSchemeScript, MantineProvider } from "@mantine/core";
+import "@mantine/core/styles.css";
+import '@mantine/dates/styles.css';
+import { Notifications } from '@mantine/notifications';
+import '@mantine/notifications/styles.css';
+import { Lato } from "next/font/google";
+import { Toaster } from 'react-hot-toast';
 
 export const metadata = {
   title: "SISTEM DESA MANDIRI",

src/app/makuro/_lib/ButtonKirim.tsx

@@ -0,0 +1,28 @@
+import { Button } from "@mantine/core";
+import { useState } from "react";
+
+export function ButtonKirim() {
+   const [loading, setLoading] = useState(false)
+   async function onKirim() {
+      setLoading(true)
+      try {
+         const res = await fetch('/makuro/api/kirim', {
+            method: 'POST',
+         })
+   
+         const dataText = await res.text()
+         if (!res.ok) {
+            alert(dataText)
+            throw new Error(dataText)
+         }
+         const dataJson = JSON.parse(dataText)
+         console.log(dataJson)
+         alert("berhasil kirim")
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+   return <Button loading={loading} onClick={() => onKirim()} >Kirim</Button>
+}

src/app/makuro/_lib/ButtonSubscribe.tsx

@@ -0,0 +1,32 @@
+import { Button } from "@mantine/core";
+import { useState } from "react";
+
+export function ButtonSubscribe({ user, subscription }: { user: string, subscription?: PushSubscription | null }) {
+   const [loading, setLoading] = useState(false)
+   async function subscribe() {
+      if(!subscription) return alert("no subscription")
+      try {
+         setLoading(true)
+         const res = await fetch('/makuro/api/sub', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ user, subscription })
+         })
+
+         const dataText = await res.text()
+         if (!res.ok) {
+            alert(dataText)
+            throw new Error(dataText)
+         }
+
+         console.log(dataText)
+         alert("berhasil subscribe")
+      } catch (error) {
+         console.error(error);
+
+      } finally {
+         setLoading(false)
+      }
+   }
+   return <Button disabled={!subscription} onClick={() => subscribe()} loading={loading} variant="outline" radius={"xl"} size={"lg"}>Subscribe</Button>
+}

src/app/makuro/_lib/MakuroProvider.tsx

@@ -0,0 +1,5 @@
+import { WibuPermissionProvider, WibuPushNotificationHandler } from "wibu-pkg";
+
+export function MakuroProvider() {
+   return  null
+}

src/app/makuro/_lib/UserSub.ts

@@ -0,0 +1,7 @@
+import { PushSubscription } from 'web-push';
+export class UserSub {
+   public static subscription: PushSubscription | null;
+   public static setSub(subscription: PushSubscription) {
+      this.subscription = subscription
+   }
+}

src/app/makuro/_lib/state.ts

@@ -0,0 +1,3 @@
+import { hookstate } from "@hookstate/core";
+
+export const subState = hookstate<PushSubscription | null>(null)

src/app/makuro/api/kirim/route.ts

@@ -0,0 +1,25 @@
+import { prisma } from "@/module/_global";
+import { WibuServerPush } from 'wibu-pkg'
+
+WibuServerPush.init({
+   NEXT_PUBLIC_VAPID_PUBLIC_KEY: process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!,
+   VAPID_PRIVATE_KEY: process.env.VAPID_PRIVATE_KEY!,
+})
+
+export async function POST(req: Request) {
+   const sub = await prisma.subscribe.findMany()
+   const subs: PushSubscription[] = sub.map((v) => JSON.parse(v.subscription)) as PushSubscription[]
+
+   const kirim = await WibuServerPush.sendMany({
+      subscriptions: subs as any,
+      data: {
+         body: "ini test ",
+         title: "test notif",
+         link: "/",
+         variant: "notification"
+      }
+   })
+
+   return new Response(JSON.stringify(kirim))
+
+}

src/app/makuro/api/sub/route.ts

@@ -0,0 +1,21 @@
+import { prisma } from "@/module/_global"
+
+export async function POST(req: Request) {
+   const { user, subscription } = await req.json()
+   console.log(user, subscription)
+   const upsert = await prisma.subscribe.upsert({
+      where: {
+         idUser: user
+      },
+      create: {
+         idUser: user,
+         subscription: JSON.stringify(subscription)
+      },
+      update: {
+         subscription: JSON.stringify(subscription)
+      }
+   })
+
+   return new Response(JSON.stringify(upsert))
+
+}

src/app/makuro/kirim/page.tsx

@@ -0,0 +1,22 @@
+'use client'
+import { useHookstate } from "@hookstate/core";
+import { Card, Stack, Text, Title } from "@mantine/core";
+import { subState } from "../_lib/state";
+import { ButtonSubscribe } from "../_lib/ButtonSubscribe";
+import { useSearchParams } from "next/navigation";
+
+export default function Page() {
+   const user = useSearchParams().get("user")
+   const { value: sub } = useHookstate(subState)
+   if (!sub) return <Text>loading ...</Text>
+   if (!user) return <Text>masukkan user</Text>
+   return <Stack p={"md"} gap={"lg"}>
+      <Title>Kirim</Title>
+      <Card>
+         <Text>
+            {JSON.stringify(sub)}
+         </Text>
+      </Card>
+      <ButtonSubscribe user={user} subscription={sub} />
+   </Stack>;
+}

src/app/makuro/layout.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { useHookstate } from "@hookstate/core"
+import { WibuPermissionProvider, WibuPushNotificationHandler } from "wibu-pkg"
+import { subState } from "./_lib/state"
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+   const { set: setSubcribe } = useHookstate(subState)
+   return <WibuPermissionProvider requiredPermissions={["notifications"]}>
+      <WibuPushNotificationHandler
+         NEXT_PUBLIC_VAPID_PUBLIC_KEY={process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!}
+         onSubscribe={(sub) => {
+            setSubcribe(sub)
+         }} />
+      {children}
+   </WibuPermissionProvider>
+}

src/app/makuro/terima/page.tsx

@@ -0,0 +1,24 @@
+'use client'
+import { useHookstate } from "@hookstate/core";
+import { Card, Stack, Text, Title } from "@mantine/core";
+import { subState } from "../_lib/state";
+import { ButtonSubscribe } from "../_lib/ButtonSubscribe";
+import { useSearchParams } from "next/navigation";
+import { ButtonKirim } from "../_lib/ButtonKirim";
+
+export default function Page() {
+   const user = useSearchParams().get("user")
+   const { value: sub } = useHookstate(subState)
+   if (!sub) return <Text>loading ...</Text>
+   if (!user) return <Text>masukkan user</Text>
+   return <Stack p={"md"} gap={"lg"}>
+      <Title>terima</Title>
+      <Card>
+         <Text>
+            {JSON.stringify(sub)}
+         </Text>
+      </Card>
+      <ButtonSubscribe user={user} subscription={sub} />
+      <ButtonKirim />
+   </Stack>;
+}

src/app/manifest.ts

@@ -2,9 +2,9 @@ import type { MetadataRoute } from "next";
 
 export default function manifest(): MetadataRoute.Manifest {
   return {
-    name: "Sistem Desa Mandiri",
-    short_name: "SDM",
-    description: "Sistem Desa Mandiri",
+    name: "Wibu Example",
+    short_name: "WibuExp",
+    description: "Contoh penggunaan PWA dan push",
     start_url: "/",
     display: "standalone",
     background_color: "#ffffff",
@@ -13,17 +13,15 @@ export default function manifest(): MetadataRoute.Manifest {
       {
         src: "/icon-192x192.png",
         sizes: "192x192",
-        type: "image/png"
+        type: "image/png",
       },
       {
         src: "/icon-512x512.png",
         sizes: "512x512",
-        type: "image/png"
-      }
+        type: "image/png",
+      },
     ],
-    serviceworker: {
-      src: "/wibu_worker.js"
-    },
-
   };
 }
+
+// wibu:1.0.87

src/app/test/_ui/RealtimePage.tsx

@@ -1,37 +0,0 @@
-'use client'
-import { Button, Stack } from '@mantine/core'
-import { useShallowEffect } from '@mantine/hooks'
-import { useWibuRealtime } from 'wibu-realtime'
-export function RealtimePage({ wibuKey }: { wibuKey: string }) {
-   const [data, setData] = useWibuRealtime({
-      WIBU_REALTIME_TOKEN: wibuKey,
-      project: "sdm"
-   })
-   useShallowEffect(() => {
-      if (data) {
-         console.log(data)
-      }
-   }, [data])
-
-   async function onTekan() {
-      setData([{
-         idUserTo: 'supadminAmalia',
-         title: Math.random().toString(),
-         desc: 'Anda memiliki pengumuman baru. Silahkan periksa detailnya.',
-         category: 'announcement',
-         idContent:'cm1eg9fqh00019rhi3oqbej1i'
-      },{
-         idUserTo: 'supadmieenAmalia',
-         title: Math.random().toString(),
-         desc: 'Anda memiliki pengumuman baru. Silahkan periksa detailnya.',
-         category: 'announcement',
-         idContent:'dfdf'
-      }])
-   }
-   return (
-      <Stack p={"lg"}>
-         {JSON.stringify(data)}
-         <Button onClick={onTekan}>Tekan</Button>
-      </Stack>
-   )
-}

src/app/test/page.tsx

@@ -1,11 +0,0 @@
-import { Stack } from "@mantine/core";
-import { RealtimePage } from "./_ui/RealtimePage";
-const WIBU_REALTIME_KEY = process.env.WIBU_REALTIME_KEY!
-
-export default function Page() {
-   return (
-      <Stack>
-         <RealtimePage wibuKey={WIBU_REALTIME_KEY} />
-      </Stack>
-   )
-}

src/lib/PushProvider.tsx

@@ -0,0 +1,28 @@
+'use client'
+import { WibuPermissionProvider, WibuPushNotificationHandler } from 'wibu-pkg'
+
+const NEXT_PUBLIC_VAPID_PUBLIC_KEY = process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!
+export function PushProvider({ user }: { user: string }) {
+   if (!user) {
+      return <div>tunggu user</div>
+   }
+   return <>
+      <WibuPermissionProvider requiredPermissions={["notifications"]}>
+         <WibuPushNotificationHandler
+            NEXT_PUBLIC_VAPID_PUBLIC_KEY={NEXT_PUBLIC_VAPID_PUBLIC_KEY}
+            onMessage={(msg) => {
+               console.log(msg)
+            }}
+            onSubscribe={(subscription) => {
+               fetch("/api/push-notification/", {
+                  method: "POST",
+                  body: JSON.stringify({
+                     user,
+                     subscription
+                  })
+               })
+            }}
+         />
+      </WibuPermissionProvider>
+   </>
+}

src/opengraph-image.tsx

@@ -0,0 +1,32 @@
+import { ImageResponse } from "next/og";
+
+export default async function Image() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: "green",
+          color: "white",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          textAlign: "center",
+          alignItems: "center",
+          justifyContent: "center"
+        }}
+      >
+        <div style={{
+          fontSize: 128,
+        }}>WIBU APP</div>
+        <p style={{ fontSize: 24 }}>Comprehensive Dock for Wibu web app.</p>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630
+    }
+  );
+}
+
+// wibu:1.0.87