kopia lustrzana https://github.com/bugout-dev/moonstream
102 wiersze
3.0 KiB
JavaScript
102 wiersze
3.0 KiB
JavaScript
import React from "react";
|
|
import { Skeleton, IconButton } from "@chakra-ui/react";
|
|
import {
|
|
Table,
|
|
Th,
|
|
Td,
|
|
Tr,
|
|
Thead,
|
|
Tbody,
|
|
Editable,
|
|
EditableInput,
|
|
EditablePreview,
|
|
} from "@chakra-ui/react";
|
|
import { DeleteIcon } from "@chakra-ui/icons";
|
|
import moment from "moment";
|
|
import CopyButton from "./CopyButton";
|
|
|
|
const List = ({ data, revoke, isLoading, update }) => {
|
|
const userToken = localStorage.getItem("MOONSTREAM_ACCESS_TOKEN");
|
|
|
|
const cellProps = {
|
|
px: ["2px", "6px", "inherit"],
|
|
};
|
|
if (data) {
|
|
return (
|
|
<Table
|
|
variant="simple"
|
|
colorScheme="blue"
|
|
justifyContent="center"
|
|
alignItems="baseline"
|
|
h="auto"
|
|
size="sm"
|
|
>
|
|
<Thead>
|
|
<Tr>
|
|
<Th>Label</Th>
|
|
<Th {...cellProps}>Token</Th>
|
|
<Th {...cellProps}>Date Created</Th>
|
|
<Th {...cellProps}>Actions</Th>
|
|
</Tr>
|
|
</Thead>
|
|
<Tbody>
|
|
{data.token.map((token) => {
|
|
if (token.active) {
|
|
if (userToken !== token.id) {
|
|
return (
|
|
<Tr key={`token-row-${token.id}`}>
|
|
<Td py={0} {...cellProps}>
|
|
<Editable
|
|
colorScheme="blue"
|
|
placeholder="Click to set up label"
|
|
defaultValue={token.note}
|
|
isDisabled={update.isLoading}
|
|
onSubmit={(nextValue) =>
|
|
update.mutate({ token: token.id, note: nextValue })
|
|
}
|
|
>
|
|
<EditablePreview
|
|
maxW="40rem"
|
|
textColor={token.note ? "inherit" : "gray.900"}
|
|
_placeholder={{ color: "black" }}
|
|
/>
|
|
<EditableInput maxW="40rem" />
|
|
</Editable>
|
|
</Td>
|
|
<Td
|
|
mr={4}
|
|
py={0}
|
|
{...cellProps}
|
|
isTruncated
|
|
maxW={["100px", "150px", "300px"]}
|
|
>
|
|
<CopyButton>{token.id}</CopyButton>
|
|
</Td>
|
|
<Td py={0} {...cellProps}>
|
|
{moment(token.created_at).format("L")}
|
|
</Td>
|
|
<Td py={0} {...cellProps}>
|
|
<IconButton
|
|
size="sm"
|
|
variant="ghost"
|
|
colorScheme="blue"
|
|
onClick={() => revoke(token.id)}
|
|
icon={<DeleteIcon />}
|
|
/>
|
|
</Td>
|
|
</Tr>
|
|
);
|
|
} else return null;
|
|
} else return null;
|
|
})}
|
|
</Tbody>
|
|
</Table>
|
|
);
|
|
} else if (isLoading) {
|
|
return <Skeleton />;
|
|
} else {
|
|
return "";
|
|
}
|
|
};
|
|
export default List;
|