upd: realtime

deskripsi:
- coba realtime
- api version

No Issues

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 />