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

fix wishlist in notice screen

Browse Source
This commit is contained in:
Patryk
2025-06-07 23:15:22 +02:00
parent c19333ad8b
commit 612210a944
1 changed files with 309 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,23 +1,28 @@
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 {ActivityIndicator, Dimensions, FlatList, View, TextInput} from "react-native"; import {
import {useEffect, useState, useRef} from "react"; ActivityIndicator,
import {useNoticesStore} from "@/store/noticesStore"; Dimensions,
import {useWishlist} from "@/store/wishlistStore"; FlatList,
import {Pressable, ScrollView} from "react-native"; View,
import {getUserById} from "@/api/client"; TextInput,
} from "react-native";
const {width} = Dimensions.get("window"); import { useEffect, useState, useRef } from "react";
import { useNoticesStore } from "@/store/noticesStore";
import { useWishlist } from "@/store/wishlistStore";
import { Pressable, ScrollView } from "react-native";
import { getUserById } from "@/api/client";
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);
@@ -28,34 +33,35 @@ export default function NoticeDetails() {
const flatListRef = useRef(null); const flatListRef = useRef(null);
const [currentIndex, setCurrentIndex] = useState(0); const [currentIndex, setCurrentIndex] = useState(0);
const [isMessageFormVisible, setIsMessageFormVisible] = useState(false); const [isMessageFormVisible, setIsMessageFormVisible] = useState(false);
const [message, setMessage] = useState(''); const [message, setMessage] = useState("");
const [Email, setEmail] = useState(''); const [Email, setEmail] = useState("");
const handleSendMessage = () => { const handleSendMessage = () => {
console.log('Wiadomość do:', user?.email); console.log("Wiadomość do:", user?.email);
console.log('Email nadawcy:', Email); console.log("Email nadawcy:", Email);
console.log('Treść:', message); console.log("Treść:", message);
setIsMessageFormVisible(false); setIsMessageFormVisible(false);
setMessage(''); setMessage("");
setEmail(''); setEmail("");
}; };
const formatDate = (dateString) => { const formatDate = (dateString) => {
const date = new Date(dateString); const date = new Date(dateString);
return date.toLocaleDateString('pl-PL', { return date.toLocaleDateString("pl-PL", {
year: 'numeric', year: "numeric",
month: '2-digit', month: "2-digit",
day: '2-digit' day: "2-digit",
}); });
}; };
const {getNoticeById, getAllImagesByNoticeId} = useNoticesStore(); const { getNoticeById, getAllImagesByNoticeId } = useNoticesStore();
const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist); const toggleNoticeInWishlist = useWishlist(
const removeNoticeFromWishlist = useWishlist((state) => state.removeNoticeFromWishlist); (state) => state.toggleNoticeInWishlist
);
const isInWishlist = useWishlist((state) => const isInWishlist = useWishlist((state) =>
notice ? state.wishlistNotices.some((item) => item.noticeId === notice.noticeId) : 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) {
@@ -67,7 +73,6 @@ export default function NoticeDetails() {
itemVisiblePercentThreshold: 70, itemVisiblePercentThreshold: 70,
}).current; }).current;
useEffect(() => { useEffect(() => {
const fetchNotice = async () => { const fetchNotice = async () => {
setIsLoading(true); setIsLoading(true);
@@ -95,8 +100,11 @@ export default function NoticeDetails() {
if (notice) { if (notice) {
try { try {
const fetchedImages = await getAllImagesByNoticeId(notice.noticeId); const fetchedImages = await getAllImagesByNoticeId(notice.noticeId);
setImages(fetchedImages && fetchedImages.length > 0 ? fetchedImages : ["https://http.cat/404.jpg"]); setImages(
fetchedImages && fetchedImages.length > 0
? fetchedImages
: ["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("https://http.cat/404.jpg");
@@ -129,9 +137,8 @@ export default function NoticeDetails() {
fetchUser(); fetchUser();
}, [notice]); }, [notice]);
if (isLoading) { if (isLoading) {
return <ActivityIndicator/>; return <ActivityIndicator />;
} }
if (error) { if (error) {
@@ -183,7 +190,9 @@ export default function NoticeDetails() {
{images.map((_, index) => ( {images.map((_, index) => (
<Box <Box
key={index} key={index}
className={`w-2 h-2 rounded-full mx-1 ${index === currentIndex ? 'bg-primary-500' : 'bg-gray-300'}`} className={`w-2 h-2 rounded-full mx-1 ${
index === currentIndex ? "bg-primary-500" : "bg-gray-300"
}`}
/> />
))} ))}
</Box> </Box>
@@ -191,9 +200,7 @@ export default function NoticeDetails() {
</Box> </Box>
)} )}
<ScrollView <ScrollView showsVerticalScrollIndicator={false}>
showsVerticalScrollIndicator={false}
>
<VStack className="p-2"> <VStack className="p-2">
<Text className="text-sm font-normal mb-2 text-typography-700"> <Text className="text-sm font-normal mb-2 text-typography-700">
{formatDate(notice.publishDate)} {formatDate(notice.publishDate)}
@@ -210,11 +217,7 @@ export default function NoticeDetails() {
<Pressable <Pressable
onPress={() => { onPress={() => {
if (isInWishlist) { toggleNoticeInWishlist(id);
removeNoticeFromWishlist(notice.noticeId);
} else {
addNoticeToWishlist(notice);
}
}} }}
> >
<Ionicons <Ionicons
@@ -226,29 +229,30 @@ export default function NoticeDetails() {
</Box> </Box>
<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"> <Text className="text-sm text-typography-500">
Kategoria: <Text className="font-bold text-gray-950">{notice.category}</Text> Kategoria:{" "}
<Text className="font-bold text-gray-950">{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-50 p-3 rounded-lg shadow-sm">
<Text className="text-2xl text-gray-950"> <Text className="text-2xl text-gray-950">Opis ogloszenia</Text>
Opis ogloszenia
</Text>
<Text className="text-sm text-typography-700"> <Text className="text-sm text-typography-700">
{notice.description} {notice.description}
</Text> </Text>
</Box> </Box>
<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"> <Text className="text-sm text-typography-500">Uzytkownik:</Text>
Uzytkownik:
</Text>
{isUserLoading ? ( {isUserLoading ? (
<ActivityIndicator /> <ActivityIndicator />
) : user ? ( ) : user ? (
<> <>
<Box className="mr-4"> <Box className="mr-4">
<Image <Image
source={{ uri: user.profileImage || "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain" }} // Domyślny obraz, jeśli brak zdjęcia profilowego source={{
uri:
user.profileImage ||
"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" className="h-12 w-12 rounded-full"
alt="Zdjęcie profilowe" alt="Zdjęcie profilowe"
/> />
@@ -265,7 +269,9 @@ export default function NoticeDetails() {
onPress={() => setIsMessageFormVisible(true)} onPress={() => setIsMessageFormVisible(true)}
className="mt-3 bg-primary-500 py-2 px-4 rounded-md" className="mt-3 bg-primary-500 py-2 px-4 rounded-md"
> >
<Text className="text-white text-center font-bold">Wyślij wiadomość</Text> <Text className="text-white text-center font-bold">
Wyślij wiadomość
</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-xl p-3 font-bold text-center text-typography-700 mt-3">
@@ -277,15 +283,15 @@ export default function NoticeDetails() {
) : ( ) : (
<Text>Błąd podczas ładowania danych użytkownika</Text> <Text>Błąd podczas ładowania danych użytkownika</Text>
)} )}
</Box> </Box>
</VStack> </VStack>
</ScrollView> </ScrollView>
{isMessageFormVisible && ( {isMessageFormVisible && (
<View className="absolute inset-0 bg-black bg-opacity-50 justify-center items-center z-20"> <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"> <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-lg font-bold mb-4">
Wyślij wiadomość do {user?.firstName}
</Text>
<Text className="text-sm font-medium mb-1">Do:</Text> <Text className="text-sm font-medium mb-1">Do:</Text>
<Text className="bg-gray-100 p-3 rounded text-gray-500"> <Text className="bg-gray-100 p-3 rounded text-gray-500">
@@ -318,14 +324,14 @@ export default function NoticeDetails() {
<Pressable <Pressable
onPress={handleSendMessage} onPress={handleSendMessage}
className="bg-primary-500 py-2 px-4 rounded-md"> className="bg-primary-500 py-2 px-4 rounded-md"
>
<Text className="text-white">Wyślij</Text> <Text className="text-white">Wyślij</Text>
</Pressable> </Pressable>
</View> </View>
</View> </View>
</View> </View>
)} )}
</Card> </Card>
); );
} }