74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import { Button, Group, Space, Text, Title } from "@mantine/core";
|
|
import { useModals } from "@mantine/modals";
|
|
import { useEffect, useState } from "react";
|
|
import { TbPlus } from "react-icons/tb";
|
|
import ManageUserTable from "../../components/admin/ManageUserTable";
|
|
import showCreateUserModal from "../../components/admin/showCreateUserModal";
|
|
import userService from "../../services/user.service";
|
|
import User from "../../types/user.type";
|
|
import toast from "../../utils/toast.util";
|
|
|
|
const Users = () => {
|
|
const [users, setUsers] = useState<User[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const modals = useModals();
|
|
|
|
const getUsers = () => {
|
|
setIsLoading(true);
|
|
userService.list().then((users) => {
|
|
setUsers(users);
|
|
setIsLoading(false);
|
|
});
|
|
};
|
|
|
|
const deleteUser = (user: User) => {
|
|
modals.openConfirmModal({
|
|
title: `Delete ${user.username}?`,
|
|
children: (
|
|
<Text size="sm">
|
|
Do you really want to delete <b>{user.username}</b> and all his
|
|
shares?
|
|
</Text>
|
|
),
|
|
labels: { confirm: "Delete", cancel: "Cancel" },
|
|
confirmProps: { color: "red" },
|
|
onConfirm: async () => {
|
|
userService
|
|
.remove(user.id)
|
|
.then(() => setUsers(users.filter((v) => v.id != user.id)))
|
|
.catch(toast.axiosError);
|
|
},
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
getUsers();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Group position="apart" align="baseline" mb={20}>
|
|
<Title mb={30} order={3}>
|
|
User management
|
|
</Title>
|
|
<Button
|
|
onClick={() => showCreateUserModal(modals, getUsers)}
|
|
leftIcon={<TbPlus size={20} />}
|
|
>
|
|
Create
|
|
</Button>
|
|
</Group>
|
|
|
|
<ManageUserTable
|
|
users={users}
|
|
getUsers={getUsers}
|
|
deleteUser={deleteUser}
|
|
isLoading={isLoading}
|
|
/>
|
|
<Space h="xl" />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Users;
|