78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
import React, { useRef } from 'react'
|
|
import agent from '../api/agent'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { Data } from '../models/game'
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogBody,
|
|
AlertDialogContent, AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogOverlay,
|
|
Button, Icon, Text
|
|
} from '@chakra-ui/react'
|
|
|
|
type Props = {
|
|
id: string
|
|
open: boolean
|
|
setOpen: Function
|
|
setLoading: Function
|
|
game: Data
|
|
}
|
|
|
|
export default function DeleteDialogue({
|
|
id,
|
|
open,
|
|
setOpen,
|
|
setLoading,
|
|
game,
|
|
}: Props) {
|
|
const history = useNavigate()
|
|
const handleClose = () => {
|
|
setOpen(false)
|
|
}
|
|
|
|
const deleteGame = async (id: string) => {
|
|
setLoading(true)
|
|
try {
|
|
await agent.Games.delete(id)
|
|
setLoading(false)
|
|
handleClose()
|
|
history(`/games/`)
|
|
} catch (err) {
|
|
console.error(err)
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const cancelRef = useRef(null)
|
|
|
|
return (
|
|
<AlertDialog isOpen={open} leastDestructiveRef={cancelRef} onClose={handleClose}>
|
|
<AlertDialogOverlay>
|
|
<AlertDialogContent>
|
|
|
|
<AlertDialogHeader fontSize='lg' fontWeight='bold'>Delete?</AlertDialogHeader>
|
|
<AlertDialogBody>
|
|
Are you sure you would like to delete <strong>{game.title}</strong>?
|
|
</AlertDialogBody>
|
|
<AlertDialogFooter>
|
|
<Button ref={cancelRef} onMouseDown={handleClose}>
|
|
<Icon name='remove' mr='1' /> <Text mt='1'>No</Text>
|
|
</Button>
|
|
<Button
|
|
colorScheme='red'
|
|
onMouseDown={() => {
|
|
deleteGame(id)
|
|
}}
|
|
ml={3}
|
|
autoFocus
|
|
>
|
|
<Icon name='checkmark' mr='1' /> <Text mt='1'>Yes</Text>
|
|
</Button>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialogOverlay>
|
|
</AlertDialog>
|
|
)
|
|
}
|