upd: document

Deskripsi:
- update realtime document

No Issues

src/module/document/ui/drawer_cut_documents.tsx

@@ -1,47 +1,18 @@
-import { TEMA } from "@/module/_global";
+import { keyWibu, TEMA } from "@/module/_global";
-import {
+import { useHookstate } from "@hookstate/core";
-  Box,
+import { Box, Breadcrumbs, Button, Divider, Flex, Grid, Group, Modal, ScrollArea, Skeleton, Text, TextInput, } from "@mantine/core";
-  Breadcrumbs,
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
-  Button,
+import { useParams } from "next/navigation";
-  Divider,
+import { useState } from "react";
-  Flex,
-  Grid,
-  Group,
-  Modal,
-  ScrollArea,
-  Skeleton,
-  Text,
-  TextInput,
-} from "@mantine/core";
-import React, { useState } from "react";
 import toast from "react-hot-toast";
 import { FcFolder } from "react-icons/fc";
-import {
-  funCreateFolder,
-  funGetAllDocument,
-  funMoveDocument,
-} from "../lib/api_document";
-import { useParams } from "next/navigation";
-import {
-  IDataDocument,
-  IFormDetailMoreItem,
-  IJalurItem,
-} from "../lib/type_document";
-import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
-import { MdFolder } from "react-icons/md";
-import router from "next/router";
 import { GoChevronRight } from "react-icons/go";
-import { useHookstate } from "@hookstate/core";
+import { MdFolder } from "react-icons/md";
+import { funCreateFolder, funGetAllDocument } from "../lib/api_document";
+import { IDataDocument, IFormDetailMoreItem, IJalurItem, } from "../lib/type_document";
+import { useWibuRealtime } from "wibu-realtime";
 
