521 lines
17 KiB
JavaScript
521 lines
17 KiB
JavaScript
import { Stack, useLocalSearchParams } from "expo-router";
|
|
import { KeyboardAvoidingView, Platform } from "react-native";
|
|
import { Box } from "@/components/ui/box";
|
|
import { Card } from "@/components/ui/card";
|
|
import { Heading } from "@/components/ui/heading";
|
|
import { useRouter } from "expo-router";
|
|
import { Image } from "@/components/ui/image";
|
|
import { Text } from "@/components/ui/text";
|
|
import { VStack } from "@/components/ui/vstack";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import {
|
|
Avatar,
|
|
AvatarImage,
|
|
AvatarFallbackText,
|
|
} from "@/components/ui/avatar";
|
|
import {
|
|
ActivityIndicator,
|
|
Dimensions,
|
|
FlatList,
|
|
View,
|
|
TextInput,
|
|
Alert,
|
|
} from "react-native";
|
|
import { useEffect, useState, useRef } from "react";
|
|
import { useNoticesStore } from "@/store/noticesStore";
|
|
import { useWishlist } from "@/store/wishlistStore";
|
|
import { Pressable, ScrollView } from "react-native";
|
|
import { getUserById } from "@/api/client";
|
|
import * as ScreenOrientation from "expo-screen-orientation";
|
|
import { useAuthStore } from "@/store/authStore";
|
|
import { sendEmail } from "@/api/email";
|
|
// import { Button } from "@gluestack-ui/themed";
|
|
import { Button, ButtonText } from "@/components/ui/button";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
|
|
export default function NoticeDetails() {
|
|
const { id } = useLocalSearchParams();
|
|
const [images, setImages] = useState([]);
|
|
const [isImageLoading, setIsImageLoading] = useState(true);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
const [notice, setNotice] = useState(null);
|
|
const [user, setUser] = useState(null);
|
|
const [isUserLoading, setIsUserLoading] = useState(true);
|
|
const [isLandscape, setIsLandscape] = useState(false);
|
|
const flatListRef = useRef(null);
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
const [isMessageFormVisible, setIsMessageFormVisible] = useState(false);
|
|
const [message, setMessage] = useState("");
|
|
const [isSending, setIsSending] = useState(false);
|
|
const router = useRouter();
|
|
|
|
const { width } = Dimensions.get("window");
|
|
|
|
const handleSendMessage = async () => {
|
|
setIsSending(true);
|
|
|
|
const { user_id, token } = useAuthStore.getState();
|
|
|
|
if (!user_id || !token) {
|
|
console.error("Brak danych zalogowanego użytkownika.");
|
|
Alert.alert("Błąd", "Zaloguj się, aby wysłać wiadomość.");
|
|
setIsSending(false);
|
|
return;
|
|
}
|
|
|
|
let currentUserEmail = "";
|
|
try {
|
|
const currentUser = await getUserById(user_id);
|
|
currentUserEmail = currentUser?.email;
|
|
if (!currentUserEmail) {
|
|
console.error("Nie znaleziono adresu email zalogowanego użytkownika.");
|
|
Alert.alert(
|
|
"Błąd",
|
|
"Nie znaleziono adresu email zalogowanego użytkownika."
|
|
);
|
|
setIsSending(false);
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
console.error("Błąd podczas pobierania danych użytkownika:", error);
|
|
Alert.alert(
|
|
"Błąd",
|
|
"Nie udało się pobrać danych użytkownika. Spróbuj ponownie później."
|
|
);
|
|
setIsSending(false);
|
|
return;
|
|
}
|
|
|
|
const emailData = {
|
|
to: user?.email || "",
|
|
subject: `Zapytanie ${currentUserEmail} o ogłoszenie ${notice.title}`,
|
|
body: message,
|
|
};
|
|
|
|
if (!emailData.to || !emailData.subject || !emailData.body) {
|
|
console.error("Walidacja nieudana: brakujące pola w emailData.");
|
|
Alert.alert("Błąd", "Wszystkie pola są wymagane!");
|
|
setIsSending(false);
|
|
return;
|
|
}
|
|
|
|
const result = await sendEmail(emailData);
|
|
if (result.success) {
|
|
setIsMessageFormVisible(false);
|
|
setMessage("");
|
|
Alert.alert("Sukces", "Wiadomość została wysłana!");
|
|
} else {
|
|
console.error("Błąd podczas wysyłania wiadomości:", result.error);
|
|
Alert.alert(
|
|
"Błąd",
|
|
`Nie udało się wysłać wiadomości
|
|
: $ { result.error }`
|
|
);
|
|
}
|
|
setIsSending(false);
|
|
};
|
|
|
|
const formatDate = (dateString) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString("pl-PL", {
|
|
year: "numeric",
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
});
|
|
};
|
|
|
|
const { getNoticeById, getAllImagesByNoticeId } = useNoticesStore();
|
|
const toggleNoticeInWishlist = useWishlist(
|
|
(state) => state.toggleNoticeInWishlist
|
|
);
|
|
|
|
const isInWishlist = useWishlist((state) =>
|
|
id ? state.wishlistNotices.some((item) => item.noticeId === id) : false
|
|
);
|
|
const onViewableItemsChanged = useRef(({ viewableItems }) => {
|
|
if (viewableItems.length > 0) {
|
|
setCurrentIndex(viewableItems[0].index);
|
|
}
|
|
}).current;
|
|
|
|
const viewabilityConfig = useRef({
|
|
itemVisiblePercentThreshold: 70,
|
|
}).current;
|
|
|
|
useEffect(() => {
|
|
const unlockOrientation = async () => {
|
|
try {
|
|
await ScreenOrientation.unlockAsync();
|
|
} catch (err) {
|
|
console.error("Error unlocking orientation:", err);
|
|
}
|
|
};
|
|
|
|
const getInitialOrientation = async () => {
|
|
try {
|
|
const orientation = await ScreenOrientation.getOrientationAsync();
|
|
setIsLandscape(
|
|
orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
|
|
orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT
|
|
);
|
|
} catch (err) {
|
|
console.error("Error getting initial orientation:", err);
|
|
}
|
|
};
|
|
|
|
unlockOrientation();
|
|
getInitialOrientation();
|
|
|
|
const subscription = ScreenOrientation.addOrientationChangeListener(
|
|
({ orientationInfo }) => {
|
|
const isLandscapeMode =
|
|
orientationInfo.orientation ===
|
|
ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
|
|
orientationInfo.orientation ===
|
|
ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
|
|
setIsLandscape(isLandscapeMode);
|
|
}
|
|
);
|
|
|
|
return () => {
|
|
ScreenOrientation.removeOrientationChangeListener(subscription);
|
|
ScreenOrientation.lockAsync(
|
|
ScreenOrientation.OrientationLock.PORTRAIT_UP
|
|
).catch((err) =>
|
|
console.error("Error locking orientation on unmount:", err)
|
|
);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const fetchNotice = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const noticeData = getNoticeById(Number(id));
|
|
if (noticeData) {
|
|
setNotice(noticeData);
|
|
setError(null);
|
|
} else {
|
|
setError(new Error(`Notice with ID ${id} not found.`));
|
|
}
|
|
} catch (err) {
|
|
setError(err);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchNotice();
|
|
}, [id]);
|
|
|
|
useEffect(() => {
|
|
const fetchImage = async () => {
|
|
setIsImageLoading(true);
|
|
if (notice) {
|
|
try {
|
|
const fetchedImages = await getAllImagesByNoticeId(notice.noticeId);
|
|
setImages(
|
|
fetchedImages && fetchedImages.length > 0
|
|
? fetchedImages
|
|
: { uri: "https://http.cat/404.jpg" }
|
|
);
|
|
} catch (err) {
|
|
console.error("Error while loading images:", err);
|
|
setImages({ uri: "https://http.cat/404.jpg" });
|
|
} finally {
|
|
setIsImageLoading(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
if (notice) {
|
|
fetchImage();
|
|
}
|
|
}, [notice]);
|
|
|
|
useEffect(() => {
|
|
const fetchUser = async () => {
|
|
if (notice && notice.clientId) {
|
|
setIsUserLoading(true);
|
|
try {
|
|
const userData = await getUserById(notice.clientId);
|
|
setUser(userData);
|
|
} catch (err) {
|
|
console.error("Nie udało się pobrać danych użytkownika:", err);
|
|
} finally {
|
|
setIsUserLoading(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
fetchUser();
|
|
}, [notice]);
|
|
|
|
if (isLoading) {
|
|
return <ActivityIndicator />;
|
|
}
|
|
|
|
if (error) {
|
|
return <Text>Błąd, spróbuj ponownie póżniej: {error.message}</Text>;
|
|
}
|
|
|
|
if (!notice) {
|
|
return <Text>Nie znaleziono ogłoszenia</Text>;
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView className="flex-1" edges={["right", "bottom", "left"]}>
|
|
<Card className="p-0 rounded-lg m-3 flex-1">
|
|
<Stack.Screen
|
|
options={{
|
|
title: notice.title,
|
|
headerShown: !isLandscape,
|
|
}}
|
|
/>
|
|
{isImageLoading ? (
|
|
<Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
|
|
<ActivityIndicator size="large" color="#3b82f6" />
|
|
</Box>
|
|
) : (
|
|
<Box
|
|
className="sticky top-0 z-10 bg-white"
|
|
style={
|
|
isLandscape
|
|
? {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
zIndex: 30,
|
|
}
|
|
: {}
|
|
}
|
|
>
|
|
<FlatList
|
|
ref={flatListRef}
|
|
data={images}
|
|
horizontal
|
|
snapToAlignment="start"
|
|
snapToInterval={width}
|
|
decelerationRate="fast"
|
|
showsHorizontalScrollIndicator={false}
|
|
pagingEnabled
|
|
onViewableItemsChanged={onViewableItemsChanged}
|
|
viewabilityConfig={viewabilityConfig}
|
|
style={isLandscape ? { flex: 1 } : {}}
|
|
renderItem={({ item, index }) => (
|
|
<View style={{ width: width }} className="p-1">
|
|
<Image
|
|
source={item}
|
|
// className="h-auto w-auto rounded-md aspect-[1/1]"
|
|
alt={`Zdjęcie ${index + 1}`}
|
|
resizeMode="cover"
|
|
renderMode="contain"
|
|
className={
|
|
isLandscape
|
|
? "w-auto h-full"
|
|
: "h-auto w-auto rounded-md aspect-[1/1]"
|
|
}
|
|
style={
|
|
isLandscape
|
|
? {
|
|
resizeMode: "contain",
|
|
}
|
|
: {}
|
|
}
|
|
// resizeMode={isLandscape ? "cover" : "contain"}
|
|
/>
|
|
</View>
|
|
)}
|
|
keyExtractor={(item, index) => index.toString()}
|
|
/>
|
|
|
|
{images.length > 1 && (
|
|
<Box className="flex-row justify-center mt-2">
|
|
{images.map((_, index) => (
|
|
<Box
|
|
key={index}
|
|
className={`w-2 h-2 rounded-full mx-1 ${
|
|
index === currentIndex ? "bg-primary-500" : "bg-gray-300"
|
|
}`}
|
|
/>
|
|
))}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
)}
|
|
|
|
<ScrollView showsVerticalScrollIndicator={false}>
|
|
<VStack className="p-2">
|
|
<Text className="text-sm font-normal mb-2 text-typography-700">
|
|
{formatDate(notice.publishDate)}
|
|
</Text>
|
|
<Text className="text-2xl text-gray-950 font-bold mb-2 text-left bg-gray-50 rounded-md p-2">
|
|
{notice.title}
|
|
</Text>
|
|
|
|
<Box className="flex-row items-center bg-gray-50 rounded-md p-2">
|
|
<Heading size="md" className="flex-1 text-xl text-gray-950">
|
|
<Text className="text-sm text-typography-500">Cena: </Text>
|
|
{notice.price} zł
|
|
</Heading>
|
|
|
|
<Pressable
|
|
onPress={() => {
|
|
toggleNoticeInWishlist(id);
|
|
}}
|
|
>
|
|
<Ionicons
|
|
name={isInWishlist ? "heart" : "heart-outline"}
|
|
size={24}
|
|
color={"primary-heading-500"}
|
|
/>
|
|
</Pressable>
|
|
</Box>
|
|
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
|
|
<Text className="text-sm text-typography-500">
|
|
Kategoria:{" "}
|
|
<Text className="font-bold text-gray-950">
|
|
{notice.category}
|
|
</Text>
|
|
</Text>
|
|
</Box>
|
|
{notice.attributes && notice.attributes.length > 0 && (
|
|
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
|
|
{notice.attributes.map((attribute, index) => (
|
|
<Text
|
|
key={index}
|
|
className="text-sm text-typography-500 mb-1"
|
|
>
|
|
{attribute.name}:{" "}
|
|
<Text className="font-bold text-gray-950">
|
|
{attribute.value}
|
|
</Text>
|
|
</Text>
|
|
))}
|
|
</Box>
|
|
)}
|
|
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
|
|
<Text className="text-2xl text-gray-950">Opis ogloszenia</Text>
|
|
<Text className="text-sm text-typography-700">
|
|
{notice.description}
|
|
</Text>
|
|
</Box>
|
|
|
|
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
|
|
<Text className="text-sm text-typography-500">Uzytkownik:</Text>
|
|
{isUserLoading ? (
|
|
<ActivityIndicator />
|
|
) : user ? (
|
|
<>
|
|
<Box className="mr-4">
|
|
<Avatar size="md">
|
|
<AvatarImage
|
|
source={{
|
|
uri:
|
|
user.image ||
|
|
"https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain",
|
|
}}
|
|
alt="Zdjęcie profilowe"
|
|
/>
|
|
<AvatarFallbackText>
|
|
{user.firstName?.[0]}
|
|
{user.lastName?.[0]}
|
|
</AvatarFallbackText>
|
|
</Avatar>
|
|
</Box>
|
|
|
|
<Box className="flex-1">
|
|
<Text className="text-xl font-bold text-gray-950">
|
|
{user.firstName} {user.lastName}
|
|
</Text>
|
|
<Text className="text-sm text-typography-700">
|
|
Email: {user.email}
|
|
</Text>
|
|
<Pressable
|
|
onPress={() => setIsMessageFormVisible(true)}
|
|
className="mt-3 bg-primary-500 py-2 px-4 rounded-md"
|
|
>
|
|
<Text className="text-white text-center font-bold">
|
|
Wyślij wiadomość
|
|
</Text>
|
|
</Pressable>
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="mt-2"
|
|
onPress={() => router.replace(`/user/${notice.clientId}`)}
|
|
>
|
|
<ButtonText>
|
|
Zobacz więcej ogłoszeń od {user.firstName}
|
|
</ButtonText>
|
|
</Button>
|
|
</Box>
|
|
</>
|
|
) : (
|
|
<Text>Błąd podczas ładowania danych użytkownika</Text>
|
|
)}
|
|
</Box>
|
|
</VStack>
|
|
</ScrollView>
|
|
{isMessageFormVisible && (
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
|
className="absolute inset-0 bg-black/50 justify-center items-center z-20"
|
|
>
|
|
<View className="bg-white p-4 rounded-lg w-4/5 max-h-4/5">
|
|
<ScrollView showsVerticalScrollIndicator={false}>
|
|
<Text className="text-lg font-bold mb-4">
|
|
Wyślij wiadomość do {user?.firstName}
|
|
</Text>
|
|
|
|
<Text className="text-sm font-medium mb-1">Do:</Text>
|
|
<Text className="bg-gray-100 p-3 rounded text-gray-500">
|
|
{user?.email || "Brak adresu e-mail"}
|
|
</Text>
|
|
<Text className="text-sm font-medium mb-1">Temat:</Text>
|
|
<Text className="bg-gray-100 p-3 rounded text-gray-500">
|
|
Zapytanie o ogłoszenie '
|
|
{notice.title || "Brak nazwy ogłoszenia"}'
|
|
</Text>
|
|
|
|
<TextInput
|
|
className="border border-gray-300 rounded-md p-2 mb-4 h-32 text-left"
|
|
multiline
|
|
numberOfLines={4}
|
|
placeholder="Napisz swoją wiadomość..."
|
|
value={message}
|
|
onChangeText={setMessage}
|
|
/>
|
|
|
|
<View className="flex-row justify-end space-x-2">
|
|
<Pressable
|
|
onPress={() => setIsMessageFormVisible(false)}
|
|
className="bg-gray-300 py-2 px-4 rounded-md"
|
|
>
|
|
<Text className="text-gray-800">Anuluj</Text>
|
|
</Pressable>
|
|
|
|
<Pressable
|
|
onPress={handleSendMessage}
|
|
className="bg-blue-500 py-2 px-4 rounded-md"
|
|
disabled={isSending}
|
|
>
|
|
{isSending ? (
|
|
<ActivityIndicator color="#fff" />
|
|
) : (
|
|
<Text className="text-white">Wyślij</Text>
|
|
)}
|
|
</Pressable>
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
)}
|
|
</Card>
|
|
</SafeAreaView>
|
|
);
|
|
}
|