wibu/hipmi-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix semua tampilan yang memiliki fungsi infitine load

Browse Source 
UI – User Notifications
- app/(application)/(user)/notifications/index.tsx
- service/api-notifications.ts
- screens/Notification/

UI – Portofolio (User)
- app/(application)/(user)/portofolio/[id]/create.tsx
- app/(application)/(user)/portofolio/[id]/edit.tsx
- app/(application)/(user)/portofolio/[id]/list.tsx
- screens/Portofolio/BoxPortofolioView.tsx
- screens/Portofolio/ViewListPortofolio.tsx
- screens/Profile/PortofolioSection.tsx
- service/api-client/api-portofolio.ts

Forum & User Search
- screens/Forum/DetailForum2.tsx
- screens/Forum/ViewBeranda3.tsx
- screens/UserSeach/MainView_V2.tsx

Constants & Docs
- constants/constans-value.ts
- docs/prompt-for-qwen-code.md

### No Issue
This commit is contained in:
bagasbanuna
2026-01-30 17:18:47 +08:00
parent ed16f1b204
commit ec79a1fbcd
15 changed files with 411 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
screens/Forum/DetailForum2.tsx
View File

@@ -5,6 +5,7 @@ import {
LoaderCustom,
NewWrapper,
Spacing,
StackCustom,
TextAreaCustom,
TextCustom,
TextInputCustom,
@@ -111,7 +112,6 @@ export default function DetailForum2() {
// Create Commentar
const handlerCreateCommentar = async () => {
const cencorContent = censorText(text);
const newData = {
@@ -155,7 +155,10 @@ export default function DetailForum2() {
const headerComponent = () =>
// Box Posting
!data ? (
<CustomSkeleton height={200} />
<StackCustom>
<CustomSkeleton height={200} />
<CustomSkeleton height={100} />
</StackCustom>
) : (
<>
{/* Area Posting */}
@@ -199,10 +202,7 @@ export default function DetailForum2() {
);
// Render individual comment item
const renderCommentItem = ({ item }: { item: TypeForum_CommentProps }) =>
!data && !commentPagination.listData ? (
<ListSkeletonComponent />
) : (
const renderCommentItem = ({ item }: { item: TypeForum_CommentProps }) =>(
<Forum_CommentarBoxSection
key={item.id}
data={item}
@@ -212,7 +212,21 @@ export default function DetailForum2() {
setCommentAuthorId(value.setCommentAuthorId);
}}
/>
);
)
// !data || !commentPagination.listData ? (
// // <ListSkeletonComponent height={120} />
// <LoaderCustom />
// ) : (
// <Forum_CommentarBoxSection
// key={item.id}
// data={item}
// onSetData={(value) => {
// setCommentId(value.setCommentId);
// setOpenDrawerCommentar(value.setOpenDrawer);
// setCommentAuthorId(value.setCommentAuthorId);
// }}
// />
// );
// Generate pagination components using helper
const { ListEmptyComponent, ListFooterComponent } =

2
screens/Forum/ViewBeranda3.tsx
View File

@@ -102,7 +102,7 @@ export default function Forum_ViewBeranda3() {
<NewWrapper
headerComponent={
<View style={{ paddingHorizontal: 16, paddingTop: 8 }}>
<View style={{ paddingTop: 8 }}>
<SearchInput
placeholder="Cari topik diskusi"
onChangeText={_.debounce((text) => setSearch(text), 500)}

249
screens/Notification/ScreenNotification.tsx Normal file
View File

@@ -0,0 +1,249 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
AlertDefaultSystem,
BackButton,
BaseBox,
DrawerCustom,
MenuDrawerDynamicGrid,
NewWrapper,
ScrollableCustom,
StackCustom,
TextCustom,
} from "@/components";
import { IconDot } from "@/components/_Icon/IconComponent";
import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
import NoDataText from "@/components/_ShareComponent/NoDataText";
import { AccentColor, MainColor } from "@/constants/color-palet";
import { ICON_SIZE_SMALL, PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
import { useAuth } from "@/hooks/use-auth";
import { useNotificationStore } from "@/hooks/use-notification-store";
import { usePagination } from "@/hooks/use-pagination";
import { createPaginationComponents } from "@/helpers/paginationHelpers";
import { apiGetNotificationsById } from "@/service/api-notifications";
import { listOfcategoriesAppNotification } from "@/types/type-notification-category";
import { formatChatTime } from "@/utils/formatChatTime";
import { Ionicons } from "@expo/vector-icons";
import { router, Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
import _ from "lodash";
import { useCallback, useState } from "react";
import { RefreshControl, View } from "react-native";
const selectedCategory = (value: string) => {
const category = listOfcategoriesAppNotification.find(
(c) => c.value === value
);
return category?.label;
};
const fixPath = ({
deepLink,
categoryApp,
}: {
deepLink: string;
categoryApp: string;
}) => {
if (categoryApp === "OTHER") {
return deepLink;
}
const separator = deepLink.includes("?") ? "&" : "?";
const fixedPath = `${deepLink}${separator}from=notifications&category=${_.lowerCase(
categoryApp
)}`;
console.log("Fix Path", fixedPath);
return fixedPath;
};
const BoxNotification = ({
data,
activeCategory,
}: {
data: any;
activeCategory: string | null;
}) => {
// console.log("DATA NOTIFICATION", JSON.stringify(data, null, 2));
const { markAsRead } = useNotificationStore();
return (
<>
<BaseBox
backgroundColor={data.isRead ? AccentColor.darkblue : AccentColor.blue}
onPress={() => {
// console.log(
// "Notification >",
// selectedCategory(activeCategory as string)
// );
const newPath = fixPath({
deepLink: data.deepLink,
categoryApp: data.kategoriApp,
});
router.navigate(newPath as any);
selectedCategory(activeCategory as string);
if (!data.isRead) {
markAsRead(data.id);
}
}}
>
<StackCustom>
<TextCustom truncate={2} bold>
{data.title}
</TextCustom>
<TextCustom truncate={2}>{data.pesan}</TextCustom>
<TextCustom size="small" color="gray">
{formatChatTime(data.createdAt)}
</TextCustom>
</StackCustom>
</BaseBox>
</>
);
};
export default function ScreenNotification() {
const { user } = useAuth();
const { category } = useLocalSearchParams<{ category?: string }>();
const [activeCategory, setActiveCategory] = useState<string | null>(
category || "event"
);
const [openDrawer, setOpenDrawer] = useState(false);
const { markAsReadAll } = useNotificationStore();
// Initialize pagination for notifications
const pagination = usePagination({
fetchFunction: async (page) => {
return await apiGetNotificationsById({
id: user?.id as string,
category: activeCategory as any,
page: String(page), // API expects string
});
},
pageSize: PAGINATION_DEFAULT_TAKE,
dependencies: [activeCategory],
});
useFocusEffect(
useCallback(() => {
// Reset and load first page when category changes
pagination.reset();
pagination.onRefresh();
}, [activeCategory])
);
const handlePress = (item: any) => {
setActiveCategory(item.value);
// Reset and load first page when category changes
pagination.reset();
pagination.onRefresh();
};
// Render individual notification item
const renderItem = ({ item }: { item: any }) => (
<View key={item.id}>
<BoxNotification
data={item}
activeCategory={activeCategory as any}
/>
</View>
);
// Generate pagination components using helper
const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
loading: pagination.loading,
refreshing: pagination.refreshing,
listData: pagination.listData,
isInitialLoad: pagination.isInitialLoad,
emptyMessage: "Belum ada notifikasi",
skeletonCount: 5,
skeletonHeight: 100,
});
return (
<>
<Stack.Screen
options={{
title: "Notifikasi",
headerLeft: () => <BackButton />,
headerRight: () => (
<IconDot
color={MainColor.yellow}
onPress={() => setOpenDrawer(true)}
/>
),
}}
/>
<NewWrapper
headerComponent={
<ScrollableCustom
data={listOfcategoriesAppNotification.map((e, i) => ({
id: i,
label: e.label,
value: e.value,
}))}
onButtonPress={handlePress}
activeId={activeCategory as string}
/>
}
listData={pagination.listData}
renderItem={renderItem}
refreshControl={
<RefreshControl
refreshing={pagination.refreshing}
onRefresh={pagination.onRefresh}
/>
}
onEndReached={pagination.loadMore}
ListFooterComponent={ListFooterComponent}
ListEmptyComponent={ListEmptyComponent}
/>
<DrawerCustom
isVisible={openDrawer}
closeDrawer={() => setOpenDrawer(false)}
height={"auto"}
>
<MenuDrawerDynamicGrid
data={[
{
label: "Tandai Semua Dibaca",
value: "read-all",
icon: (
<Ionicons
name="reader-outline"
size={ICON_SIZE_SMALL}
color={MainColor.white}
/>
),
path: "",
},
]}
onPressItem={(item: any) => {
console.log("Item", item.value);
if (item.value === "read-all") {
AlertDefaultSystem({
title: "Tandai Semua Dibaca",
message:
"Apakah Anda yakin ingin menandai semua notifikasi dibaca?",
textLeft: "Batal",
textRight: "Ya",
onPressRight: () => {
markAsReadAll(user?.id as any);
// Reset and refresh data after marking all as read
pagination.reset();
pagination.onRefresh();
setOpenDrawer(false);
},
});
}
}}
/>
</DrawerCustom>
</>
);
}

4
screens/Portofolio/BoxPortofolioView.tsx
View File

@@ -1,5 +1,5 @@
import { BaseBox, Grid, TextCustom } from "@/components";
import { MainColor } from "@/constants/color-palet";
import { AccentColor, MainColor } from "@/constants/color-palet";
import { ICON_SIZE_SMALL } from "@/constants/constans-value";
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
@@ -8,7 +8,7 @@ export default function Portofolio_BoxView({ data }: { data: any }) {
return (
<>
<BaseBox
style={{ backgroundColor: MainColor.darkblue }}
style={{ backgroundColor: AccentColor.blue}}
onPress={() => {
router.push(`/portofolio/${data?.id}`);
}}

74
screens/Portofolio/ViewListPortofolio.tsx Normal file
View File

@@ -0,0 +1,74 @@
import { NewWrapper, 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 { 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 (
<NewWrapper
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}
/>
);
}

2
screens/Profile/PortofolioSection.tsx
View File

@@ -12,7 +12,7 @@ export default function Profile_PortofolioSection({
}) {
return (
<>
<BaseBox>
<BaseBox >
<View>
<TextCustom bold size="large" align="center">
Portofolio

59
screens/UserSeach/MainView_V2.tsx
View File

@@ -1,14 +1,17 @@
import {
AvatarComp,
ClickableCustom,
Grid,
NewWrapper,
StackCustom,
TextCustom,
TextInputCustom
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 {
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";
@@ -18,7 +21,6 @@ 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("");
@@ -30,7 +32,7 @@ export default function UserSearchMainView_V2() {
hasMore,
onRefresh,
loadMore,
isInitialLoad
isInitialLoad,
} = usePagination({
fetchFunction: async (page, searchQuery) => {
const response = await apiAllUser({
@@ -83,7 +85,7 @@ export default function UserSearchMainView_V2() {
padding: 12,
marginBottom: 10,
elevation: 2,
shadowColor: '#000',
shadowColor: "#000",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.2,
shadowRadius: 2,
@@ -129,18 +131,19 @@ export default function UserSearchMainView_V2() {
</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
});
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 (
<>
@@ -161,14 +164,4 @@ export default function UserSearchMainView_V2() {
/>
</>
);
// return (
// <>
// <ViewWrapper>
// <View style={{ padding: 16 }}>
// <TextCustom>{JSON.stringify(listData, null, 2)}</TextCustom>
// </View>
// </ViewWrapper>
// </>
// );
}