Merge remote-tracking branch 'origin/notice_apperance' into integrateWithAuth

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

@@ -1,16 +1,105 @@
+import { Link } from "expo-router";
+import { Pressable } from "react-native";
+import { Box } from "@/components/ui/box";
 import { Text } from "@/components/ui/text";
-import { View } from "react-native";
-import { Button, ButtonText } from "@gluestack-ui/themed";
-import { useAuthStore } from "@/store/authStore";
+import { VStack } from "@/components/ui/vstack";
+import { Image } from "@/components/ui/image";
+import { ActivityIndicator } from "react-native";
+import { useEffect, useState } from "react";
+import { getUserById } from "@/api/client";
+import { HStack } from "@gluestack-ui/themed";
 
-export default function User() {
-  const signOut = useAuthStore((state) => state.signOut);
-  
-  return (<View>
-  <Text>Użytkownik</Text>
-  <Button onPress={signOut}>
-      <ButtonText>Wyloguj się</ButtonText>
-    </Button>
-  </View>
-  )
+export default function Account() {
+  const [user, setUser] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const currentUserId = 2; // Tymczasowo, do czasu zaimplementowania logowania bo nie moge pobrac usera
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      setIsLoading(true);
+      try {
+        const userData = await getUserById(currentUserId);
+        setUser(userData);
+      } catch (err) {
+        console.error("Błąd podczas pobierania danych użytkownika:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchUser();
+  }, []);
+
+  if (isLoading) {
+    return <ActivityIndicator />;
+  }
+
+  if (!user) {
+    return <Text>Nie udało się pobrać danych użytkownika.</Text>;
+  }
+
+  return (
+    <VStack className="bg-gray-50 flex-1">
+      <Box className="bg-white pb-6 shadow-sm">
+        <Box className="items-center pt-6 mb-4">
+          <Image
+            source={{
+              uri:
+                user.profileImage ||
+                "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain",
+            }}
+            className="h-24 w-24 rounded-full border-4 border-white shadow-md"
+            alt="Zdjęcie profilowe"
+          />
+        </Box>
+
+        <Text className="text-2xl font-bold text-center mb-1">
+          {user.firstName} {user.lastName}
+        </Text>
+
+        <Pressable
+          className="border border-[#002f34] rounded-md py-2 px-4 self-center"
+          onPress={() => console.log("Edytuj dane użytkownika")}
+        >
+          <Text className="text-[#002f34] font-medium">Edytuj profil</Text>
+        </Pressable>
+      </Box>
+
+      <Box className="bg-white mt-4 p-5 border-t border-b border-gray-200">
+        <Text className="font-bold text-lg mb-3">Moje dane</Text>
+
+        <HStack className="mb-3">
+          <Text className="text-gray-600 w-24">E-mail</Text>
+          <Text className="flex-1">{user.email || "brak danych"}</Text>
+        </HStack>
+      </Box>
+
+      <Box className="bg-white mt-4 p-5">
+        <Text className="font-bold text-lg mb-3">Moje konto</Text>
+
+        <Link href="/dashboard/userNotices" asChild>
+          <Pressable className="py-3 flex-row items-center border-b border-gray-100">
+            <Text className="text-lg flex-1">Moje ogłoszenia</Text>
+            <Text>▶</Text>
+          </Pressable>
+        </Link>
+
+        {/*Tak dodałem, można zmienić na coś innego*/}
+        <Link href="/dashboard/userPaymentHistory" asChild>
+          <Pressable className="py-3 flex-row items-center border-b border-gray-100">
+            <Text className="text-lg flex-1">Historia płatności</Text>
+            <Text>▶</Text>
+          </Pressable>
+        </Link>
+
+        <Pressable className="py-3 flex-row items-center">
+          <Text className="text-lg flex-1">Ustawienia powiadomień</Text>
+          <Text>▶</Text>
+        </Pressable>
+      </Box>
+
+      <Pressable className="mt-8 mx-5 p-4 bg-white rounded-md items-center shadow-sm">
+        <Text className="text-red-500 font-medium">Wyloguj się</Text>
+      </Pressable>
+    </VStack>
+  );
 }