CoastalCommitsPastes/client/app/admin/components/user-table.tsx

158 lines
3.2 KiB
TypeScript
Raw Normal View History

"use client"
import { Fieldset } from "@geist-ui/core/dist"
import Table from "rc-table"
import ActionDropdown from "./action-dropdown"
2022-11-12 04:28:06 -05:00
import SettingsGroup from "@components/settings-group"
import type { User, UserWithPosts } from "@lib/server/prisma"
import { useState } from "react"
import { useToasts } from "@components/toasts"
const UserTable = ({ users: initial }: { users: UserWithPosts[] }) => {
const [users, setUsers] = useState(initial)
const { setToast } = useToasts()
const toggleRole = async (id: string, role: "admin" | "user") => {
const res = await fetch("/api/admin?action=toggle-role", {
method: "POST",
body: JSON.stringify({
userId: id,
role
})
})
if (res.status === 200) {
setToast({
message: "Role updated",
type: "success"
})
setUsers((users) => {
const newUsers = users?.map((user) => {
if (user.id === id) {
return {
...user,
role
}
}
return user
})
return newUsers
})
} else {
setToast({
message: "Something went wrong",
type: "error"
})
}
}
const deleteUser = async (id: string) => {
const confirm = window.confirm("Are you sure you want to delete this user?")
if (!confirm) return
// const res = await adminFetcher(`/users/${id}`, {
// method: "DELETE"
// })
const res = await fetch("/api/admin?action=delete-user", {
method: "POST",
body: JSON.stringify({
userId: id
})
})
setUsers((users) => {
const newUsers = users?.filter((user) => user.id !== id)
return newUsers
})
if (res.status === 200) {
setToast({
2022-11-28 21:36:11 -05:00
message: "User deleted",
type: "success"
})
} else {
setToast({
2022-11-28 21:36:11 -05:00
message: "Something went wrong",
type: "error"
})
}
}
const tableUsers = users?.map((user) => {
return {
id: user.id,
displayName: user.displayName,
posts: user.posts?.length || 0,
2022-11-14 20:32:32 -05:00
createdAt: `${new Date(user.createdAt).toLocaleDateString()} ${new Date(
user.createdAt
).toLocaleTimeString()}`,
role: user.role,
actions: ""
}
})
const usernameColumns = [
{
title: "Name",
dataIndex: "displayName",
key: "displayName",
width: 50
},
{
title: "Posts",
dataIndex: "posts",
key: "posts",
width: 10
},
{
title: "Created",
dataIndex: "createdAt",
key: "createdAt",
width: 100
},
{
title: "Role",
dataIndex: "role",
key: "role",
width: 50
},
{
title: "Actions",
dataIndex: "",
key: "actions",
width: 50,
render(user: User) {
return (
<ActionDropdown
title="Actions"
actions={[
{
title: user.role === "admin" ? "Change role" : "Make admin",
onClick: () =>
toggleRole(user.id, user.role === "admin" ? "user" : "admin")
},
{
title: "Delete",
onClick: () => deleteUser(user.id)
}
]}
/>
)
}
}
]
return (
<SettingsGroup title="Users">
{!users && <Fieldset.Subtitle>Loading...</Fieldset.Subtitle>}
{users && (
<Fieldset.Subtitle>
<h5>{users.length} users</h5>
</Fieldset.Subtitle>
)}
{users && <Table columns={usernameColumns} data={tableUsers} />}
</SettingsGroup>
)
}
export default UserTable