diff --git a/ArtisanConnect/app/notice/[id].jsx b/ArtisanConnect/app/notice/[id].jsx index f742029..a2631cc 100644 --- a/ArtisanConnect/app/notice/[id].jsx +++ b/ArtisanConnect/app/notice/[id].jsx @@ -1,337 +1,337 @@ -import { Link, Stack, useLocalSearchParams } from "expo-router"; -import { Box } from "@/components/ui/box"; -import { Card } from "@/components/ui/card"; -import { Heading } from "@/components/ui/heading"; -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 {Link, Stack, useLocalSearchParams} from "expo-router"; +import {Box} from "@/components/ui/box"; +import {Card} from "@/components/ui/card"; +import {Heading} from "@/components/ui/heading"; +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 { - ActivityIndicator, - Dimensions, - FlatList, - View, - TextInput, + ActivityIndicator, + Dimensions, + FlatList, + View, + TextInput, } 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 {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"; -const { width } = Dimensions.get("window"); +const {width} = Dimensions.get("window"); 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 flatListRef = useRef(null); - const [currentIndex, setCurrentIndex] = useState(0); + 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 flatListRef = useRef(null); + const [currentIndex, setCurrentIndex] = useState(0); - const [isMessageFormVisible, setIsMessageFormVisible] = useState(false); - const [message, setMessage] = useState(""); - const [Email, setEmail] = useState(""); - const handleSendMessage = () => { - console.log("Wiadomość do:", user?.email); - console.log("Email nadawcy:", Email); - console.log("Treść:", message); + const [isMessageFormVisible, setIsMessageFormVisible] = useState(false); + const [message, setMessage] = useState(""); + const [Email, setEmail] = useState(""); + const handleSendMessage = () => { + console.log("Wiadomość do:", user?.email); + console.log("Email nadawcy:", Email); + console.log("Treść:", message); - setIsMessageFormVisible(false); - setMessage(""); - setEmail(""); - }; + setIsMessageFormVisible(false); + setMessage(""); + setEmail(""); + }; - const formatDate = (dateString) => { - const date = new Date(dateString); - return date.toLocaleDateString("pl-PL", { - year: "numeric", - month: "2-digit", - day: "2-digit", - }); - }; + 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 {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); + 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 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); + setImage({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 ; } - }).current; - const viewabilityConfig = useRef({ - itemVisiblePercentThreshold: 70, - }).current; - - 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 - : ["https://http.cat/404.jpg"] - ); - } catch (err) { - console.error("Error while loading images:", err); - setImage("https://http.cat/404.jpg"); - } finally { - setIsImageLoading(false); - } - } - }; - - if (notice) { - fetchImage(); + if (error) { + return Błąd, spróbuj ponownie póżniej: {error.message}; } - }, [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); - } - } - }; + if (!notice) { + return Nie znaleziono ogłoszenia; + } - fetchUser(); - }, [notice]); - - if (isLoading) { - return ; - } - - if (error) { - return Błąd, spróbuj ponownie póżniej: {error.message}; - } - - if (!notice) { - return Nie znaleziono ogłoszenia; - } - - return ( - - - {isImageLoading ? ( - - - - ) : ( - - ( - - {`Zdjęcie - - )} - keyExtractor={(item, index) => index.toString()} - /> - - {images.length > 1 && ( - - {images.map((_, index) => ( - - ))} - - )} - - )} - - - - - {formatDate(notice.publishDate)} - - - {notice.title} - - - - - Cena: - {notice.price} zł - - - { - toggleNoticeInWishlist(id); - }} - > - - - - - - Kategoria:{" "} - {notice.category} - - - - Opis ogloszenia - - {notice.description} - - - - - Uzytkownik: - {isUserLoading ? ( - - ) : user ? ( - <> - - Zdjęcie profilowe + return ( + + + {isImageLoading ? ( + + - - - - {user.firstName} {user.lastName} - - - Email: {user.email} - - setIsMessageFormVisible(true)} - className="mt-3 bg-primary-500 py-2 px-4 rounded-md" - > - - Wyślij wiadomość - - - - - Zobacz więcej ogłoszeń od {user.firstName} - - - - ) : ( - Błąd podczas ładowania danych użytkownika + + ( + + {`Zdjęcie + + )} + keyExtractor={(item, index) => index.toString()} + /> + + {images.length > 1 && ( + + {images.map((_, index) => ( + + ))} + + )} + )} - - - - {isMessageFormVisible && ( - - - - Wyślij wiadomość do {user?.firstName} - - Do: - - {user?.email || "Brak adresu e-mail"} - - Twój e-mail: - + + + + {formatDate(notice.publishDate)} + + + {notice.title} + - + + + Cena: + {notice.price} zł + - - setIsMessageFormVisible(false)} - className="bg-gray-300 py-2 px-4 rounded-md" - > - Anuluj - + { + toggleNoticeInWishlist(id); + }} + > + + + + + + Kategoria:{" "} + {notice.category} + + + + Opis ogloszenia + + {notice.description} + + - - Wyślij - - - - - )} - - ); + + Uzytkownik: + {isUserLoading ? ( + + ) : user ? ( + <> + + Zdjęcie profilowe + + + + + {user.firstName} {user.lastName} + + + Email: {user.email} + + setIsMessageFormVisible(true)} + className="mt-3 bg-primary-500 py-2 px-4 rounded-md" + > + + Wyślij wiadomość + + + + + Zobacz więcej ogłoszeń od {user.firstName} + + + + + ) : ( + Błąd podczas ładowania danych użytkownika + )} + + + + {isMessageFormVisible && ( + + + + Wyślij wiadomość do {user?.firstName} + + + Do: + + {user?.email || "Brak adresu e-mail"} + + Twój e-mail: + + + + + + setIsMessageFormVisible(false)} + className="bg-gray-300 py-2 px-4 rounded-md" + > + Anuluj + + + + Wyślij + + + + + )} + + ); }