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

This commit is contained in:
2025-05-02 14:18:11 +02:00
parent 490bcc7585
commit b8ca34f736
3 changed files with 1056 additions and 907 deletions

View File

@@ -1,18 +1,20 @@
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,
@@ -23,8 +25,23 @@ export default function NoticeDetails() {
queryFn: () => getNoticeById(Number(id)), queryFn: () => getNoticeById(Number(id)),
}); });
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);
}
}
};
fetchImage();
}, [notice]);
if (isLoading) { if (isLoading) {
return <ActivityIndicator />; return <ActivityIndicator/>;
} }
if (error) { if (error) {
@@ -40,7 +57,8 @@ export default function NoticeDetails() {
/> />
<Image <Image
source={{ source={{
uri: "https://gluestack.github.io/public-blog-video-assets/saree.png", // uri: "https://gluestack.github.io/public-blog-video-assets/saree.png",
uri: image,
}} }}
className=" h-auto w-full rounded-md aspect-[1/1]" className=" h-auto w-full rounded-md aspect-[1/1]"
alt="image" alt="image"

File diff suppressed because it is too large Load Diff

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"