-export default function DrawerCutDocuments({
+export default function DrawerCutDocuments({ category, onChoosePath, data, }: { category: string; data: IFormDetailMoreItem[]; onChoosePath: (val: string) => void; }) {
-  category,
-  onChoosePath,
-  data,
-}: {
-  category: string;
-  data: IFormDetailMoreItem[];
-  onChoosePath: (val: string) => void;
-}) {
   const [opened, setOpened] = useState(false);
   const param = useParams<{ id: string }>();
   const [path, setPath] = useState("home");
@@ -51,6 +22,10 @@ export default function DrawerCutDocuments({
   const tema = useHookstate(TEMA);
   const [loading, setLoading] = useState(true);
   const isMobile = useMediaQuery("(max-width: 369px)");
+  const [dataRealTime, setDataRealtime] = useWibuRealtime({
+    WIBU_REALTIME_TOKEN: keyWibu,
+    project: "sdm"
+  })
 
   async function onCreateFolder() {
     try {
@@ -60,7 +35,11 @@ export default function DrawerCutDocuments({
         idDivision: param.id,
       });
       if (res.success) {
-        getOneData();
+        getOneData(false);
+        setDataRealtime([{
+          category: "division-document",
+          id: path,
+        }])
       } else {
         toast.error(res.message);
       }
@@ -72,9 +51,9 @@ export default function DrawerCutDocuments({
     setOpened(false);
   }
 
-  async function getOneData() {
+  async function getOneData(loading: boolean) {
     try {
-      setLoading(true);
+      setLoading(loading);
       const respon = await funGetAllDocument(
         "?division=" + param.id + "&path=" + path + "&category=folder"
       );
@@ -84,7 +63,6 @@ export default function DrawerCutDocuments({
       } else {
         toast.error(respon.message);
       }
-      setLoading(false);
     } catch (error) {
       console.error(error);
       toast.error("Gagal mendapatkan item, coba lagi nanti");
@@ -94,7 +72,7 @@ export default function DrawerCutDocuments({
   }
 
   useShallowEffect(() => {
-    getOneData();
+    getOneData(true);
   }, [param.id, path]);
 
   return (
@@ -133,7 +111,7 @@ export default function DrawerCutDocuments({
           </Grid.Col>
         </Grid>
       </Box>
-      <Box  pb={60}>
+      <Box pb={60}>
         <Box>
           <Breadcrumbs
             separator={<GoChevronRight />}

src/module/document/ui/drawer_menu_document_division.tsx

@@ -1,31 +1,33 @@
 "use clent"
-import { LayoutDrawer, TEMA } from '@/module/_global';
+import { keyWibu, LayoutDrawer, TEMA } from '@/module/_global';
-import { ActionIcon, Box, Button, Center, Divider, Flex, Grid, Modal, Progress, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
-import { useParams, useRouter, useSearchParams } from 'next/navigation';
-import React, { useRef, useState } from 'react';
-import toast from 'react-hot-toast';
-import { FaFolderClosed, FaRegImage } from 'react-icons/fa6';
-import { HiDocumentText } from 'react-icons/hi2';
-import { IoAddCircle, IoDocumentText } from 'react-icons/io5';
-import { funCreateFolder, funUploadFileDocument } from '../lib/api_document';
 import { useHookstate } from '@hookstate/core';
-import { globalRefreshDocument } from '../lib/val_document';
+import { ActionIcon, Box, Button, Flex, Grid, Modal, Progress, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import _ from 'lodash';
+import { useParams, useSearchParams } from 'next/navigation';
+import { useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+import { FaFolderClosed } from 'react-icons/fa6';
+import { HiDocumentText } from 'react-icons/hi2';
+import { IoAddCircle } from 'react-icons/io5';
+import { useWibuRealtime } from 'wibu-realtime';
+import { funCreateFolder, funUploadFileDocument } from '../lib/api_document';
+import { globalRefreshDocument } from '../lib/val_document';
 
 export default function DrawerMenuDocumentDivision() {
   const [openDrawerDocument, setOpenDrawerDocument] = useState(false)
   const [openModal, setOpenModal] = useState(false)
-  const router = useRouter()
   const param = useParams<{ id: string }>()
   const searchParams = useSearchParams()
   const path = searchParams.get('path')
   const refresh = useHookstate(globalRefreshDocument)
   const openRef = useRef<() => void>(null)
-  const [fileForm, setFileForm] = useState<any>()
   const tema = useHookstate(TEMA)
   const [loading, setLoading] = useState(false)
-
+  const [dataRealTime, setDataRealtime] = useWibuRealtime({
+    WIBU_REALTIME_TOKEN: keyWibu,
+    project: "sdm"
+  })
   const [bodyFolder, setBodyFolder] = useState({
     name: '',
     path: (path == undefined || path == '' || path == null) ? 'home' : path,
@@ -37,6 +39,11 @@ export default function DrawerMenuDocumentDivision() {
       const res = await funCreateFolder(bodyFolder)
       if (!res.success) {
         toast.error(res.message)
+      } else {
+        setDataRealtime([{
+          category: "division-document",
+          id: path,
+        }])
       }
     } catch (error) {
       console.error(error);
@@ -63,6 +70,11 @@ export default function DrawerMenuDocumentDivision() {
 
       if (!res.success) {
         toast.error(res.message)
+      } else {
+        setDataRealtime([{
+          category: "division-document",
+          id: path,
+        }])
       }
       setLoading(false)
     } catch (error) {

src/module/document/ui/drawer_more.tsx

@@ -1,15 +1,16 @@
-import { LayoutDrawer, TEMA } from "@/module/_global";
+import { keyWibu, LayoutDrawer, TEMA } from "@/module/_global";
-import { Box, Flex, Group, SimpleGrid, Stack, Text } from "@mantine/core";
-import React, { useState } from "react";
-import { LuFolders, LuFolderSymlink } from "react-icons/lu";
-import DrawerCutDocuments from "./drawer_cut_documents";
-import { IDataDocument, IFormDetailMoreItem } from "../lib/type_document";
-import toast from "react-hot-toast";
-import { funCopyDocument, funMoveDocument } from "../lib/api_document";
 import { useHookstate } from "@hookstate/core";
-import { globalRefreshDocument } from "../lib/val_document";
+import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
-import { useParams } from "next/navigation";
 import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { LuFolders, LuFolderSymlink } from "react-icons/lu";
+import { funCopyDocument, funMoveDocument } from "../lib/api_document";
+import { IDataDocument } from "../lib/type_document";
+import { globalRefreshDocument } from "../lib/val_document";
+import DrawerCutDocuments from "./drawer_cut_documents";
+import { useWibuRealtime } from "wibu-realtime";
 
 export default function DrawerMore({ data }: { data: IDataDocument[] }) {
   const [isCut, setIsCut] = useState(false)
@@ -18,12 +19,20 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
   const param = useParams<{ id: string }>()
   const [forbidCopy, setForbidCopy] = useState(true)
   const tema = useHookstate(TEMA)
+  const [dataRealTime, setDataRealtime] = useWibuRealtime({
+    WIBU_REALTIME_TOKEN: keyWibu,
+    project: "sdm"
+  })
 
 
   async function onMoveItem(path: string) {
     try {
       const res = await funMoveDocument({ path, dataItem: data })
       if (res.success) {
+        setDataRealtime([{
+          category: "division-document",
+          id: path,
+        }])
         toast.success(res.message)
         refresh.set(true)
       } else {
@@ -41,6 +50,10 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
     try {
       const res = await funCopyDocument({ idDivision: param.id, path, dataItem: data })
       if (res.success) {
+        setDataRealtime([{
+          category: "division-document",
+          id: path,
+        }])
         toast.success(res.message)
         refresh.set(true)
       } else {

src/module/document/ui/drawer_share_document.tsx

@@ -1,22 +1,7 @@
 import { TEMA } from "@/module/_global";
-import {
+import { funGetListDivisionByIdDivision, IDataDivison, } from "@/module/division_new";
-  funGetListDivisionByIdDivision,
-  IDataDivison,
-} from "@/module/division_new";
 import { useHookstate } from "@hookstate/core";
-import {
+import { ActionIcon, Box, Button, Divider, Flex, Grid, Group, ScrollArea, Skeleton, Stack, Text } from "@mantine/core";
-  ActionIcon,
-  Box,
-  Button,
-  Divider,
-  Flex,
-  Grid,
-  Group,
-  ScrollArea,
-  Skeleton,
-  Stack,
-  Text
-} from "@mantine/core";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
 import { useState } from "react";
@@ -26,11 +11,7 @@ import { funShareDocument } from "../lib/api_document";
 import { IShareDivision } from "../lib/type_document";
 import { globalRefreshDocument } from "../lib/val_document";
 
-export default function DrawerShareDocument({
+export default function DrawerShareDocument({ data, }: { data: IShareDivision[]; }) {
-  data,
-}: {
-  data: IShareDivision[];
-}) {
   const [selectedFiles, setSelectedFiles] = useState<any>([]);
   const [isData, setData] = useState<IDataDivison[]>([]);
   const param = useParams<{ id: string }>();

src/module/document/ui/navbar_document_division.tsx

@@ -1,58 +1,30 @@
 "use client";
-import {
+import { keyWibu, LayoutDrawer, LayoutModalViewFile, LayoutNavbarNew, TEMA, } from "@/module/_global";
-  LayoutDrawer,
+import LayoutModal from "@/module/_global/layout/layout_modal";
-  LayoutModalViewFile,
+import { funGetDivisionById } from "@/module/division_new";
-  LayoutNavbarNew,
+import { useHookstate } from "@hookstate/core";
-  TEMA,
+import { ActionIcon, Box, Breadcrumbs, Button, Checkbox, Divider, Flex, Grid, Group, Indicator, Menu, Modal, rem, SimpleGrid, Skeleton, Text, TextInput } from "@mantine/core";
-} from "@/module/_global";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
-import {
+import { useParams, useRouter, useSearchParams } from "next/navigation";
-  ActionIcon,
+import { useState } from "react";
-  Anchor,
+import toast from "react-hot-toast";
-  Box,
-  Breadcrumbs,
-  Button,
-  Checkbox,
-  Divider,
-  Flex,
-  Grid,
-  Group,
-  Indicator,
-  Menu,
-  Modal,
-  rem,
-  Select,
-  SimpleGrid,
-  Skeleton,
-  Text,
-  TextInput,
-} from "@mantine/core";
-import React, { useState } from "react";
-import { HiMenu } from "react-icons/hi";
-import { FcDocument, FcFolder, FcImageFile } from "react-icons/fc";
-import { BsDownload, BsListCheck } from "react-icons/bs";
 import { AiOutlineDelete } from "react-icons/ai";
+import { BsDownload, BsListCheck } from "react-icons/bs";
 import { CgRename } from "react-icons/cg";
+import { FaShare } from "react-icons/fa6";
+import { FcDocument, FcFolder, FcImageFile } from "react-icons/fc";
+import { GoChevronRight } from "react-icons/go";
+import { HiMenu } from "react-icons/hi";
 import { LuShare2 } from "react-icons/lu";
 import { MdClose, MdOutlineMoreHoriz } from "react-icons/md";
-import LayoutModal from "@/module/_global/layout/layout_modal";
+import { RiListCheck } from "react-icons/ri";
-import toast from "react-hot-toast";
+import { funDeleteDocument, funGetAllDocument, funRenameDocument, } from "../lib/api_document";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { IDataDocument, IJalurItem } from "../lib/type_document";
+import { globalRefreshDocument } from "../lib/val_document";
 import DrawerMenuDocumentDivision from "./drawer_menu_document_division";
 import DrawerMore from "./drawer_more";
-import { funGetDivisionById } from "@/module/division_new";
-import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
-import {
-  funDeleteDocument,
-  funGetAllDocument,
-  funRenameDocument,
-} from "../lib/api_document";
-import { IDataDocument, IJalurItem } from "../lib/type_document";
-import { useHookstate } from "@hookstate/core";
-import { globalRefreshDocument } from "../lib/val_document";
-import { RiListCheck } from "react-icons/ri";
-import { GoChevronRight } from "react-icons/go";
 import DrawerShareDocument from "./drawer_share_document";
-import { FaShare } from "react-icons/fa6";
+import { useWibuRealtime } from "wibu-realtime";
 
 export default function NavbarDocumentDivision() {
   const router = useRouter();
@@ -80,6 +52,10 @@ export default function NavbarDocumentDivision() {
   const isMobile2 = useMediaQuery("(max-width: 496px)");
   const tema = useHookstate(TEMA);
   const [loading, setLoading] = useState(true);
+  const [dataRealTime, setDataRealtime] = useWibuRealtime({
+    WIBU_REALTIME_TOKEN: keyWibu,
+    project: "sdm"
+  })
   const [bodyRename, setBodyRename] = useState({
     id: "",
     name: "",
@@ -166,7 +142,11 @@ export default function NavbarDocumentDivision() {
       try {
         const respon = await funDeleteDocument(selectedFiles);
         if (respon.success) {
-          getOneData();
+          getOneData(false);
+          setDataRealtime([{
+            category: "division-document",
+            id: path,
+          }])
         } else {
           toast.error(respon.message);
         }
@@ -185,7 +165,11 @@ export default function NavbarDocumentDivision() {
     try {
       const res = await funRenameDocument(bodyRename);
       if (res.success) {
-        getOneData();
+        setDataRealtime([{
+          category: "division-document",
+          id: path,
+        }])
+        getOneData(false);
       } else {
         toast.error(res.message);
       }
@@ -199,21 +183,25 @@ export default function NavbarDocumentDivision() {
     setRename(false);
   }
 
-  async function getOneData() {
+  useShallowEffect(() => {
+    if (dataRealTime && dataRealTime.some((i: any) => i.category == 'division-document' && i.id == path)) {
+      getOneData(false)
+    }
+  }, [dataRealTime])
+
+  async function getOneData(loading: boolean) {
     try {
-      setLoading(true);
+      setLoading(loading);
       const respon = await funGetAllDocument(
         "?division=" + param.id + "&path=" + path
       );
       if (respon.success) {
         setDataDocument(respon.data);
         setDataJalur(respon.jalur);
-        setLoading(false);
       } else {
         toast.error(respon.message);
         setDataDocument([]);
         setDataJalur([]);
-        setLoading(false);
       }
       const res = await funGetDivisionById(param.id);
       if (res.success) {
@@ -242,7 +230,7 @@ export default function NavbarDocumentDivision() {
   }, [selectedFiles]);
 
   useShallowEffect(() => {
-    getOneData();
+    getOneData(true);
     resetRefresh();
   }, [param.id, path, refresh.get()]);