upd: realtime diskusi

Deskripsi:
- pengaplikasian realtime pada komentar diskusi

No Issues

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 { useMediaQuery, useShallowEffect } from "@mantine/hooks";
-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 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 { GrChatOption } from "react-icons/gr";
-import { globalRefreshDiscussion } from "../lib/val_discussion";
 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<IDetailDiscussion>()
@@ -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-comment' && 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-comment",
+               id: id,
+            }])
             reloadData()
          } else {
             toast.error(response.message)
@@ -125,24 +142,22 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                <>
                   {isData?.totalComments == 0 ?
                      <Box mb={60} pl={5} pr={5}>
-                        <Flex
+                        <Grid align='center'>
-                           justify={"space-between"}
+                           <Grid.Col span={1}>
-                           align={"center"}
+                              <Avatar src={`https://wibu-storage.wibudev.com/api/files/${isData?.user_img}`} alt="it's me" size={'lg'} />
-                           mt={20}
+                           </Grid.Col>
-                        >
+                           <Grid.Col span={8}>
-                           {isData?.username ?
+                              <Box pl={isMobile2 ? 40 : 30}>
-                              <Group>
+                                 <Text lineClamp={1} fz={isMobile ? 15 : 16}>{isData?.username}</Text>
-                                 <Avatar src={`https://wibu-storage.wibudev.com/api/files/${isData?.user_img}`} alt="it's me" size="lg" />
+                                 <Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
-                                 <Box>
+                              </Box>
-                                    <Text c={tema.get().utama} fw={"bold"}>
+                           </Grid.Col>
-                                       {isData?.username}
+                           <Grid.Col span={3}>
-                                    </Text>
+                              <Text c={tema.get().utama} ta={'end'} fz={isMobile ? 15 : 16}>
-                                    <Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
+                                 {isData?.createdAt}
-                                 </Box>
+                              </Text>
-                              </Group> : ""
+                           </Grid.Col>
-                           }
+                        </Grid>
-                           <Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
-                        </Flex>
                         <Box mt={10}>
                            <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
                               <Text
@@ -164,26 +179,20 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                         </Group>
                      </Box> :
                      <Box mb={20}>
-                        <Grid align="center">
+                        <Grid align='center'>
-                           <Grid.Col span={2}>
+                           <Grid.Col span={1}>
-                              <Avatar src={`https://wibu-storage.wibudev.com/api/files/${isData?.user_img}`} alt="it's me" size="lg" />
+                              <Avatar src={`https://wibu-storage.wibudev.com/api/files/${isData?.user_img}`} alt="it's me" size={'lg'} />
                            </Grid.Col>
-                           <Grid.Col span={6}>
+                           <Grid.Col span={8}>
-                              <Box pl={{
+                              <Box pl={isMobile2 ? 40 : 30}>
-                                 sm: 0,
+                                 <Text lineClamp={1} fz={isMobile ? 15 : 16}>{isData?.username}</Text>
-                                 lg: 0,
-                                 xl: 0,
-                                 md: 0,
-                                 base: 10
-                              }}>
-                                 <Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
-                                    {isData?.username}
-                                 </Text>
                                  <Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
                               </Box>
                            </Grid.Col>
-                           <Grid.Col span={4}>
+                           <Grid.Col span={3}>
-                              <Text c={"grey"} ta={"end"} fz={13}>{isData?.createdAt}</Text>
+                              <Text c={tema.get().utama} ta={'end'} fz={isMobile ? 15 : 16}>
+                                 {isData?.createdAt}
+                              </Text>
                            </Grid.Col>
                         </Grid>
                         <Box mt={10}>
@@ -245,17 +254,17 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                      return (
                         <Box key={i} p={10} >
                            <Grid align="center">
-                              <Grid.Col span={2}>
+                              <Grid.Col span={1}>
                                  <Avatar alt="it's me" size="md" src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} />
                               </Grid.Col>
-                              <Grid.Col span={6}>
+                              <Grid.Col span={8}>
                                  <Box>
-                                    <Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={15}>
+                                    <Text c={tema.get().utama} fw={"bold"} lineClamp={1} pl={isMobile2 ? 25 : 15} fz={isMobile ? 15 : 16}>
                                        {v.username}
                                     </Text>
                                  </Box>
                               </Grid.Col>
-                              <Grid.Col span={4}>
+                              <Grid.Col span={3}>
                                  <Text c={"grey"} ta={"end"} fz={13}>{moment(v.createdAt).format("ll")}</Text>
                               </Grid.Col>
                            </Grid>