Build SpaceX fan site using GraphQL with React and Apollo Client -3

Image for post
Image for post
Photo by Bill Jelen on Unsplash

Welcome to part-3 of the series. You can find part-2 here.

This series is based on the youtube series by Brad Traversy and you can find it here.

Now, let’s send the data from our Launches.js file to a new component LaunchItem.js. We are just lopping through the data using map and then passing it to a new LaunchItem component.

Image for post
Image for post
Launches.js

Next, we will create the LaunchItem.js file in the same components folder. We are just de-structuring the props and showing it through some use of bootstrap classes.

Image for post
Image for post
LaunchItem.js

It will show all the launches in a nice list view in our web-page.

Image for post
Image for post
All Launches

Next, we will install two packages in our client which will help us with showing different color for a failed or successful mission.

Image for post
Image for post
classnames and moment

We also need to install one more package called react-moment, which i missed. So, npm install it in client folder.

Image for post
Image for post
react-moment

Next, we will update our LaunchItem.js to use classNames and change the mission_name color to green or red, depending on whether launch_success is true or false.

Image for post
Image for post
LaunchItem.js

Now, our web-app will show as below.

Image for post
Image for post
Launches

Now, the user show know what red and green means. So, we put a color description in Launches.js

Image for post
Image for post
Launches.js

It will show these in our web-page.

Image for post
Image for post
Success or Fail

From the above image the date seems a bit difficult to read, so we will use moment to show it in a good format.

Using Moment

It will now show the date format in our web-page.

Image for post
Image for post
Nice date format

Now, when the user clicks on Launch Details it show open a different page, showing the details of the launch. We need to use react-router to navigate to different page. So, let’s npm install it in the client folder.

Image for post
Image for post
react-router

Next, we will use routes in our App.js. We are first doing import of Router and the Launch component(yet to be created).

Then we are wrapping everything in Router and using two routes, one for Launches component an other for Launch component.

Image for post
Image for post
Routes in App.js

Next, we will create Launch.js inside the components folder and put the basic code in it. We will change the content later.

Image for post
Image for post
Launch.js

We also need to change the simple button in our LaunchItem.js to use Link from react-router-dom.

Image for post
Image for post
LaunchItem.js

Now, once we click on the Launch Details link, it will show us the Launch Component. Also, notice the url as it got changed to the launch with flight_number.

Image for post
Image for post
Web-page

This completes the part-3 of the series. You can find the code for the same in my github repo here.

You can find part-4 here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store