#10

• [ ] When a user clicks the "Join Mission" button, an action is dispatched to update the store. It gets the ID of the selected mission and updates the state.
• [ ] A new state object is returned with all missions.
• [ ] I used the map() method to set the value of the new state.

#9

• [ ] Follow the same logic as with the "Join mission" - but the action resets the reserved key to false.
• [ ] Dispatch these actions upon clicking on the corresponding buttons.

In this pull request, we implemented the following elements:

• [ ] Install React-redux, redux-thunk, redux-logger.
• [ ] Create routes and view components (Rockets, Missions, My Profile).
• [ ] Use <NavLink /> for the page navigation links and style active class to indicate which section/page the user is currently on (underline active navigation link).
• [ ] Create directories for all Redux state slice files (rockets, missions, dragons [only if your team has 3 members]).
• [ ] Redux: Fetch data and update Redux store
• [ ] Use useSelector() Redux Hook to select the state slices and render lists of rockets and missions in corresponding routes.
• [ ] We used map to set the value of the new state.
• [ ] Usage of filter() method to display reserved Rockets and Missions to the profile page.
• [ ] Fixe Linters errors, bugs and resolve conflicts.

• [ ] Added some logic to Rockets that have already been reserved to show a "Reserved" badge and "Cancel reservation" button instead of the default "Reserve rocket" (as per design). By using the React conditional rendering syntax: {rocket.reserved && ( // render Cancel Rocket button )}

Below are tasks I filled out in this PR:

• [ ] Fetch data from the Rockets endpoint when the application starts (as Rockets is the default view). Once the data are fetched, dispatch an action to store the selected data in Redux store:
• id
• name
• type
• flickr_images

NOTE: Make sure you only dispatch those actions once and do not add data to store on every re-render (i.e. when changing views / using navigation).

In this pull request I implemented the following tasks:

1. Create a route and a view component. Use for the page navigation links and style active class to indicate which section/page the user is currently on (underline active navigation link).
2. Create a directory for all Redux state slice files.

• [ ] Create a directory for all Redux state slice files.
• [ ] Use <NavLink /> for the page navigation links and style active class to indicate which section/page the user is currently on (underline active navigation link). (Used in the previous task)

• [ ] Project link: https://github.com/tresorsawasawa/Space-Travelers-Hub/projects/2

• [ ] This team is composed of two members:

• @Kandy-Peter

• @tresorsawasawa

• [ ] Install React-redux, redux-thunk, redux-logger.
• [ ] Create routes and view components (Rockets, Missions, My Profile).
• [ ] Use for the page navigation links and style active class to indicate which section/page the user is currently on (underline active navigation link).
• [ ] Create directories for all Redux state slice files (rockets, missions, dragons [only if your team has 3 members]).
• [ ] Redux: Fetch data and update Redux store
• [ ] Use useSelector() Redux Hook to select the state slices and render lists of rockets and missions in corresponding routes
• [ ] We used the map() method to set the value of the new state.
• [ ] Usage of filter() method to display reserved Rockets and Missions to the profile page.

In this pull request, I added the following functionalities

• Missions that the user has joined already shows a badge "Active Member" instead of the default "NOT A MEMBER"
• Button "Leave Mission" instead of the "Join Mission" button (as per design).

• [ ] Implement CANCEL_ROCKET_BOOKING action
• [ ] Added functionality when a user clicks the "Cancel Reservation" button, action is dispatched to update the store, get the ID of the reserved rocket and update the state.
• [ ] Return a new state object with all rockets, but the selected rocket has an extra key reserved with its value set to true.
• [ ] Use map() to set the value of the new state.
• [ ] Dispatch the action with the correct rocket ID as an argument.

For this task, I implemented the following elements:

• Use useSelector() Redux Hook to select the state slices and render lists of missions in corresponding routes.
• I added style to the whole page "by hand" as per design