Ks hk filter search

[ksiman14]

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

Description

• Added input field where users can type to filter
• Added "X" button that appears when input field isn't empty so user can clear the field
• Created state for search that updates with text in input field
• Typing into the field filters list items to only show items containing the text in the input field

Related Issue

closes #9

Acceptance Criteria

• [x] Display a text field above the top of the shopping list
• [x] As the user types into the field, the list should narrow to display only items that contain the text the user entered in the filter field
• [x] When the field has text in it, the user should be able to tap a UI element (e.g., with an "X" button next to the field) to clear the field
• [x] The filter text should match any part of the item name (i.e. it should not only match from the start of the string)

Type of Changes

	Type
	:bug: Bug fix
✓	:sparkles: New feature
	:hammer: Refactoring
	:100: Add tests
	:link: Update dependencies
	:scroll: Docs

Updates

Before

After

Testing Steps / QA Criteria

• Pull down branch ks-hk-filterSearch
• Type in search bar
• Items should filter according to text
• X button should appear, click button to clear input

[github-actions[bot]]

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

https://tcl-28-shopping-list--pr31-ks-hk-filtersearch-jnst4kqs.web.app

_{(expires Fri, 20 Aug 2021 14:16:32 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}