Pobieranie zdjęć z backendu
This commit is contained in:
@@ -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() {
|
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();
|
const data = await response.json();
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error(response.toString());
|
throw new Error(response.toString());
|
||||||
@@ -10,7 +12,7 @@ export async function listNotices() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export async function getNoticeById(noticeId) {
|
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();
|
const data = await response.json();
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
@@ -19,16 +21,20 @@ export async function getNoticeById(noticeId) {
|
|||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getImagesByNoticeId(noticeId) {
|
export async function getImageByNoticeId(noticeId) {
|
||||||
const response = await fetch(`http://10.224.1.86:8080/api/v1/images/list/${noticeId}`);
|
let imageUrl;
|
||||||
|
try {
|
||||||
|
const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`);
|
||||||
|
|
||||||
if (!response.ok) {
|
const imageName = listResponse.data[0];
|
||||||
throw new Error(response.toString());
|
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();
|
|
||||||
}
|
}
|
||||||
@@ -1,62 +1,74 @@
|
|||||||
import { Box } from "@/components/ui/box";
|
import {Box} from "@/components/ui/box";
|
||||||
import { Card } from "@/components/ui/card";
|
import {Card} from "@/components/ui/card";
|
||||||
import { Heading } from "@/components/ui/heading";
|
import {Heading} from "@/components/ui/heading";
|
||||||
import { Image } from "@/components/ui/image";
|
import {Image} from "@/components/ui/image";
|
||||||
import { Text } from "@/components/ui/text";
|
import {Text} from "@/components/ui/text";
|
||||||
import { VStack } from "@/components/ui/vstack";
|
import {VStack} from "@/components/ui/vstack";
|
||||||
import { Link } from "expo-router";
|
import {Link} from "expo-router";
|
||||||
import { Pressable } from "react-native";
|
import {Pressable} from "react-native";
|
||||||
import { useWishlist } from "@/store/wishlistStore";
|
import {useWishlist} from "@/store/wishlistStore";
|
||||||
import { Ionicons } from "@expo/vector-icons";
|
import {Ionicons} from "@expo/vector-icons";
|
||||||
|
import {useEffect, useState} from "react";
|
||||||
|
import {getImageByNoticeId} from "@/api/notices";
|
||||||
|
|
||||||
export function NoticeCard({ notice }) {
|
export function NoticeCard({notice}) {
|
||||||
const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
|
const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
|
||||||
const removeNoticeFromWishlist = useWishlist(
|
const removeNoticeFromWishlist = useWishlist(
|
||||||
(state) => state.removeNoticeFromWishlist
|
(state) => state.removeNoticeFromWishlist
|
||||||
);
|
);
|
||||||
const isInWishlist = useWishlist((state) =>
|
const isInWishlist = useWishlist((state) =>
|
||||||
state.wishlistNotices.some((item) => item.noticeId == notice.noticeId)
|
state.wishlistNotices.some((item) => item.noticeId === notice.noticeId)
|
||||||
);
|
);
|
||||||
|
const [image, setImage] = useState(null);
|
||||||
|
|
||||||
return (
|
useEffect(() => {
|
||||||
<Link href={`/notice/${notice.noticeId}`} asChild>
|
const fetchImage = async () => {
|
||||||
<Pressable className="flex-1">
|
let imageUrl = await getImageByNoticeId(notice.noticeId);
|
||||||
<Card className="p-0 rounded-lg max-w-[460px] flex-1">
|
setImage(imageUrl);
|
||||||
<Image
|
};
|
||||||
source={{
|
|
||||||
uri: "https://gluestack.github.io/public-blog-video-assets/saree.png",
|
fetchImage();
|
||||||
}}
|
}, [notice.noticeId]);
|
||||||
className=" h-auto w-full rounded-md aspect-[1/1]"
|
|
||||||
alt="image"
|
return (
|
||||||
resizeMode="cover"
|
<Link href={`/notice/${notice.noticeId}`} asChild>
|
||||||
/>
|
<Pressable className="flex-1">
|
||||||
<VStack className="p-2">
|
<Card className="p-0 rounded-lg max-w-[460px] flex-1">
|
||||||
<Text className="text-sm font-normal mb-2 text-typography-700">
|
<Image
|
||||||
{notice.title}
|
source={{
|
||||||
</Text>
|
uri: image,
|
||||||
<Box className="flex-row items-center">
|
}}
|
||||||
<Heading size="md" className="flex-1">
|
className=" h-auto w-full rounded-md aspect-[1/1]"
|
||||||
{notice.price}zł
|
alt="image"
|
||||||
</Heading>
|
resizeMode="cover"
|
||||||
<Pressable
|
/>
|
||||||
onPress={() => {
|
<VStack className="p-2">
|
||||||
if (isInWishlist) {
|
<Text className="text-sm font-normal mb-2 text-typography-700">
|
||||||
removeNoticeFromWishlist(notice.noticeId); // Usuń z ulubionych
|
{notice.title}
|
||||||
} else {
|
</Text>
|
||||||
addNoticeToWishlist(notice); // Dodaj do ulubionych
|
<Box className="flex-row items-center">
|
||||||
}
|
<Heading size="md" className="flex-1">
|
||||||
}}
|
{notice.price}zł
|
||||||
>
|
</Heading>
|
||||||
<Ionicons
|
<Pressable
|
||||||
name={isInWishlist ? "heart" : "heart-outline"} // Dynamiczna ikona
|
onPress={() => {
|
||||||
size={24} // Rozmiar ikony
|
if (isInWishlist) {
|
||||||
color={"primary-heading-500"} // Kolor ikony
|
removeNoticeFromWishlist(notice.noticeId); // Usuń z ulubionych
|
||||||
/>
|
} else {
|
||||||
</Pressable>
|
addNoticeToWishlist(notice); // Dodaj do ulubionych
|
||||||
</Box>
|
}
|
||||||
</VStack>
|
}}
|
||||||
</Card>
|
>
|
||||||
</Pressable>
|
<Ionicons
|
||||||
</Link>
|
name={isInWishlist ? "heart" : "heart-outline"} // Dynamiczna ikona
|
||||||
);
|
size={24} // Rozmiar ikony
|
||||||
}
|
color={"primary-heading-500"} // Kolor ikony
|
||||||
|
/>
|
||||||
|
</Pressable>
|
||||||
|
</Box>
|
||||||
|
</VStack>
|
||||||
|
</Card>
|
||||||
|
</Pressable>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
8
ArtisanConnect/package-lock.json
generated
8
ArtisanConnect/package-lock.json
generated
@@ -17,7 +17,7 @@
|
|||||||
"@gluestack-ui/overlay": "^0.1.22",
|
"@gluestack-ui/overlay": "^0.1.22",
|
||||||
"@gluestack-ui/toast": "^1.0.9",
|
"@gluestack-ui/toast": "^1.0.9",
|
||||||
"@tanstack/react-query": "^5.74.4",
|
"@tanstack/react-query": "^5.74.4",
|
||||||
"axios": "^1.8.4",
|
"axios": "^1.9.0",
|
||||||
"babel-plugin-module-resolver": "^5.0.2",
|
"babel-plugin-module-resolver": "^5.0.2",
|
||||||
"expo": "~52.0.46",
|
"expo": "~52.0.46",
|
||||||
"expo-constants": "~17.0.8",
|
"expo-constants": "~17.0.8",
|
||||||
@@ -4284,9 +4284,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/axios": {
|
"node_modules/axios": {
|
||||||
"version": "1.8.4",
|
"version": "1.9.0",
|
||||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
|
"resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
|
||||||
"integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
|
"integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"follow-redirects": "^1.15.6",
|
"follow-redirects": "^1.15.6",
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
"@gluestack-ui/overlay": "^0.1.22",
|
"@gluestack-ui/overlay": "^0.1.22",
|
||||||
"@gluestack-ui/toast": "^1.0.9",
|
"@gluestack-ui/toast": "^1.0.9",
|
||||||
"@tanstack/react-query": "^5.74.4",
|
"@tanstack/react-query": "^5.74.4",
|
||||||
"axios": "^1.8.4",
|
"axios": "^1.9.0",
|
||||||
"babel-plugin-module-resolver": "^5.0.2",
|
"babel-plugin-module-resolver": "^5.0.2",
|
||||||
"expo": "~52.0.46",
|
"expo": "~52.0.46",
|
||||||
"expo-constants": "~17.0.8",
|
"expo-constants": "~17.0.8",
|
||||||
|
|||||||
Reference in New Issue
Block a user