79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
'use client'
|
|
import { DeletePostDocument, PostQuery } from '@/generated/graphql/graphql'
|
|
import { useMutation } from '@apollo/client/react'
|
|
import { DeleteIcon, EditIcon } from '@chakra-ui/icons'
|
|
import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, Flex, IconButton, useDisclosure } from '@chakra-ui/react'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useRef } from 'react'
|
|
|
|
interface Props {
|
|
data: PostQuery
|
|
}
|
|
|
|
export const ClientSection: React.FC<Props> = ({ data }) => {
|
|
const router = useRouter()
|
|
const { isOpen, onOpen, onClose } = useDisclosure()
|
|
const cancelRef: any = useRef(null)
|
|
const [deletePost] = useMutation(DeletePostDocument)
|
|
|
|
return (
|
|
<Flex mr='auto' alignItems='center' mt={4}>
|
|
<Link href={`/edit-post/${data?.post?.id}`}>
|
|
<IconButton
|
|
aria-label='edit-button'
|
|
icon={<EditIcon />}
|
|
mr={4}
|
|
/>
|
|
</Link>
|
|
<IconButton
|
|
aria-label='delete-button'
|
|
icon={<DeleteIcon />}
|
|
colorScheme='red'
|
|
onClick={onOpen}
|
|
/>
|
|
<AlertDialog
|
|
isOpen={isOpen}
|
|
leastDestructiveRef={cancelRef}
|
|
onClose={onClose}
|
|
>
|
|
<AlertDialogOverlay>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader fontSize='lg' fontWeight='bold'>
|
|
Delete Post
|
|
</AlertDialogHeader>
|
|
|
|
<AlertDialogBody>
|
|
Are you sure? You can't undo this action afterwards.
|
|
</AlertDialogBody>
|
|
|
|
<AlertDialogFooter>
|
|
<Button ref={cancelRef} onClick={onClose}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
colorScheme='red'
|
|
onClick={async () => {
|
|
await deletePost({
|
|
variables: { id: data.post?.id! },
|
|
// https://stackoverflow.com/questions/63192774/apollo-client-delete-item-from-cache
|
|
// https://www.apollographql.com/docs/react/caching/garbage-collection/#cacheevict
|
|
update: cache => {
|
|
const normalizedId = cache.identify({ id: data.post?.id!, __typename: 'Post' })
|
|
cache.evict({ id: normalizedId })
|
|
cache.gc()
|
|
}
|
|
})
|
|
router.refresh()
|
|
}}
|
|
ml={3}
|
|
>
|
|
Delete
|
|
</Button>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialogOverlay>
|
|
</AlertDialog>
|
|
</Flex>
|
|
)
|
|
} |