From f45233fc0f9e9982ada42b47b6568fc9b28c81eb Mon Sep 17 00:00:00 2001 From: amel Date: Tue, 1 Oct 2024 17:37:57 +0800 Subject: [PATCH] upd:realtime Deskripsi; - upd realtime di halaman pengumuman No Issues --- src/app/api/announcement/route.ts | 2 +- src/app/test/_ui/RealtimePage.tsx | 15 ++++- src/module/_global/bin/val_global.ts | 2 + .../components/notification_custome.tsx | 2 +- src/module/_global/components/wrap_layout.tsx | 22 +++++--- src/module/_global/index.ts | 3 +- .../announcement/ui/create_announcement.tsx | 56 +++++++++---------- 7 files changed, 59 insertions(+), 43 deletions(-) diff --git a/src/app/api/announcement/route.ts b/src/app/api/announcement/route.ts index e215ff2..6cc1e2f 100644 --- a/src/app/api/announcement/route.ts +++ b/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); diff --git a/src/app/test/_ui/RealtimePage.tsx b/src/app/test/_ui/RealtimePage.tsx index 85fdf63..5cc8ab9 100644 --- a/src/app/test/_ui/RealtimePage.tsx +++ b/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 ( diff --git a/src/module/_global/bin/val_global.ts b/src/module/_global/bin/val_global.ts index 4ec8875..2442734 100644 --- a/src/module/_global/bin/val_global.ts +++ b/src/module/_global/bin/val_global.ts @@ -13,6 +13,8 @@ export const DIR = { } +export const keyWibu= 'padahariminggukuturutayahkekotanaikdelmanistimewakududukdimuka' + export const TEMA = hookstate({ utama: "#19345E", bgUtama: "#F4F9FD", diff --git a/src/module/_global/components/notification_custome.tsx b/src/module/_global/components/notification_custome.tsx index 72fe2fa..34f0055 100644 --- a/src/module/_global/components/notification_custome.tsx +++ b/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); }, []); diff --git a/src/module/_global/components/wrap_layout.tsx b/src/module/_global/components/wrap_layout.tsx index 5fb510b..816c315 100644 --- a/src/module/_global/components/wrap_layout.tsx +++ b/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 && { '' }} + title={data.filter((i: any) => i.idUserTo == user)[0]?.title} + desc={data.filter((i: any) => i.idUserTo == user)[0]?.desc} + onClick={() => { onClickNotif(data.filter((i: any) => i.idUserTo == user)[0]?.category, data.filter((i: any) => i.idUserTo == user)[0]?.idContent) }} onClose={() => { '' }} /> } diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts index 27adc17..0e87f99 100644 --- a/src/module/_global/index.ts +++ b/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 } diff --git a/src/module/announcement/ui/create_announcement.tsx b/src/module/announcement/ui/create_announcement.tsx index 0f1c1c6..5dbe027 100644 --- a/src/module/announcement/ui/create_announcement.tsx +++ b/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 { globalMemberAnnouncement } from "../lib/val_announcement"; +import { useWibuRealtime } from "wibu-realtime"; import { funCreateAnnouncement } from "../lib/api_announcement"; -import { GroupData, ICreateData, IGroupData } from "../lib/type_announcement"; -import { useRouter } from "next/navigation"; - - +import { GroupData } from "../lib/type_announcement"; +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([]) 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({ - // ...isData, - // title: "", - // desc: "", - // }) + setData(response.notif) 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 }) - if (val === "") { - setTouched({ ...touched, desc: true }) - } else { - setTouched({ ...touched, desc: false }) - } - } - } + setisData({ ...isData, desc: val }) + if (val === "") { + setTouched({ ...touched, desc: true }) + } else { + setTouched({ ...touched, desc: false }) + } + } + } return ( @@ -123,7 +121,7 @@ export default function CreateAnnouncement() { touched.title && ( isData.title == "" ? "Judul Tidak Boleh Kosong" : null ) - } + } />