init notice edit
This commit is contained in:
Patryk
@@ -3,7 +3,7 @@ import { KeyboardAvoidingView, Platform } from "react-native";
|
||||
import { Box } from "@/components/ui/box";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Heading } from "@/components/ui/heading";
|
||||
import {useRouter} from 'expo-router';
|
||||
import { useRouter } from "expo-router";
|
||||
import { Image } from "@/components/ui/image";
|
||||
import { Text } from "@/components/ui/text";
|
||||
import { VStack } from "@/components/ui/vstack";
|
||||
@@ -31,7 +31,7 @@ import { useAuthStore } from "@/store/authStore";
|
||||
import { sendEmail } from "@/api/email";
|
||||
// import { Button } from "@gluestack-ui/themed";
|
||||
import { Button, ButtonText } from "@/components/ui/button";
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
|
||||
export default function NoticeDetails() {
|
||||
const { id } = useLocalSearchParams();
|
||||
@@ -50,7 +50,7 @@ export default function NoticeDetails() {
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const {width} = Dimensions.get("window");
|
||||
const { width } = Dimensions.get("window");
|
||||
|
||||
const handleSendMessage = async () => {
|
||||
setIsSending(true);
|
||||
@@ -274,239 +274,241 @@ export default function NoticeDetails() {
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex-1" edges={['right', 'bottom', 'left']}>
|
||||
<Card className="p-0 rounded-lg m-3 flex-1">
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: notice.title,
|
||||
headerShown: !isLandscape,
|
||||
}}
|
||||
/>
|
||||
{isImageLoading ? (
|
||||
<Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
|
||||
<ActivityIndicator size="large" color="#3b82f6" />
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
className="sticky top-0 z-10 bg-white"
|
||||
style={
|
||||
isLandscape
|
||||
? {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
zIndex: 30,
|
||||
}
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<FlatList
|
||||
ref={flatListRef}
|
||||
data={images}
|
||||
horizontal
|
||||
snapToAlignment="start"
|
||||
snapToInterval={width}
|
||||
decelerationRate="fast"
|
||||
showsHorizontalScrollIndicator={false}
|
||||
pagingEnabled
|
||||
onViewableItemsChanged={onViewableItemsChanged}
|
||||
viewabilityConfig={viewabilityConfig}
|
||||
style={isLandscape ? { flex: 1 } : {}}
|
||||
renderItem={({ item, index }) => (
|
||||
<View
|
||||
style={{ width: width }}
|
||||
className="p-1"
|
||||
>
|
||||
<Image
|
||||
source={item}
|
||||
// className="h-auto w-auto rounded-md aspect-[1/1]"
|
||||
alt={`Zdjęcie ${index + 1}`}
|
||||
resizeMode="cover"
|
||||
renderMode="contain"
|
||||
className={
|
||||
isLandscape
|
||||
? "w-auto h-full"
|
||||
: "h-auto w-auto rounded-md aspect-[1/1]"
|
||||
<SafeAreaView className="flex-1" edges={["right", "bottom", "left"]}>
|
||||
<Card className="p-0 rounded-lg m-3 flex-1">
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: notice.title,
|
||||
headerShown: !isLandscape,
|
||||
}}
|
||||
/>
|
||||
{isImageLoading ? (
|
||||
<Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
|
||||
<ActivityIndicator size="large" color="#3b82f6" />
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
className="sticky top-0 z-10 bg-white"
|
||||
style={
|
||||
isLandscape
|
||||
? {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
zIndex: 30,
|
||||
}
|
||||
style={
|
||||
isLandscape
|
||||
? {
|
||||
resizeMode: "contain",
|
||||
}
|
||||
: {}
|
||||
}
|
||||
// resizeMode={isLandscape ? "cover" : "contain"}
|
||||
/>
|
||||
</View>
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<FlatList
|
||||
ref={flatListRef}
|
||||
data={images}
|
||||
horizontal
|
||||
snapToAlignment="start"
|
||||
snapToInterval={width}
|
||||
decelerationRate="fast"
|
||||
showsHorizontalScrollIndicator={false}
|
||||
pagingEnabled
|
||||
onViewableItemsChanged={onViewableItemsChanged}
|
||||
viewabilityConfig={viewabilityConfig}
|
||||
style={isLandscape ? { flex: 1 } : {}}
|
||||
renderItem={({ item, index }) => (
|
||||
<View style={{ width: width }} className="p-1">
|
||||
<Image
|
||||
source={item}
|
||||
// className="h-auto w-auto rounded-md aspect-[1/1]"
|
||||
alt={`Zdjęcie ${index + 1}`}
|
||||
resizeMode="cover"
|
||||
renderMode="contain"
|
||||
className={
|
||||
isLandscape
|
||||
? "w-auto h-full"
|
||||
: "h-auto w-auto rounded-md aspect-[1/1]"
|
||||
}
|
||||
style={
|
||||
isLandscape
|
||||
? {
|
||||
resizeMode: "contain",
|
||||
}
|
||||
: {}
|
||||
}
|
||||
// resizeMode={isLandscape ? "cover" : "contain"}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
keyExtractor={(item, index) => index.toString()}
|
||||
/>
|
||||
|
||||
{images.length > 1 && (
|
||||
<Box className="flex-row justify-center mt-2">
|
||||
{images.map((_, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
className={`w-2 h-2 rounded-full mx-1 ${
|
||||
index === currentIndex ? "bg-primary-500" : "bg-gray-300"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
keyExtractor={(item, index) => index.toString()}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{images.length > 1 && (
|
||||
<Box className="flex-row justify-center mt-2">
|
||||
{images.map((_, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
className={`w-2 h-2 rounded-full mx-1 ${
|
||||
index === currentIndex ? "bg-primary-500" : "bg-gray-300"
|
||||
}`}
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
<VStack className="p-2">
|
||||
<Text className="text-sm font-normal mb-2 text-typography-700">
|
||||
{formatDate(notice.publishDate)}
|
||||
</Text>
|
||||
<Text className="text-2xl text-gray-950 font-bold mb-2 text-left 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>
|
||||
</Box>
|
||||
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
|
||||
<Text className="text-2xl text-gray-950">Opis ogloszenia</Text>
|
||||
<Text className="text-sm text-typography-700">
|
||||
{notice.description}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
<VStack className="p-2">
|
||||
<Text className="text-sm font-normal mb-2 text-typography-700">
|
||||
{formatDate(notice.publishDate)}
|
||||
</Text>
|
||||
<Text className="text-2xl text-gray-950 font-bold mb-2 text-left 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>
|
||||
</Box>
|
||||
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
|
||||
|
||||
<Text className="text-2xl text-gray-950">Opis ogloszenia</Text>
|
||||
<Text className="text-sm text-typography-700">
|
||||
{notice.description}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
|
||||
<Text className="text-sm text-typography-500">Uzytkownik:</Text>
|
||||
{isUserLoading ? (
|
||||
<ActivityIndicator />
|
||||
) : user ? (
|
||||
<>
|
||||
<Box className="mr-4">
|
||||
<Avatar size="md">
|
||||
<AvatarImage
|
||||
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
|
||||
<Text className="text-sm text-typography-500">Uzytkownik:</Text>
|
||||
{isUserLoading ? (
|
||||
<ActivityIndicator />
|
||||
) : user ? (
|
||||
<>
|
||||
<Box className="mr-4">
|
||||
<Avatar size="md">
|
||||
<AvatarImage
|
||||
source={{
|
||||
uri:
|
||||
user.image ||
|
||||
"https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain",
|
||||
user.image ||
|
||||
"https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain",
|
||||
}}
|
||||
alt="Zdjęcie profilowe"
|
||||
/>
|
||||
<AvatarFallbackText>
|
||||
{user.firstName?.[0]}
|
||||
{user.lastName?.[0]}
|
||||
</AvatarFallbackText>
|
||||
</Avatar>
|
||||
</Box>
|
||||
/>
|
||||
<AvatarFallbackText>
|
||||
{user.firstName?.[0]}
|
||||
{user.lastName?.[0]}
|
||||
</AvatarFallbackText>
|
||||
</Avatar>
|
||||
</Box>
|
||||
|
||||
<Box className="flex-1">
|
||||
<Text className="text-xl font-bold text-gray-950">
|
||||
{user.firstName} {user.lastName}
|
||||
</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ść
|
||||
<Box className="flex-1">
|
||||
<Text className="text-xl font-bold text-gray-950">
|
||||
{user.firstName} {user.lastName}
|
||||
</Text>
|
||||
</Pressable>
|
||||
<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>
|
||||
|
||||
<Button variant="outline" className="mt-2" onPress={() => router.replace(`/user/${notice.clientId}`)}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-2"
|
||||
onPress={() => router.replace(`/user/${notice.clientId}`)}
|
||||
>
|
||||
<ButtonText>
|
||||
Zobacz więcej ogłoszeń od {user.firstName}
|
||||
</ButtonText>
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
) : (
|
||||
<Text>Błąd podczas ładowania danych użytkownika</Text>
|
||||
)}
|
||||
</Box>
|
||||
</VStack>
|
||||
</ScrollView>
|
||||
{isMessageFormVisible && (
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
className="absolute inset-0 bg-black/50 justify-center items-center z-20"
|
||||
>
|
||||
<View className="bg-white p-4 rounded-lg w-4/5 max-h-4/5">
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
<Text className="text-lg font-bold mb-4">
|
||||
Wyślij wiadomość do {user?.firstName}
|
||||
</Text>
|
||||
</Box>
|
||||
</>
|
||||
) : (
|
||||
<Text>Błąd podczas ładowania danych użytkownika</Text>
|
||||
)}
|
||||
</Box>
|
||||
</VStack>
|
||||
</ScrollView>
|
||||
{isMessageFormVisible && (
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
className="absolute inset-0 bg-black/50 justify-center items-center z-20"
|
||||
>
|
||||
<View className="bg-white p-4 rounded-lg w-4/5 max-h-4/5">
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
<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">Temat:</Text>
|
||||
<Text className="bg-gray-100 p-3 rounded text-gray-500">
|
||||
Zapytanie o ogłoszenie '{notice.title || "Brak nazwy ogłoszenia"}'
|
||||
</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">Temat:</Text>
|
||||
<Text className="bg-gray-100 p-3 rounded text-gray-500">
|
||||
Zapytanie o ogłoszenie '
|
||||
{notice.title || "Brak nazwy ogłoszenia"}'
|
||||
</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}
|
||||
/>
|
||||
<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"
|
||||
disabled={isSending}
|
||||
>
|
||||
{isSending ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text className="text-white">Wyślij</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
)}
|
||||
</Card>
|
||||
</SafeAreaView>
|
||||
<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"
|
||||
disabled={isSending}
|
||||
>
|
||||
{isSending ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text className="text-white">Wyślij</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
)}
|
||||
</Card>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user