wyświetlanie zdjęcia w zakładce NoticeDetails.

ArtisanConnect/app/notice/[id].jsx

@@ -1,67 +1,85 @@
-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 { getNoticeById } from "@/api/notices";
-import { ActivityIndicator } from "react-native";
+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 {ActivityIndicator} from "react-native";
+import {useEffect, useState} from "react";
 
 export default function NoticeDetails() {
-  const { id } = useLocalSearchParams();
+    const {id} = useLocalSearchParams();
+    const [image, setImage] = useState(null);
 
-  const {
-    data: notice,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ["notices", id],
-    queryFn: () => getNoticeById(Number(id)),
-  });
+    const {
+        data: notice,
+        isLoading,
+        error,
+    } = useQuery({
+        queryKey: ["notices", id],
+        queryFn: () => getNoticeById(Number(id)),
+    });
 
-  if (isLoading) {
-    return <ActivityIndicator />;
-  }
+    useEffect(() => {
+        const fetchImage = async () => {
+            if (notice) {
+                try {
+                    const imageData = await getImageByNoticeId(notice.noticeId);
+                    setImage(imageData);
+                } catch (err) {
+                    console.error("Błąd przy pobieraniu obrazu:", err);
+                }
+            }
+        };
 
-  if (error) {
-    return <Text>Błąd, spróbuj ponownie póżniej</Text>;
-  }
+        fetchImage();
+    }, [notice]);
 
-  return (
-    <Card className="p-0 rounded-lg  m-3 flex-1">
-      <Stack.Screen
-        options={{
-          title: notice.title,
-        }}
-      />
-      <Image
-        source={{
-          uri: "https://gluestack.github.io/public-blog-video-assets/saree.png",
-        }}
-        className=" h-auto w-full rounded-md aspect-[1/1]"
-        alt="image"
-        resizeMode="cover"
-      />
+    if (isLoading) {
+        return <ActivityIndicator/>;
+    }
 
-      <VStack className="p-2">
-        <Text className="text-sm font-normal mb-2 text-typography-700">
-          {notice.title}
-        </Text>
-        <Box className="flex-row items-center">
-          <Heading size="md" className="flex-1">
-            {notice.price}zł
-          </Heading>
-          <Icon
-            as={FavouriteIcon}
-            size="sm"
-            className="text-primary-500 w-6 h-6"
-          />
-        </Box>
-      </VStack>
-    </Card>
-  );
+    if (error) {
+        return <Text>Błąd, spróbuj ponownie póżniej</Text>;
+    }
+
+    return (
+        <Card className="p-0 rounded-lg  m-3 flex-1">
+            <Stack.Screen
+                options={{
+                    title: notice.title,
+                }}
+            />
+            <Image
+                source={{
+                    // uri: "https://gluestack.github.io/public-blog-video-assets/saree.png",
+                    uri: image,
+                }}
+                className=" h-auto w-full rounded-md aspect-[1/1]"
+                alt="image"
+                resizeMode="cover"
+            />
+
+            <VStack className="p-2">
+                <Text className="text-sm font-normal mb-2 text-typography-700">
+                    {notice.title}
+                </Text>
+                <Box className="flex-row items-center">
+                    <Heading size="md" className="flex-1">
+                        {notice.price}zł
+                    </Heading>
+                    <Icon
+                        as={FavouriteIcon}
+                        size="sm"
+                        className="text-primary-500 w-6 h-6"
+                    />
+                </Box>
+            </VStack>
+        </Card>
+    );
 }