64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import { View, ScrollView, Text } from "react-native";
|
|
import { useLocalSearchParams } from "expo-router";
|
|
|
|
import { useGetUserByIdQuery } from "@/store/api/usersApi";
|
|
import { useAppSelector } from "@/store/hooks";
|
|
import { selectIsMobile } from "@/store/screen/screenSizeSlice";
|
|
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
|
|
import { NoData } from "@/components/ui/NoData";
|
|
import { AccountDetails } from "@/components/features/accounts/AccountDetails";
|
|
|
|
export const AdminDetailsPage = () => {
|
|
const { id } = useLocalSearchParams<{ id: string }>();
|
|
const isMobile = useAppSelector(selectIsMobile);
|
|
|
|
const {
|
|
data: user,
|
|
isLoading,
|
|
isFetching,
|
|
error,
|
|
refetch,
|
|
} = useGetUserByIdQuery(id, { refetchOnMountOrArgChange: true });
|
|
|
|
return (
|
|
<View className={`flex-1 bg-primaryPurpleLight`}>
|
|
<View className={`${isMobile ? "p-1" : "p-5"} flex-1`}>
|
|
<Text
|
|
className={`text-2xl font-bold ${
|
|
isMobile ? "mb-1" : "mb-4"
|
|
} text-white`}
|
|
>
|
|
{user?.firstName} {user?.lastName} details
|
|
</Text>
|
|
|
|
<ScrollView
|
|
className="flex-1"
|
|
contentContainerStyle={{ paddingBottom: 16 }}
|
|
>
|
|
<View
|
|
className={`bg-lightGray rounded-lg ${
|
|
isMobile ? "p-1" : "p-5"
|
|
} flex-1`}
|
|
>
|
|
{isLoading ? (
|
|
<View className="flex-1 justify-center items-center py-10">
|
|
<LoadingSpinner />
|
|
</View>
|
|
) : error || !user ? (
|
|
<View className="flex-1 justify-center items-center py-10">
|
|
<NoData
|
|
message="Admin not found"
|
|
onRetry={refetch}
|
|
isRetrying={isFetching}
|
|
/>
|
|
</View>
|
|
) : (
|
|
<AccountDetails user={user} isLoading={isLoading || isFetching} />
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|