Added ScreenRotation to notice and updated userNotices

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

@@ -6,11 +6,12 @@ import { Text } from "@/components/ui/text";
 import { VStack } from "@/components/ui/vstack";
 import { ActivityIndicator, FlatList } from "react-native";
 import { useEffect, useState } from "react";
+import {useAuthStore} from "@/store/authStore";
 
 export default function UserNotices() {
   const { notices, fetchNotices } = useNoticesStore();
+  const currentUserId = useAuthStore((state) => state.user_id);
   const [isLoading, setIsLoading] = useState(true);
-  const currentUserId = 1; // Tymczasowo, do czasu zaimplementowania logowania bo nie moge pobrac usera
 
   useEffect(() => {
     const loadNotices = async () => {
@@ -24,7 +25,7 @@ export default function UserNotices() {
       }
     };
     loadNotices();
-  }, []);
+  }, [fetchNotices]);
 
   const userNotices = notices
     .filter((notice) => notice.clientId === currentUserId)

ArtisanConnect/app/notice/[id].jsx

@@ -18,8 +18,7 @@ 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");
 
 export default function NoticeDetails() {
   const { id } = useLocalSearchParams();
@@ -30,12 +29,13 @@ 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);
@@ -63,6 +63,7 @@ export default function NoticeDetails() {
   const isInWishlist = useWishlist((state) =>
       id ? state.wishlistNotices.some((item) => item.noticeId == id) : false
   );
+
   const onViewableItemsChanged = useRef(({ viewableItems }) => {
     if (viewableItems.length > 0) {
       setCurrentIndex(viewableItems[0].index);
@@ -73,6 +74,52 @@ export default function NoticeDetails() {
     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();
+
+    // Listen for orientation changes
+    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);
@@ -107,7 +154,7 @@ export default function NoticeDetails() {
           );
         } catch (err) {
           console.error("Error while loading images:", err);
-          setImage("https://http.cat/404.jpg");
+          setImages(["https://http.cat/404.jpg"]);
         } finally {
           setIsImageLoading(false);
         }
@@ -142,26 +189,28 @@ 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}
@@ -173,18 +222,19 @@ export default function NoticeDetails() {
               onViewableItemsChanged={onViewableItemsChanged}
               viewabilityConfig={viewabilityConfig}
               renderItem={({ item, index }) => (
-              <View style={{ width: width }}>
+                  <View style={{ width: Dimensions.get("window").width }}>
                     <Image
                         source={{ uri: item }}
-                  className="h-auto w-full rounded-md aspect-square"
+                        className={`h-auto w-full rounded-md ${
+                            isLandscape ? "h-full" : "aspect-square"
+                        }`}
                         alt={`Zdjęcie ${index + 1}`}
-                  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) => (
@@ -198,9 +248,18 @@ export default function NoticeDetails() {
               </Box>
           )}
         </Box>
-      )}
+    );
+  };
 
+  return (
+      <Card className="p-0 rounded-lg m-3 flex-1">
+        <Stack.Screen
+            options={{
+              title: notice.title,
+            }}
+        />
         <ScrollView showsVerticalScrollIndicator={false}>
+          {renderImageSection()}
           <VStack className="p-2">
             <Text className="text-sm font-normal mb-2 text-typography-700">
               {formatDate(notice.publishDate)}
@@ -208,13 +267,11 @@ export default function NoticeDetails() {
             <Text className="text-2xl text-gray-950 font-bold mb-2 text-center 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);
@@ -234,14 +291,13 @@ export default function NoticeDetails() {
               </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-2xl text-gray-950">Opis ogłoszenia</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>
+              <Text className="text-sm text-typography-500">Użytkownik:</Text>
               {isUserLoading ? (
                   <ActivityIndicator />
               ) : user ? (
@@ -257,7 +313,6 @@ export default function NoticeDetails() {
                           alt="Zdjęcie profilowe"
                       />
                     </Box>
-
                     <Box className="flex-1">
                       <Text className="text-xl font-bold text-gray-950">
                         {user.firstName} {user.lastName}
@@ -292,7 +347,6 @@ 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"}
@@ -304,7 +358,6 @@ export default function NoticeDetails() {
                     value={Email}
                     onChangeText={setEmail}
                 />
-
                 <TextInput
                     className="border border-gray-300 rounded-md p-2 mb-4 h-32 text-left"
                     multiline
@@ -313,7 +366,6 @@ export default function NoticeDetails() {
                     value={message}
                     onChangeText={setMessage}
                 />
-
                 <View className="flex-row justify-end space-x-2">
                   <Pressable
                       onPress={() => setIsMessageFormVisible(false)}
@@ -321,7 +373,6 @@ 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"

ArtisanConnect/package.json

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