Added ScreenRotation to notice and updated userNotices

2025-06-08 17:22:02 +02:00
parent dbf07cea0a
commit 1d3cbeef3a
4 changed files with 876 additions and 238 deletions
--- a/ArtisanConnect/app/(tabs)/dashboard/userNotices.jsx
+++ b/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)
--- a/ArtisanConnect/app/notice/[id].jsx
+++ b/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";
-
-const { width } = Dimensions.get("window");
+import * as ScreenOrientation from "expo-screen-orientation";

 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);
@@ -57,12 +57,13 @@ export default function NoticeDetails() {

  const { getNoticeById, getAllImagesByNoticeId } = useNoticesStore();
  const toggleNoticeInWishlist = useWishlist(
-    (state) => state.toggleNoticeInWishlist
+      (state) => state.toggleNoticeInWishlist
  );

  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);
@@ -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);
@@ -101,13 +148,13 @@ export default function NoticeDetails() {
        try {
          const fetchedImages = await getAllImagesByNoticeId(notice.noticeId);
          setImages(
-            fetchedImages && fetchedImages.length > 0
-              ? fetchedImages
-              : ["https://http.cat/404.jpg"]
+              fetchedImages && fetchedImages.length > 0
+                  ? fetchedImages
+                  : ["https://http.cat/404.jpg"]
          );
        } 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,196 +189,200 @@ 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>;
  }

-  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">
-          <ActivityIndicator size="large" color="#3b82f6" />
-        </Box>
-      ) : (
-        <Box className="sticky top-0 z-10 bg-white">
-          <FlatList
-            ref={flatListRef}
-            data={images}
-            horizontal
-            snapToAlignment="center"
-            decelerationRate="fast"
-            showsHorizontalScrollIndicator={false}
-            pagingEnabled
-            onViewableItemsChanged={onViewableItemsChanged}
-            viewabilityConfig={viewabilityConfig}
-            renderItem={({ item, index }) => (
-              <View style={{ width: width }}>
-                <Image
-                  source={{ uri: item }}
-                  className="h-auto w-full rounded-md aspect-square"
-                  alt={`Zdjęcie ${index + 1}`}
-                  resizeMode="contain"
-                />
-              </View>
-            )}
-            keyExtractor={(item, index) => index.toString()}
-          />
+  const renderImageSection = () => {
+    if (isImageLoading) {
+      return (
+          <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>
+      );
+    }

+    return (
+        <Box className={isLandscape ? "h-screen" : "sticky top-0 z-10 bg-white"}>
+          <FlatList
+              ref={flatListRef}
+              data={images}
+              horizontal
+              snapToAlignment="center"
+              decelerationRate="fast"
+              showsHorizontalScrollIndicator={false}
+              pagingEnabled
+              onViewableItemsChanged={onViewableItemsChanged}
+              viewabilityConfig={viewabilityConfig}
+              renderItem={({ item, index }) => (
+                  <View style={{ width: Dimensions.get("window").width }}>
+                    <Image
+                        source={{ uri: item }}
+                        className={`h-auto w-full rounded-md ${
+                            isLandscape ? "h-full" : "aspect-square"
+                        }`}
+                        alt={`Zdjęcie ${index + 1}`}
+                        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>
+              <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>
          )}
        </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-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);
-              }}
-            >
-              <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>
+  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)}
            </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 className="text-2xl text-gray-950 font-bold mb-2 text-center bg-gray-50 rounded-md p-2">
+              {notice.title}
            </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">
-                  <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
-                    className="h-12 w-12 rounded-full"
-                    alt="Zdjęcie profilowe"
-                  />
-                </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>
+            <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 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">Użytkownik:</Text>
+              {isUserLoading ? (
+                  <ActivityIndicator />
+              ) : user ? (
+                  <>
+                    <Box className="mr-4">
+                      <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
+                          className="h-12 w-12 rounded-full"
+                          alt="Zdjęcie profilowe"
+                      />
+                    </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ść
+                        </Text>
+                      </Pressable>
+                      <Link href={`/user/${notice.clientId}`}>
+                        <Text className="text-xl p-3 font-bold text-center text-typography-700 mt-3">
+                          Zobacz więcej ogłoszeń od {user.firstName}
+                        </Text>
+                      </Link>
+                    </Box>
+                  </>
+              ) : (
+                  <Text>Błąd podczas ładowania danych użytkownika</Text>
+              )}
+            </Box>
+          </VStack>
+        </ScrollView>
+        {isMessageFormVisible && (
+            <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">
+                <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}
+                />
+                <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(true)}
-                    className="mt-3 bg-primary-500 py-2 px-4 rounded-md"
+                      onPress={() => setIsMessageFormVisible(false)}
+                      className="bg-gray-300 py-2 px-4 rounded-md"
                  >
-                    <Text className="text-white text-center font-bold">
-                      Wyślij wiadomość
-                    </Text>
+                    <Text className="text-gray-800">Anuluj</Text>
                  </Pressable>
-                  <Link href={`/user/${notice.clientId}`}>
-                    <Text className="text-xl p-3 font-bold text-center text-typography-700 mt-3">
-                      Zobacz więcej ogłoszeń od {user.firstName}
-                    </Text>
-                  </Link>
-                </Box>
-              </>
-            ) : (
-              <Text>Błąd podczas ładowania danych użytkownika</Text>
-            )}
-          </Box>
-        </VStack>
-      </ScrollView>
-      {isMessageFormVisible && (
-        <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">
-            <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}
-            />
-
-            <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-primary-500 py-2 px-4 rounded-md"
-              >
-                <Text className="text-white">Wyślij</Text>
-              </Pressable>
+                  <Pressable
+                      onPress={handleSendMessage}
+                      className="bg-primary-500 py-2 px-4 rounded-md"
+                  >
+                    <Text className="text-white">Wyślij</Text>
+                  </Pressable>
+                </View>
+              </View>
            </View>
-          </View>
-        </View>
-      )}
-    </Card>
+        )}
+      </Card>
  );
-}
+}
--- a/ArtisanConnect/package-lock.json
+++ b/ArtisanConnect/package-lock.json
--- a/ArtisanConnect/package.json
+++ b/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",