Record previous searches

MLH-Fellowship / prep-project-4.1.1

MLH Prep Project for Pod 4.1.1

https://mlh-prep-4-1-1.netlify.app/

MIT License

6 stars 13 forks source link

Record previous searches #12

Closed khattakdev closed 2 years ago

khattakdev commented 2 years ago

Add a search log somewhere on the page that shows the last 3 - 5 search logs, including the weather (at the time of search). Something like the following:

New York 17.36°C, (Tues) 12 Oct 2021
Delhi 30°C, (Tues) 12 Oct 2021
New York 12.36°C, (Tues) 12 Oct 2021

You can save this data in the local storage, you don't need to make an actual Database

ShiviPro commented 2 years ago

Hey, can I work on this issue, if that's okay ?

Tanmay000009 commented 2 years ago

@khattakdev is it a good idea to break the issue into 2 parts and work on it.

In the first part, we'll store the 5 most recent searches into the local storage. And #6 is working on autocomplete, so when we have an empty search field, like most search engines, we can show the last 5 searches,

And for the 2nd part of the issue, to show a log on-page as you have mentioned it can be shown anywhere, so how about after all of the issues with UI are done, we add that. As log can be fit anywhere

khattakdev commented 2 years ago

@Tanmay000009 you can split it into two parts but I am wondering how will the UI looks like if you have to merge this with the Autocomplete issue. I mean the autocomplete will show a drop-down menu, I am wondering where will you add the last 5 results? The same as google engine?

Tanmay000009 commented 2 years ago

@Tanmay000009 you can split it into two parts but I am wondering how will the UI looks like if you have to merge this with the Autocomplete issue. I mean the autocomplete will show a drop-down menu, I am wondering where will you add the last 5 results? The same as google engine?

Yes. So when the search field is empty it'll show the last 5 searches, and if the user enters some input then it'll show results using #6

Tanmay000009 commented 2 years ago

@khattakdev we tried implementing the delay in API calls, while the user is still typing, using setTimeout and clearTimeout functions in JS. But we noticed the following issues/problems:

We tried various thresholds from 0.5 seconds to 3 seconds. We were able to ignore most of the undesired results, but not all.
Also with Timeouts, the app was getting caught in asynchronous calls stacking up and creating a mess resulting in very delayed results, duplicated results, and sometimes the inaccurate results coming after the accurate, resulting in the app displaying the inaccurate one.

Hence, I and @ShiviPro think this might not be a good way to deal with the problem in production. Also, after researching on the internet, we found adding a search button would be a better solution for providing users with accurate results, and also effective in terms of API calls.

khattakdev commented 2 years ago

@Tanmay000009 I think the easy solution/fix for this would be to add a search icon, on clicking that, an API call will be made. This way you won't be making unnecessary calls. You can also make that it makes an API call when the user taps the Return key.

Tanmay000009 commented 2 years ago

@Tanmay000009 I think the easy solution/fix for this would be to add a search icon, on clicking that, an API call will be made. This way you won't be making unnecessary calls. You can also make that it makes an API call when the user taps the Return key.

Sure thing. Thank you so much for helping, we'll go with the issue as you said!