98 lines
3.1 KiB
TypeScript
98 lines
3.1 KiB
TypeScript
import { gql } from '@apollo/client';
|
|
import { Box, Button, Card, Heading, Icon, Stack, Text } from '@chakra-ui/react';
|
|
import { BookChapterDeleteMutation } from '@generated/types';
|
|
import { Link } from '@tanstack/react-router';
|
|
import { bookFragment } from '../fragments';
|
|
import { useToastMutation } from '../hooks/useToastMutation';
|
|
import { bookChapterQuery } from '../pages/work/book/$bookId/chapter/$chapterId/view';
|
|
import { bookChapterListQuery } from '../pages/work/book/$bookId/overview/contents';
|
|
|
|
export function BookChapterCard({
|
|
bookId,
|
|
chapterId,
|
|
title,
|
|
isAuthor
|
|
}: {
|
|
readonly bookId: string;
|
|
readonly chapterId: string;
|
|
readonly title: string;
|
|
readonly isAuthor: boolean;
|
|
}) {
|
|
const { update: chapterDelete } = useToastMutation<BookChapterDeleteMutation>({
|
|
mutation,
|
|
successMsg: 'Chapter deleted successfully',
|
|
refetchQueries: [bookChapterListQuery, bookChapterQuery]
|
|
});
|
|
return (
|
|
<Card.Root width="100%" variant="elevated">
|
|
<Card.Body paddingX={4} paddingY={2}>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
|
<Box>
|
|
<Text as="div" minWidth={0}>
|
|
<Link to={`/work/book/${bookId}/chapter/${chapterId}/view`}>
|
|
<Heading
|
|
size="sm"
|
|
color="colorPalette.400"
|
|
_hover={{
|
|
textDecoration: 'underline',
|
|
textDecorationColor: 'colorPalette.700'
|
|
}}
|
|
>
|
|
{title}
|
|
</Heading>
|
|
</Link>
|
|
</Text>
|
|
</Box>
|
|
<Stack direction="row" alignItems="center">
|
|
{isAuthor && (
|
|
<>
|
|
<Button
|
|
color="red.500"
|
|
variant="ghost"
|
|
padding={0}
|
|
_hover={{
|
|
backgroundColor: 'bg.error'
|
|
}}
|
|
onClick={async () => chapterDelete({ variables: { id: chapterId } })}
|
|
>
|
|
<Icon fontSize="xl">
|
|
<i className="nf nf-md-delete" />
|
|
</Icon>
|
|
</Button>
|
|
<Link to={`/work/book/${bookId}/chapter/${chapterId}/edit`}>
|
|
<Button
|
|
variant="ghost"
|
|
padding={0}
|
|
_hover={{
|
|
backgroundColor: 'bg.warning'
|
|
}}
|
|
>
|
|
<Icon color="yellow.500" fontSize="xl">
|
|
<i className="nf nf-fa-edit" />
|
|
</Icon>
|
|
</Button>
|
|
</Link>
|
|
</>
|
|
)}
|
|
<Link to={`/work/book/${bookId}/chapter/${chapterId}/view`}>
|
|
<Button variant="ghost" padding={0}>
|
|
<Icon fontSize="xl">
|
|
<i className="nf nf-fa-angle_right" />
|
|
</Icon>
|
|
</Button>
|
|
</Link>
|
|
</Stack>
|
|
</Stack>
|
|
</Card.Body>
|
|
</Card.Root>
|
|
);
|
|
}
|
|
|
|
const mutation = gql`
|
|
mutation BookChapterDelete($id: ID!) {
|
|
bookChapterDelete(id: $id) {
|
|
...Book
|
|
}
|
|
}
|
|
${bookFragment}
|
|
`;
|