Fix #1376: Showing BLANK with search terms return NO result #1413

NathanPang001 · 2020-11-19T04:02:29Z

Issue This PR Addresses

Fixes #1376

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

Description

Solves #1376
Adding a no results image for when the user types something that doesn't match any result.

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)

NathanPang001 · 2020-11-19T04:09:07Z

Huh, apparently its getting removed by "LOAD MORE POSTS" on the preview, I'm not sure why.

NathanPang001 · 2020-11-19T04:31:58Z

Ah, I think it has to do with the LoadAutoScroll.jsx, hmm, I'm not sure how I should fix this.

NathanPang001 · 2020-11-19T08:50:08Z

I'll continue to fix this, if anyone check this, please tell me if you find any bugs or anything else.

humphd

We can't use a copyright image from Facebook, please remove this.

yuanLeeMidori · 2021-01-17T20:27:17Z

@NathanPang001 Hi! Telescope team is working on merging all open PRs. Are you still working on this PR? We're happy to assist you to keep working on this PR. However, please let us know if you don't have interest keeping working on it. We'll assign another team member to work on it and make it merged. Thank you :)

izhuravlev · 2021-01-19T15:43:31Z

We should take a look around for another royalty-free image that might fit our project and will not violate any copyrights.
Possible sources: https://unsplash.com/ https://undraw.co/

izhuravlev · 2021-02-05T12:49:58Z

Can this be considered "Success"?

izhuravlev · 2021-02-05T13:05:30Z

Possible replacement for the "No Results Found" picture:

@humphd @chrispinkney @birtony and everybody else are welcome to review them and select your personal favourite

humphd · 2021-02-05T14:11:20Z

I like where this is heading. I hadn't thought about using photos, but that would be something we could do more of, since we're doing the image service in the back-end.

I wonder if photos vs. illustrations are best for our overall aesthetic, since we use that on the home page for the hero banner?

birtony · 2021-02-05T14:19:12Z

From my perception, I think the illustration fits better for the no results @humphd.

I like where this is heading. I hadn't thought about using photos, but that would be something we could do more of, since we're doing the image service in the back-end.

I wonder if photos vs. illustrations are best for our overall aesthetic, since we use that on the home page for the hero banner?

birtony · 2021-02-05T14:20:10Z

Possible replacement for the "No Results Found" picture:

