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

69
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,7 +244,7 @@ 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"}
}`} }`}
/> />
))} ))}
@@ -252,7 +255,8 @@ export default function NoticeDetails() {
}; };
return ( return (
<Card className="p-0 rounded-lg m-3 flex-1"> <SafeAreaView style={{ flex: 1 }}>
<Card className="flex-1 p-4 m-3 rounded-lg shadow-sm">
<Stack.Screen <Stack.Screen
options={{ options={{
title: notice.title, title: notice.title,
@@ -260,16 +264,16 @@ export default function NoticeDetails() {
/> />
<ScrollView showsVerticalScrollIndicator={false}> <ScrollView showsVerticalScrollIndicator={false}>
{renderImageSection()} {renderImageSection()}
<VStack className="p-2"> <VStack className="p-4">
<Text className="text-sm font-normal mb-2 text-typography-700"> <Text className="text-sm font-normal mb-2 text-gray-600">
{formatDate(notice.publishDate)} {formatDate(notice.publishDate)}
</Text> </Text>
<Text className="text-2xl text-gray-950 font-bold mb-2 text-center bg-gray-50 rounded-md p-2"> <Text className="text-2xl font-bold mb-2 text-center bg-gray-100 rounded-md p-4">
{notice.title} {notice.title}
</Text> </Text>
<Box className="flex-row items-center bg-gray-50 rounded-md p-2"> <Box className="flex-row items-center bg-gray-100 rounded-md p-2">
<Heading size="md" className="flex-1 text-xl text-gray-950"> <Heading size="md" className="flex-1 text-lg">
<Text className="text-sm text-typography-500">Cena: </Text> <Text className="text-sm text-gray-500">Cena: </Text>
{notice.price} zł {notice.price} zł
</Heading> </Heading>
<Pressable <Pressable
@@ -280,56 +284,59 @@ export default function NoticeDetails() {
<Ionicons <Ionicons
name={isInWishlist ? "heart" : "heart-outline"} name={isInWishlist ? "heart" : "heart-outline"}
size={24} size={24}
color={"primary-heading-500"} color="#3b82f6"
/> />
</Pressable> </Pressable>
</Box> </Box>
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm"> <Box className="mt-4 bg-gray-100 p-3 rounded-lg">
<Text className="text-sm text-typography-500"> <Text className="text-sm text-gray-500">
Kategoria:{" "} Kategoria:{" "}
<Text className="font-bold text-gray-950">{notice.category}</Text> <Text className="font-bold text-gray-900">{notice.category}</Text>
</Text> </Text>
</Box> </Box>
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm"> <Box className="mt-4 bg-gray-100 p-3 rounded-lg">
<Text className="text-2xl text-gray-950">Opis ogłoszenia</Text> <Text className="text-xl font-bold text-gray-900">Opis ogłoszenia</Text>
<Text className="text-sm text-typography-700"> <Text className="text-sm text-gray-700">{notice.description}</Text>
{notice.description}
</Text>
</Box> </Box>
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm"> <Box className="mt-4 bg-gray-100 p-3 rounded-lg">
<Text className="text-sm text-typography-500">Użytkownik:</Text> <Text className="text-sm text-gray-500">Użytkownik:</Text>
{isUserLoading ? ( {isUserLoading ? (
<ActivityIndicator /> <ActivityIndicator />
) : user ? ( ) : user ? (
<> <>
<Box className="mr-4"> <Box className="mr-4">
<Image <Avatar size="md">
<AvatarImage
source={{ source={{
uri: uri:
user.profileImage || user.image ||
"https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain", "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain",
}} // Domyślny obraz, jeśli brak zdjęcia profilowego }}
className="h-12 w-12 rounded-full"
alt="Zdjęcie profilowe" alt="Zdjęcie profilowe"
/> />
<AvatarFallbackText>
{user.firstName?.[0]}
{user.lastName?.[0]}
</AvatarFallbackText>
</Avatar>
</Box> </Box>
<Box className="flex-1"> <Box className="flex-1">
<Text className="text-xl font-bold text-gray-950"> <Text className="text-lg font-bold text-gray-900">
{user.firstName} {user.lastName} {user.firstName} {user.lastName}
</Text> </Text>
<Text className="text-sm text-typography-700"> <Text className="text-sm text-gray-700">
Email: {user.email} Email: {user.email}
</Text> </Text>
<Pressable <Pressable
onPress={() => setIsMessageFormVisible(true)} onPress={() => setIsMessageFormVisible(true)}
className="mt-3 bg-primary-500 py-2 px-4 rounded-md" className="mt-3 bg-blue-500 py-2 px-4 rounded-md"
> >
<Text className="text-white text-center font-bold"> <Text className="text-white text-center font-bold">
Wyślij wiadomość Wyślij wiadomość
</Text> </Text>
</Pressable> </Pressable>
<Link href={`/user/${notice.clientId}`}> <Link href={`/user/${notice.clientId}`}>
<Text className="text-xl p-3 font-bold text-center text-typography-700 mt-3"> <Text className="text-lg font-bold text-center text-blue-600 mt-3">
Zobacz więcej ogłoszeń od {user.firstName} Zobacz więcej ogłoszeń od {user.firstName}
</Text> </Text>
</Link> </Link>
@@ -353,11 +360,12 @@ export default function NoticeDetails() {
</Text> </Text>
<Text className="text-sm font-medium mb-1">Twój e-mail:</Text> <Text className="text-sm font-medium mb-1">Twój e-mail:</Text>
<TextInput <TextInput
className="border border-gray-300 p-2 rounded" className="border border-gray-300 p-2 rounded mb-4"
placeholder="Wpisz swój adres e-mail" placeholder="Wpisz swój adres e-mail"
value={Email} value={Email}
onChangeText={setEmail} onChangeText={setEmail}
/> />
<Text className="text-sm font-medium mb-1">Treść:</Text>
<TextInput <TextInput
className="border border-gray-300 rounded-md p-2 mb-4 h-32 text-left" className="border border-gray-300 rounded-md p-2 mb-4 h-32 text-left"
multiline multiline
@@ -375,7 +383,7 @@ export default function NoticeDetails() {
</Pressable> </Pressable>
<Pressable <Pressable
onPress={handleSendMessage} onPress={handleSendMessage}
className="bg-primary-500 py-2 px-4 rounded-md" className="bg-blue-500 py-2 px-4 rounded-md"
> >
<Text className="text-white">Wyślij</Text> <Text className="text-white">Wyślij</Text>
</Pressable> </Pressable>
@@ -384,5 +392,6 @@ export default function NoticeDetails() {
</View> </View>
)} )}
</Card> </Card>
</SafeAreaView>
); );
} }