Fix Infinite Load Data
Forum & User Search – User - app/(application)/(user)/forum/index.tsx - app/(application)/(user)/user-search/index.tsx Global & Core - app/+not-found.tsx - screens/RootLayout/AppRoot.tsx - constants/constans-value.ts Component - components/Image/AvatarComp.tsx API Client - service/api-client/api-user.ts Untracked Files - QWEN.md - helpers/ - hooks/use-pagination.tsx - screens/Forum/ViewBeranda3.tsx - screens/UserSeach/ ### No Issue
This commit is contained in:
132
screens/Forum/ViewBeranda3.tsx
Normal file
132
screens/Forum/ViewBeranda3.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import {
|
||||
AvatarComp,
|
||||
BackButton,
|
||||
FloatingButton,
|
||||
SearchInput,
|
||||
TextCustom,
|
||||
} from "@/components";
|
||||
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { createPaginationComponents } from "@/helpers/paginationHelpers";
|
||||
import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
|
||||
import { apiForumGetAll } from "@/service/api-client/api-forum";
|
||||
import { apiUser } from "@/service/api-client/api-user";
|
||||
import { router, Stack } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useEffect, useState } from "react";
|
||||
import { RefreshControl, View } from "react-native";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { usePagination } from "@/hooks/use-pagination";
|
||||
|
||||
const PAGE_SIZE = 5;
|
||||
|
||||
export default function Forum_ViewBeranda3() {
|
||||
const { user } = useAuth();
|
||||
const [dataUser, setDataUser] = useState<any>(null);
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
// Load data profil user
|
||||
useEffect(() => {
|
||||
if (user?.id) {
|
||||
apiUser(user.id).then((res) => setDataUser(res.data));
|
||||
}
|
||||
}, [user?.id]);
|
||||
|
||||
// Setup pagination (menggantikan 50+ lines code!)
|
||||
const pagination = usePagination({
|
||||
fetchFunction: async (page, searchQuery) => {
|
||||
if (!user?.id) return { data: [] };
|
||||
|
||||
return await apiForumGetAll({
|
||||
category: "beranda",
|
||||
search: searchQuery || "",
|
||||
userLoginId: user.id,
|
||||
page: String(page),
|
||||
});
|
||||
},
|
||||
pageSize: PAGE_SIZE,
|
||||
searchQuery: search,
|
||||
dependencies: [user?.id],
|
||||
onError: (error) => console.error("[ERROR] Fetch forum:", error),
|
||||
});
|
||||
|
||||
// Generate komponen (menggantikan 40+ lines code!)
|
||||
const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
|
||||
loading: pagination.loading,
|
||||
refreshing: pagination.refreshing,
|
||||
listData: pagination.listData,
|
||||
searchQuery: search,
|
||||
emptyMessage: "Tidak ada diskusi",
|
||||
emptySearchMessage: "Tidak ada hasil pencarian",
|
||||
skeletonCount: 5,
|
||||
skeletonHeight: 150,
|
||||
});
|
||||
|
||||
// Render item forum
|
||||
const renderForumItem = ({ item }: { item: any }) => (
|
||||
<Forum_BoxDetailSection
|
||||
key={item.id}
|
||||
data={item}
|
||||
onSetData={() => {}}
|
||||
isTruncate={true}
|
||||
href={`/forum/${item.id}`}
|
||||
isRightComponent={false}
|
||||
/>
|
||||
);
|
||||
|
||||
// const ListHeaderComponent = (
|
||||
// <View style={{ paddingVertical: 8, alignItems: "center" }}>
|
||||
// <TextCustom>Diskusi Terbaru</TextCustom>
|
||||
// </View>
|
||||
// );
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: "Forum",
|
||||
headerLeft: () => <BackButton />,
|
||||
headerRight: () => (
|
||||
<AvatarComp
|
||||
fileId={dataUser?.Profile?.imageId}
|
||||
size="base"
|
||||
href={`/forum/${user?.id}/forumku`}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<NewWrapper
|
||||
headerComponent={
|
||||
<View style={{ paddingHorizontal: 16, paddingTop: 8 }}>
|
||||
<SearchInput
|
||||
placeholder="Cari topik diskusi"
|
||||
onChangeText={_.debounce((text) => setSearch(text), 500)}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
floatingButton={
|
||||
<FloatingButton
|
||||
onPress={() =>
|
||||
router.navigate("/(application)/(user)/forum/create")
|
||||
}
|
||||
/>
|
||||
}
|
||||
listData={pagination.listData}
|
||||
renderItem={renderForumItem}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
tintColor={MainColor.yellow}
|
||||
colors={[MainColor.yellow]}
|
||||
refreshing={pagination.refreshing}
|
||||
onRefresh={pagination.onRefresh}
|
||||
/>
|
||||
}
|
||||
onEndReached={pagination.loadMore}
|
||||
// ListHeaderComponent={ListHeaderComponent}
|
||||
ListEmptyComponent={ListEmptyComponent}
|
||||
ListFooterComponent={ListFooterComponent}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
import { BackButton } from "@/components";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { Stack } from "expo-router";
|
||||
|
||||
@@ -15,8 +16,18 @@ export default function AppRoot() {
|
||||
name="index"
|
||||
options={{ title: "", headerBackVisible: false }}
|
||||
/>
|
||||
<Stack.Screen name="eula" options={{ title: "Terms & Conditions", headerBackVisible: false }} />
|
||||
<Stack.Screen name="+not-found" options={{ title: "" }} />
|
||||
<Stack.Screen
|
||||
name="eula"
|
||||
options={{ title: "Terms & Conditions", headerBackVisible: false }}
|
||||
/>
|
||||
{/* CEK PADA FILE */}
|
||||
{/* <Stack.Screen
|
||||
options={{
|
||||
headerShown: true,
|
||||
title: "",
|
||||
headerLeft: () => <BackButton />,
|
||||
}}
|
||||
/> */}
|
||||
<Stack.Screen
|
||||
name="verification"
|
||||
options={{ title: "", headerBackVisible: false }}
|
||||
|
||||
105
screens/UserSeach/MainView.tsx
Normal file
105
screens/UserSeach/MainView.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import { ViewWrapper, TextInputCustom, StackCustom, LoaderCustom, ClickableCustom, Grid, AvatarComp, TextCustom, Spacing } from "@/components";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { ICON_SIZE_SMALL } from "@/constants/constans-value";
|
||||
import { apiAllUser } from "@/service/api-client/api-user";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { router } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function UserSearchMainView(){
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
const [search, setSearch] = useState<string>("");
|
||||
const [isLoadList, setIsLoadList] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
onLoadData(search);
|
||||
}, [search]);
|
||||
|
||||
const onLoadData = async (search: string) => {
|
||||
try {
|
||||
setIsLoadList(true);
|
||||
const response = await apiAllUser({ search: search });
|
||||
console.log("[DATA USER] >", JSON.stringify(response.data, null, 2));
|
||||
setData(response.data);
|
||||
} catch (error) {
|
||||
console.log("Error fetching data", error);
|
||||
} finally {
|
||||
setIsLoadList(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = (search: string) => {
|
||||
setSearch(search);
|
||||
onLoadData(search);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ViewWrapper
|
||||
headerComponent={
|
||||
<TextInputCustom
|
||||
value={search}
|
||||
onChangeText={handleSearch}
|
||||
iconLeft={
|
||||
<Ionicons
|
||||
name="search"
|
||||
size={ICON_SIZE_SMALL}
|
||||
color={MainColor.placeholder}
|
||||
/>
|
||||
}
|
||||
placeholder="Cari Pengguna"
|
||||
borderRadius={50}
|
||||
containerStyle={{ marginBottom: 0 }}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<StackCustom>
|
||||
{isLoadList ? (
|
||||
<LoaderCustom />
|
||||
) : !_.isEmpty(data) ? (
|
||||
data?.map((e, index) => {
|
||||
return (
|
||||
<ClickableCustom
|
||||
key={index}
|
||||
onPress={() => {
|
||||
console.log("Ke Profile");
|
||||
router.push(`/profile/${e?.Profile?.id}`);
|
||||
}}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<AvatarComp fileId={e?.Profile?.imageId} size="base" />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={9}>
|
||||
<StackCustom gap={"sm"}>
|
||||
<TextCustom size="large">{e?.username}</TextCustom>
|
||||
<TextCustom size="small">+{e?.nomor}</TextCustom>
|
||||
</StackCustom>
|
||||
</Grid.Col>
|
||||
<Grid.Col
|
||||
span={1}
|
||||
style={{
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-end",
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name="chevron-forward"
|
||||
size={ICON_SIZE_SMALL}
|
||||
color={MainColor.white}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</ClickableCustom>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<TextCustom align="center">Tidak ditemukan</TextCustom>
|
||||
)}
|
||||
</StackCustom>
|
||||
<Spacing height={50} />
|
||||
</ViewWrapper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
174
screens/UserSeach/MainView_V2.tsx
Normal file
174
screens/UserSeach/MainView_V2.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import {
|
||||
AvatarComp,
|
||||
ClickableCustom,
|
||||
Grid,
|
||||
NewWrapper,
|
||||
StackCustom,
|
||||
TextCustom,
|
||||
TextInputCustom
|
||||
} from "@/components";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { ICON_SIZE_SMALL, PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
|
||||
import { usePagination } from "@/hooks/use-pagination";
|
||||
import { apiAllUser } from "@/service/api-client/api-user";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { router, useFocusEffect } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import { RefreshControl, View } from "react-native";
|
||||
import { createPaginationComponents } from "@/helpers/paginationHelpers";
|
||||
|
||||
|
||||
export default function UserSearchMainView_V2() {
|
||||
const isInitialMount = useRef(true);
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const {
|
||||
listData,
|
||||
loading,
|
||||
refreshing,
|
||||
hasMore,
|
||||
onRefresh,
|
||||
loadMore,
|
||||
isInitialLoad
|
||||
} = usePagination({
|
||||
fetchFunction: async (page, searchQuery) => {
|
||||
const response = await apiAllUser({
|
||||
page: String(page),
|
||||
search: searchQuery || "",
|
||||
});
|
||||
return response;
|
||||
},
|
||||
pageSize: PAGINATION_DEFAULT_TAKE,
|
||||
searchQuery: search,
|
||||
});
|
||||
|
||||
// 🔁 Refresh otomatis saat kembali ke halaman ini
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
if (isInitialMount.current) {
|
||||
// Skip saat pertama kali mount
|
||||
isInitialMount.current = false;
|
||||
return;
|
||||
}
|
||||
// Hanya refresh saat kembali dari screen lain
|
||||
onRefresh();
|
||||
}, [onRefresh]),
|
||||
);
|
||||
|
||||
const renderHeader = () => (
|
||||
<>
|
||||
<TextInputCustom
|
||||
value={search}
|
||||
onChangeText={setSearch}
|
||||
iconLeft={
|
||||
<Ionicons
|
||||
name="search"
|
||||
size={ICON_SIZE_SMALL}
|
||||
color={MainColor.placeholder}
|
||||
/>
|
||||
}
|
||||
placeholder="Cari Pengguna"
|
||||
borderRadius={50}
|
||||
containerStyle={{ marginBottom: 0 }}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
const renderItem = ({ item }: { item: any }) => (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: MainColor.soft_darkblue,
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
marginBottom: 10,
|
||||
elevation: 2,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 2,
|
||||
// height: 100
|
||||
}}
|
||||
>
|
||||
<ClickableCustom
|
||||
onPress={() => {
|
||||
console.log("Ke Profile");
|
||||
router.push(`/profile/${item?.Profile?.id}`);
|
||||
}}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<AvatarComp fileId={item?.Profile?.imageId} size="base" />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={9}>
|
||||
<StackCustom gap={"sm"}>
|
||||
<TextCustom size="large">{item?.username}</TextCustom>
|
||||
<TextCustom size="small">+{item?.nomor}</TextCustom>
|
||||
{item?.Profile?.businessField && (
|
||||
<TextCustom size="small">
|
||||
{item?.Profile?.businessField}
|
||||
</TextCustom>
|
||||
)}
|
||||
</StackCustom>
|
||||
</Grid.Col>
|
||||
<Grid.Col
|
||||
span={1}
|
||||
style={{
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-end",
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name="chevron-forward"
|
||||
size={ICON_SIZE_SMALL}
|
||||
color={MainColor.placeholder}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</ClickableCustom>
|
||||
</View>
|
||||
);
|
||||
|
||||
const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
|
||||
loading,
|
||||
refreshing,
|
||||
listData,
|
||||
searchQuery: search,
|
||||
emptyMessage: "Tidak ada pengguna ditemukan",
|
||||
emptySearchMessage: "Tidak ada hasil pencarian",
|
||||
skeletonCount: 5,
|
||||
skeletonHeight: 150,
|
||||
loadingFooterText: "Memuat lebih banyak pengguna...",
|
||||
isInitialLoad
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<NewWrapper
|
||||
headerComponent={renderHeader()}
|
||||
listData={listData}
|
||||
renderItem={renderItem}
|
||||
onEndReached={loadMore}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
progressBackgroundColor={MainColor.yellow}
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
/>
|
||||
}
|
||||
ListFooterComponent={ListFooterComponent}
|
||||
ListEmptyComponent={ListEmptyComponent}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
// return (
|
||||
// <>
|
||||
// <ViewWrapper>
|
||||
// <View style={{ padding: 16 }}>
|
||||
// <TextCustom>{JSON.stringify(listData, null, 2)}</TextCustom>
|
||||
// </View>
|
||||
// </ViewWrapper>
|
||||
// </>
|
||||
// );
|
||||
}
|
||||
Reference in New Issue
Block a user