diff --git a/ArtisanConnect/app/notice/[id].jsx b/ArtisanConnect/app/notice/[id].jsx index 9da0bcd..e4bed13 100644 --- a/ArtisanConnect/app/notice/[id].jsx +++ b/ArtisanConnect/app/notice/[id].jsx @@ -6,24 +6,27 @@ 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} from "react-native"; -import {useEffect, useState} from "react"; +import {ActivityIndicator, Dimensions, FlatList, View} from "react-native"; +import {useEffect, useState, useRef} from "react"; import {useNoticesStore} from "@/store/noticesStore"; import {useWishlist} from "@/store/wishlistStore"; import {Pressable} from "react-native"; import {getUserById} from "@/api/client"; +const {width} = Dimensions.get("window"); export default function NoticeDetails() { const {id} = useLocalSearchParams(); - const [image, setImage] = useState(null); + 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 {getNoticeById, getAllImagesByNoticeId} = useNoticesStore(); @@ -32,6 +35,15 @@ export default function NoticeDetails() { const isInWishlist = useWishlist((state) => notice ? state.wishlistNotices.some((item) => item.noticeId === notice.noticeId) : false ); + const onViewableItemsChanged = useRef(({ viewableItems }) => { + if (viewableItems.length > 0) { + setCurrentIndex(viewableItems[0].index); + } + }).current; + + const viewabilityConfig = useRef({ + itemVisiblePercentThreshold: 70, + }).current; useEffect(() => { const fetchNotice = async () => { @@ -59,8 +71,9 @@ export default function NoticeDetails() { setIsImageLoading(true); if (notice) { try { - const images = await getAllImagesByNoticeId(notice.noticeId); - setImage(images && images.length > 0 ? images[0] : "https://http.cat/404.jpg"); + 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"); @@ -118,16 +131,44 @@ export default function NoticeDetails() { ) : ( - image + + ( + + {`Zdjęcie + + )} + keyExtractor={(item, index) => index.toString()} + /> + + {images.length > 1 && ( + + {images.map((_, index) => ( + + ))} + + )} + )} + {notice.publishDate}