upd: real time

Deskripsi:
- persiapan real time
- baru coba di pengumuman tapi blm sukses

No Issues

src/module/_global/bin/mqtt_client.ts

@@ -0,0 +1,9 @@
+import mtqq from 'mqtt'
+
+declare global {
+   var mtqq_client: mtqq.MqttClient
+}
+
+const mtqq_client = globalThis.mtqq_client ?? mtqq.connect("wss://io.wibudev.com")
+
+export default mtqq_client

src/module/_global/bin/mqtt_load.tsx

@@ -0,0 +1,18 @@
+'use client'
+import { useEffect } from "react"
+import mtqq_client from "./mqtt_client"
+
+export default function MqttLoad() {
+   useEffect(() => {
+      mtqq_client.on("connect", () => {
+         mtqq_client.subscribe("app_SDM")
+      })
+
+      mtqq_client.on("message", (topic, message) => {
+         const data = JSON.parse(message.toString())
+      })
+   }, [])
+   return <>
+
+   </>
+}

src/module/_global/bin/val_global.ts

@@ -19,4 +19,9 @@ export const TEMA = hookstate<IGlobalTema>({
    bgFiturHome: "#FCAA4B",
    bgFiturDivision: "#FCAA4B",
    bgTotalKegiatan: "#DCEED8"
+})
+
+export const globalNotifPage = hookstate({
+   load: false,
+   category: ''
 })

src/module/_global/components/wrap_layout.tsx

@@ -1,18 +1,42 @@
 'use client'
 import { useHookstate } from "@hookstate/core";
-import { globalRole, TEMA } from "../bin/val_global";
+import { globalNotifPage, globalRole, TEMA } from "../bin/val_global";
 import { useShallowEffect } from "@mantine/hooks";
 import { useEffect } from "react";
+import mtqq_client from "../bin/mqtt_client";
 
-export default function WrapLayout({ children, role, theme }: { children: React.ReactNode, role: any, theme:any }) {
+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)
 
    useEffect(() => {
       roleLogin.set(role)
       tema.set(theme)
-   // eslint-disable-next-line react-hooks/exhaustive-deps
+      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [role, theme])
+
+
+   useEffect(() => {
+      mtqq_client.on("connect", () => {
+         console.log('connect layout')
+         mtqq_client.subscribe("app_SDM")
+      })
+
+      mtqq_client.on("message", (topic, message) => {
+         const data = JSON.parse(message.toString())
+
+         console.log('notif mtqq',data)
+
+         // console.log('notif mtqq==',data)
+         // if (data.user == user) {
+         //    notifLoadPage.set({
+         //       load: !notifLoadPage.get(),
+         //       category: data.category
+         //    })
+         // }
+      })
+   })
    return (
       <>
          {children}

src/module/_global/index.ts

@@ -1,5 +1,6 @@
+import MqttLoad from "./bin/mqtt_load";
 import prisma from "./bin/prisma";
-import { DIR, globalRole, pwd_key_config, TEMA } from "./bin/val_global";
+import { DIR, globalNotifPage, globalRole, pwd_key_config, TEMA } from "./bin/val_global";
 import SkeletonDetailDiscussionComment from "./components/skeleton_detail_discussion_comment";
 import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discussion_member";
 import SkeletonDetailListTugasTask from "./components/skeleton_detail_list_tugas_task";
@@ -19,6 +20,7 @@ import LayoutNavbarHome from "./layout/layout_navbar_home";
 import LayoutNavbarNew from "./layout/layout_navbar_new";
 import NoZoom from "./layout/no_zoom";
 import ViewFilter from "./view/view_filter";
+import mtqq_client from "./bin/mqtt_client"
 
 export { WARNA };
 export { LayoutLogin };
@@ -44,3 +46,6 @@ export { funDeleteFile }
 export { DIR }
 export { TEMA }
 export { funCopyFile }
+export { MqttLoad }
+export { mtqq_client }
+export { globalNotifPage }

src/module/announcement/ui/list_announcement.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { SkeletonSingle, TEMA, WARNA } from '@/module/_global';
+import { globalNotifPage, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Stack, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import { TfiAnnouncement } from "react-icons/tfi";
@@ -19,6 +19,7 @@ export default function ListAnnouncement() {
    const router = useRouter()
    const [loading, setLoading] = useState(true);
    const tema = useHookstate(TEMA)
+   const load = useHookstate(globalNotifPage)
 
    const fetchData = async () => {
       try {
@@ -32,7 +33,7 @@ export default function ListAnnouncement() {
          }
          setLoading(false);
       } catch (error) {
-         toast.error("Gagal mendapatkan announcement, coba lagi nanti");
+         toast.error("Gagal mendapatkan pengumuman, coba lagi nanti");
          console.error(error);
       } finally {
          setLoading(false);
@@ -41,7 +42,14 @@ export default function ListAnnouncement() {
 
    useShallowEffect(() => {
       fetchData()
-   }, [searchQuery])
+   }, [searchQuery, load.get().load])
+
+   useShallowEffect(() => {
+      if (load.get().category == "announcement") {
+         console.log('masuk sinii', load.get().load)
+         fetchData()
+      }
+   }, [load.get().load])
 
    return (
       <Box p={20}>