hamx/ArtisanConnectFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Andrii Solianyk
2025-05-02 14:18:11 +02:00
parent 490bcc7585
commit b8ca34f736
3 changed files with 1056 additions and 907 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
ArtisanConnect/app/notice/[id].jsx
View File

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

1821
ArtisanConnect/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
ArtisanConnect/package.json
View File

@@ -39,10 +39,10 @@
"react-dom": "18.3.1", "react-dom": "18.3.1",
"react-native": "0.76.9", "react-native": "0.76.9",
"react-native-css-interop": "^0.1.22", "react-native-css-interop": "^0.1.22",
"react-native-reanimated": "^3.17.4", "react-native-reanimated": "3.16.1",
"react-native-safe-area-context": "^5.4.0", "react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.4.0", "react-native-screens": "~4.4.0",
"react-native-svg": "^15.2.0", "react-native-svg": "15.8.0",
"react-native-web": "~0.19.13", "react-native-web": "~0.19.13",
"tailwindcss": "^3.4.17", "tailwindcss": "^3.4.17",
"zustand": "^5.0.3" "zustand": "^5.0.3"