Bye Gatsby (Episode 2)

Greetings Everybody,

This is the second episode of “How I contributed to switching Telescope’s Front-End from Gatsby to Next.js” — the last episode is coming soon.

This week’s open-source adventures started with issue #1376, where we wanted to display the “No Results Found” image on the search page if the search did not return any results. This was another issue that I took from a person who was no longer contributing to Telescope.

No Results Image

The first problem with this PR was that the contributor proposed to use Facebook’s No-Results image — and we definitely don’t want to do that.

So the first part of solving this issue was to find an appropriate, royalty-free image that people would like. With this task, I went to Unsplash.com and Undraw.co to look up something that everybody would like.

My findings:

  1. Mistaken Scientist
  2. I am sorry
  3. Doggo
  4. Empty
  5. Magnifying Glass

What’s funny is that when I tried to search Undraw for something like “No Results” — no results were found. Can this be considered a success?

But everybody liked the picture Undraw was using, and gladly we were able to find it and add it to our project.

Next step: Code it

As we still had Gatsby front-end as our main front-end, I needed to implement the no-results image in both front-ends, although the code was almost the same.

Gatsby:

Import Image:
import NotFound from ‘../../images/noResults.svg’;

Add styling:

Place image:

Next.js

Everything was the same, except for the image export:
const NoResultsImg = ‘/noResults.svg’;

After that, I waited for Reviews, rebased it on the up-to-date master and merged.

Fix onClick area in Next.js Headers

After porting headers to Next.js, we mentioned that the area on which the buttons reacted to click and started redirecting to another page was limited only to the text on those buttons.

This sounded a little bit weird because this is the code that we had:

Apparently, after looking on the web for some time, I found out the correct way to do the navigational buttons here:

The difference here is the following:

  1. <Button> needs to be wrapped inside of the <Link> tag (<ListItem> for Mobile Header, as we are using <List> there),
  2. <Button> needs to have component=”a” as one of the parameters, so Next knows you are using this button for the link,
  3. <Link> needs to have a passHref parameter, so Link passes the href property down to its child <Button>.

I also renamed the “Link” styling to “ButtonText”, as the text in the buttons was not a link anymore.

So, if you have the same issues with buttons and links in Next.js, take a look at the above snippet.

Then it was Reviewed, Rebased, Merged — all as usual.

As Always,

This was it for this episode, the last episode is coming soon!

Stay healthy, wash your hands, wish your Mom and your other beloved females “Happy International Women’s day” — and have a great day!

Telescope Page: https://telescope.cdot.systems/
Telescope GitHub We welcome all contributors!https://github.com/Seneca-CDOT/telescope
My GitHub: https://github.com/izhuravlev

Student — Junior Software Developer

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