Dear reviewer, we are doing this project for two. (Abraha and Karam)

Here is the project link: https://github.com/AbrahaKahsay/space-travelers/projects/1

Projection description

In This project I and my coding partner have implemented:

• Use React documentation.
• Use React components.
• Use React props.
• Use React Router.
• Connect React and Redux.
• Handle events in a React app.
• Write unit tests with React Testing Library.
• Use styles in a React app.
• Use React life cycle methods.
• Apply React best practices and language style guides in code.
• Use store, actions, and reducers in React.
• Perform a code review for a team member.

Technologies used

• HTML, CSS, JavaScript, React, Redux, Webpack, Babel
• Github, Git, Linters, VS Code
• Chrome Browser

In this Project, unit tests with React Testing Library have been put in the following components.

• Navbar.js
• Profile.js
• Rockets.js
• Missions.js
• App.js

The project required

• Follow the same logic as with the "Join mission" - but you need to set the reserved key to false.
• Dispatch these actions upon clicking on the corresponding buttons.
• Render a list of all joined missions (use filter()) on the "My profile" page.
• Fetch data from the Missions endpoint (https://api.spacexdata.com/v3/missions) when a user navigates to the Missions section.
• Once the data are fetched, dispatch an action to store the selected data in the Redux store:
• When a user clicks the "Join Mission" button, an action needs to be dispatched to update the store. You need to get the ID of the selected mission and update the state. Remember you mustn't mutate the state. Instead, you need to return a new state object with all missions, but the selected mission 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(mission.id !== id) 
  

•     return mission;
  

• return { ...mission, 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 rocket ID as an argument.

Project required

• Follow the same logic as with the "Join mission" - but you need to set the reserved key to false.
• Dispatch these actions upon clicking on the corresponding buttons.
• Render a list of all joined missions (use filter()) on the "My profile" page.
• Fetch data from the Missions endpoint (https://api.spacexdata.com/v3/missions) when a user navigates to the Missions section.
• Once the data are fetched, dispatch an action to store the selected data in the Redux store:
• 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).

Project description

In this project, I have implemented actions for

• reserving rockets
• cancel rockets and
• switch conditionals for cancel and reserve rockets

Fetch data from the Rockets endpoint (https://api.spacexdata.com/v3/rockets) 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

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