Once the data are fetched, we dispatch an action to store the selected data in Redux store.
Render UI:lists
We use useSelector() Redux Hook to select the state slices and render lists of rockets and missions in corresponding routes.
We render a list of rockets (as per design).
Also we render a table with the missions' data (as per design).
Redux: Write actions and reducers
When a user clicks the "Reserve rocket" button, an action is dispatched to update the store.
We created a reducer and an action dispatcher for the "Join Mission" button.
Render UI: conditional components rendering
Rockets that have already been reserved show a "Reserved" badge and "Cancel reservation" button instead of the default "Reserve rocket" (as per design) .
Missions that the user has joined already should show a badge "Active Member" instead of the default "NOT A MEMBER" and a button "Leave Mission" instead of the "Join Mission" button (as per design).
Rockets and Missions use the React conditional rendering syntax.
Render UI: My Profile section
We composed two column layout and list ONLY the rockets reserved and missions joined by the user (as per design):
Rendering a list of all joined missions (using filter()).
Rendering a list of all reserved rockets (using filter()).
Generally
Rockets
The Rockets section displays a list of all available SpaceX rockets. Users can book each rocket by clicking the reservation button or cancel the previously made booking.
Missions
The Missions section displays a list of current missions along with their brief description and participation status. There is also a button next to each mission that allows users to join the selected mission or leave the mission the user joined earlier.
My Profile
The My Profile section displays all reserved rockets and space missions.
In This Milestone, We did the Following:
Config & basic setup
We created React App.
Installed React Redux, Redux Logger and React Router.
Created routes and view components: rockets, missions and my profile.
Used
Created directories for all Redux state slice files:rockets and missions.
Redux: Fetch data and update Redux store
Upon the first render we fetched data from the SpaceX API endpoints:
Rockets: https://api.spacexdata.com/v4/rockets
Missions: https://api.spacexdata.com/v3/missions
Once the data are fetched, we dispatch an action to store the selected data in Redux store.
Render UI:lists
We use useSelector() Redux Hook to select the state slices and render lists of rockets and missions in corresponding routes.
We render a list of rockets (as per design).
Also we render a table with the missions' data (as per design).
Redux: Write actions and reducers
When a user clicks the "Reserve rocket" button, an action is dispatched to update the store.
We created a reducer and an action dispatcher for the "Join Mission" button.
Render UI: conditional components rendering
Rockets that have already been reserved show a "Reserved" badge and "Cancel reservation" button instead of the default "Reserve rocket" (as per design) .
Missions that the user has joined already should show a badge "Active Member" instead of the default "NOT A MEMBER" and a button "Leave Mission" instead of the "Join Mission" button (as per design).
Rockets and Missions use the React conditional rendering syntax.
Render UI: My Profile section
We composed two column layout and list ONLY the rockets reserved and missions joined by the user (as per design):
Rendering a list of all joined missions (using filter()).
Rendering a list of all reserved rockets (using filter()).
Generally
Rockets The Rockets section displays a list of all available SpaceX rockets. Users can book each rocket by clicking the reservation button or cancel the previously made booking.
Missions The Missions section displays a list of current missions along with their brief description and participation status. There is also a button next to each mission that allows users to join the selected mission or leave the mission the user joined earlier.
My Profile The My Profile section displays all reserved rockets and space missions.