import { css } from "@emotion/css" ; import { FC , memo , useCallback } from "react" ; import { ModelType } from "graphql-ts-client-api" ; import { Dialog } from "../common/Dialog" ; import { ErrorText } from "../common/ErrorText" ; import { Loading } from "../common/Loading" ; import { employee$ , mutation$ } from "../__generated/fetchers" ; import { useTypedMutation , useDependencyManager } from "../__generated" ; export const DELETED_EMPLOYEE_FETCHER = employee$ . id . firstName . lastName ; export const DeleteEmployeeDialog = memo ( ( { value , onClose } ) => { const dependencyManager = useDependencyManager ( ) ; const [ mutate , { loading , error } ] = useTypedMutation ( mutation$ . deleteEmployee ( ) , { variables : { id : value . id } , refetchQueries : ( ) => { return dependencyManager . allResources ( employee$ ) ; } } ) ; const onDeleteClick = useCallback ( async ( ) => { try { await mutate ( ) ; } catch ( ex ) { console . warn ( "Failed to delete employee" , ex ) ; return ; } onClose ( ) ; } , [ mutate , onClose ] ) ; return ( < Dialog title = "Are your sure" > < div > Are you sure to remove the employee "{value.firstName} {value.lastName}" < /div> { loading && < Loading title = "Delete..." / > } { error && < ErrorText error = { error } />} < div className = { css ( { textAlign : 'right' } ) } > < button disabled = { loading } onClick = { onDeleteClick } > Ok < /button> & nbsp ; < button onClick = { onClose } > Cancel < /button> < /div> < /Dialog>); } ) ;