Here are the steps –
Step 1 – const [showModal, setShowModal]=useState(false);
Step 2 – Add onClick –
<span className=‘ cursor-pointer’ onClick={()=>setShowModal(true)}>Delete Account</span>
Step 3 – Import icon to show on popup –
import {HiOutlineExclamationCircle} from ‘react-icons/hi’
Step 4 – Add Modal –
<Modal show={showModal} onClose={()=>setShowModal(false)} popup size=‘md’>
<Modal.Header/>
<Modal.Body>
<div className=‘ text-center’>
<HiOutlineExclamationCircle className=‘ h-14 w-14 text-gray-400 dark:text-gray-200 mb-4
mx-auto’ />
<h3 className=‘mb-5 text-lg text-gray-500 dark:text-gray-400’>Are You Sure, You want to
delete Your Account?</h3>
<div>
<Button color=‘failure’ onClick={handleDeleteUser}>Yes, I’m Sure</Button>
</div>
</div>
</Modal.Body>
</Modal>
Step 5 – Add “handleDeleteUser” function –
const handleDeleteUser=async()=>{
setShowModal(false)
try {
dispatch(deleteUserStart());
const res=await fetch(`/api/user/delete/${currentUser._id}`, {
method:‘DELETE’
})
const data=await res.json();
if(!res.ok){
dispatch(deleteUserFailure(data.message))
}else{
dispatch(deleteUserSuccess(data))
}
} catch (error) {
dispatch(deleteUserFailure(error.message))
}
}
Step 6 – Define reducers in redux > user > userSlice.js
deleteUserStart:(state)=>{
state.loading=true;
state.error=null
},
deleteUserSuccess:(state)=>{
state.currentUser=null;
state.loading=false;
state.error=null
},
deleteUserFailure:(state, action)=>{
state.loading=false;
state.error=action.payload
}
Step 7 – Export reducers –
export const {deleteUserStart, deleteUserSuccess, deleteUserFailure} =userSlice.actions;
Step 8 – Import reducers in DashProfile.jsx –
import {deleteUserStart, deleteUserSuccess, deleteUserFailure} from ‘../redux/user/userSlice.js’
Step 9 – Add error in useSelector –
const {currentUser, error}=useSelector(state=>state.user)
Step 10 – Add error code –
{
error && (
<Alert color=‘failure’ className=‘mt-5’>
{error}
</Alert>
)
}
