Halaman unblock user
Add: - app/(application)/(user)/profile/[id]/blocked-list.tsx app/(application)/(user)/profile/[id]/detail-blocked.tsx components/_ShareComponent/ListEmptyComponent.tsx components/_ShareComponent/ListLoaderFooterComponent.tsx components/_ShareComponent/ListSkeletonComponent.tsx hooks/use-paginated-api.ts service/api-client/api-blocked.ts Fix: modified: app/(application)/(user)/profile/_layout.tsx modified: components/_ShareComponent/NewWrapper.tsx modified: components/index.ts modified: screens/Profile/ListPage.tsx modified: styles/global-styles.ts ### No Issue
This commit is contained in:
148
app/(application)/(user)/profile/[id]/blocked-list.tsx
Normal file
148
app/(application)/(user)/profile/[id]/blocked-list.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import {
|
||||
AvatarUsernameAndOtherComponent,
|
||||
BadgeCustom,
|
||||
ClickableCustom,
|
||||
Divider,
|
||||
SelectCustom,
|
||||
TextCustom,
|
||||
} from "@/components";
|
||||
import ListEmptyComponent from "@/components/_ShareComponent/ListEmptyComponent";
|
||||
import ListLoaderFooterComponent from "@/components/_ShareComponent/ListLoaderFooterComponent";
|
||||
import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
|
||||
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { usePaginatedApi } from "@/hooks/use-paginated-api";
|
||||
import { apiGetBlocked } from "@/service/api-client/api-blocked";
|
||||
import { apiMasterAppCategory } from "@/service/api-client/api-master";
|
||||
import { router, useFocusEffect } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { RefreshControl, View } from "react-native";
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
export default function ProfileBlockedList() {
|
||||
const { user } = useAuth();
|
||||
const [masterApp, setMasterApp] = useState<any[]>([]);
|
||||
const isInitialMount = useRef(true);
|
||||
|
||||
const {
|
||||
data: listData,
|
||||
loading,
|
||||
refreshing,
|
||||
hasMore,
|
||||
search,
|
||||
setSearch,
|
||||
onRefresh,
|
||||
loadMore,
|
||||
} = usePaginatedApi({
|
||||
fetcher: async (params: { page: number; search?: string }) => {
|
||||
const response = await apiGetBlocked({
|
||||
id: user?.id as any,
|
||||
search: search,
|
||||
page: String(params.page) as any,
|
||||
});
|
||||
|
||||
return response.data;
|
||||
},
|
||||
initialSearch: "",
|
||||
pageSize: PAGE_SIZE,
|
||||
dependencies: [user?.id],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
fetchMasterApp();
|
||||
}, []);
|
||||
|
||||
// 🔁 Refresh otomatis saat kembali ke halaman ini
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
if (isInitialMount.current) {
|
||||
// Skip saat pertama kali mount
|
||||
isInitialMount.current = false;
|
||||
return;
|
||||
}
|
||||
// Hanya refresh saat kembali dari screen lain
|
||||
onRefresh();
|
||||
}, [onRefresh])
|
||||
);
|
||||
|
||||
const fetchMasterApp = async () => {
|
||||
const response = await apiMasterAppCategory();
|
||||
setMasterApp(response.data);
|
||||
};
|
||||
|
||||
const renderHeader = () => (
|
||||
<SelectCustom
|
||||
placeholder="Pilih Kategori Fitur"
|
||||
data={masterApp.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}))}
|
||||
value={search === "" ? undefined : search}
|
||||
onChange={(value) => {
|
||||
setSearch(value as any);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
const renderItem = ({ item }: { item: any }) => (
|
||||
<>
|
||||
<ClickableCustom
|
||||
onPress={() => {
|
||||
router.push(`/profile/${item.id}/detail-blocked`);
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
paddingInline: 8,
|
||||
}}
|
||||
>
|
||||
<AvatarUsernameAndOtherComponent
|
||||
avatarHref={`/profile/${item?.blocked?.Profile?.id}`}
|
||||
avatar={item?.blocked?.Profile?.imageId}
|
||||
name={item?.blocked?.username}
|
||||
rightComponent={
|
||||
<View style={{ flexDirection: "row", gap: 4 }}>
|
||||
<BadgeCustom>
|
||||
<TextCustom size={"small"} bold truncate>
|
||||
{item?.menuFeature?.name}
|
||||
</TextCustom>
|
||||
</BadgeCustom>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
<Divider color="gray" />
|
||||
</View>
|
||||
</ClickableCustom>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<NewWrapper
|
||||
headerComponent={renderHeader()}
|
||||
listData={listData}
|
||||
renderItem={renderItem}
|
||||
onEndReached={loadMore}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
progressBackgroundColor={MainColor.yellow}
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
/>
|
||||
}
|
||||
ListFooterComponent={
|
||||
hasMore && !refreshing ? <ListLoaderFooterComponent /> : null
|
||||
}
|
||||
ListEmptyComponent={
|
||||
!loading && _.isEmpty(listData) ? (
|
||||
<ListSkeletonComponent />
|
||||
) : (
|
||||
<ListEmptyComponent />
|
||||
)
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
93
app/(application)/(user)/profile/[id]/detail-blocked.tsx
Normal file
93
app/(application)/(user)/profile/[id]/detail-blocked.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import {
|
||||
AlertDefaultSystem,
|
||||
AvatarUsernameAndOtherComponent,
|
||||
BaseBox,
|
||||
BoxButtonOnFooter,
|
||||
BoxWithHeaderSection,
|
||||
ButtonCustom,
|
||||
NewWrapper,
|
||||
StackCustom,
|
||||
TextCustom,
|
||||
} from "@/components";
|
||||
import AvatarAndBackground from "@/screens/Profile/AvatarAndBackground";
|
||||
import {
|
||||
apiGetBlockedById,
|
||||
apiUnblock,
|
||||
} from "@/service/api-client/api-blocked";
|
||||
import { router, useLocalSearchParams } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function ProfileDetailBlocked() {
|
||||
const { id } = useLocalSearchParams();
|
||||
const [data, setData] = useState<any>(null);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [id]);
|
||||
|
||||
const fetchData = async () => {
|
||||
const response = await apiGetBlockedById({ id: String(id) });
|
||||
// console.log("[RESPONSE >>]", JSON.stringify(response, null, 2));
|
||||
setData(response.data);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
await apiUnblock({ id: String(id) });
|
||||
router.back();
|
||||
} catch (error) {
|
||||
console.log("[ERROR >>]", JSON.stringify(error, null, 2));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<NewWrapper
|
||||
footerComponent={
|
||||
<BoxButtonOnFooter>
|
||||
<ButtonCustom
|
||||
isLoading={isLoading}
|
||||
onPress={() => {
|
||||
AlertDefaultSystem({
|
||||
title: "Buka Blokir",
|
||||
message: "Apakah anda yakin ingin membuka blokir ini?",
|
||||
textLeft: "Tidak",
|
||||
textRight: "Ya",
|
||||
onPressRight: () => {
|
||||
handleSubmit();
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
Buka Blokir
|
||||
</ButtonCustom>
|
||||
</BoxButtonOnFooter>
|
||||
}
|
||||
>
|
||||
<BoxWithHeaderSection>
|
||||
<StackCustom>
|
||||
<AvatarUsernameAndOtherComponent
|
||||
avatarHref={`/profile/${data?.blocked?.Profile?.id}`}
|
||||
avatar={data?.blocked?.Profile?.imageId}
|
||||
name={data?.blocked?.username}
|
||||
/>
|
||||
|
||||
<TextCustom align="center">
|
||||
Jika anda membuka blokir ini maka semua postingan terkait user ini
|
||||
akan muncul kembali di beranda
|
||||
<TextCustom bold color="red">
|
||||
{" "}
|
||||
{_.upperCase(data?.menuFeature?.name)}
|
||||
</TextCustom>
|
||||
</TextCustom>
|
||||
</StackCustom>
|
||||
</BoxWithHeaderSection>
|
||||
</NewWrapper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -33,6 +33,16 @@ export default function ProfileLayout() {
|
||||
name="create"
|
||||
options={{ title: "Buat Profile", headerBackVisible: false }}
|
||||
/>
|
||||
|
||||
<Stack.Screen
|
||||
name="[id]/blocked-list"
|
||||
options={{ title: "Blocked List", headerLeft: () => <BackButton /> }}
|
||||
/>
|
||||
|
||||
<Stack.Screen
|
||||
name="[id]/detail-blocked"
|
||||
options={{ title: "Detail Blokir", headerLeft: () => <BackButton /> }}
|
||||
/>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user