feat : update discussion

Deskripsi - update discussion No issue
2024-08-14 10:14:52 +08:00
parent 15d93abc97
commit f1b0560829
12 changed files with 165 additions and 71 deletions
--- a/src/module/discussion/ui/detail_discussion.tsx
+++ b/src/module/discussion/ui/detail_discussion.tsx
@@ -0,0 +1,157 @@
+"use client"
+import { Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
+import { WARNA } from "@/module/_global";
+import { GrChatOption } from "react-icons/gr";
+import { LuSendHorizonal } from "react-icons/lu";
+import NavbarDetailDiscussion from "@/module/discussion/ui/navbar_detail_discussion";
+import { useState } from "react";
+import { funGetAllDiscussion, funGetDiscussionById } from "../lib/api_discussion";
+import { useShallowEffect } from "@mantine/hooks";
+
+const dataAnggota = [
+   {
+      id: 1,
+      name: "Iqbal Ramadan",
+      image: "https://i.pravatar.cc/1000?img=5",
+      status: true,
+      jumlah: 16,
+      desc: 'is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. '
+   },
+   {
+      id: 2,
+      name: "Doni Setiawan",
+      image: "https://i.pravatar.cc/1000?img=10",
+      status: true,
+      jumlah: 26,
+      desc: 'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.'
+   },
+   {
+      id: 3,
+      name: "Rangga Agung",
+      image: "https://i.pravatar.cc/1000?img=51",
+      status: false,
+      jumlah: 11,
+      desc: 'It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
+   },
+   {
+      id: 4,
+      name: "Ramadan Sananta",
+      image: "https://i.pravatar.cc/1000?img=15",
+      status: false,
+      jumlah: 30,
+      desc: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. '
+   },
+   {
+      id: 5,
+      name: "Imam Baronis",
+      image: "https://i.pravatar.cc/1000?img=22",
+      status: false,
+      jumlah: 29,
+      desc: 'Contrary to popular belief, Lorem Ipsum is not simply random text'
+   },
+];
+
+export default function DetailDiscussion({ id }: { id: string }) {
+
+  const [isData, setData] = useState([])
+
+  const getData = async () => {
+     try {
+        const response = await funGetDiscussionById(id)
+        setData(response.data)
+     } catch (error) {
+        console.log(error)
+     }
+  }
+
+  useShallowEffect(() => {
+     getData()
+  }, [])
+
+   return (
+      <>
+       <NavbarDetailDiscussion />
+       <pre>{JSON.stringify(isData, null, 1)}</pre>
+         <Box p={20}>
+            <Flex
+               justify={"space-between"}
+               align={"center"}
+               mt={20}
+            >
+               <Group>
+                  <Avatar src={'https://i.pravatar.cc/1000?img=5'} alt="it's me" size="lg" />
+                  <Box>
+                     <Text c={WARNA.biruTua} fw={"bold"}>
+                        Fibra Marcell
+                     </Text>
+                     <Badge color={"green"} size="sm">BUKA</Badge>
+                  </Box>
+               </Group>
+               <Text c={"grey"}>1 Jam</Text>
+            </Flex>
+            <Box mt={10}>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</Box>
+            <Group justify="space-between" mt={20} c={'#8C8C8C'}>
+               <Group gap={5} align="center">
+                  <GrChatOption size={18} />
+                  <Text fz={13}>10 Komentar</Text>
+               </Group >
+            </Group>
+
+            <Box p={10}>
+               {dataAnggota.map((v, i) => {
+                  return (
+                     <Box key={i} p={10}>
+                        <Flex
+                           justify={"space-between"}
+                           align={"center"}
+                        >
+                           <Group>
+                              <Avatar src={v.image} alt="it's me" size="md" />
+                              <Box>
+                                 <Text c={WARNA.biruTua} fw={"bold"} fz={15}>
+                                    {v.name}
+                                 </Text>
+                              </Box>
+                           </Group>
+                           <Text c={"grey"}>1 Jam</Text>
+                        </Flex>
+                        <Box mt={10}>{v.desc}</Box>
+                        <Box mt={20}>
+                           <Divider size={"xs"} />
+                        </Box>
+                     </Box>
+                  );
+               })}
+            </Box>
+            <Box h={60} pos={"fixed"} bottom={0} w={{ base: "90%", md: "35.5%" }} style={{
+               zIndex: 999
+            }}>
+               <Grid bg={"white"} style={{
+                  border: '1px solid gray',
+                  borderRadius: 40
+               }} justify="center" align="center">
+                  <Grid.Col span={10}>
+                     <TextInput
+                        styles={{
+                           input: {
+                              color: WARNA.biruTua,
+                              border: "none",
+                              backgroundColor: "transparent"
+                           },
+                        }}
+                        size="md"
+                        placeholder="Kirim Komentar"
+                     />
+                  </Grid.Col>
+                  <Grid.Col span={2}>
+                     <Center>
+                        <LuSendHorizonal size={30} />
+                     </Center>
+                  </Grid.Col>
+               </Grid>
+            </Box>
+         </Box>
+      </>
+   )
+}
+
--- a/src/module/discussion/ui/form_create_discussion.tsx
+++ b/src/module/discussion/ui/form_create_discussion.tsx
@@ -4,9 +4,15 @@ import LayoutModal from "@/module/_global/layout/layout_modal";
 import { Avatar, Box, Button, Center, Grid, Group, Text, Textarea } from "@mantine/core";
 import { useState } from "react";
 import toast from "react-hot-toast";
+import { funCreateDiscussion } from "../lib/api_discussion";

-export default function FormCreateDiscussion() {
+export default function FormCreateDiscussion({id}: {id: string}) {
   const [isValModal, setValModal] = useState(false)
+   const [isData, setData] = useState({
+      desc: "",
+      idDivision: id
+   })
+

   function onTrue(val: boolean) {
      if (val) {
@@ -15,6 +21,29 @@ export default function FormCreateDiscussion() {
      setValModal(false)
   }

+   async function createDiscussion(val: boolean) {
+      try {
+         const response = await funCreateDiscussion({
+            desc: isData.desc,
+            idDivision: id
+         })
+
+         if (response.success) {
+            toast.success(response.message)
+            onTrue(true)
+         } else {
+            toast.error(response.message)
+         }
+      } catch (error) {
+         console.log(error);
+         toast.error("Gagal menambahkan diskusi, coba lagi nanti");
+      } finally {
+         setValModal(false)
+      }
+   }
+
+
+
   return (
      <Box>
         <Box p={20}>
@@ -30,6 +59,7 @@ export default function FormCreateDiscussion() {
                           backgroundColor: 'transparent',
                        }
                     }}
+                     onChange={(e) => setData({ ...isData, desc: e.target.value })}
                  />
               </Box>
            </Group>
@@ -50,7 +80,7 @@ export default function FormCreateDiscussion() {
         <LayoutModal opened={isValModal} onClose={() => setValModal(false)}
            description="Apakah Anda yakin ingin
        menambah data?"
-            onYes={(val) => { onTrue(val) }} />
+            onYes={(val) => { createDiscussion(val) }} />
      </Box>
   )
 }  
--- a/src/module/discussion/ui/list_discussion.tsx
+++ b/src/module/discussion/ui/list_discussion.tsx
@@ -1,54 +1,31 @@
 'use client'
 import { WARNA } from "@/module/_global";
 import { Avatar, Badge, Box, Divider, Flex, Group, Text, TextInput } from "@mantine/core";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState } from "react";
 import { GrChatOption } from "react-icons/gr";
 import { HiMagnifyingGlass } from "react-icons/hi2";
+import { funGetAllDiscussion } from "../lib/api_discussion";
+import { useShallowEffect } from "@mantine/hooks";
+import { IDataDiscussion } from "../lib/type_discussion";

-const dataAnggota = [
-   {
-      id: 1,
-      name: "Iqbal Ramadan",
-      image: "https://i.pravatar.cc/1000?img=5",
-      status: true,
-      jumlah: 16,
-      desc: 'is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. '
-   },
-   {
-      id: 2,
-      name: "Doni Setiawan",
-      image: "https://i.pravatar.cc/1000?img=10",
-      status: true,
-      jumlah: 26,
-      desc: 'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.'
-   },
-   {
-      id: 3,
-      name: "Rangga Agung",
-      image: "https://i.pravatar.cc/1000?img=51",
-      status: false,
-      jumlah: 11,
-      desc: 'It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
-   },
-   {
-      id: 4,
-      name: "Ramadan Sananta",
-      image: "https://i.pravatar.cc/1000?img=15",
-      status: false,
-      jumlah: 30,
-      desc: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. '
-   },
-   {
-      id: 5,
-      name: "Imam Baroni",
-      image: "https://i.pravatar.cc/1000?img=22",
-      status: false,
-      jumlah: 29,
-      desc: 'Contrary to popular belief, Lorem Ipsum is not simply random text'
-   },
-];
+export default function ListDiscussion({ id }: { id: string }) {
+   const [isData, setData] = useState<IDataDiscussion[]>([])
+   const [searchQuery, setSearchQuery] = useState('')
+
+   const getData = async () => {
+      try {
+         const response = await funGetAllDiscussion('?division=' + id + '&search=' + searchQuery)
+         setData(response.data)
+      } catch (error) {
+         console.log(error)
+      }
+   }
+
+   useShallowEffect(() => {
+      getData()
+   }, [searchQuery])

-export default function ListDiscussion() {
   const router = useRouter()
   return (
      <Box p={20}>
@@ -64,12 +41,14 @@ export default function ListDiscussion() {
            radius={30}
            leftSection={<HiMagnifyingGlass size={20} />}
            placeholder="Pencarian"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
         />
-         {dataAnggota.map((v, i) => {
+         {isData.map((v, i) => {
            return (
               <Box key={i} pl={10} pr={10}
                  onClick={() => {
-                     router.push(`/discussion/${v.id}`)
+                     router.push(`/division/${v.id}/discussion/${v.id}`)
                  }}
               >
                  <Flex
@@ -78,15 +57,15 @@ export default function ListDiscussion() {
                     mt={20}
                  >
                     <Group>
-                        <Avatar src={v.image} alt="it's me" size="lg" />
+                        <Avatar alt="it's me" size="lg" />
                        <Box>
                           <Text c={WARNA.biruTua} fw={"bold"}>
-                              {v.name}
+                              {v.user_name}
                           </Text>
                           <Badge color={(v.status) ? "green" : "red"} size="sm">{(v.status) ? "BUKA" : "TUTUP"}</Badge>
                        </Box>
                     </Group>
-                     <Text c={"grey"}>1 Jam</Text>
+                     <Text c={"grey"}>{v.createdAt}</Text>
                  </Flex>
                  <Box mt={10}>{v.desc}</Box>
                  <Group justify="space-between" mt={20} c={'#8C8C8C'}>
@@ -95,7 +74,7 @@ export default function ListDiscussion() {
                        <Text fz={13}>Diskusikan</Text>
                     </Group >
                     <Group gap={5} align="center">
-                        <Text fz={13}>{v.jumlah} Komentar</Text>
+                        <Text fz={13}>{v.total_komentar} Komentar</Text>
                     </Group>
                  </Group>
                  <Box mt={20}>