src/pages/UserProfile/UserProfile.jsx - master - hey_yo/Notebook

src/pages/UserProfile/UserProfile.jsx
77 строк2 KB
mike.r
learn(styled.emotion): стилизация, доработки, структура
06 май 2026, 16:24
06 май 2026, 16:24146d71e
import { useParams, useNavigate } from "react-router-dom";
import {useGetUsersQuery} from "@store/userApi.js";
import {
    Container,
    Card,
    Avatar,
    Name,
    Status,
    Detail,
    DetailRow,
    DetailValue,
    DetailLabel,
    BackButton,
    LoadingText,
    ErrorText
} from "@pages/UserProfile/UserProfile.styles.js";
import {useCallback} from "react";

function UserProfile() {
    const {id} = useParams();
    const navigate = useNavigate();
    const { data: users, isLoading, isError } = useGetUsersQuery();
    const handleBack = () => navigate('/users');

    const user = users?.find(u => u.id === id);

    if (isError) {
        return <ErrorText>Не удалось загрузить данные</ErrorText>;
    }

    if (isLoading) {
        return <LoadingText>Загрузка профиля...</LoadingText>;
    }

    if (!user) {
        return <ErrorText>Пользователь не найден</ErrorText>;
    }

    return (
        <Container>
            <Card>
                <Avatar>
                    {user.name.charAt(0).toUpperCase()}
                </Avatar>
                <Name>{user.name}</Name>
                <Status isOnline={user.isOnline}>
                    {user.isOnline ? '● Онлайн' : '○ Офлайн'}
                </Status>

                <Detail>
                    <DetailRow>
                        <DetailLabel>ID пользователя</DetailLabel>
                        <DetailValue>{user.id}</DetailValue>
                    </DetailRow>
                    <DetailRow>
                        <DetailLabel>Имя</DetailLabel>
                        <DetailValue>{user.name}</DetailValue>
                    </DetailRow>
                    <DetailRow>
                        <DetailLabel>Email</DetailLabel>
                        <DetailValue>{user.email || 'не указан'}</DetailValue>
                    </DetailRow>
                    <DetailRow>
                        <DetailLabel>Телефон</DetailLabel>
                        <DetailValue>{user.phone || 'не указан'}</DetailValue>
                    </DetailRow>
                </Detail>

                <BackButton onClick={handleBack}>
                    ← Назад к списку
                </BackButton>
            </Card>
        </Container>
    );
}

export default UserProfile;