fix: diskusi

deskripsi:
-pencarian
- loading pada update status dan hapus diskusi

No Issues
This commit is contained in:
amel
2024-11-04 16:02:45 +08:00
parent 5758d19267
commit 9f8cf53dd8
4 changed files with 62 additions and 33 deletions

View File

@@ -6,7 +6,7 @@ import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, rem
import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import moment from "moment"; import moment from "moment";
import "moment/locale/id"; import "moment/locale/id";
import { useParams, useRouter } from "next/navigation"; import { useParams } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { GrChatOption } from "react-icons/gr"; import { GrChatOption } from "react-icons/gr";
@@ -23,7 +23,6 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
const [isComent, setIsComent] = useState("") const [isComent, setIsComent] = useState("")
const param = useParams<{ id: string, detail: string }>() const param = useParams<{ id: string, detail: string }>()
const [isLoad, setIsLoad] = useState(true) const [isLoad, setIsLoad] = useState(true)
const router = useRouter()
const refresh = useHookstate(globalRefreshDiscussion) const refresh = useHookstate(globalRefreshDiscussion)
const roleLogin = useHookstate(globalRole) const roleLogin = useHookstate(globalRole)
const [isCreator, setCreator] = useState(false) const [isCreator, setCreator] = useState(false)

View File

@@ -23,13 +23,15 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
WIBU_REALTIME_TOKEN: keyWibu, WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm" project: "sdm"
}) })
const [loadingUpdate, setLoadingUpdate] = useState(false)
const [loadingDelete, setLoadingDelete] = useState(false)
async function fetchStatusDiscussion(val: boolean) { async function fetchStatusDiscussion(val: boolean) {
try { try {
setLoadingUpdate(true)
if (val) { if (val) {
const response = await funEditStatusDiscussion(id, { status: status }) const response = await funEditStatusDiscussion(id, { status: status })
if (response.success) { if (response.success) {
toast.success(response.message) toast.success(response.message)
refresh.set(!refresh.get()) refresh.set(!refresh.get())
@@ -38,40 +40,37 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
id: id, id: id,
}]) }])
onSuccess(false) onSuccess(false)
setValModalStatus(false)
} else { } else {
toast.error(response.message) toast.error(response.message)
} }
} }
setValModalStatus(false)
} catch (error) { } catch (error) {
console.error(error); console.error(error);
setValModalStatus(false)
toast.error("Gagal menambahkan diskusi, coba lagi nanti"); toast.error("Gagal menambahkan diskusi, coba lagi nanti");
} finally { } finally {
setLoadingUpdate(false)
setValModalStatus(false) setValModalStatus(false)
} }
} }
async function fetchDeleteDiscussion(val: boolean) { async function fetchDeleteDiscussion(val: boolean) {
try { try {
setLoadingDelete(true)
if (val) { if (val) {
const response = await funDeleteDiscussion(id) const response = await funDeleteDiscussion(id)
if (response.success) { if (response.success) {
toast.success(response.message) toast.success(response.message)
setValModal(false)
onSuccess(false) onSuccess(false)
router.push(`/division/${param.id}/discussion`) router.push(`/division/${param.id}/discussion`)
} else { } else {
toast.error(response.message) toast.error(response.message)
} }
} }
setValModal(false)
} catch (error) { } catch (error) {
console.error(error); console.error(error);
setValModal(false)
toast.error("Gagal hapus diskusi, coba lagi nanti"); toast.error("Gagal hapus diskusi, coba lagi nanti");
} finally { } finally {
setLoadingDelete(false)
setValModal(false) setValModal(false)
} }
} }
@@ -130,12 +129,12 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
</SimpleGrid> </SimpleGrid>
</Stack> </Stack>
<LayoutModal opened={isValModal} onClose={() => setValModal(false)} <LayoutModal loading={loadingDelete} opened={isValModal} onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin menghapus diskusi ini?" description="Apakah Anda yakin ingin menghapus diskusi ini?"
onYes={(val) => { fetchDeleteDiscussion(val) }} /> onYes={(val) => { fetchDeleteDiscussion(val) }} />
<LayoutModal opened={isValModalStatus} onClose={() => setValModalStatus(false)} <LayoutModal loading={loadingUpdate} opened={isValModalStatus} onClose={() => setValModalStatus(false)}
description="Apakah Anda yakin ingin mengubah status diskusi ini?" description="Apakah Anda yakin ingin mengubah status diskusi ini?"
onYes={(val) => { fetchStatusDiscussion(val) }} /> onYes={(val) => { fetchStatusDiscussion(val) }} />
</Box> </Box>

View File

