Rt tc search item in list

[GrannyYetta]

	Type
✓	New feature

Description

We added a feature in the List view to search items within an existing list. The filter text matches any parts of the item name.

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 !) 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

The feature allows the user to filter through items of a list. No changes were made to the backend and the feature does not interact directly with the database.

Before

After

Testing Steps / QA Criteria

npm start

1. Select the test-list
2. Select the List view
3. Type any character in the search field
4. Click on the "X" to clear the search field

[github-actions]

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

https://tcl-78-smart-shopping-list--pr22-rt-tc-search-item-in-hskj13oz.web.app

_{(expires Sat, 07 Sep 2024 13:00:29 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c781903507c1507075d7a974036959ddeec29c0a}

[eva-lng]

Well done! The filter feature works as it's supposed to, code is clean and easy to read.

Since we are not focused on styling right now, a small improvement we could implement in the future: Some browsers have a default 'X' icon for clearing text in search inputs, it appears after typing something in the input. It should be eventually removed so we don't have two 'X' buttons next to each other.

Another thing to consider would be how to structure the UI. When we filter for an item, the page displays both the filtered data and the unfiltered data underneath, which is visually confusing. Displaying only filtered data when we using filter might be a better approach.

[vivitt]

Nice job, team! The filtering and clearing button are well implemented and work fine.

I have just one comment: when I type in the filter field, I can see both the filtered elements and the complete list below. See the following example:

We should address this so that only the matching items are shown when the input has any content. If there are no matches, no items should be displayed. When users clear the form, the complete list should be shown again.
Let me know if you need any help with this!