Add basic search functionality (closed other PR because it wasn't against master branch)

[crhistianramirez]

What

Adds basic search functionality.

Why

Helps users find locations they're interested more easily

Resolves part of https://github.com/Twin-Cities-Mutual-Aid/twin-cities-aid-distribution-locations/issues/127

Ensure the following interactions work as expected. Please test using a mobile form factor.

• [x] Tapping on a marker on the map displays information about the marker in a popup.
• [x] Tapping the "Show list of locations" button replaces the map view with a list view.
• [x] Tapping an item in the list replaces the list view with a map view, and navigates the map to the tapped item on the map.
• [x] Tapping one of the ✅'s in the legend filters items on the map and in the list.
• [x] Changing the language to spanish changes things on the page.
• [x] Clicking the Help/Info button opens and closes a menu with information.
• [x] Clicking the X Close button on the Help/Info screen closes the modal.

Check the app in the following web browsers:

• [x] Chrome
• [x] Firefox
• [x] Edge
• [x] Safari

[jdalt]

Thank you for getting this based off of master. It's so much easier to take a peak at it. I don't have much time to add feedback, but overall this looks great!

Some thoughts:

1. I wonder if there's a need to debounce or add a loading spinner while typing -- it would be nice to know it's "doing something."
2. It might also be nice to know how many locations the search has filtered down to vs how many possible results are available in the location side bar. I could imagine an interaction where the clear search button only appeared after searching and the clear search button somehow indicated how many items you had filtered down to. Clear Search (viewing 80 of 120 locations). I'm not the UX person, so this is an idea and I think you should run it by the Dragon Riders and the #tc-ux-and-devs group.
3. I think the button styles on Clear Search could use some love. I think some left margin is probably needed at the very list.

[codarose]

@crhistianramirez I am looking this over and have some comments. I would like to review it before it merges, I'll get back to you within a few hours. Thank you!

[crhistianramirez]

@estherrose046 sounds good! I won't be able to make updates until after 5pm anyway. Also there is a UX discussion happening in slack that might be interesting to you or others. It's in the #tc-ux-and-devs-group

[drewsteff]

@crhistianramirez @jdalt @estherrose046 thoughts on if it could look like this? or is this a ton of work (genuinely asking as I don't know the time or scoping to create this- v new here, much wow, many q's)

[crhistianramirez]

That looks good to me @drewsteff, good ux improvements.

Thanks for doing some detailed @estherrose046 non-fuzzy search it is

[drewsteff]

no problem @crhistianramirez - if anyone needs the styling if you want to use it here's the link to the page in figma for it

https://www.figma.com/file/Tz4PGJord6R5AziQVYfXTu/Twin-Cities-Aid-Map-UX-and-UI-Focus?node-id=45%3A182

[crhistianramirez]

This is ready for review again.

The one thing I did slightly different is that I put the search results above the list (top right). My reasoning is that the information is useful independent of searching (ie when combined with filters)

[crhistianramirez]

Whoops, yeah the hidden fields were definitely meant to be hidden not sure how that happpened but its fixed now and merging master into my branch fixed the build issues.

user interaction pattern is mostly right but there are still some rough edges.

Could you elaborate on this? Maybe i'll post in the ux group a new link to the updated search