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

Merge remote-tracking branch 'origin/ScreenRotation'

Browse Source
This commit is contained in:
Patryk
2025-06-09 21:21:15 +02:00
parent c2d4f5fb79 7ec883100f
commit a51345fd93
9 changed files with 467 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
ArtisanConnect/api/email.jsx Normal file
View File

@@ -0,0 +1,30 @@
import { useAuthStore } from "@/store/authStore";
const API_URL = "https://hopp.zikor.pl/api/v1";
export const sendEmail = async (emailData) => {
const token = useAuthStore.getState().token;
try {
const response = await fetch(`${API_URL}/email/send`, {
method: "POST",
headers: {
"Content-Type": "application/json",
...(token && { Authorization: `Bearer ${token}` }),
},
body: JSON.stringify(emailData),
});
if (!response.ok) {
const errorMessage = `HTTP error! Status: ${response.status}`;
console.error("Error przy wysyłaniu maila", errorMessage);
return { success: false, error: errorMessage };
}
const result = await response.text();
return { success: true, result };
} catch (error) {
console.error("Error przy wysyłaniu maila:", error.message);
return { success: false, error: error.message };
}
};

2
ArtisanConnect/app.json
View File

@@ -5,7 +5,7 @@
"scheme": "com.hamx.artisanconnect",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"icon": "./assets/AppIco.png",
"userInterfaceStyle": "light",
"newArchEnabled": true,
"splash": {

2
ArtisanConnect/app/(tabs)/dashboard/userNotices.jsx
View File

@@ -63,7 +63,7 @@ export default function UserNotices() {
}
};
loadNotices();
}, []);
}, [fetchNotices]);
const showNewToast = (title) => {
const newId = Math.random();

1
ArtisanConnect/app/_layout.jsx
View File

@@ -17,6 +17,7 @@ return (
}}
>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="user" options={{ headerShown: false }} />
<Stack.Screen
name="(auth)/login"
options={{ headerShown: false }}/>

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

