Merge remote-tracking branch 'origin/ScreenRotation'

ArtisanConnect/api/email.jsx

@@ -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 };
+    }
+};

ArtisanConnect/app.json

@@ -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": {

ArtisanConnect/app/(tabs)/dashboard/userNotices.jsx

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

ArtisanConnect/app/_layout.jsx

@@ -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 }}/>

ArtisanConnect/app/notice/[id].jsx

@@ -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";
-
+import * as ScreenOrientation from "expo-screen-orientation";
-const {width} = Dimensions.get("window");
+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 [isSending, setIsSending] = useState(false);
-    const handleSendMessage = () => {
-        console.log("Wiadomość do:", user?.email);
-        console.log("Email nadawcy:", Email);
-        console.log("Treść:", message);
 
+
+  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(() => {
+    if (!notice) {
-        const fetchUser = async () => {
+        return <Text>Nie znaleziono ogłoszenia</Text>;
-            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);
     }
-            }
-        };
 
     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">
+          <Box
-            <Stack.Screen
+              className={`h-auto w-full rounded-md ${
-                options={{
+                  isLandscape ? "h-screen" : "aspect-[1/1]"
-                    title: notice.title,
+              } bg-gray-100 items-center justify-center`}
-                }}
+          >
-            />
-            {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">
+    }
+
+    return (
+        <Box className={isLandscape ? "h-screen" : "sticky top-0 z-10 bg-white"}>
           <FlatList
               ref={flatListRef}
               data={images}
               horizontal
-                        snapToInterval={width}
+              snapToAlignment="center"
-                        snapToAlignment="start"
               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}
+                        source={{ uri: item }}
-                                    className="h-auto w-auto rounded-md aspect-[1/1]"
+                        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">
+            {renderImageSection()}
-                    <Text className="text-sm font-normal mb-2 text-typography-700">
+            <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-100 rounded-md p-2">
-                    <Box className="flex-row items-center  bg-gray-50 rounded-md p-2">
+                <Heading size="md" className="flex-1 text-lg">
-                        <Heading size="md" className="flex-1 text-xl text-gray-950">
+                  <Text className="text-sm text-gray-500">Cena: </Text>
-                            <Text className="text-sm text-typography-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">
+              <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:{" "}
-                            <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">
+              <Box className="mt-4 bg-gray-100 p-3 rounded-lg">
-                        <Text className="text-2xl text-gray-950">Opis ogloszenia</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 className="mt-4 bg-gray-100 p-3 rounded-lg">
-                    <Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
+                <Text className="text-sm text-gray-500">Użytkownik:</Text>
-                        <Text className="text-sm text-typography-500">Uzytkownik:</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>
+                  <Text className="text-sm font-medium mb-1">Temat:</Text>
-                        <TextInput
+                  <Text className="bg-gray-100 p-3 rounded text-gray-500">
-                            className="border border-gray-300 p-2 rounded"
+                    Zapytanie o ogłoszenie '{notice.title || "Brak nazwy ogłoszenia"}'
-                            placeholder="Wpisz swój adres e-mail"
+                  </Text>
-                            value={Email}
+                  <Text className="text-sm font-medium mb-1">Treść:</Text>
-                            onChangeText={setEmail}
-                        />
-
                   <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>
   );
 }

ArtisanConnect/app/user/_layout.jsx

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

ArtisanConnect/package-lock.json

@@ -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",

ArtisanConnect/package.json

@@ -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",