upd: realtime

deskripsi:
- coba realtime
- api version

No Issues

src/app/api/version-app/route.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+   try {
+      return NextResponse.json({ success: true, version: "0.1" }, { status: 200 });
+   } catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, version: "Gagal mendapatkan version, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+}

src/app/test/_ui/RealtimePage.tsx

@@ -15,7 +15,8 @@ export function RealtimePage({ wibuKey }: { wibuKey: string }) {
 
    async function onTekan() {
       setData({
-         name: Math.random().toString(),
+         title: Math.random().toString(),
+         desc: 'Anda memiliki pengumuman baru. Silahkan periksa detailnya.'
       })
    }
    return (

src/module/_global/components/notification_custome.tsx

@@ -13,14 +13,14 @@ export default function NotificationCustome({ onClose, title, desc, onClick }: {
   useShallowEffect(() => {
     const timer = setTimeout(() => {
       setOpened(true);
-    }, 2000);
+    },50);
     return () => clearTimeout(timer);
   }, []);
 
   useShallowEffect(() => {
     const timer = setTimeout(() => {
       setOpened(false)
-    }, 6000);
+    }, 2000);
     return () => clearTimeout(timer);
   }, []);
 
@@ -42,7 +42,7 @@ export default function NotificationCustome({ onClose, title, desc, onClick }: {
                 ...state,
                 zIndex: 999,
                 position: 'fixed',
-                top: 50,
+                top: 10,
                 display: 'flex',
                 margin: 20,
                 justifyContent: 'center',

src/module/_global/components/wrap_layout.tsx

@@ -2,12 +2,19 @@
 import { useHookstate } from "@hookstate/core";
 import { globalNotifPage, globalRole, TEMA } from "../bin/val_global";
 import { useShallowEffect } from "@mantine/hooks";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { useWibuRealtime } from "wibu-realtime";
+import NotificationCustome from "./notification_custome";
 
 export default function WrapLayout({ children, role, theme, user }: { children: React.ReactNode, role: any, theme: any, user: any }) {
    const roleLogin = useHookstate(globalRole)
    const tema = useHookstate(TEMA)
    const notifLoadPage = useHookstate(globalNotifPage)
+   const [tampilNotif, setTampilNotif] = useState(false)
+   const [data, setData] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: 'padahariminggukuturutayahkekotanaikdelmanistimewakududukdimuka',
+      project: "sdm"
+   })
 
    useEffect(() => {
       roleLogin.set(role)
@@ -15,8 +22,29 @@ export default function WrapLayout({ children, role, theme, user }: { children:
       // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [role, theme])
 
+   useShallowEffect(() => {
+      if (data) {
+         setTampilNotif(true)
+
+         setTimeout(() => {
+            setTampilNotif(false);
+         }, 3000);
+      }
+   }, [data])
+
    return (
       <>
+         {JSON.stringify(data)}
+         {
+            tampilNotif &&
+            <NotificationCustome
+               title={data?.title}
+               desc={data?.desc}
+               onClick={() => { '' }}
+               onClose={() => { '' }}
+            />
+         }
+
          {children}
       </>
    );

src/module/home/ui/view_home.tsx

@@ -26,12 +26,6 @@ export default function ViewHome() {
         }
         title='UPDATE'
       /> */}
-      {/* <NotificationCustome
-        title='Pengumuman'
-        desc='Pengumuman Upacara bendera Upacara bendera Upacara bendera Upacara bendera Upacara bendera'
-        onClick={() => {''}}
-        onClose={() => {''}}
-      /> */}
       <Box p={20}>
         <Stack >
           <Carosole />