@@ -5,6 +5,7 @@ import {Heading} from "@/components/ui/heading";
import { Image } from "@/components/ui/image";
import { Text } from "@/components/ui/text";
import { VStack } from "@/components/ui/vstack";
import { Avatar, AvatarImage, AvatarFallbackText } from "@gluestack-ui/themed";
import { Ionicons } from "@expo/vector-icons";
import {
ActivityIndicator,
@@ -12,14 +13,16 @@ import {
FlatList,
View,
TextInput,
SafeAreaView, Alert,
} from "react-native";
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");
import * as ScreenOrientation from "expo-screen-orientation";
import { useAuthStore } from "@/store/authStore";
import { sendEmail } from "@/api/email";
export default function NoticeDetails() {
const { id } = useLocalSearchParams();
@@ -30,20 +33,74 @@ export default function NoticeDetails() {
const [notice, setNotice] = useState(null);
const [user, setUser] = useState(null);
const [isUserLoading, setIsUserLoading] = useState(true);
const [isLandscape, setIsLandscape] = useState(false);
const flatListRef = useRef(null);
const [currentIndex, setCurrentIndex] = useState(0);
const [isMessageFormVisible, setIsMessageFormVisible] = useState(false);
const [message, setMessage] = useState("");
const [Email, setEmail] = useState("");
const handleSendMessage = () => {
console.log("Wiadomość do:", user?.email);
console.log("Email nadawcy:", Email);
console.log("Treść:", message);
const [isSending, setIsSending] = useState(false);
const handleSendMessage = async () => {
setIsSending(true);
console.log("Rozpoczynanie procesu wysyłania wiadomości...");
const { user_id, token } = useAuthStore.getState();
console.log("Dane z authStore:", { user_id, token });
if (!user_id || !token) {
console.error("Brak danych zalogowanego użytkownika.");
Alert.alert("Błąd", "Zaloguj się, aby wysłać wiadomość.");
setIsSending(false);
return;
}
let currentUserEmail = "";
try {
console.log(`Pobieranie danych użytkownika dla user_id: ${user_id}`);
const currentUser = await getUserById(user_id);
console.log("Dane zalogowanego użytkownika:", currentUser);
currentUserEmail = currentUser?.email;
if (!currentUserEmail) {
console.error("Nie znaleziono adresu email zalogowanego użytkownika.");
Alert.alert("Błąd", "Nie znaleziono adresu email zalogowanego użytkownika.");
setIsSending(false);
return;
}
console.log(`Pobrano email zalogowanego użytkownika: ${currentUserEmail}`);
} catch (error) {
console.error("Błąd podczas pobierania danych użytkownika:", error);
Alert.alert("Błąd", "Nie udało się pobrać danych użytkownika. Spróbuj ponownie później.");
setIsSending(false);
return;
}
const emailData = {
to: user?.email || "",
subject: `Zapytanie ${currentUserEmail} o ogłoszenie ${notice.title}`,
body: message,
};
console.log("Dane emaila do wysyłki:", emailData);
if (!emailData.to || !emailData.subject || !emailData.body) {
console.error("Walidacja nieudana: brakujące pola w emailData.");
Alert.alert("Błąd", "Wszystkie pola są wymagane!");
setIsSending(false);
return;
}
const result = await sendEmail(emailData);
if (result.success) {
console.log("Wiadomość wysłana pomyślnie!", result.result);
setIsMessageFormVisible(false);
setMessage("");
setEmail("");
Alert.alert("Sukces", "Wiadomość została wysłana!");
} else {
console.error("Błąd podczas wysyłania wiadomości:", result.error);
Alert.alert("Błąd", `Nie udało się wysłać wiadomości: ${result.error}`);
}
setIsSending(false);
console.log("Zakończono proces wysyłania wiadomości.");
};
const formatDate = (dateString) => {
@@ -61,18 +118,63 @@ export default function NoticeDetails() {
);
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 }) => {
if (viewableItems.length > 0) {
setCurrentIndex(viewableItems[0].index);
}
}).current;
const viewabilityConfig = useRef({
itemVisiblePercentThreshold: 70,
}).current;
useEffect(() => {
const unlockOrientation = async () => {
try {
await ScreenOrientation.unlockAsync();
} catch (err) {
console.error("Error unlocking orientation:", err);
}
};
const getInitialOrientation = async () => {
try {
const orientation = await ScreenOrientation.getOrientationAsync();
setIsLandscape(
orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT
);
} catch (err) {
console.error("Error getting initial orientation:", err);
}
};
unlockOrientation();
getInitialOrientation();
const subscription = ScreenOrientation.addOrientationChangeListener(
({ orientationInfo }) => {
const isLandscapeMode =
orientationInfo.orientation ===
ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
orientationInfo.orientation ===
ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
setIsLandscape(isLandscapeMode);
}
);
return () => {
ScreenOrientation.removeOrientationChangeListener(subscription);
ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.PORTRAIT_UP
).catch((err) =>
console.error("Error locking orientation on unmount:", err)
);
};
}, []);
useEffect(() => {
const fetchNotice = async () => {
setIsLoading(true);
@@ -100,14 +202,15 @@ export default function NoticeDetails() {
if (notice) {
try {
const fetchedImages = await getAllImagesByNoticeId(notice.noticeId);
console.log("Fetched images:", fetchedImages);
setImages(
fetchedImages && fetchedImages.length > 0
? fetchedImages
: {uri: "https://http.cat/404.jpg"}
: ["https://http.cat/404.jpg"]
);
} catch (err) {
console.error("Error while loading images:", err);
setImage({uri: "https://http.cat/404.jpg"});
setImages(["https://http.cat/404.jpg"]);
} finally {
setIsImageLoading(false);
}
@@ -117,22 +220,10 @@ export default function NoticeDetails() {
if (notice) {
fetchImage();
}
}, [notice]);
useEffect(() => {
const fetchUser = async () => {
if (notice && notice.clientId) {
setIsUserLoading(true);
try {
const userData = await getUserById(notice.clientId);
setUser(userData);
} catch (err) {
console.error("Nie udało się pobrać danych użytkownika:", err);
} finally {
setIsUserLoading(false);
if (!notice) {
return <Text>Nie znaleziono ogłoszenia</Text>;
}
}
};
fetchUser();
}, [notice]);
@@ -142,80 +233,91 @@ export default function NoticeDetails() {
}
if (error) {
return <Text>Błąd, spróbuj ponownie póżniej: {error.message}</Text>;
return <Text>Błąd, spróbuj ponownie później: {error.message}</Text>;
}
if (!notice) {
return <Text>Nie znaleziono ogłoszenia</Text>;
}
const renderImageSection = () => {
if (isImageLoading) {
return (
<Card className="p-0 rounded-lg m-3 flex-1">
<Stack.Screen
options={{
title: notice.title,
}}
/>
{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 ${
isLandscape ? "h-screen" : "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">
);
}
return (
<Box className={isLandscape ? "h-screen" : "sticky top-0 z-10 bg-white"}>
<FlatList
ref={flatListRef}
data={images}
horizontal
snapToInterval={width}
snapToAlignment="start"
snapToAlignment="center"
decelerationRate="fast"
showsHorizontalScrollIndicator={false}
pagingEnabled
onViewableItemsChanged={onViewableItemsChanged}
viewabilityConfig={viewabilityConfig}
renderItem={({ item, index }) => (
<View style={{width: width}} className="p-1">
<View style={{ width: Dimensions.get("window").width }}>
<Image
source={item}
className="h-auto w-auto rounded-md aspect-[1/1]"
source={{ uri: item }}
className={`h-auto w-full rounded-md ${
isLandscape ? "h-full" : "aspect-square"
}`}
alt={`Zdjęcie ${index + 1}`}
resizeMode="cover"
resizeMode={isLandscape ? "cover" : "contain"}
onError={(e) => console.error("Image load error:", e.nativeEvent.error)}
/>
</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"
index === currentIndex ? "bg-primary-500" : "bg-gray-500"}
}`}
/>
))}
</Box>
)}
</Box>
)}
);
};
return (
<SafeAreaView style={{ flex: 1 }}>
<Card className="flex-1 p-4 m-3 rounded-lg shadow-sm">
<Stack.Screen
options={{
title: notice.title,
}}
/>
<ScrollView showsVerticalScrollIndicator={false}>
<VStack className="p-2">
<Text className="text-sm font-normal mb-2 text-typography-700">
{renderImageSection()}
<VStack className="p-4">
<Text className="text-sm font-normal mb-2 text-gray-600">
{formatDate(notice.publishDate)}
</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}
</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>
<Box className="flex-row items-center bg-gray-100 rounded-md p-2">
<Heading size="md" className="flex-1 text-lg">
<Text className="text-sm text-gray-500">Cena: </Text>
{notice.price} zł
</Heading>
<Pressable
onPress={() => {
toggleNoticeInWishlist(id);
@@ -224,58 +326,59 @@ export default function NoticeDetails() {
<Ionicons
name={isInWishlist ? "heart" : "heart-outline"}
size={24}
color={"primary-heading-500"}
color="#3b82f6"
/>
</Pressable>
</Box>
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
<Text className="text-sm text-typography-500">
<Box className="mt-4 bg-gray-100 p-3 rounded-lg">
<Text className="text-sm text-gray-500">
Kategoria:{" "}
<Text className="font-bold text-gray-950">{notice.category}</Text>
<Text className="font-bold text-gray-900">{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 className="mt-4 bg-gray-100 p-3 rounded-lg">
<Text className="text-xl font-bold text-gray-900">Opis ogłoszenia</Text>
<Text className="text-sm text-gray-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>
<Box className="mt-4 bg-gray-100 p-3 rounded-lg">
<Text className="text-sm text-gray-500">Użytkownik:</Text>
{isUserLoading ? (
<ActivityIndicator />
) : user ? (
<>
<Box className="mr-4">
<Image
<Avatar size="md">
<AvatarImage
source={{
uri:
user.profileImage ||
user.image ||
"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"
/>
<AvatarFallbackText>
{user.firstName?.[0]}
{user.lastName?.[0]}
</AvatarFallbackText>
</Avatar>
</Box>
<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}
</Text>
<Text className="text-sm text-typography-700">
<Text className="text-sm text-gray-700">
Email: {user.email}
</Text>
<Pressable
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">
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">
<Text className="text-lg font-bold text-center text-blue-600 mt-3">
Zobacz więcej ogłoszeń od {user.firstName}
</Text>
</Link>
@@ -293,19 +396,15 @@ export default function NoticeDetails() {
<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"
placeholder="Wpisz swój adres e-mail"
value={Email}
onChangeText={setEmail}
/>
<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">Treść:</Text>
<TextInput
className="border border-gray-300 rounded-md p-2 mb-4 h-32 text-left"
multiline
@@ -314,7 +413,6 @@ export default function NoticeDetails() {
value={message}
onChangeText={setMessage}
/>
<View className="flex-row justify-end space-x-2">
<Pressable
onPress={() => setIsMessageFormVisible(false)}
@@ -322,17 +420,22 @@ export default function NoticeDetails() {
>
<Text className="text-gray-800">Anuluj</Text>
</Pressable>
<Pressable
onPress={handleSendMessage}
className="bg-primary-500 py-2 px-4 rounded-md"
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>
</View>
</View>
)}
</Card>
</SafeAreaView>
);
}

11
ArtisanConnect/app/user/_layout.jsx Normal file
View File

@@ -0,0 +1,11 @@
import { Stack } from 'expo-router';
export default function UserLayout() {
return (
<Stack
screenOptions={{
headerTitle: 'Ogłoszenia użytkownika',
}}
/>
);
}

BIN
ArtisanConnect/assets/AppIco.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 304 KiB

11
ArtisanConnect/package-lock.json generated
View File

@@ -43,6 +43,7 @@
"expo-image-picker": "~16.1.4",
"expo-linking": "~7.1.4",
"expo-router": "~5.0.5",
"expo-screen-orientation": "~8.1.7",
"expo-status-bar": "~2.2.3",
"expo-web-browser": "~14.1.6",
"form-data": "^4.0.2",
@@ -7012,6 +7013,16 @@
"node": ">=10"
}
},
"node_modules/expo-screen-orientation": {
"version": "8.1.7",
"resolved": "https://registry.npmjs.org/expo-screen-orientation/-/expo-screen-orientation-8.1.7.tgz",
"integrity": "sha512-nYwadYtdU6mMDk0MCHMPPPQtBoeFYJ2FspLRW+J35CMLqzE4nbpwGeiImfXzkvD94fpOCfI4KgLj5vGauC3pfA==",
"license": "MIT",
"peerDependencies": {
"expo": "*",
"react-native": "*"
}
},
"node_modules/expo-status-bar": {
"version": "2.2.3",
"license": "MIT",

3
ArtisanConnect/package.json
View File

@@ -62,7 +62,8 @@
"react-native-svg": "15.11.2",
"react-native-web": "~0.20.0",
"tailwindcss": "^3.4.17",
"zustand": "^5.0.3"
"zustand": "^5.0.3",
"expo-screen-orientation": "~8.1.7"
},
"devDependencies": {
"@babel/core": "^7.20.0",