Forum Screens (User Phase 5 - 17 files):
- Migrate all forum list, detail, create, and report screens to OS_Wrapper.
- ViewBeranda, ViewBeranda2, ViewBeranda3: List screens with pull-to-refresh.
- DetailForum, DetailForum2: Comment sections with headers (apply disableFlexGrow fix).
- create, edit, report-*, other-report-*, preview-report-*: Forms with keyboard handling.
Admin Phase 9 (User Access - 2 files):
- index.tsx: List with search and pagination.
- [id]/index.tsx: Detail with status toggle footer.
Scroll Fixes (Critical Bugs):
- Fix "Ghost Scroll" in Android FlatList: Removed TouchableWithoutFeedback and KeyboardAvoidingView wrappers in List Mode.
- Fix Large Header Cut-off: Added optional disableFlexGrow={true} to OS_Wrapper for screens with complex ListHeaderComponents (e.g., Forum Detail).
- Fix Keyboard Dismiss: Changed keyboardShouldPersistTaps to "handled" so taps on empty areas dismiss the keyboard while allowing scroll.
Documentation:
- Update TASK-005 with complete Phase 5 details and new progress totals.
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import { OS_Wrapper, TextCustom } from "@/components";
|
|
import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
|
|
import { MainColor } from "@/constants/color-palet";
|
|
import { usePagination } from "@/hooks/use-pagination";
|
|
import { createPaginationComponents } from "@/helpers/paginationHelpers";
|
|
import { apiGetPortofolio } from "@/service/api-client/api-portofolio";
|
|
import { useFocusEffect, useLocalSearchParams } from "expo-router";
|
|
import { useCallback } from "react";
|
|
import { RefreshControl } from "react-native";
|
|
import Portofolio_BoxView from "./BoxPortofolioView";
|
|
import NoDataText from "@/components/_ShareComponent/NoDataText";
|
|
import { PADDING_INLINE, PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
|
|
|
|
export default function ViewListPortofolio() {
|
|
const { id } = useLocalSearchParams();
|
|
|
|
// Initialize pagination for portfolio items
|
|
const pagination = usePagination({
|
|
fetchFunction: async (page) => {
|
|
return await apiGetPortofolio({
|
|
id: id as string,
|
|
page: String(page), // API expects string
|
|
});
|
|
// return response.data;
|
|
},
|
|
pageSize: PAGINATION_DEFAULT_TAKE,
|
|
dependencies: [id],
|
|
});
|
|
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
// Reset and load first page when id changes
|
|
pagination.reset();
|
|
pagination.onRefresh();
|
|
}, [id]),
|
|
);
|
|
|
|
// Render individual portfolio item
|
|
const renderItem = ({ item }: { item: any }) => (
|
|
<Portofolio_BoxView key={item.id} data={item} />
|
|
);
|
|
|
|
// Generate pagination components using helper
|
|
const { ListEmptyComponent, ListFooterComponent } =
|
|
createPaginationComponents({
|
|
loading: pagination.loading,
|
|
refreshing: pagination.refreshing,
|
|
listData: pagination.listData,
|
|
isInitialLoad: pagination.isInitialLoad,
|
|
emptyMessage: "Tidak ada portofolio",
|
|
skeletonCount: 3,
|
|
skeletonHeight: 100,
|
|
});
|
|
|
|
return (
|
|
<OS_Wrapper
|
|
contentPadding={PADDING_INLINE}
|
|
listData={pagination.listData}
|
|
renderItem={renderItem}
|
|
refreshControl={
|
|
<RefreshControl
|
|
// IOS
|
|
tintColor={MainColor.yellow}
|
|
// Android
|
|
colors={[MainColor.yellow]}
|
|
progressBackgroundColor={MainColor.yellow}
|
|
refreshing={pagination.refreshing}
|
|
onRefresh={pagination.onRefresh}
|
|
/>
|
|
}
|
|
onEndReached={pagination.loadMore}
|
|
ListEmptyComponent={ListEmptyComponent}
|
|
ListFooterComponent={ListFooterComponent}
|
|
/>
|
|
);
|
|
}
|