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() {
) : (
-
+
+ (
+
+
+
+ )}
+ keyExtractor={(item, index) => index.toString()}
+ />
+
+ {images.length > 1 && (
+
+ {images.map((_, index) => (
+
+ ))}
+
+ )}
+
)}
+
{notice.publishDate}