Files
ArtisanConnectFrontend/ArtisanConnect/app/(tabs)/dashboard/account.jsx
2025-06-08 09:37:50 +02:00

106 lines
3.5 KiB
JavaScript

import { Link } from "expo-router";
import { Pressable } from "react-native";
import { Box } from "@/components/ui/box";
import { Text } from "@/components/ui/text";
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 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>
</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>
<Pressable
className="border border-[#002f34] rounded-md py-2 px-4 self-start"
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">
<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>
);
}