diff --git a/README.md b/README.md index 9bbaf9b..0ef8fc9 100644 --- a/README.md +++ b/README.md @@ -167,9 +167,9 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d - [x] **Use Redux to manage the states of rockets, missions** - [x] **Fetch data using the spaceX API** - [x] **Add actions and other functionality to Reserve Rocket** -- [ ] **Add actions and other functionality to Cancel Reservation** +- [x] **Add actions and other functionality to Cancel Reservation** - [x] **Add actions and other functionality to Join Missions** -- [ ] **Add actions and other functionality to Leave Missions** +- [x] **Add actions and other functionality to Leave Missions** - [ ] **Create the list of My Missions and My Rockets in the My Profile view** - [ ] **Add CSS styles to the UI following the mobile first approach** - [ ] **Create Unit tests using Jest and React testing library** diff --git a/src/components/RocketItem.jsx b/src/components/RocketItem.jsx index 7f8a42c..4150b8a 100644 --- a/src/components/RocketItem.jsx +++ b/src/components/RocketItem.jsx @@ -1,6 +1,6 @@ import { useDispatch } from 'react-redux'; import PropTypes from 'prop-types'; -import { addReserve } from '../redux/rockets/rocketsSlice'; +import { addReserve, cancelReserve } from '../redux/rockets/rocketsSlice'; const RocketItem = ({ rocket }) => { const dispatch = useDispatch(); @@ -8,6 +8,10 @@ const RocketItem = ({ rocket }) => { dispatch(addReserve(rocket.id)); }; + const handleClickCancelReserve = () => { + dispatch(cancelReserve(rocket.id)); + }; + return (
@@ -20,6 +24,7 @@ const RocketItem = ({ rocket }) => {

+
diff --git a/src/redux/rockets/rocketsSlice.js b/src/redux/rockets/rocketsSlice.js index 1b37f93..7c3cf92 100644 --- a/src/redux/rockets/rocketsSlice.js +++ b/src/redux/rockets/rocketsSlice.js @@ -33,6 +33,15 @@ const rocketsSlice = createSlice({ }); state.rockets = newRocketState; }, + cancelReserve: (state, action) => { + const newRocketState = state.rockets.map((rocket) => { + if (rocket.id === action.payload) { + return { ...rocket, reserved: false }; + } + return rocket; + }); + state.rockets = newRocketState; + }, }, extraReducers: (builder) => { builder @@ -61,5 +70,5 @@ const rocketsSlice = createSlice({ }, }); -export const { addReserve } = rocketsSlice.actions; +export const { addReserve, cancelReserve } = rocketsSlice.actions; export default rocketsSlice.reducer;