diff --git a/src/module/discussion/ui/detail_discussion.tsx b/src/module/discussion/ui/detail_discussion.tsx index 6e6cadd..78e11a4 100644 --- a/src/module/discussion/ui/detail_discussion.tsx +++ b/src/module/discussion/ui/detail_discussion.tsx @@ -1,21 +1,22 @@ "use client" +import { globalRole, keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global"; +import { globalIsAdminDivision } from "@/module/division_new"; +import { useHookstate } from "@hookstate/core"; import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, rem, Skeleton, Spoiler, Text, TextInput } from "@mantine/core"; -import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global"; -import { GrChatOption } from "react-icons/gr"; -import { LuSendHorizonal } from "react-icons/lu"; -import { useState } from "react"; -import { funCreateComent, funGetDiscussionById } from "../lib/api_discussion"; -import { useShallowEffect } from "@mantine/hooks"; -import { IDetailDiscussion } from "../lib/type_discussion"; +import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import moment from "moment"; import "moment/locale/id"; import { useParams, useRouter } from "next/navigation"; +import { useState } from "react"; import toast from "react-hot-toast"; -import { useHookstate } from "@hookstate/core"; -import { globalRefreshDiscussion } from "../lib/val_discussion"; +import { GrChatOption } from "react-icons/gr"; import { HiMenu } from "react-icons/hi"; +import { LuSendHorizonal } from "react-icons/lu"; +import { useWibuRealtime } from "wibu-realtime"; +import { funCreateComent, funGetDiscussionById } from "../lib/api_discussion"; +import { IDetailDiscussion } from "../lib/type_discussion"; +import { globalRefreshDiscussion } from "../lib/val_discussion"; import DrawerDetailDiscussion from "./drawer_detail_discussion"; -import {globalIsAdminDivision } from "@/module/division_new"; export default function DetailDiscussion({ id, idDivision }: { id: string, idDivision: string }) { const [isData, setData] = useState() @@ -28,10 +29,16 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv const [isCreator, setCreator] = useState(false) const adminLogin = useHookstate(globalIsAdminDivision) const tema = useHookstate(TEMA) + const isMobile = useMediaQuery('(max-width: 369px)'); + const isMobile2 = useMediaQuery("(max-width: 438px)"); + const [dataRealTime, setDataRealtime] = useWibuRealtime({ + WIBU_REALTIME_TOKEN: keyWibu, + project: "sdm" + }) - const getData = async () => { + const getData = async (loading: boolean) => { try { - setIsLoad(true) + setIsLoad(loading) const response = await funGetDiscussionById(id) setData(response.data) setIsLoad(false) @@ -44,9 +51,15 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv } useShallowEffect(() => { - getData() + getData(true) }, [refresh.get()]) + useShallowEffect(() => { + if (dataRealTime && dataRealTime.some((i: any) => i.category == 'discussion-detail' && i.id == id)) { + getData(false) + } + }, [dataRealTime]) + async function reloadData() { try { const response = await funGetDiscussionById(id) @@ -65,6 +78,10 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv if (response.success) { setIsComent("") + setDataRealtime([{ + category: "discussion-detail", + id: id, + }]) reloadData() } else { toast.error(response.message) @@ -125,24 +142,22 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv <> {isData?.totalComments == 0 ? - - {isData?.username ? - - - - - {isData?.username} - - {isData?.status === 1 ? "BUKA" : "TUTUP"} - - : "" - } - {isData?.createdAt} - + + + + + + + {isData?.username} + {isData?.status === 1 ? "BUKA" : "TUTUP"} + + + + + {isData?.createdAt} + + + : - - - + + + - - - - {isData?.username} - + + + {isData?.username} {isData?.status === 1 ? "BUKA" : "TUTUP"} - - {isData?.createdAt} + + + {isData?.createdAt} + @@ -245,17 +254,17 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv return ( - + - + - + {v.username} - + {moment(v.createdAt).format("ll")} diff --git a/src/module/discussion/ui/drawer_detail_discussion.tsx b/src/module/discussion/ui/drawer_detail_discussion.tsx index a4b5513..90859c6 100644 --- a/src/module/discussion/ui/drawer_detail_discussion.tsx +++ b/src/module/discussion/ui/drawer_detail_discussion.tsx @@ -1,14 +1,15 @@ -import { TEMA } from "@/module/_global"; +import { keyWibu, TEMA } from "@/module/_global"; import LayoutModal from "@/module/_global/layout/layout_modal"; -import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core"; +import { useHookstate } from "@hookstate/core"; +import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core"; +import { useParams, useRouter } from "next/navigation"; import { useState } from "react"; import toast from "react-hot-toast"; import { BsTrash3 } from "react-icons/bs"; import { FaCheck, FaPencil } from "react-icons/fa6"; import { MdClose } from "react-icons/md"; +import { useWibuRealtime } from "wibu-realtime"; import { funDeleteDiscussion, funEditStatusDiscussion } from "../lib/api_discussion"; -import { useParams, useRouter } from "next/navigation"; -import { useHookstate } from "@hookstate/core"; import { globalRefreshDiscussion } from "../lib/val_discussion"; export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivision }: { onSuccess: (val: boolean) => void, id: string, status: number, idDivision: string }) { @@ -18,6 +19,10 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi const param = useParams<{ id: string, detail: string }>() const refresh = useHookstate(globalRefreshDiscussion) const tema = useHookstate(TEMA) + const [dataRealTime, setDataRealtime] = useWibuRealtime({ + WIBU_REALTIME_TOKEN: keyWibu, + project: "sdm" + }) async function fetchStatusDiscussion(val: boolean) { @@ -28,6 +33,10 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi if (response.success) { toast.success(response.message) refresh.set(!refresh.get()) + setDataRealtime([{ + category: "discussion-detail", + id: id, + }]) onSuccess(false) setValModalStatus(false) } else { diff --git a/src/module/discussion/ui/form_edit_discussion.tsx b/src/module/discussion/ui/form_edit_discussion.tsx index 66cf5d7..54dfe18 100644 --- a/src/module/discussion/ui/form_edit_discussion.tsx +++ b/src/module/discussion/ui/form_edit_discussion.tsx @@ -1,5 +1,5 @@ 'use client' -import { TEMA } from "@/module/_global" +import { keyWibu, TEMA } from "@/module/_global" import LayoutModal from "@/module/_global/layout/layout_modal" import { Box, Group, Avatar, Textarea, Button, Grid, rem, Skeleton } from "@mantine/core" import { useParams, useRouter } from "next/navigation" @@ -9,6 +9,7 @@ import { funEditDiscussion, funGetDiscussionById } from "../lib/api_discussion" import { useShallowEffect } from "@mantine/hooks" import { funGetProfileByCookies } from "@/module/user/profile/lib/api_profile" import { useHookstate } from "@hookstate/core" +import { useWibuRealtime } from "wibu-realtime" export default function FormEditDiscussion() { const [isValModal, setValModal] = useState(false) @@ -22,6 +23,10 @@ export default function FormEditDiscussion() { const [touched, setTouched] = useState({ desc: false, }); + const [dataRealTime, setDataRealtime] = useWibuRealtime({ + WIBU_REALTIME_TOKEN: keyWibu, + project: "sdm" + }) async function fetchGetOneDiscussion() { try { @@ -45,6 +50,10 @@ export default function FormEditDiscussion() { if (response.success) { toast.success(response.message) setValModal(false) + setDataRealtime([{ + category: "discussion-detail", + id: param.detail, + }]) router.push(`/division/${param.id}/discussion/${param.detail}`) } else { toast.error(response.message)