upd: user

Deskripsi:
- update scroll load page

No Issues

src/app/api/user/route.ts

@@ -15,7 +15,7 @@ export async function GET(request: Request) {
     const idGroup = searchParams.get("group");
     const active = searchParams.get("active");
     const page = searchParams.get('page');
-    const dataSkip = Number(page) * 5 - 5;
+    const dataSkip = Number(page) * 10 - 10;
     const user = await funGetUserByCookies()
     if (user.id == undefined) {
       return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
@@ -37,46 +37,89 @@ export async function GET(request: Request) {
     })
 
 
-    const users = await prisma.user.findMany({
-      skip: dataSkip,
-      take: 5,
-      where: {
-        isActive: active == 'false' ? false : true,
-        idGroup: String(fixGroup),
-        name: {
-          contains: (name == undefined || name == null) ? "" : name,
-          mode: "insensitive",
-        }
-      },
-      select: {
-        id: true,
-        isActive: true,
-        nik: true,
-        name: true,
-        phone: true,
-        email: true,
-        gender: true,
-        img: true,
-        Position: {
-          select: {
-            name: true,
+    if (page != undefined) {
+      const users = await prisma.user.findMany({
+        skip: dataSkip,
+        take: 10,
+        where: {
+          isActive: active == 'false' ? false : true,
+          idGroup: String(fixGroup),
+          name: {
+            contains: (name == undefined || name == null) ? "" : name,
+            mode: "insensitive",
+          }
+        },
+        select: {
+          id: true,
+          isActive: true,
+          nik: true,
+          name: true,
+          phone: true,
+          email: true,
+          gender: true,
+          img: true,
+          Position: {
+            select: {
+              name: true,
+            },
+          },
+          Group: {
+            select: {
+              name: true,
+            },
           },
         },
-        Group: {
-          select: {
-            name: true,
+      });
+
+      const allData = users.map((v: any) => ({
+        ..._.omit(v, ["Group", "Position"]),
+        group: v.Group.name,
+        position: v.Position.name
+      }))
+
+      return NextResponse.json({ success: true, message: "Berhasil member", data: allData, filter }, { status: 200 });
+    } else {
+      const users = await prisma.user.findMany({
+        where: {
+          isActive: active == 'false' ? false : true,
+          idGroup: String(fixGroup),
+          name: {
+            contains: (name == undefined || name == null) ? "" : name,
+            mode: "insensitive",
+          }
+        },
+        select: {
+          id: true,
+          isActive: true,
+          nik: true,
+          name: true,
+          phone: true,
+          email: true,
+          gender: true,
+          img: true,
+          Position: {
+            select: {
+              name: true,
+            },
+          },
+          Group: {
+            select: {
+              name: true,
+            },
           },
         },
-      },
-    });
+      });
+
+      const allData = users.map((v: any) => ({
+        ..._.omit(v, ["Group", "Position"]),
+        group: v.Group.name,
+        position: v.Position.name
+      }))
+
+      return NextResponse.json({ success: true, message: "Berhasil member", data: allData, filter }, { status: 200 });
+    }
 
-    const allData = users.map((v: any) => ({
-      ..._.omit(v, ["Group", "Position"]),
-      group: v.Group.name,
-      position: v.Position.name
-    }))
 
-    return NextResponse.json({ success: true, message: "Berhasil member", data: allData, filter }, { status: 200 });
   } catch (error) {
     console.error(error);
     return NextResponse.json({ success: false, message: "Gagal mendapatkan member, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });

src/module/user/member/ui/tab_list_member.tsx

@@ -1,5 +1,4 @@
-
-import { currentScroll, globalRole, SkeletonSingle, TEMA, WARNA } from "@/module/_global"
+import { currentScroll, globalRole, SkeletonSingle, TEMA } from "@/module/_global"
 import { Box, Text, TextInput, Divider, Avatar, Grid } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
 import { useRouter, useSearchParams } from "next/navigation"
@@ -7,7 +6,6 @@ import { useEffect, useState } from "react"
 import { HiMagnifyingGlass } from "react-icons/hi2"
 import { IListMember } from "../lib/type_member"
 import { funGetAllmember } from "../lib/api_member"
-import { funGetAllGroup, IDataGroup } from "@/module/group"
 import toast from "react-hot-toast"
 import _ from "lodash"
 import { useHookstate } from "@hookstate/core"
@@ -24,48 +22,42 @@ export default function TabListMember() {
    const roleLogin = useHookstate(globalRole)
    const [nameGroup, setNameGroup] = useState('')
    const tema = useHookstate(TEMA)
-
-   //scroll
    const { value: containerRef } = useHookstate(currentScroll);
    const [isPage, setPage] = useState(1)
 
 
    async function getAllUser(loading: boolean) {
       try {
-         setLoading(true)
+         if (loading)
+            setLoading(true)
          const res = await funGetAllmember('?active=' + status + '&group=' + group + '&search=' + searchQuery + '&page=' + isPage)
          if (res.success) {
-               if (isPage == 1) {
-                  setDataMember(res.data)
-                  setNameGroup(res.filter.name)
-               } else {
-                  setDataMember([...dataMember, ...res.data])
-                  setNameGroup(res.filter.name)
-               }
-         
+            setNameGroup(res.filter.name)
+            if (isPage == 1) {
+               setDataMember(res.data)
+            } else {
+               setDataMember([...dataMember, ...res.data])
+            }
+
          } else {
             toast.error(res.message)
          }
       } catch (error) {
          console.error(error)
-         throw new Error("Error")
+         toast.error("Gagal memuat data, coba lagi nanti")
       } finally {
          setLoading(false)
       }
    }
 
-   function onSearch(val:string){
-      setSearchQuery(val)
-      setPage(1)
-   }
-
    useShallowEffect(() => {
+      setPage(1)
       getAllUser(true)
    }, [status, searchQuery])
 
    useShallowEffect(() => {
       getAllUser(false)
-   }, [status, isPage])
+   }, [isPage])
 
    useEffect(() => {
       const handleScroll = async () => {
@@ -103,7 +95,7 @@ export default function TabListMember() {
                radius={30}
                leftSection={<HiMagnifyingGlass size={20} />}
                placeholder="Pencarian"
-               onChange={(e) => onSearch(e.target.value)}
+               onChange={(e) => setSearchQuery(e.target.value)}
                my={10}
             />
             {loading