add prettier code formater
This commit is contained in:
@@ -1,139 +1,142 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user