([]);
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={}
placeholder="Masukan nama pengguna "
- onChange={(val) => onSearch(val.target.value)}
+ onChange={(val) => handleSearch(val.target.value)}
+ // disabled={isLoading}
/>
-
- {_.isEmpty(data) ? (
-
- ) : (
- (
-
-
-
- )}
- data={data}
- setData={setData}
- moreData={async () => {
- const loadData = await userSearch_getAllUser({
- page: activePage + 1,
- search: isSearch,
- });
- setActivePage((val) => val + 1);
-
- return loadData;
- }}
- >
- {(item) => }
-
- )}
-
+ {!data && isLoading ? (
+
+ ) : (
+
+ {_.isEmpty(data) ? (
+
+ ) : (
+ (
+
+
+
+ )}
+ data={data}
+ setData={setData as any}
+ moreData={loadMoreData}
+ >
+ {(item) => }
+
+ )}
+
+ )}
>
);
diff --git a/src/app_modules/user_search/view_user_seach.tsx b/src/app_modules/user_search/view_user_seach.tsx
index ebcd2f81..83d6b8b4 100644
--- a/src/app_modules/user_search/view_user_seach.tsx
+++ b/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 (
<>
}
>
-
+
- {/* {JSON.stringify(data, null, 2)} */}
+
>
);
}