Add, list, getbyid

working via zustand now + adding image from camera

ArtisanConnect/components/NoticeCard.jsx

@@ -5,43 +5,71 @@ import {Image} from "@/components/ui/image";
 import {Text} from "@/components/ui/text";
 import {VStack} from "@/components/ui/vstack";
 import {Link} from "expo-router";
-import {Pressable, ActivityIndicator} from "react-native";
+import {Pressable, ActivityIndicator, View} from "react-native";
 import {useWishlist} from "@/store/wishlistStore";
+import {useNoticesStore} from "@/store/noticesStore";
 import {Ionicons} from "@expo/vector-icons";
 import {useEffect, useState} from "react";
-import {getImageByNoticeId} from "@/api/notices";
 
 export function NoticeCard({notice}) {
+    const noticeId = notice?.noticeId;
+
     const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
-    const removeNoticeFromWishlist = useWishlist(
-        (state) => state.removeNoticeFromWishlist
-    );
+    const removeNoticeFromWishlist = useWishlist((state) => state.removeNoticeFromWishlist);
     const isInWishlist = useWishlist((state) =>
-        state.wishlistNotices.some((item) => item.noticeId === notice.noticeId)
+        noticeId ? state.wishlistNotices.some((item) => item.noticeId === noticeId) : false
     );
+
     const [image, setImage] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
 
+    const {getAllImagesByNoticeId} = useNoticesStore();
+
     useEffect(() => {
+        let isMounted = true;
+
         const fetchImage = async () => {
+            if (!noticeId) {
+                if (isMounted) {
+                    setImage("https://http.cat/404.jpg");
+                    setIsLoading(false);
+                }
+                return;
+            }
+
             setIsLoading(true);
             try {
-                let imageUrl = await getImageByNoticeId(notice.noticeId);
-                setImage(imageUrl);
+                const images = await getAllImagesByNoticeId(noticeId);
+                if (isMounted) {
+                    setImage(images && images.length > 0 ? images[0] : "https://http.cat/404.jpg");
+                }
             } catch (error) {
-                console.error("Błąd podczas pobierania obrazu:", error);
+                console.error(`Error while loading image: ${error}`);
+                if (isMounted) {
+                    setImage("https://http.cat/404.jpg");
+                }
             } finally {
-                setIsLoading(false);
+                if (isMounted) {
+                    setIsLoading(false);
+                }
             }
         };
 
         fetchImage();
-    }, [notice.noticeId]);
+
+        return () => {
+            isMounted = false;
+        };
+    }, [noticeId]);
+
+    if (!notice) {
+        return <View style={{flex: 1}} />;
+    }
 
     return (
-        <Link href={`/notice/${notice.noticeId}`} asChild>
+        <Link href={`/notice/${noticeId}`} asChild>
             <Pressable className="flex-1">
-                <Card className="p-0 rounded-lg max-w-[460px]  flex-1">
+                <Card className="p-0 rounded-lg max-w-[460px] flex-1">
                     {isLoading ? (
                         <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
                             <ActivityIndicator size="large" color="#3b82f6" />
@@ -49,7 +77,7 @@ export function NoticeCard({notice}) {
                     ) : (
                         <Image
                             source={{
-                                uri: image || "https://http.cat/404.jpg",
+                                uri: image,
                             }}
                             className="h-auto w-full rounded-md aspect-[1/1]"
                             alt="image"
@@ -67,16 +95,16 @@ export function NoticeCard({notice}) {
                             <Pressable
                                 onPress={() => {
                                     if (isInWishlist) {
-                                        removeNoticeFromWishlist(notice.noticeId); // Usuń z ulubionych
+                                        removeNoticeFromWishlist(noticeId);
                                     } else {
-                                        addNoticeToWishlist(notice); // Dodaj do ulubionych
+                                        addNoticeToWishlist(notice);
                                     }
                                 }}
                             >
                                 <Ionicons
-                                    name={isInWishlist ? "heart" : "heart-outline"} // Dynamiczna ikona
-                                    size={24} // Rozmiar ikony
-                                    color={"primary-heading-500"} // Kolor ikony
+                                    name={isInWishlist ? "heart" : "heart-outline"}
+                                    size={24}
+                                    color={"primary-heading-500"}
                                 />
                             </Pressable>
                         </Box>