Merge pull request #112 from bipproduction/lukman/14-agustus-2024

Lukman/14 agustus 2024

src/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/page.tsx

@@ -1,8 +1,9 @@
-import { ViewDetailDiscussion } from "@/module/division_new"
+import { DetailDiscussion } from "@/module/discussion"
 
-function Page() {
+
+function Page({ params }: { params: { detail: string } }) {
    return (
-      <ViewDetailDiscussion />
+      <DetailDiscussion id={params.detail} />
    )
 }
 

src/app/(application)/division/[id]/(fitur-division)/discussion/create/page.tsx

@@ -1,11 +1,11 @@
 import { LayoutNavbarNew } from "@/module/_global";
 import { FormCreateDiscussion } from "@/module/discussion";
 
-function Page() {
+function Page({ params }: { params: { id: string } }) {
    return (
       <>
          <LayoutNavbarNew back="" title="Tambah Diskusi" menu={<></>} />
-         <FormCreateDiscussion />
+         <FormCreateDiscussion id={params.id} />
       </>
    )
 }

src/app/(application)/division/[id]/(fitur-division)/discussion/page.tsx

@@ -1,11 +1,11 @@
 import { ListDiscussion, NavbarListDiscussion } from '@/module/discussion';
 import React from 'react';
 
-function Page() {
+function Page({ params }: { params: { id: string } }) {
   return (
     <div>
       <NavbarListDiscussion />
-      <ListDiscussion />
+      <ListDiscussion id={params.id} />
     </div>
   );
 }

src/app/api/discussion/[id]/route.ts

@@ -0,0 +1,50 @@
+import { prisma } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import { NextResponse } from "next/server";
+
+// GET ONE DISCUSSION BY ID
+export async function GET(request: Request, context: { params: { id: string } }) {
+    try {
+        const user = await funGetUserByCookies()
+        if (user.id == undefined) {
+            return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+        }
+        const {id} = context.params
+
+        const data = await prisma.divisionDisscussion.findUnique({
+            where: {
+                id: id
+            },
+            select: {
+                id: true,
+                title: true,
+                desc: true,
+                status: true,
+                createdAt: true,
+                User: {
+                    select: {
+                        name: true
+                    }
+                },
+                DivisionDisscussionComment: {
+                    select: {
+                        id: true,
+                        comment: true,
+                        createdAt: true,
+                        User: {
+                            select: {
+                                name: true
+                            }
+                        }
+                    }
+                }
+            }
+        });
+
+        return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data: data }, { status: 200 });
+
+    } catch (error) {
+        console.log(error);
+        return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+    }
+}

src/app/api/discussion/route.ts

@@ -1,7 +1,9 @@
 import { prisma } from "@/module/_global";
 import { funGetUserByCookies } from "@/module/auth";
 import _ from "lodash";
+import moment from "moment";
 import { NextResponse } from "next/server";
+import "moment/locale/id";
 
 
 // GET ALL DISCUSSION DIVISION ACTIVE = TRUE
@@ -14,7 +16,7 @@ export async function GET(request: Request) {
 
       const { searchParams } = new URL(request.url);
       const idDivision = searchParams.get("division");
-      const title = searchParams.get('search');
+      const name = searchParams.get('search');
 
 
       if (idDivision != "null" && idDivision != null && idDivision != undefined) {
@@ -33,9 +35,11 @@ export async function GET(request: Request) {
             where: {
                isActive: true,
                idDivision: idDivision,
-               title: {
+               User: {
-                  contains: (title == undefined || title == "null") ? "" : title,
+                  name: {
-                  mode: "insensitive"
+                     contains: (name == undefined || name == "null") ? "" : name,
+                     mode: "insensitive"
+                  }
                }
             },
             orderBy: {
@@ -63,9 +67,10 @@ export async function GET(request: Request) {
 
 
          const fixData = data.map((v: any) => ({
-            ..._.omit(v, ["User", "DivisionDisscussionComment"]),
+            ..._.omit(v, ["User", "DivisionDisscussionComment", "createdAt"]),
             user_name: v.User.name,
-            total_komentar: v.DivisionDisscussionComment.length
+            total_komentar: v.DivisionDisscussionComment.length,
+            createdAt: moment(v.createdAt).format("LL")
          }))
 
          return NextResponse.json({ success: true, message: "Berhasil mendapatkan diskusi", data: fixData, }, { status: 200 });

src/app/api/division/[id]/detail/route.ts

@@ -269,8 +269,6 @@ export async function POST(request: Request, context: { params: { id: string } }
       const member = await request.json();
       const idDivision = context.params.id;
 
-      console.log("amalia", member)
-
 
       const data = await prisma.division.count({
          where: {

src/app/api/division/route.ts

@@ -55,6 +55,8 @@ export async function GET(request: Request) {
          jumlah_member: v.DivisionMember.length
       }))
 
+      console.log(allData)
+
       return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data: allData, }, { status: 200 });
 
    } catch (error) {

src/module/discussion/index.ts

@@ -1,3 +1,4 @@
+import DetailDiscussion from "./ui/detail_discussion";
 import FormCreateDiscussion from "./ui/form_create_discussion";
 import ListDiscussion from "./ui/list_discussion";
 import NavbarListDiscussion from "./ui/navbar_list_discussion";
@@ -5,3 +6,4 @@ import NavbarListDiscussion from "./ui/navbar_list_discussion";
 export { ListDiscussion }
 export { NavbarListDiscussion }
 export { FormCreateDiscussion }
+export {DetailDiscussion}

src/module/discussion/lib/api_discussion.ts

@@ -18,3 +18,9 @@ export const funCreateDiscussion = async (data: IFormDiscussion) => {
    });
    return await response.json().catch(() => null);
 }
+
+
+export const funGetDiscussionById = async (path: string) => {
+   const response = await fetch(`/api/discussion/${path}`);
+   return await response.json().catch(() => null);
+}

src/module/discussion/ui/detail_discussion.tsx

@@ -3,6 +3,10 @@ import { Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Text, TextInput
 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 = [
    {
@@ -47,11 +51,27 @@ const dataAnggota = [
    },
 ];
 
-export default function ViewDetailDiscussion() {
+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 /> */}
+       <NavbarDetailDiscussion />
+       <pre>{JSON.stringify(isData, null, 1)}</pre>
          <Box p={20}>
             <Flex
                justify={"space-between"}
@@ -134,3 +154,4 @@ export default function ViewDetailDiscussion() {
       </>
    )
 }
+

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>
    )
 }  

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 = [
+export default function ListDiscussion({ id }: { id: string }) {
-   {
+   const [isData, setData] = useState<IDataDiscussion[]>([])
-      id: 1,
+   const [searchQuery, setSearchQuery] = useState('')
-      name: "Iqbal Ramadan",
+
-      image: "https://i.pravatar.cc/1000?img=5",
+   const getData = async () => {
-      status: true,
+      try {
-      jumlah: 16,
+         const response = await funGetAllDiscussion('?division=' + id + '&search=' + searchQuery)
-      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. '
+         setData(response.data)
-   },
+      } catch (error) {
-   {
+         console.log(error)
-      id: 2,
+      }
-      name: "Doni Setiawan",
+   }
-      image: "https://i.pravatar.cc/1000?img=10",
+
-      status: true,
+   useShallowEffect(() => {
-      jumlah: 26,
+      getData()
-      desc: 'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.'
+   }, [searchQuery])
-   },
-   {
-      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() {
    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}>

src/module/division_new/index.ts

@@ -8,7 +8,6 @@ import ViewDetailEventDivision from "./_division_fitur/calender/view/view_detail
 import ViewDivisionCalender from "./_division_fitur/calender/view/view_division_calender";
 import ViewHistoryDivisionCalender from "./_division_fitur/calender/view/view_history_division_calender";
 import ViewUpdateDivisionCalender from "./_division_fitur/calender/view/view_update_division_calender";
-import ViewDetailDiscussion from "./_division_fitur/discussion/view/view_detail_discussion";
 import ViewEditDiscussion from "./_division_fitur/discussion/view/view_edit_discussion";
 import ViewDocumentDivision from "./_division_fitur/document/view/view_document_division";
 import ViewCreateTaskDivision from "./_division_fitur/task/view/view_create_division_task";
@@ -46,7 +45,6 @@ export { ViewDetailEventDivision };
 export { ViewUpdateDivisionCalender };
 export { UpdateUserDivisionCalender };
 export { UpdateUlangiEvent };
-export { ViewDetailDiscussion };
 export { ViewEditDiscussion };
 export { ViewDocumentDivision };
 export type { IFormDivision, IFormMemberDivision, IFormFixDivision, IDataDivison, IDataMemberDivision }