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

Avatar + SafeAreaView

Browse Source
This commit is contained in:
Kuba
2025-06-09 19:27:05 +02:00
parent 1d3cbeef3a
commit 7fc1312ddc
1 changed files with 139 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,7 @@ 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 { Avatar, AvatarImage, AvatarFallbackText } from "@gluestack-ui/themed";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { import {
ActivityIndicator, ActivityIndicator,
@@ -12,6 +13,7 @@ import {
FlatList, FlatList,
View, View,
TextInput, TextInput,
SafeAreaView,
} 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";
@@ -98,7 +100,6 @@ export default function NoticeDetails() {
unlockOrientation(); unlockOrientation();
getInitialOrientation(); getInitialOrientation();
// Listen for orientation changes
const subscription = ScreenOrientation.addOrientationChangeListener( const subscription = ScreenOrientation.addOrientationChangeListener(
({ orientationInfo }) => { ({ orientationInfo }) => {
const isLandscapeMode = const isLandscapeMode =
@@ -147,6 +148,7 @@ export default function NoticeDetails() {
if (notice) { if (notice) {
try { try {
const fetchedImages = await getAllImagesByNoticeId(notice.noticeId); const fetchedImages = await getAllImagesByNoticeId(notice.noticeId);
console.log("Fetched images:", fetchedImages);
setImages( setImages(
fetchedImages && fetchedImages.length > 0 fetchedImages && fetchedImages.length > 0
? fetchedImages ? fetchedImages
@@ -230,6 +232,7 @@ export default function NoticeDetails() {
}`} }`}
alt={`Zdjęcie ${index + 1}`} alt={`Zdjęcie ${index + 1}`}
resizeMode={isLandscape ? "cover" : "contain"} resizeMode={isLandscape ? "cover" : "contain"}
onError={(e) => console.error("Image load error:", e.nativeEvent.error)}
/> />
</View> </View>
)} )}
@@ -241,8 +244,8 @@ export default function NoticeDetails() {
<Box <Box
key={index} key={index}
className={`w-2 h-2 rounded-full mx-1 ${ className={`w-2 h-2 rounded-full mx-1 ${
index === currentIndex ? "bg-primary-500" : "bg-gray-300" index === currentIndex ? "bg-primary-500" : "bg-gray-500"}
}`} }`}
/> />
))} ))}
</Box> </Box>
@@ -252,137 +255,143 @@ export default function NoticeDetails() {
}; };
return ( return (
<Card className="p-0 rounded-lg m-3 flex-1"> <SafeAreaView style={{ flex: 1 }}>
<Stack.Screen <Card className="flex-1 p-4 m-3 rounded-lg shadow-sm">
options={{ <Stack.Screen
title: notice.title, options={{
}} title: notice.title,
/> }}
<ScrollView showsVerticalScrollIndicator={false}> />
{renderImageSection()} <ScrollView showsVerticalScrollIndicator={false}>
<VStack className="p-2"> {renderImageSection()}
<Text className="text-sm font-normal mb-2 text-typography-700"> <VStack className="p-4">
{formatDate(notice.publishDate)} <Text className="text-sm font-normal mb-2 text-gray-600">
</Text> {formatDate(notice.publishDate)}
<Text className="text-2xl text-gray-950 font-bold mb-2 text-center bg-gray-50 rounded-md p-2">
{notice.title}
</Text>
<Box className="flex-row items-center bg-gray-50 rounded-md p-2">
<Heading size="md" className="flex-1 text-xl text-gray-950">
<Text className="text-sm text-typography-500">Cena: </Text>
{notice.price} zł
</Heading>
<Pressable
onPress={() => {
toggleNoticeInWishlist(id);
}}
>
<Ionicons
name={isInWishlist ? "heart" : "heart-outline"}
size={24}
color={"primary-heading-500"}
/>
</Pressable>
</Box>
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
<Text className="text-sm text-typography-500">
Kategoria:{" "}
<Text className="font-bold text-gray-950">{notice.category}</Text>
</Text> </Text>
</Box> <Text className="text-2xl font-bold mb-2 text-center bg-gray-100 rounded-md p-4">
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm"> {notice.title}
<Text className="text-2xl text-gray-950">Opis ogłoszenia</Text>
<Text className="text-sm text-typography-700">
{notice.description}
</Text> </Text>
</Box> <Box className="flex-row items-center bg-gray-100 rounded-md p-2">
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm"> <Heading size="md" className="flex-1 text-lg">
<Text className="text-sm text-typography-500">Użytkownik:</Text> <Text className="text-sm text-gray-500">Cena: </Text>
{isUserLoading ? ( {notice.price} zł
<ActivityIndicator /> </Heading>
) : user ? ( <Pressable
<> onPress={() => {
<Box className="mr-4"> toggleNoticeInWishlist(id);
<Image }}
source={{ >
uri: <Ionicons
user.profileImage || name={isInWishlist ? "heart" : "heart-outline"}
"https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain", size={24}
}} // Domyślny obraz, jeśli brak zdjęcia profilowego color="#3b82f6"
className="h-12 w-12 rounded-full" />
alt="Zdjęcie profilowe" </Pressable>
/> </Box>
</Box> <Box className="mt-4 bg-gray-100 p-3 rounded-lg">
<Box className="flex-1"> <Text className="text-sm text-gray-500">
<Text className="text-xl font-bold text-gray-950"> Kategoria:{" "}
{user.firstName} {user.lastName} <Text className="font-bold text-gray-900">{notice.category}</Text>
</Text>
<Text className="text-sm text-typography-700">
Email: {user.email}
</Text>
<Pressable
onPress={() => setIsMessageFormVisible(true)}
className="mt-3 bg-primary-500 py-2 px-4 rounded-md"
>
<Text className="text-white text-center font-bold">
Wyślij wiadomość
</Text>
</Pressable>
<Link href={`/user/${notice.clientId}`}>
<Text className="text-xl p-3 font-bold text-center text-typography-700 mt-3">
Zobacz więcej ogłoszeń od {user.firstName}
</Text>
</Link>
</Box>
</>
) : (
<Text>Błąd podczas ładowania danych użytkownika</Text>
)}
</Box>
</VStack>
</ScrollView>
{isMessageFormVisible && (
<View className="absolute inset-0 bg-black bg-opacity-50 justify-center items-center z-20">
<View className="bg-white p-4 rounded-lg w-4/5">
<Text className="text-lg font-bold mb-4">
Wyślij wiadomość do {user?.firstName}
</Text> </Text>
<Text className="text-sm font-medium mb-1">Do:</Text> </Box>
<Text className="bg-gray-100 p-3 rounded text-gray-500"> <Box className="mt-4 bg-gray-100 p-3 rounded-lg">
{user?.email || "Brak adresu e-mail"} <Text className="text-xl font-bold text-gray-900">Opis ogłoszenia</Text>
</Text> <Text className="text-sm text-gray-700">{notice.description}</Text>
<Text className="text-sm font-medium mb-1">Twój e-mail:</Text> </Box>
<TextInput <Box className="mt-4 bg-gray-100 p-3 rounded-lg">
className="border border-gray-300 p-2 rounded" <Text className="text-sm text-gray-500">Użytkownik:</Text>
placeholder="Wpisz swój adres e-mail" {isUserLoading ? (
value={Email} <ActivityIndicator />
onChangeText={setEmail} ) : user ? (
/> <>
<TextInput <Box className="mr-4">
className="border border-gray-300 rounded-md p-2 mb-4 h-32 text-left" <Avatar size="md">
multiline <AvatarImage
numberOfLines={4} source={{
placeholder="Napisz swoją wiadomość..." uri:
value={message} user.image ||
onChangeText={setMessage} "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain",
/> }}
<View className="flex-row justify-end space-x-2"> alt="Zdjęcie profilowe"
<Pressable />
onPress={() => setIsMessageFormVisible(false)} <AvatarFallbackText>
className="bg-gray-300 py-2 px-4 rounded-md" {user.firstName?.[0]}
> {user.lastName?.[0]}
<Text className="text-gray-800">Anuluj</Text> </AvatarFallbackText>
</Pressable> </Avatar>
<Pressable </Box>
onPress={handleSendMessage} <Box className="flex-1">
className="bg-primary-500 py-2 px-4 rounded-md" <Text className="text-lg font-bold text-gray-900">
> {user.firstName} {user.lastName}
<Text className="text-white">Wyślij</Text> </Text>
</Pressable> <Text className="text-sm text-gray-700">
Email: {user.email}
</Text>
<Pressable
onPress={() => setIsMessageFormVisible(true)}
className="mt-3 bg-blue-500 py-2 px-4 rounded-md"
>
<Text className="text-white text-center font-bold">
Wyślij wiadomość
</Text>
</Pressable>
<Link href={`/user/${notice.clientId}`}>
<Text className="text-lg font-bold text-center text-blue-600 mt-3">
Zobacz więcej ogłoszeń od {user.firstName}
</Text>
</Link>
</Box>
</>
) : (
<Text>Błąd podczas ładowania danych użytkownika</Text>
)}
</Box>
</VStack>
</ScrollView>
{isMessageFormVisible && (
<View className="absolute inset-0 bg-black bg-opacity-50 justify-center items-center z-20">
<View className="bg-white p-4 rounded-lg w-4/5">
<Text className="text-lg font-bold mb-4">
Wyślij wiadomość do {user?.firstName}
</Text>
<Text className="text-sm font-medium mb-1">Do:</Text>
<Text className="bg-gray-100 p-3 rounded text-gray-500">
{user?.email || "Brak adresu e-mail"}
</Text>
<Text className="text-sm font-medium mb-1">Twój e-mail:</Text>
<TextInput
className="border border-gray-300 p-2 rounded mb-4"
placeholder="Wpisz swój adres e-mail"
value={Email}
onChangeText={setEmail}
/>
<Text className="text-sm font-medium mb-1">Treść:</Text>
<TextInput
className="border border-gray-300 rounded-md p-2 mb-4 h-32 text-left"
multiline
numberOfLines={4}
placeholder="Napisz swoją wiadomość..."
value={message}
onChangeText={setMessage}
/>
<View className="flex-row justify-end space-x-2">
<Pressable
onPress={() => setIsMessageFormVisible(false)}
className="bg-gray-300 py-2 px-4 rounded-md"
>
<Text className="text-gray-800">Anuluj</Text>
</Pressable>
<Pressable
onPress={handleSendMessage}
className="bg-blue-500 py-2 px-4 rounded-md"
>
<Text className="text-white">Wyślij</Text>
</Pressable>
</View>
</View> </View>
</View> </View>
</View> )}
)} </Card>
</Card> </SafeAreaView>
); );
} }