7. add search list form and function in List

[hun-ah]

For an example of how to fill this template out, see this Pull Request.

Description

• added form element to the List component
• the form contains an input that allows the user to search for an item on their list (case insensitive and can search any part of the item name)
• added clear functionality to clear input

Related Issue

closes #7

Acceptance Criteria

• A form is added to the top of the List view, above the shopping list
• The form includes the following elements
  • A text field (with semantic <label>!) which narrows down the list as the user types
  • When there’s text in the field, some kind of button (e.g., an X) to clear the field. When the field is cleared, the list is reset to its unfiltered state.

Type of Changes

Enchancement

Updates

Before

After

Screen.Recording.2024-02-21.at.1.59.42.PM.mov

Testing Steps / QA Criteria

1. git pull
2. git checkout ec-hm-issue-7
3. npm start
4. select list from home
5. go to list page and search for a list item
6. clear input text using the 'X' button

[github-actions]

Visit the preview URL for this PR (updated for commit eda4664):

https://tcl-66-smart-shopping-list--pr25-ec-hm-issue-7-eu7cc3wm.web.app

_{(expires Fri, 01 Mar 2024 16:18:37 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 2dc16cb2a79cbd6723fdc511b73e0743df1d18d0}

[eonflower]

Everything seems to work correctly except when I searched for one specific item. I used the groceries list that we all have since it had the most items added to it. But when I try and search for banana, it doesn't pop up. I tried using a capital B since the original list item is "Banana", but that also didn't do anything. If I search 'an' it pops up though. I added some more items that start with a capital and it seems they also have that issue.

[hun-ah]

Good call @eonflower. So there are two ways this can be fixed, the first is just to do this item.name.toLowerCase().includes(search.toLowerCase()) on the filtered data or alternatively we would add a .toLowerCase() on any item being sent to the database, which I think is the better option to ensure that all the data sent to firebase is consistent and could prevent any future errors. If everything is being stored differently ie (apple, BANANA, Mango) it makes the data harder to work with vs. if it were (apple, banana, mango) or whatever the list item is. @StefieCaff let me know your thoughts as well and I will make the change!

*note: if we change the items going into the database we will also have to edit any existing items to be consistent with being in all lower case but it's a relatively easy change.

[eonflower]

Personally, I like consistency within the database and then we can style the items to have the first letter capitalized later if we want that.

[StefieCaff]

@hun-ah , I agree with the consensus. Mange the format of the data before it enters the database. I did notice in the database that the item may actually be stored by a random number... there is a name key that stores the input value... but if I am seeing it correctly the items may be assigned a random number just wanted to bring that up :)

[StefieCaff]

Nice work! Super clean code-- I noticed when I did a search with just a space, it worked to filter any items that had a space in them, and I liked that.

[3campos]

@eonflower @StefieCaff @hun-ah Per our consensus, the "toLowerCase" method has been added to firebase.js to apply a lowercase format to the grocery item names that a user creates. I edited all preexisting grocery names in our firestore database which contained capital letters to be in lowercase format.

[eonflower]

Nice job y'all!

[jeremiahfallin]

Nice work, looks good to me!

[jeremiahfallin]

Extremely pedantic but it's common practice to put library imports at the very top above files/components that are in the project.

[jeremiahfallin]

Also pedantic but this should have type="button" on it, even with the e.preventDefault since this button will technically try to submit the form.

[3campos]

Thanks for the feedback, @jeremiahfallin! We implemented both of your recommendations.