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

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.

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.

LaunchItem.js

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

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.

classnames and moment

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

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.

LaunchItem.js

Now, our web-app will show as below.

Launches

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

Launches.js

It will show these in our web-page.

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.

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.

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.

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.

Launch.js

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

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.

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.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to create themes for your Angular apps using CSS

How I broke Gatsby JS conditional page build and learned to debug the tool chain

Building a JavaScript Matching Game

Day 009 of #100DaysOfDesign — Mind Reader Game

Publishing First npm Package

Sequelize relationships — Ultimate guide

Coding Interviews: Solving the “Staircase with N Steps” Problem

A person walking up stairs

Load Your React Code On-Demand With Code-Splitting

splitting image

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
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Learning React with TypeScript by Building an API app

How to write tests for Redux Reducers in React.js/Next.js Apps!

Simple And Easy Login Screen Integration

Containerize React.js Application With Node.js