Add, list, getbyid

working via zustand now + adding image from camera

ArtisanConnect/app/notice/[id].jsx

@@ -1,47 +1,72 @@
 import {Stack, useLocalSearchParams} from "expo-router";
 import {Box} from "@/components/ui/box";
-import {Button, ButtonText} from "@/components/ui/button";
 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 {Icon, FavouriteIcon} from "@/components/ui/icon";
-import {useQuery} from "@tanstack/react-query";
-import {getImageByNoticeId, getNoticeById} from "@/api/notices";
+import {Ionicons} from "@expo/vector-icons";
 import {ActivityIndicator} from "react-native";
 import {useEffect, useState} from "react";
+import {useNoticesStore} from "@/store/noticesStore";
+import {useWishlist} from "@/store/wishlistStore";
+import {Pressable} from "react-native";
 
 export default function NoticeDetails() {
     const {id} = useLocalSearchParams();
     const [image, setImage] = useState(null);
     const [isImageLoading, setIsImageLoading] = useState(true);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [notice, setNotice] = useState(null);
 
-    const {
-        data: notice,
-        isLoading,
-        error,
-    } = useQuery({
-        queryKey: ["notices", id],
-        queryFn: () => getNoticeById(Number(id)),
-    });
+    const {getNoticeById, getAllImagesByNoticeId} = useNoticesStore();
+    const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
+    const removeNoticeFromWishlist = useWishlist((state) => state.removeNoticeFromWishlist);
+    const isInWishlist = useWishlist((state) =>
+        notice ? state.wishlistNotices.some((item) => item.noticeId === notice.noticeId) : false
+    );
+
+    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 imageData = await getImageByNoticeId(notice.noticeId);
-                    setImage(imageData);
+                    const images = await getAllImagesByNoticeId(notice.noticeId);
+                    setImage(images && images.length > 0 ? images[0] : "https://http.cat/404.jpg");
                 } catch (err) {
-                    console.error("Błąd przy pobieraniu obrazu:", err);
+                    console.error("Error while loading images:", err);
+                    setImage("https://http.cat/404.jpg");
                 } finally {
                     setIsImageLoading(false);
                 }
             }
         };
 
-        fetchImage();
+        if (notice) {
+            fetchImage();
+        }
     }, [notice]);
 
     if (isLoading) {
@@ -49,11 +74,15 @@ export default function NoticeDetails() {
     }
 
     if (error) {
-        return <Text>Błąd, spróbuj ponownie póżniej</Text>;
+        return <Text>Błąd, spróbuj ponownie póżniej: {error.message}</Text>;
+    }
+
+    if (!notice) {
+        return <Text>Nie znaleziono ogłoszenia</Text>;
     }
 
     return (
-        <Card className="p-0 rounded-lg  m-3 flex-1">
+        <Card className="p-0 rounded-lg m-3 flex-1">
             <Stack.Screen
                 options={{
                     title: notice.title,
@@ -66,7 +95,7 @@ export default function NoticeDetails() {
             ) : (
                 <Image
                     source={{
-                        uri: image || "https://http.cat/404.jpg",
+                        uri: image,
                     }}
                     className="h-auto w-full rounded-md aspect-[1/1]"
                     alt="image"
@@ -82,11 +111,21 @@ export default function NoticeDetails() {
                     <Heading size="md" className="flex-1">
                         {notice.price}zł
                     </Heading>
-                    <Icon
-                        as={FavouriteIcon}
-                        size="sm"
-                        className="text-primary-500 w-6 h-6"
-                    />
+                    <Pressable
+                        onPress={() => {
+                            if (isInWishlist) {
+                                removeNoticeFromWishlist(notice.noticeId);
+                            } else {
+                                addNoticeToWishlist(notice);
+                            }
+                        }}
+                    >
+                        <Ionicons
+                            name={isInWishlist ? "heart" : "heart-outline"}
+                            size={24}
+                            color={"primary-heading-500"}
+                        />
+                    </Pressable>
                 </Box>
             </VStack>
         </Card>