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

src/pages/UserList/UserList.jsx
65 строк2 KB
mike.r
learn(styled.emotion): стилизация, доработки, структура
06 май 2026, 16:24
06 май 2026, 16:24146d71e
import { useCallback, useMemo, useRef } from "react";
import { Link } from "react-router-dom";
import { useGetUsersQuery, useUpdateUserStatusMutation } from "@store/userApi.js";
import UserCard from "@components/UserCard/UserCard.jsx";
import { Container, UserButton, ScrollButton, UserItem, LoadingText, ErrorText } from "@pages/UserList/UserList.styles.js";

function UserList() {
    const { data: users, isLoading, isError } = useGetUsersQuery();
    const [updateUserStatus] = useUpdateUserStatusMutation();
    const topRef = useRef(null);

    const handleToggleOnline = useCallback(async (user) => {
        await updateUserStatus({
            id: user.id,
            isOnline: !user.isOnline
        });
    }, [updateUserStatus]);

    const sortedUsers = useMemo(() => {
        if (!users) return [];
        return [...users].sort((a, b) => a.name.localeCompare(b.name));
    }, [users]);

    const scrollToTop = useCallback(() => {
        topRef.current?.scrollIntoView({behavior: "smooth"});
    });

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

    if (isLoading) {
        return <LoadingText>Загрузка пользователей...</LoadingText>
    }

    return (
        <>
            <div ref={topRef} />
            <Container>
                {sortedUsers.map(user => (
                    <UserItem key={user.id}>
                        <Link to={`/users/${user.id}`}>
                            <UserCard name={user.name} isOnline={user.isOnline} />
                        </Link>
                        <UserButton
                            type={"button"}
                            onClick={() => handleToggleOnline(user)}
                        >
                            Переключение статуса
                        </UserButton>
                    </UserItem>
                ))}

                <ScrollButton
                    type="button"
                    onClick={scrollToTop}
                >
                    ↑ Наверх
                </ScrollButton>
            </Container>
        </>
    )
}

export default UserList;