In this pull request I have added some tests for my components:

• I have added tests for Missions.js, Mission.js, and MyMission.js.
  • I have added tests for checking existing elements after rendering.
  • I have added tests for checking non-existing elements after rendering.
  • I have added tests for checking the snapshots after rendering components.

In this pull request I have added some changes to My Profile component:

• I have filtered my missions to get the joined missions.
• I have added a component to display a list of joined missions on the My Profile page.
• I have added some styles to the page and to the joined missions list according to the design.

In this pull request I have worked on Joining mission and Leaving mission functionalities:

• I have added the action creator for joining the mission.
• I have added the action creator for leaving the mission.
• I updated the mission status on the mission state reducer.
• I have dispatched the join and leave mission actions on button click.
• I displayed the inner button text and status according to the mission status.
• I have added some styles to the status button and status info according to the status.

In this pull request I have added some changes according to the requirements:

• I fetched the mission data from API.
• I have made the action creator for dispatching an action to get the data.
• I have added the reducer to update the state with the data.
• I displayed the mission contents on missions component page.
• I added some styles according to the design.

In this pull request @ahzamir and my partner @nedjwab have worked together and implemented all these requirements on our project:

Config & basic setup

• We have created React App.
• We nstalled React Redux, Redux Logger and React Router.
• We have downloaded the free image for the app logo.
• We have created routes and view components (Rockets, Missions, My Profile). And we used for the page navigation links and style active class to indicate which section/page the user is currently on (underline active navigation link).
• We created directories for all Redux state slice files (rockets and missions).

Redux: Fetch data and update Redux store

• Upon first render we have fetched data from the SpaceX API endpoints:

  • Rockets: https://api.spacexdata.com/v3/rockets
  • Missions: https://api.spacexdata.com/v3/missions

• Once the data are fetched, We dispatched an action to store the selected data in the Redux store:

  • Rockets:
    • id
    • rocket_name
    • description
    • flickr_images
  • Missions:
    • mission_id
    • mission_name
    • description

Render UI:lists

• We have used useSelector(), Redux Hook, to select the state slices and render lists of rockets and missions in corresponding routes.

• We have Rendered a list of rockets (as per design). For the image of a rocket, we used the first image in the array of flickr_images.

• We have Rendered a table with the missions' data (as per design).

Redux: We have written actions and reducers for booking rockets and joining missions

• When a user clicks the "Reserve rocket" button, action will be dispatched to update the store. We get the ID of the reserved rocket and update the state. And We returned a new state object with all rockets, but the selected rocket will have an extra key reserved with its value set to true. We have used JS filter() or map() to set the value of the new state.

• We placed all our logic in the reducer. In the React view file, We only dispatched the action with the correct rocket ID as an argument.

• We have created a reducer and action dispatcher for the "Join Mission" button. The logic here is practically the same as with rockets - We have passed the mission's ID to the corresponding action and updated the mission's state with the selected mission having a new key/value - status: true.

Redux: We have written actions and reducers for canceling rockets and leaving missions

• Here we followed the same logic as with the "Reserve rocket" and "Join mission" - and we set the reserved key to false.
• We have dispatched these actions upon clicking on the corresponding buttons.

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).
• Rockets and Missions use the React conditional rendering syntax.

Render UI: My Profile section

• We have composed a two/three-column layout and list rockets and missions joined by the user (as per design):
• We Rendered a list of all joined missions (using filter()).
• We Render a list of all reserved rockets (using filter()).

In This pull request i :

• add the action creator to reserve the rocket.
• add the action creator to cancel the mission.
• Fix linter errors.
• Update fetching data.
• Add CSS classes to the reserve badge.

In This pull request i :

• Installed Axios and redux-thunk.
• Write the Rocket's actions and reducer.
• Configure the Redux Store.
• Create the configure store file and add my reducer.
• Add CSS classes.
• Fix linter errors.

In This Pull request @ahzamir and I :

• Create React App.
• Add React router, Redux, and logger.
• Add linter configuration.
• Create the header and add the image from free image.
• Create routes and view components (Rockets, Missions, My Profile).
• Create directories for all Redux state slice files (rockets, missions).
• Add CSS classes.

• 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).
• This view should be empty - you will add content in separate tasks.

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

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

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