fix API

deskripsi:
- fix api user search

src/app_modules/katalog/portofolio/component/button_delete_new.tsx

@@ -1,9 +1,10 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import { MainColor } from "@/app_modules/_global/color";
 import {
   ComponentGlobal_NotifikasiBerhasil,
   ComponentGlobal_NotifikasiGagal,
 } from "@/app_modules/_global/notif_global";
 import { UIGlobal_Modal } from "@/app_modules/_global/ui";
+import { clientLogger } from "@/util/clientLogger";
 import { Button } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconTrash } from "@tabler/icons-react";
@@ -14,9 +15,6 @@ import {
   apiGetOnePortofolioById,
 } from "../lib/api_portofolio";
 import { IDetailPortofolioBisnis } from "../lib/type_portofolio";
-import { MainColor } from "@/app_modules/_global/color";
-import { apiGetUserId } from "@/app_modules/_global/lib/api_user";
-import { clientLogger } from "@/util/clientLogger";
 
 export default function ComponentPortofolio_ButtonDeleteNew({
   userLoginId,

src/app_modules/user_search/component/api_fetch_user_search.ts

@@ -0,0 +1,25 @@
+export const apiGetUserSearch = async ({
+  page,
+  search,
+}: {
+  page: string;
+  search: string;
+}) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const isPage = page ? `?page=${page}` : "";
+  const isSearch = search ? `&search=${search}` : "";
+  console.log("page", page);
+  const response = await fetch(`/api/user${isPage}${isSearch}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return await response.json().catch(() => null);
+};

src/app_modules/user_search/component/ui_user_search.tsx

@@ -3,8 +3,9 @@
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
+import { clientLogger } from "@/util/clientLogger";
 import {
   ActionIcon,
   Box,
@@ -16,26 +17,83 @@ import {
   Text,
   TextInput,
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { IconChevronRight, IconSearch } from "@tabler/icons-react";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { userSearch_getAllUser } from "../fun/get/get_all_user";
+import { apiGetUserSearch } from "./api_fetch_user_search";
 
-export function UserSearch_UiView({ listUser }: { listUser: MODEL_USER[] }) {
-  const [data, setData] = useState(listUser);
+export function UserSearch_UiView() {
+  const [data, setData] = useState<MODEL_USER[]>([]);
   const [activePage, setActivePage] = useState(1);
-  const [isSearch, setIsSearch] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
 
-  async function onSearch(name: string) {
-    setIsSearch(name);
-    const loadData = await userSearch_getAllUser({
-      page: activePage,
-      search: name,
-    });
-    setData(loadData as any);
+  useShallowEffect(() => {
+    const initializeData = async () => {
+      setIsLoading(true);
+      try {
+        const response = await apiGetUserSearch({
+          page: "1", // Selalu mulai dari page 1 untuk search baru
+          search: searchQuery,
+        });
+
+        if (response?.data) {
+          // Reset allData dan mulai dengan data baru
+          setData(response.data);
+          setActivePage(1);
+          // Jika data yang diterima kosong atau kurang dari yang diharapkan,
+          // berarti tidak ada data lagi
+          setHasMore(response.data.length > 0);
+        }
+      } catch (error) {
+        clientLogger.error("Error initializing data", error);
+        setData([]);
+        setHasMore(false);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    initializeData();
+  }, [searchQuery]); // Dependency hanya pada searchQuery
+
+  function handleSearch(value: string) {
+    setSearchQuery(value);
+    // Reset state pagination
     setActivePage(1);
+    setHasMore(true);
+  }
+
+  // Function untuk load more data (infinite scroll)
+  async function loadMoreData() {
+    if (!hasMore || isLoading) return null;
+
+    try {
+      const nextPage = activePage + 1;
+      const response = await apiGetUserSearch({
+        page: `${nextPage}`,
+        search: searchQuery,
+      });
+
+      if (response?.data && response.data.length > 0) {
+        setActivePage(nextPage);
+        // Update hasMore berdasarkan apakah ada data yang diterima
+        setHasMore(response.data.length > 0);
+        return response.data;
+      } else {
+        setHasMore(false);
+        return null;
+      }
+    } catch (error) {
+      clientLogger.error("Error loading more data", error);
+      setHasMore(false);
+      return null;
+    }
   }
 
   return (
@@ -46,35 +104,32 @@ export function UserSearch_UiView({ listUser }: { listUser: MODEL_USER[] }) {
           style={{ zIndex: 99 }}
           icon={<IconSearch size={20} />}
           placeholder="Masukan nama pengguna "
-          onChange={(val) => onSearch(val.target.value)}
+          onChange={(val) => handleSearch(val.target.value)}
+          // disabled={isLoading}
         />
-        <Box>
-          {_.isEmpty(data) ? (
-            <ComponentGlobal_IsEmptyData text="Pengguna tidak ditemukan" />
-          ) : (
-            <ScrollOnly
-              height="84vh"
-              renderLoading={() => (
-                <Center mt={"lg"}>
-                  <Loader color={"yellow"} />
-                </Center>
-              )}
-              data={data}
-              setData={setData}
-              moreData={async () => {
-                const loadData = await userSearch_getAllUser({
-                  page: activePage + 1,
-                  search: isSearch,
-                });
-                setActivePage((val) => val + 1);
-
-                return loadData;
-              }}
-            >
-              {(item) => <CardView data={item} />}
-            </ScrollOnly>
-          )}
-        </Box>
+        {!data && isLoading ? (
+          <CustomSkeleton height={40} width={"100%"} />
+        ) : (
+          <Box >
+            {_.isEmpty(data) ? (
+              <ComponentGlobal_IsEmptyData text="Pengguna tidak ditemukan" />
+            ) : (
+              <ScrollOnly
+                height="5vh"
+                renderLoading={() => (
+                  <Center mt={"lg"}>
+                    <Loader color={"yellow"} />
+                  </Center>
+                )}
+                data={data}
+                setData={setData as any}
+                moreData={loadMoreData}
+              >
+                {(item) => <CardView data={item} />}
+              </ScrollOnly>
+            )}
+          </Box>
+        )}
       </Stack>
     </>
   );

src/app_modules/user_search/view_user_seach.tsx

@@ -1,22 +1,17 @@
 
-import { MODEL_USER } from "@/app_modules/home/model/interface";
 import UIGlobal_LayoutHeaderTamplate from "../_global/ui/ui_header_tamplate";
 import UIGlobal_LayoutTamplate from "../_global/ui/ui_layout_tamplate";
 import { UserSearch_UiView } from "./component/ui_user_search";
 
-export default function UserSearch_MainView({
-  listUser,
-}: {
-  listUser: MODEL_USER[];
-}) {
+export default function UserSearch_MainView() {
   return (
     <>
       <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Pencarian Pengguna" />}
       >
-        <UserSearch_UiView listUser={listUser} />
+        <UserSearch_UiView  />
       </UIGlobal_LayoutTamplate>
-      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+
     </>
   );
 }