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

zdjęcia się wyświetlają na karcie produktu

Browse Source
This commit is contained in:
Andrii Solianyk
2025-06-09 10:02:16 +02:00
parent 2218c5eb33
commit 5344acbdd1
1 changed files with 314 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,11 @@
import { Link, Stack, useLocalSearchParams } from "expo-router"; import {Link, Stack, useLocalSearchParams} from "expo-router";
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 { Ionicons } from "@expo/vector-icons"; import {Ionicons} from "@expo/vector-icons";
import { import {
ActivityIndicator, ActivityIndicator,
Dimensions, Dimensions,
@@ -13,16 +13,16 @@ import {
View, View,
TextInput, TextInput,
} from "react-native"; } from "react-native";
import { useEffect, useState, useRef } from "react"; import {useEffect, useState, useRef} from "react";
import { useNoticesStore } from "@/store/noticesStore"; import {useNoticesStore} from "@/store/noticesStore";
import { useWishlist } from "@/store/wishlistStore"; import {useWishlist} from "@/store/wishlistStore";
import { Pressable, ScrollView } from "react-native"; import {Pressable, ScrollView} from "react-native";
import { getUserById } from "@/api/client"; import {getUserById} from "@/api/client";
const { width } = Dimensions.get("window"); const {width} = Dimensions.get("window");
export default function NoticeDetails() { export default function NoticeDetails() {
const { id } = useLocalSearchParams(); const {id} = useLocalSearchParams();
const [images, setImages] = useState([]); const [images, setImages] = useState([]);
const [isImageLoading, setIsImageLoading] = useState(true); const [isImageLoading, setIsImageLoading] = useState(true);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
@@ -55,15 +55,15 @@ export default function NoticeDetails() {
}); });
}; };
const { getNoticeById, getAllImagesByNoticeId } = useNoticesStore(); const {getNoticeById, getAllImagesByNoticeId} = useNoticesStore();
const toggleNoticeInWishlist = useWishlist( const toggleNoticeInWishlist = useWishlist(
(state) => state.toggleNoticeInWishlist (state) => state.toggleNoticeInWishlist
); );
const isInWishlist = useWishlist((state) => const isInWishlist = useWishlist((state) =>
id ? state.wishlistNotices.some((item) => item.noticeId == id) : false id ? state.wishlistNotices.some((item) => item.noticeId === id) : false
); );
const onViewableItemsChanged = useRef(({ viewableItems }) => { const onViewableItemsChanged = useRef(({viewableItems}) => {
if (viewableItems.length > 0) { if (viewableItems.length > 0) {
setCurrentIndex(viewableItems[0].index); setCurrentIndex(viewableItems[0].index);
} }
@@ -103,11 +103,11 @@ export default function NoticeDetails() {
setImages( setImages(
fetchedImages && fetchedImages.length > 0 fetchedImages && fetchedImages.length > 0
? fetchedImages ? fetchedImages
: ["https://http.cat/404.jpg"] : {uri: "https://http.cat/404.jpg"}
); );
} catch (err) { } catch (err) {
console.error("Error while loading images:", err); console.error("Error while loading images:", err);
setImage("https://http.cat/404.jpg"); setImage({uri: "https://http.cat/404.jpg"});
} finally { } finally {
setIsImageLoading(false); setIsImageLoading(false);
} }
@@ -138,7 +138,7 @@ export default function NoticeDetails() {
}, [notice]); }, [notice]);
if (isLoading) { if (isLoading) {
return <ActivityIndicator />; return <ActivityIndicator/>;
} }
if (error) { if (error) {
@@ -158,7 +158,7 @@ export default function NoticeDetails() {
/> />
{isImageLoading ? ( {isImageLoading ? (
<Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center"> <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
<ActivityIndicator size="large" color="#3b82f6" /> <ActivityIndicator size="large" color="#3b82f6"/>
</Box> </Box>
) : ( ) : (
<Box className="sticky top-0 z-10 bg-white"> <Box className="sticky top-0 z-10 bg-white">
@@ -172,11 +172,11 @@ export default function NoticeDetails() {
pagingEnabled pagingEnabled
onViewableItemsChanged={onViewableItemsChanged} onViewableItemsChanged={onViewableItemsChanged}
viewabilityConfig={viewabilityConfig} viewabilityConfig={viewabilityConfig}
renderItem={({ item, index }) => ( renderItem={({item, index}) => (
<View style={{ width: width }}> <View style={{width: width}} className='p-2'>
<Image <Image
source={{ uri: item }} source={item}
className="h-auto w-full rounded-md aspect-square" className="h-auto w-auto rounded-md aspect-[1/1]"
alt={`Zdjęcie ${index + 1}`} alt={`Zdjęcie ${index + 1}`}
resizeMode="contain" resizeMode="contain"
/> />
@@ -243,7 +243,7 @@ export default function NoticeDetails() {
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm"> <Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
<Text className="text-sm text-typography-500">Uzytkownik:</Text> <Text className="text-sm text-typography-500">Uzytkownik:</Text>
{isUserLoading ? ( {isUserLoading ? (
<ActivityIndicator /> <ActivityIndicator/>
) : user ? ( ) : user ? (
<> <>
<Box className="mr-4"> <Box className="mr-4">