Fran-A-Dev / climber-coder-finder

0 stars 1 forks source link

Add Search Function to the App with Fuse JS V2 #19

Open Fran-A-Dev opened 2 years ago

Fran-A-Dev commented 2 years ago

We will use fuse js for our search library and we will do this at build time when the data is loaded from the locations of cities in WordPress and ACM. V2 availability

Fran-A-Dev commented 2 years ago

Using Fuse JS, we will have a fuzzy search that allows users to search for city or state on the upper left hand corner of the page. Once the user hits enter on the city they want, it will take them to the exact city or state they were looking for. We will use a JSON file for the cities and states instead of WordPress

Fran-A-Dev commented 2 years ago

An Idea I cam across is to use Google Places Autocomplete for the search.
Leigh Halladay's dependencies used and components in this video may help. [](url)

Fran-A-Dev commented 2 years ago

Added search component to the index.tsx main file. Figuring out in the Google-Map-React NPM package we used if there is a helper service that will allow us to zoom into location once the event is fired off the search. If not, we may have to use a service or another NPM package

Fran-A-Dev commented 2 years ago

Realized that we need to use the direct API from the package we installed at the beginning of the project. Now we need to use a state management approach with React context in order to get the state updated once a user hits enter after typing the location in the search bar to bring them to that location on the map. https://kentcdodds.com/blog/how-to-use-react-context-effectively