129 lines
3.7 KiB
TypeScript
129 lines
3.7 KiB
TypeScript
import { Box, Text } from "ink";
|
|
import { Button, ButtonList } from "../ui/Button.js";
|
|
import { Input } from "../ui/Input.js";
|
|
import { Popup } from "../ui/Popup.js";
|
|
import { useFreeSize } from "../../hooks/size.js";
|
|
import { useState } from "react";
|
|
import type { UpdateUser } from "../../../db/types/User.js";
|
|
import {
|
|
deleteUserById,
|
|
updateUser,
|
|
} from "../../../react/store/actions/users.js";
|
|
import { useDataUserById } from "../../../react/hooks/data/users.js";
|
|
import { useAction } from "../../../react/hooks/useAction.js";
|
|
|
|
export function UserPopup({
|
|
uid,
|
|
onClose,
|
|
}: {
|
|
uid: string;
|
|
onClose: () => void;
|
|
}) {
|
|
const { user, status } = useDataUserById(uid);
|
|
const del = useAction(deleteUserById);
|
|
const upd = useAction(updateUser);
|
|
const [changes, setChanges] = useState<UpdateUser | null>(null);
|
|
const { width } = useFreeSize();
|
|
|
|
return (
|
|
<Popup onClose={!changes ? onClose : undefined}>
|
|
<Box flexDirection="column" padding={1} minWidth={width / 3}>
|
|
{user ? (
|
|
<>
|
|
<Text>
|
|
<Text bold>Name:{" "}</Text>
|
|
{changes ? (
|
|
<Input
|
|
autoFocus
|
|
value={changes.name ?? user.name}
|
|
onChange={(v) => setChanges((e) => ({ ...e!, name: v }))}
|
|
/>
|
|
) : (
|
|
<>{user.name}</>
|
|
)}
|
|
</Text>
|
|
<Text>
|
|
<Text bold>Uid:{" "}</Text>
|
|
{user.uid}
|
|
</Text>
|
|
<Text>
|
|
<Text bold>Email:{" "}</Text>
|
|
{changes ? (
|
|
<Input
|
|
value={changes.email ?? ("email" in user ? user.email : "")}
|
|
onChange={(v) => setChanges((e) => ({ ...e!, email: v }))}
|
|
/>
|
|
) : (
|
|
<>
|
|
{"email" in user ? (
|
|
<>{user.email}</>
|
|
) : (
|
|
<Text dimColor>N/A</Text>
|
|
)}
|
|
</>
|
|
)}
|
|
</Text>
|
|
<Text>
|
|
<Text bold>Flags:{" "}</Text>
|
|
{(user.flags.admin ?? false) && <Text>admin</Text>}
|
|
</Text>
|
|
<Text>
|
|
<Text bold>Created: </Text>
|
|
{user.created_at}
|
|
</Text>
|
|
<Text>
|
|
<Text bold>Updated: </Text>
|
|
{user.updated_at}
|
|
</Text>
|
|
<Box height={1} />
|
|
{changes ? (
|
|
<ButtonList
|
|
justifyContent="center"
|
|
buttons={[
|
|
{
|
|
children: "Save",
|
|
onClick: () => upd(changes).then(() => setChanges(null)),
|
|
},
|
|
{
|
|
children: "Discard",
|
|
onClick: () => setChanges(null),
|
|
},
|
|
]}
|
|
/>
|
|
) : (
|
|
<ButtonList
|
|
autoFocus
|
|
justifyContent="center"
|
|
buttons={[
|
|
{
|
|
children: "Close",
|
|
onClick: onClose,
|
|
},
|
|
{
|
|
children: "Edit",
|
|
onClick: () => {
|
|
setChanges({ uid });
|
|
},
|
|
},
|
|
{
|
|
children: "Delete",
|
|
onClick: () => del(uid).then(onClose),
|
|
},
|
|
]}
|
|
/>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Text dimColor>{status}</Text>
|
|
<Box height={1} />
|
|
<Button autoFocus onClick={onClose}>
|
|
Close
|
|
</Button>
|
|
</>
|
|
)}
|
|
</Box>
|
|
</Popup>
|
|
);
|
|
}
|