Implement city name autocompletion

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

Implement city name autocompletion #15

Closed quachtridat closed 2 years ago

quachtridat commented 2 years ago

Summary

This PR implements an async city name typeahead by making API calls to obtain city list.

Details

Use react-bootstrap-typeahead to create an auto-complete search box.
Bootstrap is used for stylings. It is also a dependency of react-bootstrap-typeahead.
The code makes API calls to City API by API Ninjas. An API key from API Ninjas is required for the web app to run.

Caveats

Result fetching is not as smooth as expected. The search box may display No results found in some cases, but fixable by typing extra characters/keywords.

Related issues

This resolves #6.

netlify[bot] commented 2 years ago

✔️ Deploy Preview for mlh-prep-4-1-1 ready!

🔨 Explore the source changes: 69c86b25c5b164f03bc286ffbb298d96f6fd7e76

🔍 Inspect the deploy log: https://app.netlify.com/sites/mlh-prep-4-1-1/deploys/616d96c23803d6000825500d

😎 Browse the preview: https://deploy-preview-15--mlh-prep-4-1-1.netlify.app/

khattakdev commented 2 years ago

Hey folks,

I noticed a bootstrap.min.css, rather than adding it directly, you can try the npm version
There is a change in example.env, can update the README for this and mention what's the second API for?

This PR is still in progress, so maybe you are already working something that I have mentioned above.

quachtridat commented 2 years ago

Hey folks,

I noticed a bootstrap.min.css, rather than adding it directly, you can try the npm version

There is a change in example.env, can update the README for this and mention what's the second API for?

This PR is still in progress, so maybe you are already working something that I have mentioned above.

Thank you. We will address these points.

quachtridat commented 2 years ago

Merge conflicts resolved.

khattakdev commented 2 years ago

Hey @quachtridat Awesome work. I'll need you to share the API Key of api-ninja to add it to netlify. I think this PR is good to merge but let me first test it out before we merge it. Meanwhile, feel free to look into other issues.

quachtridat commented 2 years ago

Hey @quachtridat

Awesome work.

I'll need you to share the API Key of api-ninja to add it to netlify. I think this PR is good to merge but let me first test it out before we merge it.

Meanwhile, feel free to look into other issues.

@khattakdev please use xi5yO1YUrvCtolYg8w7q5A==FOp68tTT6waNJ2Ul. Remaining available number of calls is still great so feel free to test it out as you want. The README.md that comes with this PR should also be able to guide everyone to refer to API Ninjas to obtain an API key for free.

It might be due to rate limiting or response delay that the caveat I described happens. In any case, I am available and ready for further discussion.

khattakdev commented 2 years ago

@quachtridat I would need you to resolve the merge conflicts Also don't make the input field full length, There will be one or two buttons on the side

quachtridat commented 2 years ago

@quachtridat I would need you to resolve the merge conflicts Also don't make the input field full length, There will be one or two buttons on the side

I'll revert CSS changes that make the search box wide. CSS changes were made by @Hemansh31. Currently I am working to resolve the conflicts.

quachtridat commented 2 years ago

@quachtridat I would need you to resolve the merge conflicts Also don't make the input field full length, There will be one or two buttons on the side

@khattakdev

Merge conflicts are resolved and the search bar is no longer wide.

I will incorporate further changes in a separate PR to integrate with #12.