Pobieranie zdjęć z backendu

ArtisanConnect/api/notices.jsx

@@ -1,7 +1,9 @@
-const API_URL = "http://10.224.1.86:8080/api/v1/notices";
+import axios from "axios";
+
+const API_URL = "https://testowe.zikor.pl/api/v1";
 
 export async function listNotices() {
-    const response = await fetch(`${API_URL}/get/all`);
+    const response = await fetch(`${API_URL}/notices/get/all`);
     const data = await response.json();
     if (!response.ok) {
         throw new Error(response.toString());
@@ -10,7 +12,7 @@ export async function listNotices() {
 }
 
 export async function getNoticeById(noticeId) {
-    const response = await fetch(`${API_URL}/get/${noticeId}`);
+    const response = await fetch(`${API_URL}/notices/get/${noticeId}`);
 
     const data = await response.json();
     if (!response.ok) {
@@ -19,16 +21,20 @@ export async function getNoticeById(noticeId) {
     return data;
 }
 
-export async function getImagesByNoticeId(noticeId) {
-    const response = await fetch(`http://10.224.1.86:8080/api/v1/images/list/${noticeId}`);
+export async function getImageByNoticeId(noticeId) {
+    let imageUrl;
+    try {
+        const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`);
 
-    if (!response.ok) {
-        throw new Error(response.toString());
+        const imageName = listResponse.data[0];
+        imageUrl = `${API_URL}/images/get/${imageName}`;
+
+        console.log(`Pobrano zdjęcie o nazwie: ${imageName}`);
+
+        return imageUrl;
+    } catch (err) {
+        console.log(`Zdjęcie nie istnieje dla notice o id: ${noticeId}`);
+        imageUrl = "https://http.cat/404.jpg";
+        return imageUrl;
     }
-
-    const data = await response.json();
-
-    const Image = await fetch(`http://10.224.1.86:8080/api/v1/images/get/${data.first}`);
-
-    return Image.blob();
 }

ArtisanConnect/components/NoticeCard.jsx

@@ -1,62 +1,74 @@
-import { Box } from "@/components/ui/box";
-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 { Link } from "expo-router";
-import { Pressable } from "react-native";
-import { useWishlist } from "@/store/wishlistStore";
-import { Ionicons } from "@expo/vector-icons";
+import {Box} from "@/components/ui/box";
+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 {Link} from "expo-router";
+import {Pressable} from "react-native";
+import {useWishlist} from "@/store/wishlistStore";
+import {Ionicons} from "@expo/vector-icons";
+import {useEffect, useState} from "react";
+import {getImageByNoticeId} from "@/api/notices";
 
-export function NoticeCard({ notice }) {
-  const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
-  const removeNoticeFromWishlist = useWishlist(
-    (state) => state.removeNoticeFromWishlist
-  );
-  const isInWishlist = useWishlist((state) =>
-    state.wishlistNotices.some((item) => item.noticeId == notice.noticeId)
-  );
+export function NoticeCard({notice}) {
+    const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
+    const removeNoticeFromWishlist = useWishlist(
+        (state) => state.removeNoticeFromWishlist
+    );
+    const isInWishlist = useWishlist((state) =>
+        state.wishlistNotices.some((item) => item.noticeId === notice.noticeId)
+    );
+    const [image, setImage] = useState(null);
 
-  return (
-    <Link href={`/notice/${notice.noticeId}`} asChild>
-      <Pressable className="flex-1">
-        <Card className="p-0 rounded-lg max-w-[460px]  flex-1">
-          <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"
-          />
-          <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>
-              <Pressable
-                onPress={() => {
-                  if (isInWishlist) {
-                    removeNoticeFromWishlist(notice.noticeId); // Usuń z ulubionych
-                  } else {
-                    addNoticeToWishlist(notice); // Dodaj do ulubionych
-                  }
-                }}
-              >
-                <Ionicons
-                  name={isInWishlist ? "heart" : "heart-outline"} // Dynamiczna ikona
-                  size={24} // Rozmiar ikony
-                  color={"primary-heading-500"} // Kolor ikony
-                />
-              </Pressable>
-            </Box>
-          </VStack>
-        </Card>
-      </Pressable>
-    </Link>
-  );
+    useEffect(() => {
+        const fetchImage = async () => {
+            let imageUrl = await getImageByNoticeId(notice.noticeId);
+            setImage(imageUrl);
+        };
+
+        fetchImage();
+    }, [notice.noticeId]);
+
+    return (
+        <Link href={`/notice/${notice.noticeId}`} asChild>
+            <Pressable className="flex-1">
+                <Card className="p-0 rounded-lg max-w-[460px]  flex-1">
+                    <Image
+                        source={{
+                            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>
+                            <Pressable
+                                onPress={() => {
+                                    if (isInWishlist) {
+                                        removeNoticeFromWishlist(notice.noticeId); // Usuń z ulubionych
+                                    } else {
+                                        addNoticeToWishlist(notice); // Dodaj do ulubionych
+                                    }
+                                }}
+                            >
+                                <Ionicons
+                                    name={isInWishlist ? "heart" : "heart-outline"} // Dynamiczna ikona
+                                    size={24} // Rozmiar ikony
+                                    color={"primary-heading-500"} // Kolor ikony
+                                />
+                            </Pressable>
+                        </Box>
+                    </VStack>
+                </Card>
+            </Pressable>
+        </Link>
+    );
 }

ArtisanConnect/package-lock.json

@@ -17,7 +17,7 @@
         "@gluestack-ui/overlay": "^0.1.22",
         "@gluestack-ui/toast": "^1.0.9",
         "@tanstack/react-query": "^5.74.4",
-        "axios": "^1.8.4",
+        "axios": "^1.9.0",
         "babel-plugin-module-resolver": "^5.0.2",
         "expo": "~52.0.46",
         "expo-constants": "~17.0.8",
@@ -4284,9 +4284,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
-      "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
+      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",

ArtisanConnect/package.json

@@ -18,7 +18,7 @@
     "@gluestack-ui/overlay": "^0.1.22",
     "@gluestack-ui/toast": "^1.0.9",
     "@tanstack/react-query": "^5.74.4",
-    "axios": "^1.8.4",
+    "axios": "^1.9.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "expo": "~52.0.46",
     "expo-constants": "~17.0.8",