diff --git a/src/module/document/ui/drawer_cut_documents.tsx b/src/module/document/ui/drawer_cut_documents.tsx index 7bd5ac4..16a70c0 100644 --- a/src/module/document/ui/drawer_cut_documents.tsx +++ b/src/module/document/ui/drawer_cut_documents.tsx @@ -1,47 +1,18 @@ -import { TEMA } from "@/module/_global"; -import { - Box, - Breadcrumbs, - Button, - Divider, - Flex, - Grid, - Group, - Modal, - ScrollArea, - Skeleton, - Text, - TextInput, -} from "@mantine/core"; -import React, { useState } from "react"; +import { keyWibu, TEMA } from "@/module/_global"; +import { useHookstate } from "@hookstate/core"; +import { Box, Breadcrumbs, Button, Divider, Flex, Grid, Group, Modal, ScrollArea, Skeleton, Text, TextInput, } from "@mantine/core"; +import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; +import { useParams } from "next/navigation"; +import { 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({ - category, - onChoosePath, - data, -}: { - category: string; - data: IFormDetailMoreItem[]; - onChoosePath: (val: string) => void; -}) { +export default function DrawerCutDocuments({ 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({ - + } diff --git a/src/module/document/ui/drawer_menu_document_division.tsx b/src/module/document/ui/drawer_menu_document_division.tsx index beb8563..3539432 100644 --- a/src/module/document/ui/drawer_menu_document_division.tsx +++ b/src/module/document/ui/drawer_menu_document_division.tsx @@ -1,31 +1,33 @@ "use clent" -import { 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 { keyWibu, LayoutDrawer, TEMA } from '@/module/_global'; 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() 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) { diff --git a/src/module/document/ui/drawer_more.tsx b/src/module/document/ui/drawer_more.tsx index 6c42e71..56c6d3d 100644 --- a/src/module/document/ui/drawer_more.tsx +++ b/src/module/document/ui/drawer_more.tsx @@ -1,15 +1,16 @@ -import { 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 { keyWibu, LayoutDrawer, TEMA } from "@/module/_global"; import { useHookstate } from "@hookstate/core"; -import { globalRefreshDocument } from "../lib/val_document"; -import { useParams } from "next/navigation"; +import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core"; 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 { diff --git a/src/module/document/ui/drawer_share_document.tsx b/src/module/document/ui/drawer_share_document.tsx index 91c1311..77640ca 100644 --- a/src/module/document/ui/drawer_share_document.tsx +++ b/src/module/document/ui/drawer_share_document.tsx @@ -1,22 +1,7 @@ import { TEMA } from "@/module/_global"; -import { - funGetListDivisionByIdDivision, - IDataDivison, -} from "@/module/division_new"; +import { funGetListDivisionByIdDivision, IDataDivison, } from "@/module/division_new"; import { useHookstate } from "@hookstate/core"; -import { - ActionIcon, - Box, - Button, - Divider, - Flex, - Grid, - Group, - ScrollArea, - Skeleton, - Stack, - Text -} from "@mantine/core"; +import { 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({ - data, -}: { - data: IShareDivision[]; -}) { +export default function DrawerShareDocument({ data, }: { data: IShareDivision[]; }) { const [selectedFiles, setSelectedFiles] = useState([]); const [isData, setData] = useState([]); const param = useParams<{ id: string }>(); diff --git a/src/module/document/ui/navbar_document_division.tsx b/src/module/document/ui/navbar_document_division.tsx index 3db2a16..7fe8071 100644 --- a/src/module/document/ui/navbar_document_division.tsx +++ b/src/module/document/ui/navbar_document_division.tsx @@ -1,58 +1,30 @@ "use client"; -import { - LayoutDrawer, - LayoutModalViewFile, - LayoutNavbarNew, - TEMA, -} from "@/module/_global"; -import { - ActionIcon, - Anchor, - 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 { keyWibu, LayoutDrawer, LayoutModalViewFile, LayoutNavbarNew, TEMA, } from "@/module/_global"; +import LayoutModal from "@/module/_global/layout/layout_modal"; +import { funGetDivisionById } from "@/module/division_new"; +import { useHookstate } from "@hookstate/core"; +import { ActionIcon, Box, Breadcrumbs, Button, Checkbox, Divider, Flex, Grid, Group, Indicator, Menu, Modal, rem, SimpleGrid, Skeleton, Text, TextInput } from "@mantine/core"; +import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; +import { useParams, useRouter, useSearchParams } from "next/navigation"; +import { useState } from "react"; +import toast from "react-hot-toast"; 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 toast from "react-hot-toast"; -import { useParams, useRouter, useSearchParams } from "next/navigation"; +import { RiListCheck } from "react-icons/ri"; +import { funDeleteDocument, funGetAllDocument, funRenameDocument, } from "../lib/api_document"; +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()]);