upd:realtime

Deskripsi;

- upd realtime di halaman pengumuman

No Issues

src/app/api/announcement/route.ts

@@ -203,7 +203,7 @@ export async function POST(request: Request) {
         // create log user
         const log = await createLogUser({ act: 'CREATE', desc: 'User membuat data pengumuman baru', table: 'announcement', data: data.id })
 
-        return NextResponse.json({ success: true, message: "Berhasil membuat pengumuman" }, { status: 200 });
+        return NextResponse.json({ success: true, message: "Berhasil membuat pengumuman", notif: dataNotif }, { status: 200 });
 
     } catch (error) {
         console.error(error);

src/app/test/_ui/RealtimePage.tsx

@@ -14,10 +14,19 @@ export function RealtimePage({ wibuKey }: { wibuKey: string }) {
    }, [data])
 
    async function onTekan() {
-      setData({
+      setData([{
+         idUserTo: 'supadminAmalia',
          title: Math.random().toString(),
-         desc: 'Anda memiliki pengumuman baru. Silahkan periksa detailnya.'
+         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"}>

src/module/_global/bin/val_global.ts

@@ -13,6 +13,8 @@ export const DIR = {
 
 }
 
+export const keyWibu= 'padahariminggukuturutayahkekotanaikdelmanistimewakududukdimuka'
+
 export const TEMA = hookstate<IGlobalTema>({
    utama: "#19345E",
    bgUtama: "#F4F9FD",

src/module/_global/components/notification_custome.tsx

@@ -20,7 +20,7 @@ export default function NotificationCustome({ onClose, title, desc, onClick }: {
   useShallowEffect(() => {
     const timer = setTimeout(() => {
       setOpened(false)
-    }, 2000);
+    }, 3000);
     return () => clearTimeout(timer);
   }, []);
 

src/module/_global/components/wrap_layout.tsx

@@ -1,18 +1,20 @@
 'use client'
 import { useHookstate } from "@hookstate/core";
-import { globalNotifPage, globalRole, TEMA } from "../bin/val_global";
+import { globalNotifPage, globalRole, keyWibu, TEMA } from "../bin/val_global";
 import { useShallowEffect } from "@mantine/hooks";
 import { useEffect, useState } from "react";
 import { useWibuRealtime } from "wibu-realtime";
 import NotificationCustome from "./notification_custome";
+import { useRouter } from "next/navigation";
 
 export default function WrapLayout({ children, role, theme, user }: { children: React.ReactNode, role: any, theme: any, user: any }) {
+   const router = useRouter()
    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',
+      WIBU_REALTIME_TOKEN: keyWibu,
       project: "sdm"
    })
 
@@ -23,24 +25,28 @@ export default function WrapLayout({ children, role, theme, user }: { children:
    }, [role, theme])
 
    useShallowEffect(() => {
-      if (data) {
+      if (data && data.some((i: any) => i.idUserTo == user)) {
          setTampilNotif(true)
-
          setTimeout(() => {
             setTampilNotif(false);
-         }, 3000);
+         }, 4000);
       }
    }, [data])
 
+
+   function onClickNotif(category: string, content: string) {
+      router.push('/' + category + '/' + content)
+   }
+
    return (
       <>
          {/* {JSON.stringify(data)} */}
          {
             tampilNotif &&
             <NotificationCustome
-               title={data?.title}
+               title={data.filter((i: any) => i.idUserTo == user)[0]?.title}
-               desc={data?.desc}
+               desc={data.filter((i: any) => i.idUserTo == user)[0]?.desc}
-               onClick={() => { '' }}
+               onClick={() => { onClickNotif(data.filter((i: any) => i.idUserTo == user)[0]?.category, data.filter((i: any) => i.idUserTo == user)[0]?.idContent) }}
                onClose={() => { '' }}
             />
          }

src/module/_global/index.ts

@@ -1,5 +1,5 @@
 import prisma from "./bin/prisma";
-import { currentScroll, DIR, globalNotifPage, globalRole, pwd_key_config, TEMA } from "./bin/val_global";
+import { currentScroll, DIR, globalNotifPage, globalRole, keyWibu, pwd_key_config, TEMA } from "./bin/val_global";
 import SkeletonAvatar from "./components/skeleton_avatar";
 import SkeletonDetailDiscussionComment from "./components/skeleton_detail_discussion_comment";
 import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discussion_member";
@@ -58,3 +58,4 @@ export { ScrollProvider }
 export { currentScroll }
 export { SkeletonUser }
 export { SkeletonList }
+export { keyWibu }

src/module/announcement/ui/create_announcement.tsx

@@ -1,19 +1,18 @@
 'use client'
-import { LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
+import { keyWibu, LayoutNavbarNew, TEMA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { useHookstate } from "@hookstate/core";
-import { Avatar, Box, Button, Flex, Group, rem, Stack, Text, Textarea, TextInput } from "@mantine/core";
+import { Box, Button, Flex, Group, rem, Stack, Text, Textarea, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { IoIosArrowForward } from "react-icons/io";
-import CreateUsersAnnouncement from "./create_users_announcement";
+import { useWibuRealtime } from "wibu-realtime";
-import { globalMemberAnnouncement } from "../lib/val_announcement";
 import { funCreateAnnouncement } from "../lib/api_announcement";
-import { GroupData, ICreateData, IGroupData } from "../lib/type_announcement";
+import { GroupData } from "../lib/type_announcement";
-import { useRouter } from "next/navigation";
+import { globalMemberAnnouncement } from "../lib/val_announcement";
-
+import CreateUsersAnnouncement from "./create_users_announcement";
-
 
 export default function CreateAnnouncement() {
    const [isOpen, setOpen] = useState(false)
@@ -22,6 +21,10 @@ export default function CreateAnnouncement() {
    const [selectedFiles, setSelectedFiles] = useState<any>([])
    const router = useRouter()
    const tema = useHookstate(TEMA)
+   const [data, setData] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
 
 
    const [isChooseMember, setIsChooseMember] = useState(false)
@@ -32,8 +35,7 @@ export default function CreateAnnouncement() {
    const [touched, setTouched] = useState({
       title: false,
       desc: false
-    });
+   });
-
 
    async function onSubmit() {
       try {
@@ -45,11 +47,7 @@ export default function CreateAnnouncement() {
 
          if (response.success) {
             toast.success(response.message)
-            // setisData({
+            setData(response.notif)
-            //    ...isData,
-            //    title: "",
-            //    desc: "",
-            // })
             memberGroup.set([])
             router.push('/announcement')
          } else {
@@ -79,28 +77,28 @@ export default function CreateAnnouncement() {
 
    function onCheck() {
       if (Object.values(touched).some((v) => v == true))
-        return false
+         return false
       setOpen(true)
    }
-   
+
 
    function onValidation(kategori: string, val: string) {
       if (kategori == 'title') {
          setisData({ ...isData, title: val })
          if (val === "") {
-           setTouched({ ...touched, title: true })
+            setTouched({ ...touched, title: true })
          } else {
-           setTouched({ ...touched, title: false })
+            setTouched({ ...touched, title: false })
          }
       } else if (kategori == 'desc') {
-        setisData({ ...isData, desc: val })
+         setisData({ ...isData, desc: val })
-        if (val === "") {
+         if (val === "") {
-          setTouched({ ...touched, desc: true })
+            setTouched({ ...touched, desc: true })
-        } else {
+         } else {
-          setTouched({ ...touched, desc: false })
+            setTouched({ ...touched, desc: false })
-        }
+         }
-      } 
+      }
-    }
+   }
 
    return (
       <Box>
@@ -123,7 +121,7 @@ export default function CreateAnnouncement() {
                   touched.title && (
                      isData.title == "" ? "Judul Tidak Boleh Kosong" : null
                   )
-                }
+               }
             />
             <Textarea
                size="md"
@@ -145,7 +143,7 @@ export default function CreateAnnouncement() {
                   touched.desc && (
                      isData.desc == "" ? "Pengumuman Tidak Boleh Kosong" : null
                   )
-                }
+               }
             />
             <Box pt={10}>
                <Group justify="space-between" style={{