Files
hipmi-mobile/screens/Portofolio/ViewListPortofolio.tsx
bagasbanuna 66792186ca feat: Complete Forum & Admin User Access migration + fix scroll issues
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>
2026-04-09 17:48:51 +08:00

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}
/>
);
}