@@ -15,7 +15,6 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
const [isValModal, setValModal] = useState(false) const [isValModal, setValModal] = useState(false)
const [loadingModal, setLoadingModal] = useState(false) const [loadingModal, setLoadingModal] = useState(false)
const router = useRouter() const router = useRouter()
const [isImg, setImg] = useState("")
const param = useParams<{ id: string, detail: string }>() const param = useParams<{ id: string, detail: string }>()
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [img, setIMG] = useState<any | null>() const [img, setIMG] = useState<any | null>()
@@ -51,25 +50,27 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
async function createDiscussion(val: boolean) { async function createDiscussion(val: boolean) {
try { try {
setLoadingModal(true) if (val) {
const response = await funCreateDiscussion({ setLoadingModal(true)
desc: isData.desc, const response = await funCreateDiscussion({
idDivision: id desc: isData.desc,
}) idDivision: id
})
if (response.success) { if (response.success) {
setDataRealtime(response.notif) setDataRealtime(response.notif)
toast.success(response.message) toast.success(response.message)
router.push(`/division/${param.id}/discussion/`) router.push(`/division/${param.id}/discussion/`)
} else { } else {
toast.error(response.message) toast.error(response.message)
}
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal menambahkan diskusi, coba lagi nanti"); toast.error("Gagal menambahkan diskusi, coba lagi nanti");
} finally { } finally {
setValModal(false)
setLoadingModal(false) setLoadingModal(false)
setValModal(false)
} }
} }

View File

@@ -1,16 +1,17 @@
'use client' 'use client'
import { currentScroll, TEMA } from "@/module/_global"; import { currentScroll, globalNotifPage, ReloadButtonTop, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core"; import { Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { useParams, useRouter, useSearchParams } from "next/navigation"; import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { GrChatOption } from "react-icons/gr"; import { GrChatOption } from "react-icons/gr";
import { HiMagnifyingGlass } from "react-icons/hi2"; import { HiMagnifyingGlass } from "react-icons/hi2";
import { funGetAllDiscussion } from "../lib/api_discussion"; import { funGetAllDiscussion } from "../lib/api_discussion";
import { useShallowEffect } from "@mantine/hooks";
import { IDataDiscussion } from "../lib/type_discussion"; import { IDataDiscussion } from "../lib/type_discussion";
import toast from "react-hot-toast";
import _ from "lodash";
import { useHookstate } from "@hookstate/core";
export default function ListDiscussion({ id }: { id: string }) { export default function ListDiscussion({ id }: { id: string }) {
const [isData, setData] = useState<IDataDiscussion[]>([]) const [isData, setData] = useState<IDataDiscussion[]>([])
@@ -21,11 +22,12 @@ export default function ListDiscussion({ id }: { id: string }) {
const router = useRouter() const router = useRouter()
const { value: containerRef } = useHookstate(currentScroll); const { value: containerRef } = useHookstate(currentScroll);
const [isPage, setPage] = useState(1) const [isPage, setPage] = useState(1)
const notifLoadPage = useHookstate(globalNotifPage)
const [isRefresh, setRefresh] = useState(false)
const getData = async (loading: boolean) => { const getData = async (loading: boolean) => {
try { try {
if (loading) setLoading(loading)
setLoading(true)
const response = await funGetAllDiscussion('?division=' + id + '&search=' + searchQuery + '&page=' + isPage) const response = await funGetAllDiscussion('?division=' + id + '&search=' + searchQuery + '&page=' + isPage)
if (response.success) { if (response.success) {
if (isPage == 1) { if (isPage == 1) {
@@ -36,7 +38,6 @@ export default function ListDiscussion({ id }: { id: string }) {
} else { } else {
toast.error(response.message) toast.error(response.message)
} }
setLoading(false)
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} finally { } finally {
@@ -75,8 +76,37 @@ export default function ListDiscussion({ id }: { id: string }) {
}, [containerRef, isPage]); }, [containerRef, isPage]);
useShallowEffect(() => {
console.log(notifLoadPage.get())
if (notifLoadPage.get().category == 'division/' + param.id + '/discussion' && notifLoadPage.get().load == true) {
setRefresh(true)
}
}, [notifLoadPage.get().load])
function onRefresh() {
notifLoadPage.set({
category: '',
load: false
})
setRefresh(false)
setPage(1)
setTimeout(() => {
getData(false)
}, 500)
}
return ( return (
<Box p={20}> <Box p={20}>
{
isRefresh &&
<ReloadButtonTop
onReload={() => { onRefresh() }}
title='UPDATE'
/>
}
<TextInput <TextInput
styles={{ styles={{
input: { input: {