[next] Fixes #1546: Ported SearchResults to NextJS and fixed styling on search error

[rjayroso]

Issue This PR Addresses

Fixes #1546 (Port SearchResults to NextJS)
Fixes #1458 (Update error styling for failed search)
Closes #1512 (The original 1458 issue was worked on by @sonechca and his resulting PR's work was essentially merged into this one and updated)

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI
• Next.JS Port

Description

This PR ports SearchResults component from Gatsby to NextJS. This PR also includes an update on the search error styling.

Notable changes are the removal of the loading variable from const { data, size, loading, setSize, error } = useSWRInfinite(//...)
loading is now declared as const loading = !data && !error;

className={classes.root} attribute was removed from <Box className={classes.root} boxShadow={2} marginTop={10}> since classes.root doesn't exist (Typescript complained whereas in the original JSX file this was not an issue).

CSS styling additions of errorBackground, errorTitle, and errorMessage were added to update the error styling.

How to Test

Import the SearchResults component into a NextJS page (I used the index.tsx to test):
import SearchResults from '../components/SearchResults'

Now create a SearchResults component and pass in some data:
e.g. it might look like this <SearchResults text={"Search for me"} filter={"I am a filter"}/>

Save the code and then refresh the page, you should see something similar to this:

To check the responsiveness, inspect the page (right-click the page -> inspect) and toggle device toolbar. For resulting example, see below:

Styling was taken from PR #1512 and updated to be responsive, see below:

Before	After

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[HyperTHD]

Other than the typo, looks good otherwise. I'm a little uneasy with the way it looks on mobile, but that's probably because the banner component hasn't been added yet.

[chrispinkney]

Getting:

Unhandled Runtime Error

TypeError: page.map is not a function

from Timeline.tsx after checking out this PR. Any ideas? Master runs just fine for me until I test this in pages/index.tsx

[rjayroso]

@chrispinkney wow I've never seen it say anything about that before, I don't think I touched anything in Timeline.tsx but if I had to guess it has to do something with maybe how I set up my environment(?). I set it up so that my backend comes from the dev server instead of running docker locally.

[rjayroso]

Can I see how you imported the component and implemented it in your pages/index.tsx?

[PedroFonsecaDEV]

Getting:

Unhandled Runtime Error

TypeError: page.map is not a function

from Timeline.tsx after checking out this PR. Any ideas? Master runs just fine for me until I test this in pages/index.tsx

Let's investigate this bug in a different thread because I don't think it is related to this PR.

[HyperTHD]

Getting:

Unhandled Runtime Error

TypeError: page.map is not a function

from Timeline.tsx after checking out this PR. Any ideas? Master runs just fine for me until I test this in pages/index.tsx

Let's investigate this bug in a different thread because I don't think it is related to this PR.

The SearchPage won't be able to land with this issue still intact, we must solve it here

[humphd]

How can I reproduce this pages.map error? I'd like to look into it.

[manekenpix]

I think this is a filter issue. Currently, our filter only accepts post or author. Any other value would cause the page.map error. I'm testing using author or post as filters and it works wonderfully.

[manekenpix]

[humphd]

Interesting. In TS we can capture that with type Filter = 'post' | 'author'

[rjayroso]

Interesting. In TS we can capture that with type Filter = 'post' | 'author'

Would this statement be in the SearchResults.tsx component or in the Search page (before we pass the filter prop)?

[humphd]

@rjayroso anything that relies on that typing would need it, just like you might use string in multiple places for a String type.

[rjayroso]

I added type Filter = 'post' | 'author';, and have gotten the same results as @manekenpix. As long as filter is either post or author, it no longer gives us that page.map error.
I tested it further with the change you suggested but when I wrapped data in another array (pages={data} to pages={[data]}), it gave me this:

[humphd]

Get rid of 43 and do this inline, since we don't do anything else with Filter:

filter: 'post' | 'author';

[humphd]

One thing to consider: we might want to define Filter like you did on 43 in one file and export it, so we can use it again in another. I'm not sure who the owner of the type should be, maybe the root search page? Regardless, that can happen in an other PR. cc @c3ho, who I think will have to deal with this.

[humphd]

Let's rebase this too