How to refresh page after deleting?-CodePudding

When I click on the delete button I can delete the item from the table, but I need to refresh the page manually. How can I get it to refresh automatically?

import { Link } from "react-router-dom";
import Swal from "sweetalert2";  

const EmployeesList = () => {

const[employees, setEmployees] =  useState([]);

  useEffect(() => {
    init();
  },[])

  const init = () => {
    employeeService.getAll()
    .then(response => {
      setEmployees(response.data);
    })
    .catch(error => {
      console.log('Something wrong', error);
    })
  }

  const deleteSweetAlert = (id) => {
    Swal.fire({  
      title: 'Are you sure?',  
      text: 'User will have Admin Privileges',  
      icon: 'warning',  
      showCancelButton: true,  
      confirmButtonColor: '#3085d6',  
      cancelButtonColor: '#d33',  
      confirmButtonText: 'Yes!'  
    }).then(result => { 
        if(result.value) {
          employeeService.remove(id);
          init();
        }
      })
      .catch(error =>{
        console.log('something wrong ',error);
    })
  }

The button:

<button className="btn btn-danger ml-2" onClick={() => {deleteSweetAlert(employee.id)}}>Delete</button>

CodePudding user response：

If you are using react-router v5, you can use useHistory hook

const EmployeesList = () => {
  const history = useHistory();
  const reload = () => {
    history.go(0);
  }
}

If you are using react-router v6, you can use useNavigate hook

const EmployeesList = () => {
  const navigate= useNavigate();
  const reload = () => {
    navigate(0);
  }
}

However, consider if you really need to reload the page or if you can rerender your components without reloading the page

CodePudding user response：

You can use react useEffect depencies to auto reload the information of employees

Like this...

import { Link } from "react-router-dom";
import Swal from "sweetalert2";  

const EmployeesList = () => {

const[employees, setEmployees] =  useState([]);

const[deleted,setDeleted ] =  useState(1);

  useEffect(() => {
    init();
  },[deleted])

  const init = () => {
    employeeService.getAll()
    .then(response => {
      setEmployees(response.data);
      setDeleted(prev=>prev 1) 
    })
    .catch(error => {
      console.log('Something wrong', error);
    })
  }

  const deleteSweetAlert = (id) => {
    Swal.fire({  
      title: 'Are you sure?',  
      text: 'User will have Admin Privileges',  
      icon: 'warning',  
      showCancelButton: true,  
      confirmButtonColor: '#3085d6',  
      cancelButtonColor: '#d33',  
      confirmButtonText: 'Yes!'  
    }).then(result => { 
        if(result.value) {
          employeeService.remove(id);
          init();
        }
      })
      .catch(error =>{
        console.log('something wrong ',error);
    })
  }

In react useEffect() hook get called very first time & the depencies passed to useEffect changes

Its is a dirty trick to make this automate

CodePudding user response：

I guess you code isn't working because you are not awaiting your delete response. Try this:-

const deleteSweetAlert = (id) => {
    Swal.fire({  
      title: 'Are you sure?',  
      text: 'User will have Admin Privileges',  
      icon: 'warning',  
      showCancelButton: true,  
      confirmButtonColor: '#3085d6',  
      cancelButtonColor: '#d33',  
      confirmButtonText: 'Yes!'  
    }).then(async result => { 
        if(result.value) {
          await employeeService.remove(id);
          init();
        }
      })
      .catch(error =>{
        console.log('something wrong ',error);
    })
  }

CodePudding user response：

location.reload(false);

This method takes an optional parameter which by default is set to false. If set to true, the browser will do a complete page refresh from the server and not from the cached version of the page.