sistem-desa-mandiri/src/module/discussion_general/ui/list_discussion.tsx

'use client'
import { currentScroll, globalNotifPage, globalRole, keyWibu, ReloadButtonTop, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { BiSolidCommentDetail } from "react-icons/bi";
import { GrChatOption } from "react-icons/gr";
import { HiMagnifyingGlass } from "react-icons/hi2";
import { useWibuRealtime } from "wibu-realtime";
import { funGetAllDiscussionGeneral } from "../lib/api_discussion_general";


export default function ListDiscussionGeneral() {
   const [isData, setData] = useState<any[]>([])
   const [searchQuery, setSearchQuery] = useState('')
   const [loading, setLoading] = useState(true)
   const tema = useHookstate(TEMA)
   const router = useRouter()
   const { value: containerRef } = useHookstate(currentScroll)
   const searchParams = useSearchParams()
   const status = searchParams.get('active')
   const group = searchParams.get('group')
   const roleLogin = useHookstate(globalRole)
   const [nameGroup, setNameGroup] = useState('')
   const [isPage, setPage] = useState(1)
   const notifLoadPage = useHookstate(globalNotifPage)
   const [isRefresh, setRefresh] = useState(false)
   const [dataRealTime, setDataRealtime] = useWibuRealtime({
      WIBU_REALTIME_TOKEN: keyWibu,
      project: "sdm"
   })

   const getData = async (loading: boolean) => {
      try {
         setLoading(loading)
         const response = await funGetAllDiscussionGeneral('?active=' + status + '&group=' + group + '&search=' + searchQuery + '&page=' + isPage)
         if (response.success) {
            setNameGroup(response.filter.name)
            if (isPage == 1) {
               setData(response.data)
            } else {
               setData([...isData, ...response.data])
            }
         } else {
            toast.error(response.message)
         }
      } catch (error) {
         console.error(error)
      } finally {
         setLoading(false)
      }
   }

   useShallowEffect(() => {
      getData(false)
   }, [isPage])

   useShallowEffect(() => {
      setPage(1)
      getData(true)
   }, [searchQuery, status])

   useEffect(() => {
      const handleScroll = async () => {
         if (containerRef && containerRef.current) {
            const scrollTop = containerRef.current.scrollTop;
            const containerHeight = containerRef.current.clientHeight;
            const scrollHeight = containerRef.current.scrollHeight;

            if (scrollTop + containerHeight >= scrollHeight) {
               setPage(isPage + 1)
            }
         }
      };

      const container = containerRef?.current;
      container?.addEventListener("scroll", handleScroll);

      return () => {
         container?.removeEventListener("scroll", handleScroll);
      };
   }, [containerRef, isPage]);



   useShallowEffect(() => {
      if (notifLoadPage.get().category == 'discussion-general' && notifLoadPage.get().load == true) {
         setRefresh(true)
      }
   }, [notifLoadPage.get().load])

   useShallowEffect(() => {
      if (dataRealTime && dataRealTime.some((i: any) => i.category == 'discussion-general')) {
         setRefresh(true)
      }
   }, [dataRealTime])

   function onRefresh() {
      notifLoadPage.set({
         category: '',
         load: false
      })
      setRefresh(false)
      setPage(1)
      setTimeout(() => {
         getData(false)
      }, 500)
   }


   return (
      <Box py={20}>
         {
            isRefresh &&
            <ReloadButtonTop
               onReload={() => { onRefresh() }}
               title='UPDATE'
            />

         }
         <TextInput
            styles={{
               input: {
                  color: tema.get().utama,
                  borderRadius: tema.get().utama,
                  borderColor: tema.get().utama,
               },
            }}
            size="md"
            radius={30}
            leftSection={<HiMagnifyingGlass size={20} />}
            placeholder="Pencarian"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
         />
         {roleLogin.get() == 'supadmin' && <Text>Filter : {nameGroup}</Text>}
         {loading ?
            Array(3)
               .fill(null)
               .map((_, i) => (
                  <Box key={i}>
                     <Box pl={5} pr={5}>
                        <Flex
                           justify={"space-between"}
                           align={"center"}
                           mt={20}
                        >
                           <Group>
                              <Skeleton width={60} height={60} radius={100} />
                              <Box>
                                 <Skeleton width={100} height={20} radius={"md"} />
                                 <Skeleton mt={8} width={60} height={20} radius={"md"} />
                              </Box>
                           </Group>
                           <Skeleton width={"40%"} height={20} radius={"md"} />
                        </Flex>
                        <Box mt={10}>
                           <Skeleton width={"100%"} height={100} radius={"md"} />
                        </Box>
                        <Group justify="space-between" mt={20} c={'#8C8C8C'}>
                           <Skeleton width={"20%"} height={20} radius={"md"} />
                           <Skeleton width={"20%"} height={20} radius={"md"} />
                        </Group>
                        <Box mt={20}>
                           <Skeleton width={"100%"} height={1} radius={"md"} />
                        </Box>
                     </Box>
                  </Box>
               ))
            :
            _.isEmpty(isData)
               ?
               <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
                  <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Diskusi</Text>
               </Box>
               :
               isData.map((v, i) => {
                  return (
                     <Box key={i} pl={5} pr={5}>
                        <Grid align="center" mt={20} onClick={() => {
                           router.push(`discussion/${v.id}`)
                        }}>
                           <Grid.Col span={{
                              sm: 2,
                              lg: 2,
                              xl: 2,
                              md: 2,
                              xs: 1,
                              base: 2
                           }}>
                              <ActionIcon
                                 variant="gradient"
                                 size={50}
                                 aria-label="Gradient action icon"
                                 radius={100}
                                 bg={tema.get().bgFiturHome}
                              >
                                 <BiSolidCommentDetail size={25} color={tema.get().utama} />
                              </ActionIcon>
                           </Grid.Col>
                           <Grid.Col span={{
                              sm: 6,
                              lg: 6,
                              xl: 6,
                              md: 6,
                              xs: 7,
                              base: 6
                           }}>
                              <Box pl={{
                                 sm: 0,
                                 lg: 0,
                                 xl: 0,
                                 md: 0,
                                 xs: 40,
                                 base: 10
                              }}>
                                 <Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
                                    {v.title}
                                 </Text>
                                 {
                                    status != "false" && <Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge>
                                 }
                              </Box>
                           </Grid.Col>
                           <Grid.Col span={4}>
                              <Text c={"grey"} ta={"end"} fz={13}>{v.createdAt}</Text>
                           </Grid.Col>
                        </Grid>
                        <Box mt={10}>
                           <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
                              <Text
                                 style={{
                                    overflowWrap: "break-word"
                                 }}
                                 onClick={() => {
                                    router.push(`/discussion/${v.id}`)
                                 }}
                              >
                                 {v.desc}
                              </Text>
                           </Spoiler>
                        </Box>
                        <Group justify="space-between" mt={40} c={'#8C8C8C'}>
                           <Group gap={5} align="center">
                              <GrChatOption size={18} />
                              <Text fz={13}>Diskusikan</Text>
                           </Group >
                           <Group gap={5} align="center">
                              <Text fz={13}>{v.total_komentar} Komentar</Text>
                           </Group>
                        </Group>
                        <Box mt={20}>
                           {isData.length <= 1 ? "" :
                              <Divider size={"xs"} />
                           }
                        </Box>
                     </Box>
                  );
               })
         }

      </Box>
   )
}