Merge pull request #98 from bipproduction/amalia/8-agustus-24

upd: update fitur group

src/app/(application)/group/page.tsx

@@ -2,7 +2,7 @@ import { NavbarGroup, TabListGroup } from '@/module/group';
 import { Box } from '@mantine/core';
 import React from 'react';
 
-function Page() {
+function Page({ searchParams }: { searchParams: { active: string } }) {
   return (
     <Box>
       <NavbarGroup />

src/app/api/group/post/route.ts

@@ -1,6 +0,0 @@
-import { apiGroup } from "@/module/group";
-import { NextRequest } from "next/server";
-
-export async function POST(req: NextRequest) {
-    return apiGroup(req, "POST")
-}

src/module/group/api/api_index.ts

@@ -1,8 +1,5 @@
 import { getOneGroup } from "./get/getOneGroup";
 import { listGroups } from "./get/listGroup";
-import { createGroup } from "./post/createGroup";
-import { deleteGroup } from "./post/deleteGroup";
-import { updateGroup } from "./post/updateGroup";
 
 export const API_INDEX_GROUP = [
   {
@@ -10,21 +7,6 @@ export const API_INDEX_GROUP = [
     method: "GET",
     bin: listGroups,
   },
-  {
-    path: "create-group",
-    method: "POST",
-    bin: createGroup,
-  },
-  {
-    path: "update-group",
-    method: "POST",
-    bin: updateGroup,
-  },
-  {
-    path: "delete-group",
-    method: "POST",
-    bin: deleteGroup,
-  },
   {
     path: "get-one-group",
     method: "GET",

src/module/group/api/post/createGroup.ts

@@ -1,36 +0,0 @@
-import { prisma } from "@/module/_global";
-import { revalidatePath } from "next/cache";
-
-export async function createGroup(req: Request) {
-  try {
-    const data = await req.json();
-    const villaId = "desa1";
-
-    if (!data || !data.name) {
-      return Response.json(
-        { success: false, message: "Nama grup harus diisi" },
-        { status: 400 }
-      );
-    }
-
-    const group = await prisma.group.create({
-      data: {
-        name: data.name,
-        isActive: true,
-        idVillage: villaId,
-      },
-      select: {
-        id: true,
-        name: true,
-      },
-    });
-    revalidatePath("/group");
-    return Response.json(group, { status: 201 });
-  } catch (error) {
-    console.error(error);
-    return Response.json(
-      { success: false, message: "Internal Server Error" },
-      { status: 500 }
-    );
-  }
-}

src/module/group/api/post/deleteGroup.ts

@@ -1,32 +0,0 @@
-import { prisma } from "@/module/_global";
-import { revalidatePath } from "next/cache";
-import { NextRequest } from "next/server";
-
-export async function deleteGroup(req: NextRequest) {
-  try {
-    const data = await req.json();
-    const active = data.isActive;
-
-    await prisma.group.update({
-      where: {
-        id: data.id,
-      },
-      data: {
-        isActive: !active,
-      },
-    });
-
-    revalidatePath("/group");
-
-    return Response.json(
-      { success: true, message: "Sukses update status grup" },
-      { status: 200 }
-    );
-  } catch (error) {
-    console.error(error);
-    return Response.json(
-      { message: "Internal Server Error", success: false },
-      { status: 500 }
-    );
-  }
-}

src/module/group/api/post/updateGroup.ts

@@ -1,21 +0,0 @@
-import { prisma } from "@/module/_global";
-
-export async function updateGroup(req: Request) {
-  try {
-    const data = await req.json();
-
-    const update = await prisma.group.update({
-      where: {
-        id: data.id,
-      },
-      data: {
-        name: data.name,
-        idVillage: data.idVillage,
-      },
-    });
-    return Response.json({ success: true, message: "Sukses Update Grup" }, { status: 200 });
-  } catch (error) {
-    console.error(error);
-    return Response.json({ message: "Internal Server Error", success: false }, { status: 500 });
-  }
-}

src/module/group/lib/api_group.ts

@@ -36,6 +36,9 @@ export const funEditStatusGroup = async (path: string, data: IStatusGroup) => {
 };
 
 export const funEditGroup = async (path: string, data: IFormGroup) => {
+   if (data.name.length < 3)
+      return { success: false, message: 'Minimal 3 karakter' }
+
    const response = await fetch(`/api/group/${path}`, {
       method: "PUT",
       headers: {

src/module/group/ui/drawer_group.tsx

@@ -23,7 +23,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
   async function createData() {
     try {
       const response = await funCreateGroup({ name: namaGroup })
-      
+
       if (response.success) {
         toast.success(response.message);
         setOpenDrawerGroup(false)

src/module/group/ui/edit_drawer_group.tsx

@@ -17,19 +17,13 @@ import React, { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { FaPencil, FaToggleOff } from "react-icons/fa6";
 import { IoAddCircle, IoCloseCircleOutline } from "react-icons/io5";
+import { funEditGroup, funEditStatusGroup } from "../lib/api_group";
 
-export default function EditDrawerGroup({
+export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdated: (val: boolean) => void; id: string; isActive: boolean; }) {
-  onUpdated,
-  id,
-  isActive,
-}: {
-  onUpdated: (val: boolean) => void;
-  id: string | null;
-  isActive: boolean | null;
-}) {
   const [openDrawerGroup, setOpenDrawerGroup] = useState(false);
   const [isModal, setModal] = useState(false);
   const [name, setName] = useState("");
+  const [loading, setLoading] = useState(false);
 
   async function getOneGroup() {
     try {
@@ -49,49 +43,40 @@ export default function EditDrawerGroup({
 
   async function isUpdate() {
     try {
-      const res = await fetch(API_ADDRESS.apiUpdateGroup, {
+      setLoading(true)
-        method: "POST",
+      const res = await funEditGroup(id, { name });
-        headers: {
+      if (res.success) {
-          "Content-Type": "application/json",
+        toast.success(res.message);
-        },
+        setOpenDrawerGroup(false);
-        body: JSON.stringify({
+        onUpdated(true);
-          id: id,
+      } else {
-          name: name
+        toast.error(res.message)
-        }),
+      }
-      });
-      setOpenDrawerGroup(false);
-      onUpdated(true);
     } catch (error) {
       console.error(error);
+      toast.error("Edit grup gagal, coba lagi nanti");
+    } finally {
+      setLoading(false);
     }
   }
 
   async function nonActive(val: boolean) {
     try {
       if (val) {
-        const res = await fetch(API_ADDRESS.apiDeleteGroup, {
+        const res = await funEditStatusGroup(id, { isActive: isActive });
-          method: "POST",
+        if (res.success) {
-          headers: {
+          toast.success(res.message);
-            "Content-Type": "application/json",
+          setOpenDrawerGroup(false);
-          },
-          body: JSON.stringify({
-            id,
-            isActive,
-          }),
-        });
-
-        if (res.status == 200) {
           onUpdated(true);
         } else {
-          onUpdated(false);
+          toast.error(res.message)
         }
       }
       setModal(false);
     } catch (error) {
-      console.log(error);
       setModal(false);
-      toast.error("Terjadi kesalahan");
+      console.error(error);
-      onUpdated(false);
+      toast.error("Edit grup gagal, coba lagi nanti");
     }
   }
 
@@ -157,6 +142,7 @@ export default function EditDrawerGroup({
               radius={30}
               fullWidth
               onClick={isUpdate}
+              loading={loading}
             >
               Simpan
             </Button>

src/module/group/ui/list_group_active.tsx

@@ -15,16 +15,20 @@ import toast from "react-hot-toast";
 import { useShallowEffect } from "@mantine/hooks";
 import { funGetAllGroup } from "../lib/api_group";
 import { IDataGroup } from "../lib/type_group";
+import { useSearchParams } from "next/navigation";
 
 
-export default function ListGroupActive({ status }: { status: boolean }) {
+export default function ListGroupActive() {
   const [openDrawer, setOpenDrawer] = useState(false);
   const [valChoose, setValChoose] = useState("");
   const [isData, setData] = useState<IDataGroup[]>([]);
-  const [selectId, setSelectId] = useState<string | null>(null);
+  const [selectId, setSelectId] = useState<string>("");
-  const [active, setActive] = useState<boolean | null>(null);
+  const [active, setActive] = useState<boolean>(false);
   const [searchQuery, setSearchQuery] = useState('')
   const [loading, setLoading] = useState(true);
+  const searchParams = useSearchParams()
+  const status = searchParams.get('active')
+  
 
   const fetchData = async () => {
     try {
@@ -128,8 +132,7 @@ export default function ListGroupActive({ status }: { status: boolean }) {
           isActive={active}
           onUpdated={(val) => {
             if (val) {
-              toast.success("Sukses! data tersimpan");
+              fetchData();
-              // fetchData();
             }
             setOpenDrawer(false);
           }}

src/module/group/ui/tab_list_group.tsx

@@ -3,13 +3,18 @@ import { Box, Tabs, rem } from "@mantine/core";
 import { IoCloseCircleOutline } from "react-icons/io5";
 import { IoMdCheckmarkCircleOutline } from "react-icons/io";
 import ListGroupActive from "./list_group_active";
+import { useRouter, useSearchParams } from "next/navigation";
 
 export default function TabListGroup() {
   const iconStyle = { width: rem(20), height: rem(20) };
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const status = searchParams.get('active')
+
 
   return (
     <Box p={20}>
-      <Tabs variant="pills" color="#FF9861" radius="xl" defaultValue="aktif">
+      <Tabs variant="pills" color="#FF9861" radius="xl" defaultValue={(status == "false") ? "false" : "true"}>
         <Tabs.List
           bg={"white"}
           style={{
@@ -19,28 +24,23 @@ export default function TabListGroup() {
           }}
         >
           <Tabs.Tab
-            value="aktif"
+            value="true"
             w={"45%"}
             leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}
+            onClick={() => { router.push("/group?active=true") }}
           >
             Aktif
           </Tabs.Tab>
           <Tabs.Tab
-            value="tidak-aktif"
+            value="false"
             w={"53%"}
             leftSection={<IoCloseCircleOutline style={iconStyle} />}
+            onClick={() => { router.push("/group?active=false") }}
           >
             Tidak Aktif
           </Tabs.Tab>
         </Tabs.List>
-
+        <ListGroupActive />
-        <Tabs.Panel value="aktif">
-          <ListGroupActive status={true} />
-        </Tabs.Panel>
-
-        <Tabs.Panel value="tidak-aktif">
-          <ListGroupActive status={false} />
-        </Tabs.Panel>
       </Tabs>
     </Box>
   );