Styjun

When I delete a circuit (via link on details page) and redirect back to the home page, the object I deleted is still there until I manually refresh the page.

I have tried passing in props through the router:

<Route exact path='/' render=(props) => <CircuitList ...props /> />

I have tried moving the delete function from the detail view container to the list view container, but cannot figure out how to pass the function down through the components.

The delete action

 handleDeleteCircuit = (event) => 
 const circuitID = this.props.match.params.id;

 axios.delete(`link-to-api`, this.state);
 this.props.history.push('/');
 this.forceUpdate();
 

Every time I delete a circuit, it deletes from the api, but when it redirects to the home page, it's still there until I manually refresh the page.

What you see in render is what you have in your state.

TL;DR
You need to update your state.

So you have two ways.

1. Optimistic update, fire delete api to server + setState to delete data in your state. And after you receive response from delete api, act accordingly.




2. After fire delete api, re-fetch the whole data from server again and update state.

I would suggest option 1 because it feels quicker for user.

Some extra concept here is.

1. If you want to share state (data) with your "CircuitList" and "CircuitDetail" page. You should store circuits in some parent, like App (or Redux state) and then pass them down to each component.




2. Again, the optimistic update pattern. Fire API + setState immediately... revert back if things go wrong.

Let me know if you feel like any more help :)

Below is what you can do.

// assuming you have your data in App, state.circuits
class App extends React.Component 
 state = 
 circuits: [
 id: 1, title: 'Circuit 1' ,
 id: 2, title: 'Circuit 2' ,
 id: 3, title: 'Circuit 3' ,
 ],
 

 afterDeleteCircuit = (circuitID) => 

 // state, before delete anything
 const currentCircuits = this.state.circuits;

 // Remove deleted item from state.
 this.setState(
 circuits: currentCircuits.filter(circuit => circuit.id !== circuitID),
 );

 // Fire delete API
 axios
 .delete(`link-to-api`, this.state)
 .then(response => 
 if (response.status === 'error') 
 // Oops, something went wrong. Let's get that deleted Id back.
 this.setState(
 circuits: currentCircuits,
 );

 // Show Error message here.
 else 

 // Delete successfully, do nothing.
 // Because we already remove the deleted id from state.

 // Show success message here.


 
 );
 

 render() 
 return (
 <Router>
 <Route exact path='/' render=(props) => <CircuitList ...props circuits=this.state.circuits /> />
 <Route path='/circuits/:id' render=(props) => <CircuitDetail ...props onDelete=this.afterDeleteCircuit /> />

 </Router>
 );
 



class CircuitList extends React.Component 

 render () 
 const circuits = this.props;
 return (
 <div>
 circuits.map(circuit => (
 <li>circuit.title <Link to=`/circuit/$circuit.id`>Edit</Link></li>
 )
 </div>
 );
 



class CircuitDetail extends React.Component 

 handleDelete = (e) => 
 const match, history = this.props;
 const id = match.params.id;
 this.props.onDelete(id);

 history.push('/');
 

 render () 
 return (
 <div>
 ...
 // Delete button
 <button onClick=this.handleDelete>Delete</button>
 </div>
 );
 

You need to remove elements from the state (if this is in react state then remove from react state. If it is in redux then remove element from the redux state)

Or you can fetch all the items again from backend while your index route is mounting again (in componentDidMount) but as network calls are heavier than state manipulation. I'd go for optimistic approach of deleting the items from the state (whether it's react or redux or any other state management library you're using)

 handleDeleteCircuit = async (event) => 
 const circuitID = this.props.match.params.id;
 await axios.delete(`link-to-api`, this.state);
 const circuits = [...this.state.circuits]; 
 const index = array.indexOf(circuitID)
 //or remove element from the redux state
 if (index !== -1) 
 circuits.splice(index, 1);
 this.setState(circuits);
 
 this.props.history.push('/');
 this.forceUpdate();

You don't have any code that removes the circuit from the circuit list.

Something like this :

let this.state.circuits = this.state.circuits.filter((circuit) => 
 return circuit.id == circuitId
)

I'm not familiar with React so maybe this requires some changes.

If you are using a redux Store to manage the items in the CircuitList, one possible cause is that even though the Entry is deleted via api call, the data still persists in the redux store, which will need to be refreshed aswell once the entry is deleted.