import { Button, Fieldset, Link, Popover, useToasts } from "@geist-ui/core" import MoreVertical from "@geist-ui/icons/moreVertical" import { User } from "@lib/types" import Cookies from "js-cookie" import { useEffect, useMemo, useState } from "react" import { adminFetcher } from "." import Table from "rc-table" const UserTable = () => { const [users, setUsers] = useState() const { setToast } = useToasts() useEffect(() => { const fetchUsers = async () => { const res = await adminFetcher("/users") const data = await res.json() setUsers(data) } fetchUsers() }, []) const toggleRole = async (id: number, role: "admin" | "user") => { const res = await adminFetcher("/users/toggle-role", { method: "POST", body: { id, role } }) const json = await res.json() if (res.status === 200) { setToast({ text: "Role updated", type: "success" }) // TODO: swr should handle updating this const newUsers = users?.map((user) => { if (user.id === id.toString()) { return { ...user, role: role === "admin" ? "user" : ("admin" as User["role"]) } } return user }) setUsers(newUsers) } else { setToast({ text: json.error || "Something went wrong", type: "error" }) } } const deleteUser = async (id: number) => { 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 json = await res.json() if (res.status === 200) { setToast({ text: "User deleted", type: "success" }) } else { setToast({ text: json.error || "Something went wrong", type: "error" }) } } const tableUsers = useMemo( () => users?.map((user) => { return { id: user.id, username: user.username, posts: user.posts?.length || 0, createdAt: `${new Date( user.createdAt ).toLocaleDateString()} ${new Date( user.createdAt ).toLocaleTimeString()}`, role: user.role, actions: "" } }), [users] ) const usernameColumns = [ { title: "Username", dataIndex: "username", key: "username", 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: any) { return ( toggleRole(user.id, user.role)}> {user.role === "admin" ? "Change role" : "Make admin"} deleteUser(user.id)}> Delete user } hideArrow > ) } } ] return (
Users {users && {users.length} users} {!users && Loading...} {users && } ) } export default UserTable