diff --git a/src/module/task/ui/add_detail_task.tsx b/src/module/task/ui/add_detail_task.tsx index 6c31db5..eea33f3 100644 --- a/src/module/task/ui/add_detail_task.tsx +++ b/src/module/task/ui/add_detail_task.tsx @@ -1,28 +1,15 @@ "use client"; -import { LayoutNavbarNew, TEMA } from "@/module/_global"; -import { - Avatar, - Box, - Button, - Flex, - Group, - Input, - rem, - SimpleGrid, - Stack, - Text, - TextInput, -} from "@mantine/core"; -import React, { useState } from "react"; -import { DatePicker } from "@mantine/dates"; -import { useParams, useRouter } from "next/navigation"; -import toast from "react-hot-toast"; -import { IFormDateTask } from "../lib/type_task"; -import moment from "moment"; -import { funCreateDetailTask } from "../lib/api_task"; +import { keyWibu, LayoutNavbarNew, TEMA } from "@/module/_global"; import LayoutModal from "@/module/_global/layout/layout_modal"; import { useHookstate } from "@hookstate/core"; - +import { Box, Button, Group, rem, SimpleGrid, Stack, Text, TextInput } from "@mantine/core"; +import { DatePicker } from "@mantine/dates"; +import moment from "moment"; +import { useParams, useRouter } from "next/navigation"; +import { useState } from "react"; +import toast from "react-hot-toast"; +import { funCreateDetailTask } from "../lib/api_task"; +import { useWibuRealtime } from "wibu-realtime"; export default function AddDetailTask() { const [value, setValue] = useState<[Date | null, Date | null]>([null, null]); @@ -34,6 +21,11 @@ export default function AddDetailTask() { const [touched, setTouched] = useState({ title: false, }); + const [dataRealTime, setDataRealtime] = useWibuRealtime({ + WIBU_REALTIME_TOKEN: keyWibu, + project: "sdm" + }) + function onVerification() { if (value[0] == null || value[1] == null) @@ -55,6 +47,10 @@ export default function AddDetailTask() { }) if (res.success) { + setDataRealtime([{ + category: "tugas-detail-task", + id: param.detail, + }]) toast.success(res.message) setOpenModal(false) router.push(`/division/${param.id}/task/${param.detail}`) @@ -139,22 +135,22 @@ export default function AddDetailTask() { /> - - - + + + setOpenModal(false)} description="Apakah Anda yakin ingin menambahkan tugas?" diff --git a/src/module/task/ui/add_file_detail_task.tsx b/src/module/task/ui/add_file_detail_task.tsx index 389baa3..72d09cb 100644 --- a/src/module/task/ui/add_file_detail_task.tsx +++ b/src/module/task/ui/add_file_detail_task.tsx @@ -1,27 +1,19 @@ "use client"; -import { LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global"; -import { - Box, - Button, - Flex, - Group, - rem, - SimpleGrid, - Stack, - Text, -} from "@mantine/core"; -import React, { useRef, useState } from "react"; -import { useParams, useRouter } from "next/navigation"; -import toast from "react-hot-toast"; -import { IoIosArrowDropright } from "react-icons/io"; -import { Dropzone } from "@mantine/dropzone"; -import _ from "lodash"; -import { IListFileTask } from "../lib/type_task"; -import ResultsFile from "./results_file"; -import { FaTrash } from "react-icons/fa6"; -import { funAddFileTask, funCekNamFileUploadTask } from "../lib/api_task"; +import { keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global"; import LayoutModal from "@/module/_global/layout/layout_modal"; import { useHookstate } from "@hookstate/core"; +import { Box, Button, Flex, Group, rem, SimpleGrid, Stack, Text, } from "@mantine/core"; +import { Dropzone } from "@mantine/dropzone"; +import _ from "lodash"; +import { useParams, useRouter } from "next/navigation"; +import { useRef, useState } from "react"; +import toast from "react-hot-toast"; +import { FaTrash } from "react-icons/fa6"; +import { IoIosArrowDropright } from "react-icons/io"; +import { funAddFileTask, funCekNamFileUploadTask } from "../lib/api_task"; +import { IListFileTask } from "../lib/type_task"; +import ResultsFile from "./results_file"; +import { useWibuRealtime } from "wibu-realtime"; export default function AddFileDetailTask() { @@ -34,6 +26,10 @@ export default function AddFileDetailTask() { const [openDrawerFile, setOpenDrawerFile] = useState(false) const tema = useHookstate(TEMA) const openRef = useRef<() => void>(null) + const [dataRealTime, setDataRealtime] = useWibuRealtime({ + WIBU_REALTIME_TOKEN: keyWibu, + project: "sdm" + }) function deleteFile(index: number) { setListFile([...listFile.filter((val, i) => i !== index)]) @@ -68,6 +64,10 @@ export default function AddFileDetailTask() { const response = await funAddFileTask(param.detail, fd) if (response.success) { + setDataRealtime([{ + category: "tugas-detail-file", + id: param.detail, + }]) toast.success(response.message) setFileForm([]) setListFile([]) diff --git a/src/module/task/ui/add_member_detail_task.tsx b/src/module/task/ui/add_member_detail_task.tsx index 2b812c5..a19b9f1 100644 --- a/src/module/task/ui/add_member_detail_task.tsx +++ b/src/module/task/ui/add_member_detail_task.tsx @@ -1,36 +1,20 @@ "use client" -import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global"; -import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new"; -import { - ActionIcon, - Anchor, - Avatar, - Box, - Button, - Center, - Checkbox, - Divider, - Flex, - Grid, - Group, - Indicator, - rem, - Stack, - Text, - TextInput, -} from "@mantine/core"; +import { keyWibu, LayoutNavbarNew, SkeletonList, TEMA } from "@/module/_global"; +import LayoutModal from "@/module/_global/layout/layout_modal"; +import { funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new"; +import { useHookstate } from "@hookstate/core"; +import { Carousel } from "@mantine/carousel"; +import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from "@mantine/core"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import { useParams, useRouter } from "next/navigation"; -import React, { useState } from "react"; +import { useState } from "react"; import toast from "react-hot-toast"; import { FaCheck } from "react-icons/fa6"; -import { funAddMemberTask, funGetTaskDivisionById } from "../lib/api_task"; -import { IDataMemberTaskDivision } from "../lib/type_task"; -import LayoutModal from "@/module/_global/layout/layout_modal"; import { HiMagnifyingGlass } from "react-icons/hi2"; import { IoArrowBackOutline, IoClose } from "react-icons/io5"; -import { Carousel } from "@mantine/carousel"; -import { useHookstate } from "@hookstate/core"; +import { funAddMemberTask, funGetTaskDivisionById } from "../lib/api_task"; +import { IDataMemberTaskDivision } from "../lib/type_task"; +import { useWibuRealtime } from "wibu-realtime"; export default function AddMemberDetailTask() { const router = useRouter() @@ -45,6 +29,10 @@ export default function AddMemberDetailTask() { const [searchQuery, setSearchQuery] = useState('') const tema = useHookstate(TEMA) const isMobile2 = useMediaQuery("(max-width: 438px)"); + const [dataRealTime, setDataRealtime] = useWibuRealtime({ + WIBU_REALTIME_TOKEN: keyWibu, + project: "sdm" + }) async function getData() { @@ -120,6 +108,10 @@ export default function AddMemberDetailTask() { try { const res = await funAddMemberTask(param.detail, { idDivision: param.id, member: selectedFiles }); if (res.success) { + setDataRealtime([{ + category: "tugas-detail-anggota", + id: param.detail, + }]) toast.success(res.message) router.back() } else { diff --git a/src/module/task/ui/cancel_task.tsx b/src/module/task/ui/cancel_task.tsx index e3af172..aa67902 100644 --- a/src/module/task/ui/cancel_task.tsx +++ b/src/module/task/ui/cancel_task.tsx @@ -1,18 +1,13 @@ "use client"; -import { LayoutNavbarNew, TEMA } from "@/module/_global"; -import { - Box, - Button, - rem, - Stack, - Textarea, -} from "@mantine/core"; -import React, { useState } from "react"; -import { useParams, useRouter } from "next/navigation"; -import toast from "react-hot-toast"; -import { funCancelTask } from "../lib/api_task"; +import { keyWibu, LayoutNavbarNew, TEMA } from "@/module/_global"; import LayoutModal from "@/module/_global/layout/layout_modal"; import { useHookstate } from "@hookstate/core"; +import { Box, Button, rem, Stack, Textarea, } from "@mantine/core"; +import { useParams, useRouter } from "next/navigation"; +import { useState } from "react"; +import toast from "react-hot-toast"; +import { funCancelTask } from "../lib/api_task"; +import { useWibuRealtime } from "wibu-realtime"; export default function CancelTask() { @@ -24,6 +19,10 @@ export default function CancelTask() { const [touched, setTouched] = useState({ reason: false, }); + const [dataRealTime, setDataRealtime] = useWibuRealtime({ + WIBU_REALTIME_TOKEN: keyWibu, + project: "sdm" + }) function onVerification() { if (alasan == "") @@ -36,6 +35,10 @@ export default function CancelTask() { try { const res = await funCancelTask(param.detail, { reason: alasan }) if (res.success) { + setDataRealtime([{ + category: "tugas-detail-status", + id: param.detail, + }]) toast.success(res.message) router.push("./") } else { diff --git a/src/module/task/ui/detail_list_anggota_task.tsx b/src/module/task/ui/detail_list_anggota_task.tsx index 2751d75..b461880 100644 --- a/src/module/task/ui/detail_list_anggota_task.tsx +++ b/src/module/task/ui/detail_list_anggota_task.tsx @@ -1,17 +1,18 @@ 'use client' -import { globalRole, LayoutDrawer, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global"; -import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid, Divider } from "@mantine/core"; +import { globalRole, keyWibu, LayoutDrawer, SkeletonList, TEMA } from "@/module/_global"; +import LayoutModal from "@/module/_global/layout/layout_modal"; +import { globalIsAdminDivision } from "@/module/division_new"; +import { useHookstate } from "@hookstate/core"; +import { Avatar, Box, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from "@mantine/core"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import { useParams, useRouter } from "next/navigation"; import { useState } from "react"; import toast from "react-hot-toast"; -import { funDeleteMemberTask, funGetTaskDivisionById } from "../lib/api_task"; -import { IDataMemberTaskDivision } from "../lib/type_task"; import { FaUser } from "react-icons/fa6"; import { IoIosCloseCircle } from "react-icons/io"; -import LayoutModal from "@/module/_global/layout/layout_modal"; -import { useHookstate } from "@hookstate/core"; -import { globalIsAdminDivision } from "@/module/division_new"; +import { funDeleteMemberTask, funGetTaskDivisionById } from "../lib/api_task"; +import { IDataMemberTaskDivision } from "../lib/type_task"; +import { useWibuRealtime } from "wibu-realtime"; export default function ListAnggotaDetailTask() { @@ -28,6 +29,10 @@ export default function ListAnggotaDetailTask() { const isMobile2 = useMediaQuery("(max-width: 438px)"); const tema = useHookstate(TEMA) const [reason, setReason] = useState("") + const [dataRealTime, setDataRealtime] = useWibuRealtime({ + WIBU_REALTIME_TOKEN: keyWibu, + project: "sdm" + }) async function getOneDataCancel() { try { @@ -48,16 +53,15 @@ export default function ListAnggotaDetailTask() { getOneDataCancel(); }, [param.detail]) - async function getOneData() { + async function getOneData(loading: boolean) { try { - setLoading(true) + setLoading(loading) const res = await funGetTaskDivisionById(param.detail, 'member'); if (res.success) { setData(res.data) } else { toast.error(res.message); } - } catch (error) { console.error(error); toast.error("Gagal mendapatkan member tugas divisi, coba lagi nanti"); @@ -67,17 +71,30 @@ export default function ListAnggotaDetailTask() { } useShallowEffect(() => { - getOneData(); + getOneData(true); }, [param.detail]) + useShallowEffect(() => { + if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-anggota' && i.id == param.detail)) { + getOneData(false) + } else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-status' && i.id == param.detail)) { + getOneDataCancel() + } + }, [dataRealTime]) + + async function onSubmit() { try { const res = await funDeleteMemberTask(param.detail, { idUser: dataChoose.id }); if (res.success) { + setDataRealtime([{ + category: "tugas-detail-anggota", + id: param.detail, + }]) toast.success(res.message) setDataChoose({ id: '', name: '' }) - getOneData() + getOneData(false) setOpenDrawer(false) } else { toast.error(res.message) diff --git a/src/module/task/ui/detail_list_file_task.tsx b/src/module/task/ui/detail_list_file_task.tsx index fb441dd..2bc5299 100644 --- a/src/module/task/ui/detail_list_file_task.tsx +++ b/src/module/task/ui/detail_list_file_task.tsx @@ -1,16 +1,17 @@ 'use client' -import { LayoutDrawer, LayoutModalViewFile, SkeletonDetailListTugasTask, TEMA } from "@/module/_global"; +import { keyWibu, LayoutDrawer, LayoutModalViewFile, TEMA } from "@/module/_global"; +import LayoutModal from "@/module/_global/layout/layout_modal"; +import { useHookstate } from "@hookstate/core"; import { Box, Center, Flex, Grid, Group, SimpleGrid, Skeleton, 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 { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from "react-icons/bs"; +import { FaTrash } from "react-icons/fa6"; import { funDeleteFileTask, funGetTaskDivisionById } from "../lib/api_task"; import { IDataFileTaskDivision } from "../lib/type_task"; -import { FaTrash } from "react-icons/fa6"; -import LayoutModal from "@/module/_global/layout/layout_modal"; -import { useHookstate } from "@hookstate/core"; +import { useWibuRealtime } from "wibu-realtime"; export default function ListFileDetailTask() { const [isData, setData] = useState([]) @@ -26,6 +27,10 @@ export default function ListFileDetailTask() { const [isExtension, setExtension] = useState('') const tema = useHookstate(TEMA) const [reason, setReason] = useState("") + const [dataRealTime, setDataRealtime] = useWibuRealtime({ + WIBU_REALTIME_TOKEN: keyWibu, + project: "sdm" + }) async function getOneDataCancel() { try { @@ -46,9 +51,9 @@ export default function ListFileDetailTask() { getOneDataCancel(); }, [param.detail]) - async function getOneData() { + async function getOneData(loading: boolean) { try { - setLoading(true) + setLoading(loading) const res = await funGetTaskDivisionById(param.detail, 'file'); if (res.success) { setData(res.data) @@ -64,7 +69,7 @@ export default function ListFileDetailTask() { } useShallowEffect(() => { - getOneData(); + getOneData(true); }, [param.detail]) @@ -72,8 +77,12 @@ export default function ListFileDetailTask() { try { const res = await funDeleteFileTask(idData); if (res.success) { + setDataRealtime([{ + category: "tugas-detail-file", + id: param.detail, + }]) toast.success(res.message) - getOneData() + getOneData(false) setIdData("") setIdDataStorage("") setOpenDrawer(false) @@ -84,9 +93,16 @@ export default function ListFileDetailTask() { console.error(error); toast.error("Gagal menghapus file, coba lagi nanti"); } - } + useShallowEffect(() => { + if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-file' && i.id == param.detail)) { + getOneData(false) + } else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-status' && i.id == param.detail)) { + getOneDataCancel() + } + }, [dataRealTime]) + return ( File diff --git a/src/module/task/ui/detail_list_tugas_task.tsx b/src/module/task/ui/detail_list_tugas_task.tsx index 8d159ad..ddca576 100644 --- a/src/module/task/ui/detail_list_tugas_task.tsx +++ b/src/module/task/ui/detail_list_tugas_task.tsx @@ -1,18 +1,19 @@ 'use client' -import { LayoutDrawer, SkeletonDetailListTugasTask, TEMA } from "@/module/_global" -import { Box, Grid, Center, Checkbox, Group, SimpleGrid, Text, Stack, Flex, Divider } from "@mantine/core" +import { keyWibu, LayoutDrawer, SkeletonDetailListTugasTask, TEMA } from "@/module/_global" +import LayoutModal from "@/module/_global/layout/layout_modal" +import { useHookstate } from "@hookstate/core" +import { Box, Center, Checkbox, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from "@mantine/core" import { useShallowEffect } from "@mantine/hooks" +import "moment/locale/id" import { useParams, useRouter } from "next/navigation" +import { useState } from "react" import toast from "react-hot-toast" import { AiOutlineFileDone, AiOutlineFileSync } from "react-icons/ai" -import { funDeleteDetailTask, funGetTaskDivisionById, funUpdateStatusDetailTask } from "../lib/api_task" -import { useState } from "react" -import { IDataListTaskDivision } from "../lib/type_task" import { FaCheck, FaPencil, FaTrash } from "react-icons/fa6" -import LayoutModal from "@/module/_global/layout/layout_modal" +import { useWibuRealtime } from "wibu-realtime" +import { funDeleteDetailTask, funGetTaskDivisionById, funUpdateStatusDetailTask } from "../lib/api_task" +import { IDataListTaskDivision } from "../lib/type_task" import { globalRefreshTask, valStatusDetailTask } from "../lib/val_task" -import { useHookstate } from "@hookstate/core" -import "moment/locale/id" export default function ListTugasDetailTask() { const [openDrawer, setOpenDrawer] = useState(false) @@ -27,6 +28,10 @@ export default function ListTugasDetailTask() { const refresh = useHookstate(globalRefreshTask) const tema = useHookstate(TEMA) const [reason, setReason] = useState("") + const [dataRealTime, setDataRealtime] = useWibuRealtime({ + WIBU_REALTIME_TOKEN: keyWibu, + project: "sdm" + }) async function getOneDataCancel() { try { @@ -47,9 +52,9 @@ export default function ListTugasDetailTask() { getOneDataCancel(); }, [param.detail]) - async function getOneData() { + async function getOneData(loading: boolean) { try { - setLoading(true) + setLoading(loading) const res = await funGetTaskDivisionById(param.detail, 'task'); if (res.success) { setData(res.data) @@ -66,7 +71,7 @@ export default function ListTugasDetailTask() { } useShallowEffect(() => { - getOneData(); + getOneData(true); }, [param.detail]) @@ -74,9 +79,13 @@ export default function ListTugasDetailTask() { try { const res = await funDeleteDetailTask(idData, { idProject: param.detail }); if (res.success) { + setDataRealtime([{ + category: "tugas-detail-task", + id: param.detail, + }]) toast.success(res.message); refresh.set(true) - getOneData(); + getOneData(false); setIdData("") setOpenDrawer(false) } else { @@ -93,9 +102,13 @@ export default function ListTugasDetailTask() { try { const res = await funUpdateStatusDetailTask(idData, { status: val, idProject: param.detail }); if (res.success) { + setDataRealtime([{ + category: "tugas-detail-task", + id: param.detail, + }]) toast.success(res.message); refresh.set(true) - getOneData(); + getOneData(false); setIdData("") setOpenDrawerStatus(false) setOpenDrawer(false) @@ -108,6 +121,15 @@ export default function ListTugasDetailTask() { } } + useShallowEffect(() => { + if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-task' && i.id == param.detail)) { + refresh.set(true) + getOneData(false) + } else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-status' && i.id == param.detail)) { + getOneDataCancel() + } + }, [dataRealTime]) + return ( @@ -118,7 +140,7 @@ export default function ListTugasDetailTask() { style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}`, - padding:20 + padding: 20 }} > { diff --git a/src/module/task/ui/detail_progress_task.tsx b/src/module/task/ui/detail_progress_task.tsx index 5b7216e..0609774 100644 --- a/src/module/task/ui/detail_progress_task.tsx +++ b/src/module/task/ui/detail_progress_task.tsx @@ -1,15 +1,16 @@ 'use client' -import { TEMA } from "@/module/_global"; -import { Box, Grid, ActionIcon, Progress, Text, Skeleton, Group } from "@mantine/core"; +import { keyWibu, TEMA } from "@/module/_global"; +import { useHookstate } from "@hookstate/core"; +import { ActionIcon, Box, Grid, Group, Progress, Skeleton, Text } 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 { HiMiniPresentationChartBar } from "react-icons/hi2"; -import { funGetTaskDivisionById } from "../lib/api_task"; -import { useState } from "react"; -import { globalRefreshTask } from "../lib/val_task"; -import { useHookstate } from "@hookstate/core"; import { IoIosWarning } from "react-icons/io"; +import { useWibuRealtime } from "wibu-realtime"; +import { funGetTaskDivisionById } from "../lib/api_task"; +import { globalRefreshTask } from "../lib/val_task"; export default function ProgressDetailTask() { const [valProgress, setValProgress] = useState(0) @@ -20,6 +21,10 @@ export default function ProgressDetailTask() { const isMobile = useMediaQuery('(max-width: 369px)'); const tema = useHookstate(TEMA) const [reason, setReason] = useState("") + const [dataRealTime, setDataRealtime] = useWibuRealtime({ + WIBU_REALTIME_TOKEN: keyWibu, + project: "sdm" + }) async function getOneDataCancel() { try { @@ -41,9 +46,9 @@ export default function ProgressDetailTask() { }, [param.detail]) - async function getOneData() { + async function getOneData(loading: boolean) { try { - setLoading(true) + setLoading(loading) const res = await funGetTaskDivisionById(param.detail, 'progress'); if (res.success) { setValProgress(res.data.progress); @@ -51,7 +56,6 @@ export default function ProgressDetailTask() { } else { toast.error(res.message); } - setLoading(false) } catch (error) { console.error(error); toast.error("Gagal mendapatkan progress tugas divisi, coba lagi nanti"); @@ -62,7 +66,7 @@ export default function ProgressDetailTask() { function onRefresh() { if (refresh.get()) { - getOneData() + getOneData(false) refresh.set(false) } } @@ -73,9 +77,16 @@ export default function ProgressDetailTask() { }, [refresh.get()]) useShallowEffect(() => { - getOneData(); + getOneData(true); }, [param.detail]) + useShallowEffect(() => { + if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-status' && i.id == param.detail)) { + getOneDataCancel() + getOneData(false) + } + }, [dataRealTime]) + return ( {loading ? "" : diff --git a/src/module/task/ui/edit_task.tsx b/src/module/task/ui/edit_task.tsx index 6aae983..fe56537 100644 --- a/src/module/task/ui/edit_task.tsx +++ b/src/module/task/ui/edit_task.tsx @@ -1,5 +1,5 @@ "use client"; -import { LayoutNavbarNew, TEMA } from "@/module/_global"; +import { keyWibu, LayoutNavbarNew, TEMA } from "@/module/_global"; import LayoutModal from "@/module/_global/layout/layout_modal"; import { useHookstate } from "@hookstate/core"; import { Box, Button, rem, Skeleton, Stack, TextInput } from "@mantine/core"; @@ -8,6 +8,7 @@ import { useParams, useRouter } from "next/navigation"; import { useState } from "react"; import toast from "react-hot-toast"; import { funEditTask, funGetTaskDivisionById } from "../lib/api_task"; +import { useWibuRealtime } from "wibu-realtime"; export default function EditTask() { @@ -20,6 +21,10 @@ export default function EditTask() { const [touched, setTouched] = useState({ title: false, }); + const [dataRealTime, setDataRealtime] = useWibuRealtime({ + WIBU_REALTIME_TOKEN: keyWibu, + project: "sdm" + }) function onVerification() { if (Object.values(touched).some((v) => v == true)) @@ -42,6 +47,10 @@ export default function EditTask() { try { const res = await funEditTask(param.detail, { title }) if (res.success) { + setDataRealtime([{ + category: "tugas-detail", + id: param.detail, + }]) toast.success(res.message) router.push("./") } else { @@ -97,7 +106,7 @@ export default function EditTask() { label="Judul Tugas" size="md" value={title} - onChange={(e) => { onValidation('title', e.target.value)}} + onChange={(e) => { onValidation('title', e.target.value) }} error={ touched.title && ( title == "" ? "Error! harus memasukkan judul tugas" : null diff --git a/src/module/task/ui/list_division_task.tsx b/src/module/task/ui/list_division_task.tsx index 4653f22..1ec13f5 100644 --- a/src/module/task/ui/list_division_task.tsx +++ b/src/module/task/ui/list_division_task.tsx @@ -1,4 +1,4 @@ -import { currentScroll, SkeletonList, TEMA } from "@/module/_global"; +import { currentScroll, globalNotifPage, ReloadButtonTop, SkeletonList, TEMA } from "@/module/_global"; import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core"; import { useParams, useRouter, useSearchParams } from "next/navigation"; import { useEffect, useState } from "react"; @@ -25,6 +25,8 @@ export default function ListDivisionTask() { const { value: containerRef } = useHookstate(currentScroll) const [isPage, setPage] = useState(1) const [totalData, setTotalData] = useState(0) + const [isRefresh, setRefresh] = useState(false) + const notifLoadPage = useHookstate(globalNotifPage) const handleList = () => { setIsList(!isList) @@ -32,15 +34,14 @@ export default function ListDivisionTask() { const fetchData = async (loading: boolean) => { try { - if (loading) - setLoading(true) + setLoading(loading) const response = await funGetAllTask('?division=' + param.id + '&status=' + status + '&search=' + searchQuery + '&page=' + isPage) if (response.success) { setTotalData(response.total) if (isPage == 1) { setData(response?.data) } else { - setData([...isData, ...response.data]) + setData((isData) => [...isData, ...response.data]) } } else { toast.error(response.message); @@ -87,8 +88,36 @@ export default function ListDivisionTask() { }; }, [containerRef, isPage]); + + useShallowEffect(() => { + if (notifLoadPage.get().category == 'division/' + param.id + '/task' && notifLoadPage.get().load == true) { + setRefresh(true) + } + }, [notifLoadPage.get().load]) + + function onRefresh() { + notifLoadPage.set({ + category: '', + load: false + }) + setRefresh(false) + setPage(1) + setTimeout(() => { + fetchData(false) + }, 500) + } + + return ( + { + isRefresh && + { onRefresh() }} + title='UPDATE' + /> + + } { + if (dataRealTime && dataRealTime.some((i: any) => (i.category == 'tugas-detail' || i.category == 'tugas-detail-status') && i.id == param.detail)) { + getOneData() + } + }, [dataRealTime]) + return ( <>