डिप्लोमा इन ऑफिस मैनेजमेंट एण्ड अकाउटिंग

डिप्लोमा इन ऑफिस मैनेजमेंट एण्ड अकाउटिंग

Full Stack Web Development with Laravel

Full Stack Web Development with Laravel

Affiliate Program

Affiliate Program

Delete user using NEXT JS and mongo

import { Button, useDisclosure } from "@chakra-ui/react";
import React from "react";
import {
    AlertDialog,
    AlertDialogBody,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogContent,
    AlertDialogOverlay,
  } from '@chakra-ui/react'

import axios from "axios";
import { useMutation, useQueryClient } from "react-query";
import { deleteUser } from "../../controllers/users";

export default function DeleteUser({user_id}){
  const { isOpen, onOpen, onClose } = useDisclosure();

  const queryClient = useQueryClient();

  const mutation = useMutation(deleteUser,{
    onSuccess:()=>{
      queryClient.invalidateQueries("users");
    }
  })

  const cancelRef =React.useRef()

    const deleteRecord=async ()=>{
       await mutation.mutate({
        user_id:user_id
       })       
    }

    return(
        <>
         <AlertDialog
                isOpen={isOpen}
                leastDestructiveRef={cancelRef}
                onClose={onClose}>
        <AlertDialogOverlay>
          <AlertDialogContent>
            <AlertDialogHeader fontSize='lg' fontWeight='bold'>
              Delete Customer {user_id}
            </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={deleteRecord} ml={3}>
                Delete
              </Button>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>

      <Button colorScheme='red' size="xs" onClick={onOpen}>Delete</Button>
        </>
    )
}
© 2016 - 2023, All Rights are Reserved.