From c5bc2b83ee4ad38689be39b65c9150b3a585adb3 Mon Sep 17 00:00:00 2001 From: amel Date: Thu, 19 Sep 2024 16:45:28 +0800 Subject: [PATCH] upd: user Deskripsi: - update scroll load page No Issues --- src/app/api/user/route.ts | 113 ++++++++++++------ src/module/user/member/ui/tab_list_member.tsx | 36 +++--- 2 files changed, 92 insertions(+), 57 deletions(-) diff --git a/src/app/api/user/route.ts b/src/app/api/user/route.ts index 75772ea..d424396 100644 --- a/src/app/api/user/route.ts +++ b/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 }); diff --git a/src/module/user/member/ui/tab_list_member.tsx b/src/module/user/member/ui/tab_list_member.tsx index 2c9f273..4a664cb 100644 --- a/src/module/user/member/ui/tab_list_member.tsx +++ b/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={} placeholder="Pencarian" - onChange={(e) => onSearch(e.target.value)} + onChange={(e) => setSearchQuery(e.target.value)} my={10} /> {loading