115 lines
3.5 KiB
TypeScript
115 lines
3.5 KiB
TypeScript
"use client"
|
|
import { WARNA } from "@/module/_global";
|
|
import { Box, Group, Skeleton, Stack, Text } from "@mantine/core";
|
|
import { useShallowEffect } from "@mantine/hooks";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
import toast from "react-hot-toast";
|
|
import { CiUser, CiClock2 } from "react-icons/ci";
|
|
import { GoDiscussionClosed } from "react-icons/go";
|
|
import { funGetDetailDivisionById } from "../lib/api_division";
|
|
import { IDataDiscussionOnDetailDivision } from "../lib/type_division";
|
|
|
|
|
|
export default function ListDiscussionOnDetailDivision() {
|
|
const router = useRouter();
|
|
const param = useParams<{ id: string }>()
|
|
const [data, setData] = useState<IDataDiscussionOnDetailDivision[]>([])
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
async function fetchData() {
|
|
try {
|
|
setLoading(true);
|
|
const res = await funGetDetailDivisionById(param.id, 'new-discussion');
|
|
if (res.success) {
|
|
setData(res.data)
|
|
} else {
|
|
toast.error(res.message);
|
|
}
|
|
setLoading(false);
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error("Gagal mendapatkan divisi, coba lagi nanti");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
useShallowEffect(() => {
|
|
fetchData()
|
|
}, [param.id])
|
|
|
|
return (
|
|
<>
|
|
<Box pt={10}>
|
|
<Text c={WARNA.biruTua} mb={10} fw={"bold"} fz={16}>
|
|
Diskusi Terbaru
|
|
</Text>
|
|
<Box
|
|
bg={"white"}
|
|
style={{
|
|
borderRadius: 10,
|
|
border: `1px solid ${"#D6D8F6"}`,
|
|
padding: 20,
|
|
}}
|
|
>
|
|
|
|
{
|
|
loading ?
|
|
Array(2)
|
|
.fill(null)
|
|
.map((_, i) => (
|
|
<Stack align="stretch" justify="center" key={i} pb={10}>
|
|
<Skeleton height={80} radius="md" m={0} />
|
|
<Group justify="space-between">
|
|
<Skeleton height={10} radius="md" m={0} w={100} />
|
|
<Skeleton height={10} radius="md" m={0} w={100} />
|
|
</Group>
|
|
</Stack>
|
|
))
|
|
:
|
|
(data.length === 0) ?
|
|
<Stack align="stretch" justify="center" w={"100%"}>
|
|
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada diskusi</Text>
|
|
</Stack>
|
|
: <></>
|
|
}
|
|
{data.map((v, i) => {
|
|
return (
|
|
<Box
|
|
key={i}
|
|
style={{
|
|
borderRadius: 10,
|
|
border: `1px solid ${"#D6D8F6"}`,
|
|
padding: 10,
|
|
}}
|
|
mb={10}
|
|
onClick={() => router.push(`${param.id}/discussion/${v.id}`)}
|
|
>
|
|
<Group>
|
|
<GoDiscussionClosed size={25} />
|
|
<Box w={{ base: 230, md: 400 }}>
|
|
<Text fw={"bold"} truncate="end">
|
|
{v.desc}
|
|
</Text>
|
|
</Box>
|
|
</Group>
|
|
<Group justify="space-between" mt={20} c={"#8C8C8C"}>
|
|
<Group gap={5} align="center">
|
|
<CiUser size={18} />
|
|
<Text fz={13}>{v.user}</Text>
|
|
</Group>
|
|
<Group gap={5} align="center">
|
|
<CiClock2 size={18} />
|
|
<Text fz={13}>{v.date}</Text>
|
|
</Group>
|
|
</Group>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|