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.
• Use useSelector(), Redux Hook, to select the state slices and render lists of rockets in corresponding routes.
• Used Tailwindcss for styling.
• Render a list of rockets (as per design).

Close #17 and Close #13

In this PR:

• Add style for the Rockets.js file to be responsive in the mobile view.
• Make the image and description about the Rocket be displayed in column centered.

In this PR:

• Create a route and a view component. Used for the page navigation links and style active class to indicate which page the user is currently on by underlining the active navigation link.
• Create a directory for all Redux state slice files.

• Create a route and a view component. 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 a directory for all Redux state slice files.

Fetch data from the Dragons endpoint (https://api.spacexdata.com/v3/dragons) when a user navigates to the Dragons section.

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).

• Use useSelector() Redux Hook to select the state slices and render lists of dragons in corresponding routes. i.e.:

// get rockets data from the store
const rockets = useSelector(state => state.rockets);

• You can style the whole application "by hand" or you could use React Bootstrap, a UI library that could speed up the process. This is a popular library and working with its components would be good practice.

• Render a list of dragons (as per design). For the image of a dragon use the first image in the array of flickr_images.

• When a user clicks the "Reserve dragon" button, action needs to be dispatched to update the store. You need to get the ID of the reserved dragon and update the state. Remember you mustn't mutate the state. Instead, you need to return a new state object with all dragons, but the selected rocket will have an extra key reserved with its value set to true. You could use a JS filter() or map() to set the value of the new state - i.e.:

const newState = state.map(rocket => {
    if(dragon.id !== id) 
        return dragon;
    return { ...dragon, reserved: true };
});

• Regardless of which method you choose, make sure you place all your logic in the reducer. In the React view file, you should only dispatch the action with the correct dragon ID as an argument.

• Follow the same logic as with the "Reserve dragon" - but you need to set the reserved key to false.
• Dispatch these actions upon click on the corresponding buttons.

Dragons that have already been reserved should show a "Reserved" badge and "Cancel reservation" button instead of the default "Reserve dragon" (as per design).

Use the React conditional rendering syntax:

{rocket.reserved && ( 
    // render Cancel Rocket button
)}

In this PR:

• Write a test for reducer action creators.
• And dispatch the actions to test if the store dispatched the expected actions.
• Write a test for testing the Rockets.js component.
• Write a test for testing the Missions.js component.

In this PR:

Config & basic setup

• Create React App.
• Install React-Redux, Redux Logger, and React Router.
• Create routes and view components (Rockets, Missions, My Profile). Used for the page navigation links and style active class to indicate which section/page the user is currently on by underlining the active navigation link.
• Create directories for all Redux state slice files

Redux: Fetch data and update Redux store

• Upon the first render fetch data from the SpaceX API endpoints.
• Once the data are fetched, dispatch an action to store the selected data in Redux store.

Render UI:lists

• Used useSelector(), Redux Hook, to select the state slices and render lists of rockets and missions in corresponding routes
• Render a list of rockets (as per design).
• Render a table with the missions' data (as per design).

Redux: Write actions and reducers for booking rockets and joining missions

• When a user clicks the "Reserve rocket" button, the rocket booking action is dispatched to update the store.
• When a user clicks the "Join Mission" button, the mission booking action is dispatched to update the store.

Redux: Write actions and reducers for canceling rockets and leaving missions

• When a user clicks the "Cancel Reservation" button, the rocket booking cancelation action is dispatched to update the store.
• When a user clicks the "Leave Mission" button, the mission leaving action is dispatched to update the store.

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 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).

Render UI: My Profile section

• Compose two column layout and list ONLY the rockets reserved and missions joined by the user.