Refresh control dan Blockir user di forum
### No Issue
This commit is contained in:
108
screens/Forum/ViewBeranda.tsx
Normal file
108
screens/Forum/ViewBeranda.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import {
|
||||
BackButton,
|
||||
AvatarComp,
|
||||
ViewWrapper,
|
||||
SearchInput,
|
||||
FloatingButton,
|
||||
LoaderCustom,
|
||||
TextCustom,
|
||||
} from "@/components";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { apiForumGetAll } from "@/service/api-client/api-forum";
|
||||
import { apiUser } from "@/service/api-client/api-user";
|
||||
import { Stack, router } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useState, useEffect } from "react";
|
||||
import { RefreshControl } from "react-native";
|
||||
import Forum_BoxDetailSection from "./DiscussionBoxSection";
|
||||
|
||||
export default function Forum_ViewBeranda() {
|
||||
const { user } = useAuth();
|
||||
const [dataUser, setDataUser] = useState<any>();
|
||||
const [listData, setListData] = useState<any[]>();
|
||||
const [loadingGetList, setLoadingGetList] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
onLoadData();
|
||||
onLoadDataProfile(user?.id as string);
|
||||
}, [user?.id, search]);
|
||||
|
||||
const onLoadDataProfile = async (id: string) => {
|
||||
const response = await apiUser(id);
|
||||
setDataUser(response.data);
|
||||
};
|
||||
|
||||
const onLoadData = async () => {
|
||||
try {
|
||||
setLoadingGetList(true);
|
||||
const response = await apiForumGetAll({
|
||||
category: "beranda",
|
||||
search: search,
|
||||
userLoginId: user?.id,
|
||||
});
|
||||
|
||||
setListData(response.data);
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
} finally {
|
||||
setLoadingGetList(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: "Forum",
|
||||
headerLeft: () => <BackButton />,
|
||||
headerRight: () => (
|
||||
<AvatarComp
|
||||
fileId={dataUser?.Profile?.imageId}
|
||||
size="base"
|
||||
href={`/forum/${user?.id}/forumku`}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<ViewWrapper
|
||||
headerComponent={
|
||||
<SearchInput
|
||||
placeholder="Cari topik diskusi"
|
||||
onChangeText={(e) => setSearch(e)}
|
||||
/>
|
||||
}
|
||||
floatingButton={
|
||||
<FloatingButton
|
||||
onPress={() =>
|
||||
router.navigate("/(application)/(user)/forum/create")
|
||||
}
|
||||
/>
|
||||
}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={loadingGetList} onRefresh={onLoadData} />
|
||||
}
|
||||
>
|
||||
{loadingGetList ? (
|
||||
<LoaderCustom />
|
||||
) : _.isEmpty(listData) ? (
|
||||
<TextCustom align="center" color="gray">
|
||||
Tidak ada diskusi
|
||||
</TextCustom>
|
||||
) : (
|
||||
listData?.map((e: any, i: number) => (
|
||||
<Forum_BoxDetailSection
|
||||
key={i}
|
||||
data={e}
|
||||
onSetData={() => {}}
|
||||
isTruncate={true}
|
||||
href={`/forum/${e.id}`}
|
||||
isRightComponent={false}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</ViewWrapper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
215
screens/Forum/ViewBeranda2.tsx
Normal file
215
screens/Forum/ViewBeranda2.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import {
|
||||
AvatarComp,
|
||||
BackButton,
|
||||
FloatingButton,
|
||||
LoaderCustom,
|
||||
SearchInput,
|
||||
StackCustom,
|
||||
TextCustom, // ← gunakan NewWrapper yang sudah diperbaiki
|
||||
} from "@/components";
|
||||
import SkeletonCustom from "@/components/_ShareComponent/SkeletonCustom";
|
||||
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
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 { useCallback, useEffect, useState } from "react";
|
||||
import { RefreshControl, View } from "react-native";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
|
||||
// Sesuai dengan `takeData = 5` di API-mu
|
||||
const PAGE_SIZE = 5;
|
||||
|
||||
export default function Forum_ViewBeranda2() {
|
||||
const { user } = useAuth();
|
||||
const [dataUser, setDataUser] = useState<any>(null);
|
||||
const [listData, setListData] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [page, setPage] = useState(1);
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
// 🔹 Load data profil user sekali
|
||||
useEffect(() => {
|
||||
if (user?.id) {
|
||||
apiUser(user.id).then((res) => setDataUser(res.data));
|
||||
}
|
||||
}, [user?.id]);
|
||||
|
||||
// 🔹 Reset dan muat ulang saat search atau user berubah
|
||||
useEffect(() => {
|
||||
setPage(1);
|
||||
setListData([]);
|
||||
setHasMore(true);
|
||||
fetchData(1, true);
|
||||
}, [search, user?.id]);
|
||||
|
||||
// 🔹 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: "beranda",
|
||||
search: search || "",
|
||||
userLoginId: user.id,
|
||||
page: String(pageNumber), // API terima string
|
||||
});
|
||||
|
||||
const newData = response.data || [];
|
||||
setListData((prev) => {
|
||||
const current = Array.isArray(prev) ? prev : [];
|
||||
return clear ? newData : [...current, ...newData];
|
||||
});
|
||||
setHasMore(newData.length === PAGE_SIZE);
|
||||
setPage(pageNumber);
|
||||
} catch (error) {
|
||||
console.error("[ERROR] Fetch forum:", error);
|
||||
setHasMore(false);
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 🔹 Pull-to-refresh
|
||||
const onRefresh = useCallback(() => {
|
||||
fetchData(1, true);
|
||||
}, [search, user?.id]);
|
||||
|
||||
// 🔹 Infinite scroll
|
||||
const loadMore = useCallback(() => {
|
||||
if (hasMore && !loading && !refreshing) {
|
||||
fetchData(page + 1, false);
|
||||
}
|
||||
}, [hasMore, loading, refreshing, page, search, user?.id]);
|
||||
|
||||
// 🔹 Render item forum
|
||||
const renderForumItem = ({ item }: { item: any }) => (
|
||||
<Forum_BoxDetailSection
|
||||
key={item.id}
|
||||
data={item}
|
||||
onSetData={() => {}}
|
||||
isTruncate={true}
|
||||
href={`/forum/${item.id}`}
|
||||
isRightComponent={false}
|
||||
/>
|
||||
);
|
||||
|
||||
// 🔹 Komponen Header List (di dalam FlatList)
|
||||
const ListHeaderComponent = (
|
||||
<View style={{ paddingVertical: 8, alignItems: "center" }}>
|
||||
<TextCustom>Diskusi Terbaru</TextCustom>
|
||||
</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;
|
||||
|
||||
// Skeleton List (untuk initial load)
|
||||
const SkeletonListComponent = () => (
|
||||
<View style={{ flex: 1 }}>
|
||||
<StackCustom>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<SkeletonCustom height={200} key={i} />
|
||||
))}
|
||||
</StackCustom>
|
||||
</View>
|
||||
);
|
||||
|
||||
// Komponen Empty
|
||||
const EmptyComponent = () => (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: 20,
|
||||
}}
|
||||
>
|
||||
<TextCustom align="center" color="gray">
|
||||
{search ? "Tidak ada hasil pencarian" : "Tidak ada diskusi"}
|
||||
</TextCustom>
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 🔹 Header Navigation */}
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: "Forum",
|
||||
headerLeft: () => <BackButton />,
|
||||
headerRight: () => (
|
||||
<AvatarComp
|
||||
fileId={dataUser?.Profile?.imageId}
|
||||
size="base"
|
||||
href={`/forum/${user?.id}/forumku`}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 🔹 NewWrapper dalam mode list */}
|
||||
<NewWrapper
|
||||
// Header global (di atas FlatList, sticky)
|
||||
headerComponent={
|
||||
<View style={{ paddingHorizontal: 16, paddingTop: 8 }}>
|
||||
<SearchInput
|
||||
placeholder="Cari topik diskusi"
|
||||
onChangeText={_.debounce((text) => setSearch(text), 500)}
|
||||
// value={search}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
// Floating action button
|
||||
floatingButton={
|
||||
<FloatingButton
|
||||
onPress={() =>
|
||||
router.navigate("/(application)/(user)/forum/create")
|
||||
}
|
||||
/>
|
||||
}
|
||||
// --- Mode List Props ---
|
||||
listData={listData}
|
||||
renderItem={renderForumItem}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
// IOS
|
||||
tintColor={MainColor.yellow}
|
||||
// Android
|
||||
colors={[MainColor.yellow]}
|
||||
progressBackgroundColor={MainColor.yellow}
|
||||
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
/>
|
||||
}
|
||||
onEndReached={loadMore}
|
||||
// ListHeaderComponent={ListHeaderComponent}
|
||||
ListFooterComponent={ListFooterComponent}
|
||||
ListEmptyComponent={
|
||||
_.isEmpty(listData) ? <SkeletonListComponent /> : <EmptyComponent />
|
||||
}
|
||||
// ------------------------
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
144
screens/Forum/ViewForumku.tsx
Normal file
144
screens/Forum/ViewForumku.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import {
|
||||
AvatarComp,
|
||||
ButtonCustom,
|
||||
CenterCustom,
|
||||
DrawerCustom,
|
||||
FloatingButton,
|
||||
Grid,
|
||||
LoaderCustom,
|
||||
StackCustom,
|
||||
TextCustom,
|
||||
ViewWrapper,
|
||||
} from "@/components";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
|
||||
import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
|
||||
import { apiForumGetAll } from "@/service/api-client/api-forum";
|
||||
import { apiUser } from "@/service/api-client/api-user";
|
||||
import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useCallback, useState } from "react";
|
||||
|
||||
export default function View_Forumku() {
|
||||
const { id } = useLocalSearchParams();
|
||||
const { user } = useAuth();
|
||||
const [openDrawer, setOpenDrawer] = useState(false);
|
||||
const [status, setStatus] = useState("");
|
||||
const [listData, setListData] = useState<any | null>(null);
|
||||
const [dataUser, setDataUser] = useState<any | null>(null);
|
||||
const [loadingGetList, setLoadingGetList] = useState(false);
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
onLoadData();
|
||||
onLoadDataProfile(id as string);
|
||||
}, [id])
|
||||
);
|
||||
|
||||
const onLoadDataProfile = async (id: string) => {
|
||||
try {
|
||||
const response = await apiUser(id);
|
||||
|
||||
setDataUser(response.data);
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
} finally {
|
||||
}
|
||||
};
|
||||
|
||||
const onLoadData = async () => {
|
||||
try {
|
||||
setLoadingGetList(true);
|
||||
const response = await apiForumGetAll({
|
||||
search: "",
|
||||
authorId: id as string,
|
||||
category: "forumku",
|
||||
});
|
||||
|
||||
setListData(response.data);
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
} finally {
|
||||
setLoadingGetList(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ViewWrapper
|
||||
floatingButton={
|
||||
user?.id === id && (
|
||||
<FloatingButton
|
||||
onPress={() =>
|
||||
router.navigate("/(application)/(user)/forum/create")
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
>
|
||||
<StackCustom>
|
||||
<CenterCustom>
|
||||
<AvatarComp
|
||||
fileId={dataUser?.Profile?.imageId}
|
||||
href={`/(application)/(image)/preview-image/${dataUser?.Profile?.imageId}`}
|
||||
size="xl"
|
||||
/>
|
||||
</CenterCustom>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={6}>
|
||||
<TextCustom bold truncate>
|
||||
@{dataUser?.username || "-"}
|
||||
</TextCustom>
|
||||
<TextCustom>{listData?.length || "0"} postingan</TextCustom>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6} style={{ alignItems: "flex-end" }}>
|
||||
<ButtonCustom href={`/profile/${dataUser?.Profile?.id}`}>
|
||||
Kunjungi Profile
|
||||
</ButtonCustom>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
{loadingGetList ? (
|
||||
<LoaderCustom />
|
||||
) : _.isEmpty(listData) ? (
|
||||
<TextCustom> Tidak ada diskusi</TextCustom>
|
||||
) : (
|
||||
<>
|
||||
{listData?.map((item: any, index: number) => (
|
||||
<Forum_BoxDetailSection
|
||||
isRightComponent={false}
|
||||
key={index}
|
||||
data={item}
|
||||
isTruncate={true}
|
||||
href={`/forum/${item.id}`}
|
||||
onSetData={(value) => {
|
||||
setOpenDrawer(value.setOpenDrawer);
|
||||
setStatus(value.setStatus);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</StackCustom>
|
||||
</ViewWrapper>
|
||||
|
||||
{/* Drawer Komponen Eksternal */}
|
||||
<DrawerCustom
|
||||
height={"auto"}
|
||||
isVisible={openDrawer}
|
||||
closeDrawer={() => setOpenDrawer(false)}
|
||||
>
|
||||
<Forum_MenuDrawerBerandaSection
|
||||
id={id as string}
|
||||
status={status}
|
||||
setIsDrawerOpen={() => {
|
||||
setOpenDrawer(false);
|
||||
}}
|
||||
authorId={id as string}
|
||||
authorUsername={dataUser?.username}
|
||||
/>
|
||||
</DrawerCustom>
|
||||
</>
|
||||
);
|
||||
}
|
||||
215
screens/Forum/ViewForumku2.tsx
Normal file
215
screens/Forum/ViewForumku2.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import {
|
||||
AvatarComp,
|
||||
ButtonCustom,
|
||||
CenterCustom,
|
||||
FloatingButton,
|
||||
Grid,
|
||||
LoaderCustom,
|
||||
Spacing,
|
||||
StackCustom,
|
||||
TextCustom,
|
||||
} from "@/components";
|
||||
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
|
||||
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 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 { 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);
|
||||
|
||||
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);
|
||||
|
||||
setDataUser(response.data);
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
} finally {
|
||||
}
|
||||
};
|
||||
|
||||
// 🔹 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>
|
||||
<AvatarComp
|
||||
fileId={dataUser?.Profile?.imageId}
|
||||
href={`/(application)/(image)/preview-image/${dataUser?.Profile?.imageId}`}
|
||||
size="xl"
|
||||
/>
|
||||
</CenterCustom>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col style={{ paddingLeft: 8 }} span={6}>
|
||||
<TextCustom bold truncate>
|
||||
@{dataUser?.username || "-"}
|
||||
</TextCustom>
|
||||
<TextCustom>{count || "0"} postingan</TextCustom>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6} style={{ alignItems: "flex-end", paddingRight: 8 }}>
|
||||
<ButtonCustom href={`/profile/${dataUser?.Profile?.id}`}>
|
||||
Kunjungi Profile
|
||||
</ButtonCustom>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Spacing />
|
||||
</>
|
||||
);
|
||||
|
||||
const renderList = ({ item }: { item: any }) => (
|
||||
<Forum_BoxDetailSection
|
||||
key={item.id}
|
||||
data={item}
|
||||
onSetData={() => {}}
|
||||
isTruncate={true}
|
||||
href={`/forum/${item.id}`}
|
||||
isRightComponent={false}
|
||||
/>
|
||||
);
|
||||
|
||||
// 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;
|
||||
|
||||
return (
|
||||
<>
|
||||
<NewWrapper
|
||||
floatingButton={
|
||||
user?.id === id && (
|
||||
<FloatingButton
|
||||
onPress={() =>
|
||||
router.navigate("/(application)/(user)/forum/create")
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
listData={listData}
|
||||
renderItem={renderList}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
// IOS
|
||||
tintColor={MainColor.yellow}
|
||||
// Android
|
||||
colors={[MainColor.yellow]}
|
||||
progressBackgroundColor={MainColor.yellow}
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
/>
|
||||
}
|
||||
onEndReached={loadMore}
|
||||
ListHeaderComponent={randerHeaderComponent()}
|
||||
ListFooterComponent={ListFooterComponent}
|
||||
ListEmptyComponent={
|
||||
_.isEmpty(listData) ? <SkeletonListComponent /> : <EmptyComponent />
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user