amap/frontend/src/pages/Users/index.tsx

import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
import { t } from "@/config/i18n";
import { useCreateUser, useEditUser, useGetUser, useGetUsers } from "@/services/api";
import { IconPlus } from "@tabler/icons-react";
import UserRow from "@/components/Users/Row";
import { useLocation, useNavigate, useSearchParams } from "react-router";
import { UserModal } from "@/components/Users/Modal";
import { useCallback, useMemo } from "react";
import { type User, type UserInputs } from "@/services/resources/users";
import UsersFilters from "@/components/Users/Filter";

export default function Users() {
    const [searchParams, setSearchParams] = useSearchParams();
    const location = useLocation();
    const navigate = useNavigate();

    const isCreate = location.pathname === "/dashboard/users/create";
    const isEdit = location.pathname.includes("/edit");

    const editId = useMemo(() => {
        if (isEdit) {
            return location.pathname.split("/")[3];
        }
        return null;
    }, [location, isEdit]);

    const closeModal = useCallback(() => {
        navigate(`/dashboard/users${searchParams ? `?${searchParams.toString()}` : ""}`);
    }, [navigate, searchParams]);

    const { data: users, isPending } = useGetUsers(searchParams);
    const { data: currentUser } = useGetUser(Number(editId), {
        enabled: !!editId,
    });

    const { data: allUsers } = useGetUsers();

    const names = useMemo(() => {
        return allUsers
            ?.map((user: User) => user.name)
            .filter((season, index, array) => array.indexOf(season) === index);
    }, [allUsers]);

    const createUserMutation = useCreateUser();
    const editUserMutation = useEditUser();

    const handleCreateUser = useCallback(
        async (user: UserInputs) => {
            await createUserMutation.mutateAsync(user);
            closeModal();
        },
        [createUserMutation, closeModal],
    );

    const handleEditUser = useCallback(
        async (user: UserInputs, id?: number) => {
            if (!id) return;
            await editUserMutation.mutateAsync({
                id: id,
                user: user,
            });
            closeModal();
        },
        [editUserMutation, closeModal],
    );

    const onFilterChange = useCallback(
        (values: string[], filter: string) => {
            setSearchParams((prev) => {
                const params = new URLSearchParams(prev);
                params.delete(filter);

                values.forEach((value) => {
                    params.append(filter, value);
                });
                return params;
            });
        },
        [setSearchParams],
    );

    if (!users || isPending)
        return (
            <Group align="center" justify="center" h="80vh" w="100%">
                <Loader color="pink" />
            </Group>
        );

    return (
        <Stack>
            <Group justify="space-between">
                <Title order={2}>{t("all users", { capfirst: true })}</Title>
                <Tooltip label={t("create user", { capfirst: true })}>
                    <ActionIcon
                        onClick={(e) => {
                            e.stopPropagation();
                            navigate(
                                `/dashboard/users/create${searchParams ? `?${searchParams.toString()}` : ""}`,
                            );
                        }}
                    >
                        <IconPlus />
                    </ActionIcon>
                </Tooltip>
                <UserModal
                    key={`${currentUser?.id}_create`}
                    opened={isCreate}
                    onClose={closeModal}
                    handleSubmit={handleCreateUser}
                />
                <UserModal
                    key={`${currentUser?.id}_edit`}
                    opened={isEdit}
                    onClose={closeModal}
                    currentUser={currentUser}
                    handleSubmit={handleEditUser}
                />
            </Group>
            <UsersFilters
                names={names || []}
                filters={searchParams}
                onFilterChange={onFilterChange}
            />
            <ScrollArea type="auto">
                <Table striped>
                    <Table.Thead>
                        <Table.Tr>
                            <Table.Th>{t("name", { capfirst: true })}</Table.Th>
                            <Table.Th>{t("email", { capfirst: true })}</Table.Th>
                            <Table.Th>{t("actions", { capfirst: true })}</Table.Th>
                        </Table.Tr>
                    </Table.Thead>
                    <Table.Tbody>
                        {users.map((user) => (
                            <UserRow user={user} key={user.id} />
                        ))}
                    </Table.Tbody>
                </Table>
            </ScrollArea>
        </Stack>
    );
}