Fix forum detail

Forum (User)
- app/(application)/(user)/forum/[id]/index.tsx
- screens/Forum/ViewForumku2.tsx
- service/api-client/api-forum.ts

Forum – New / Refactor
- screens/Forum/DetailForum.tsx
- screens/Forum/DetailForum2.tsx

Documentation
- docs/

Removed
- hipmi-note.md

### No Issue'

screens/Forum/ViewForumku2.tsx

@@ -15,38 +15,49 @@ import NoDataText from "@/components/_ShareComponent/NoDataText";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
+import { usePagination } from "@/hooks/use-pagination";
+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, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { RefreshControl, View } from "react-native";
 
-const PAGE_SIZE = 5;
-
 export default function View_Forumku2() {
   const { id } = useLocalSearchParams();
   const { user } = useAuth();
-  const [listData, setListData] = useState<any[]>([]);
   const [dataUser, setDataUser] = useState<any | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [refreshing, setRefreshing] = useState(false);
-  const [hasMore, setHasMore] = useState(true);
-  const [page, setPage] = useState(1);
   const [count, setCount] = useState(0);
 
+  // Initialize pagination hook
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      if (!user?.id) throw new Error("User not authenticated");
+
+      const response = await apiForumGetAll({
+        category: "forumku",
+        authorId: id as string,
+        userLoginId: user.id,
+        page: String(page), // API terima string
+      });
+
+      // Update count when fetching page 1
+      if (page === 1) {
+        setCount(response.data.count);
+      }
+
+      return response.data;
+    },
+    pageSize: 5,
+    dependencies: [user?.id],
+  });
+
   useEffect(() => {
     onLoadDataProfile(id as string);
   }, [id]);
 
-  useEffect(() => {
-    setPage(1);
-    setListData([]);
-    setHasMore(true);
-    fetchData(1, true);
-  }, [user?.id]);
-
   const onLoadDataProfile = async (id: string) => {
     try {
       const response = await apiUser(id);
@@ -58,54 +69,6 @@ export default function View_Forumku2() {
     }
   };
 
-  // 🔹 Fungsi fetch data
-  const fetchData = async (pageNumber: number, clear: boolean) => {
-    if (!user?.id) return;
-
-    // Cegah multiple call
-    if (!clear && (loading || refreshing)) return;
-
-    const isRefresh = clear;
-    if (isRefresh) setRefreshing(true);
-    if (!isRefresh) setLoading(true);
-
-    try {
-      const response = await apiForumGetAll({
-        category: "forumku",
-        authorId: id as string,
-        userLoginId: user.id,
-        page: String(pageNumber), // API terima string
-      });
-
-      const newData = response.data.data || [];
-      setListData((prev) => {
-        const current = Array.isArray(prev) ? prev : [];
-        return clear ? newData : [...current, ...newData];
-      });
-      setHasMore(newData.length === PAGE_SIZE);
-      setPage(pageNumber);
-      setCount(response.data.count);
-    } catch (error) {
-      console.error("[ERROR] Fetch forum:", error);
-      setHasMore(false);
-    } finally {
-      setRefreshing(false);
-      setLoading(false);
-    }
-  };
-
-  // 🔹 Pull-to-refresh
-  const onRefresh = useCallback(() => {
-    fetchData(1, true);
-  }, [user?.id]);
-
-  // 🔹 Infinite scroll
-  const loadMore = useCallback(() => {
-    if (hasMore && !loading && !refreshing) {
-      fetchData(page + 1, false);
-    }
-  }, [hasMore, loading, refreshing, page, user?.id]);
-
   const randerHeaderComponent = () => (
     <>
       <CenterCustom>
@@ -144,39 +107,16 @@ export default function View_Forumku2() {
     />
   );
 
-  // Skeleton List (untuk initial load)
-  const SkeletonListComponent = () => (
-    <View style={{ flex: 1 }}>
-      <StackCustom>
-        {Array.from({ length: 5 }).map((_, i) => (
-          <CustomSkeleton height={200} key={i} />
-        ))}
-      </StackCustom>
-    </View>
-  );
-
-  //  Komponen Empty
-  const EmptyComponent = () => (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        padding: 20,
-      }}
-    >
-      <NoDataText />
-    </View>
-  );
-
-  // 🔹 Komponen Footer List (loading indicator)
-  const ListFooterComponent =
-    loading && !refreshing && listData.length > 0 ? (
-      <View style={{ paddingVertical: 16, alignItems: "center" }}>
-        {/* <Text style={{ color: "#aaa", fontSize: 14 }}>Memuat diskusi...</Text> */}
-        <LoaderCustom />
-      </View>
-    ) : null;
+  // Generate pagination components using helper
+  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
+    loading: pagination.loading,
+    refreshing: pagination.refreshing,
+    listData: pagination.listData,
+    isInitialLoad: pagination.isInitialLoad,
+    emptyMessage: "Tidak ada postingan",
+    skeletonCount: 5,
+    skeletonHeight: 200,
+  });
 
   return (
     <>
@@ -190,7 +130,7 @@ export default function View_Forumku2() {
             />
           )
         }
-        listData={listData}
+        listData={pagination.listData}
         renderItem={renderList}
         refreshControl={
           <RefreshControl
@@ -199,16 +139,14 @@ export default function View_Forumku2() {
             // Android
             colors={[MainColor.yellow]}
             progressBackgroundColor={MainColor.yellow}
-            refreshing={refreshing}
-            onRefresh={onRefresh}
+            refreshing={pagination.refreshing}
+            onRefresh={pagination.onRefresh}
           />
         }
-        onEndReached={loadMore}
+        onEndReached={pagination.loadMore}
         ListHeaderComponent={randerHeaderComponent()}
         ListFooterComponent={ListFooterComponent}
-        ListEmptyComponent={
-          loading && _.isEmpty(listData) ? <SkeletonListComponent /> : <EmptyComponent />
-        }
+        ListEmptyComponent={ListEmptyComponent}
       />
     </>
   );