1. [Mistaken Scientist](https://unsplash.com/photos/8RXmc8pLX_I)

2. [I am sorry](https://unsplash.com/photos/S4tm-mox-xQ)

3. [Doggo](https://unsplash.com/photos/K4mSJ7kc0As)

4. [Empty](https://unsplash.com/photos/-x-Brii2QaM)

5. [Magnifying Glass](https://unsplash.com/photos/uAFjFsMS3YY)

6. Searching from UnDraw:
   ![image](https://user-images.githubusercontent.com/36719387/107037172-b718c880-6788-11eb-9065-750116b93624.png)

@humphd @chrispinkney @birtony and everybody else are welcome to review them and select your personal favourite

Number 6 is my favourite out of these

humphd · 2021-02-05T14:20:19Z

OK, let's use:

Is it licensed for reuse? If so, let's do it now for 1.6 and iterate. I want this in today for 1.6

tonyvugithub · 2021-02-05T14:30:46Z

src/frontend/src/components/SearchPage/SearchResults.jsx

@@ -7,6 +7,7 @@ import { Container } from '@material-ui/core';
 import useSiteMetadata from '../../hooks/use-site-metadata';
 import Timeline from '../Posts/Timeline.jsx';
 import Spinner from '../Spinner';
+import NotFound from '../../images/NotFound.jpg';



Should this image be put in the public folder?

tonyvugithub · 2021-02-05T14:31:53Z

src/frontend/src/components/SearchPage/SearchResults.jsx

@@ -61,7 +66,9 @@ const SearchResults = ({ text, filter }) => {
      {data && data.length ? (
        <Timeline pages={data} nextPage={() => setSize(size + 1)} />
      ) : (
-        <h1>No search results</h1>
+        <h1 className={classes.noResults}>
+          <img src={NotFound} alt="Not Found" />


would a div tag more appropriate here? h1 tends to be the title of the page.

Agree, I would <div> here as well

birtony · 2021-02-05T14:44:04Z

src/frontend/src/components/SearchPage/SearchResults.jsx

@@ -7,6 +7,7 @@ import { Container } from '@material-ui/core';
 import useSiteMetadata from '../../hooks/use-site-metadata';
 import Timeline from '../Posts/Timeline.jsx';
 import Spinner from '../Spinner';
+import NotFound from '../../images/NotFound.jpg';


We should make sure to run this image (or whichever one we end up using) through https://tinyjpg.com/ or https://tinypng.com/. For the current one, it would reduce its size by 53%:

This would positively affect our site loading speed.

birtony · 2021-02-05T14:47:44Z

src/frontend/src/components/SearchPage/SearchResults.jsx

@@ -61,7 +66,9 @@ const SearchResults = ({ text, filter }) => {
      {data && data.length ? (
        <Timeline pages={data} nextPage={() => setSize(size + 1)} />
      ) : (
-        <h1>No search results</h1>
+        <h1 className={classes.noResults}>
+          <img src={NotFound} alt="Not Found" />


Agree, I would <div> here as well

izhuravlev · 2021-02-05T14:52:23Z

@humphd I don't think we will be able to use it - it is their image, and I think most of what I can do with it is screenshot it - I can't find it on their platform.

izhuravlev · 2021-02-12T10:21:03Z

Closed by #1700. Thank you @NathanPang001 for your work!

Adding no result picture, and style

823ab44

vercel bot deployed to Preview November 19, 2020 04:02 View deployment

humphd requested changes Nov 19, 2020

View reviewed changes

humphd mentioned this pull request Nov 25, 2020

[next] Update 500 error UI styling for failed search #1458

Closed

yuanLeeMidori changed the title ~~Issue #1376: Showing BLANK with search terms return NO result~~ Fix #1376: Showing BLANK with search terms return NO result Jan 19, 2021

humphd added this to the 1.6 Release milestone Jan 19, 2021

izhuravlev self-assigned this Jan 22, 2021

PedroFonsecaDEV added area: nextjs Nextjs related issues Priority: High and removed Priority: High labels Jan 26, 2021

tonyvugithub suggested changes Feb 5, 2021

View reviewed changes

birtony suggested changes Feb 5, 2021

View reviewed changes

humphd modified the milestones: 1.6 Release, 1.7 Release Feb 5, 2021

izhuravlev mentioned this pull request Feb 12, 2021

Fixes #1376 - Add No-Results-Image to Next and Gatsby search results components #1700

Merged

8 tasks

izhuravlev closed this Feb 12, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix #1376: Showing BLANK with search terms return NO result #1413

Fix #1376: Showing BLANK with search terms return NO result #1413

NathanPang001 commented Nov 19, 2020 •

edited by yuanLeeMidori

Loading

NathanPang001 commented Nov 19, 2020

NathanPang001 commented Nov 19, 2020 •

edited

Loading

NathanPang001 commented Nov 19, 2020

humphd left a comment

yuanLeeMidori commented Jan 17, 2021 •

edited

Loading

izhuravlev commented Jan 19, 2021

izhuravlev commented Feb 5, 2021

izhuravlev commented Feb 5, 2021 •

edited

Loading

humphd commented Feb 5, 2021

birtony commented Feb 5, 2021

birtony commented Feb 5, 2021

humphd commented Feb 5, 2021

tonyvugithub Feb 5, 2021

tonyvugithub Feb 5, 2021

birtony Feb 5, 2021

birtony Feb 5, 2021

birtony Feb 5, 2021

izhuravlev commented Feb 5, 2021

izhuravlev commented Feb 12, 2021

Fix #1376: Showing BLANK with search terms return NO result #1413

Fix #1376: Showing BLANK with search terms return NO result #1413

Conversation

NathanPang001 commented Nov 19, 2020 • edited by yuanLeeMidori Loading

Issue This PR Addresses

Type of Change

Description

Checklist

NathanPang001 commented Nov 19, 2020

NathanPang001 commented Nov 19, 2020 • edited Loading

NathanPang001 commented Nov 19, 2020

humphd left a comment

Choose a reason for hiding this comment

yuanLeeMidori commented Jan 17, 2021 • edited Loading

izhuravlev commented Jan 19, 2021

izhuravlev commented Feb 5, 2021

izhuravlev commented Feb 5, 2021 • edited Loading

humphd commented Feb 5, 2021

birtony commented Feb 5, 2021

birtony commented Feb 5, 2021

humphd commented Feb 5, 2021

tonyvugithub Feb 5, 2021

Choose a reason for hiding this comment

tonyvugithub Feb 5, 2021

Choose a reason for hiding this comment

birtony Feb 5, 2021

Choose a reason for hiding this comment

birtony Feb 5, 2021

Choose a reason for hiding this comment

birtony Feb 5, 2021

Choose a reason for hiding this comment

izhuravlev commented Feb 5, 2021

izhuravlev commented Feb 12, 2021

NathanPang001 commented Nov 19, 2020 •

edited by yuanLeeMidori

Loading

NathanPang001 commented Nov 19, 2020 •

edited

Loading

yuanLeeMidori commented Jan 17, 2021 •

edited

Loading

izhuravlev commented Feb 5, 2021 •

edited

Loading