User Story 10 - Filter function by (Sub-) String

Jessica-Windoffer commented 4 months ago

Value proposition

As a User I want to filter by points of interests In order to improve the listing of activities to reach out quicker to a certain activity.

Description

Acceptance criteria

The list of activities can be filtered by substrings in the title, category, area and country
At the top of the Activities List is now a Filter-Section displayed
The Filter-Section consists of a Search Bar to filter by substrings in the title, category, area and country
When typing a (Sub-) String into the Search Bar all activities including the Category-String or (Sub-) String are displayed.
When there is now matching activity to the (Sub-) String, an error message is shown to the user underneath the Search Bar
For re-setting the Filter to an empty Search Bar as well as re-setting the Filter List back to default, click the cross that comes with the Search Bar-input-Field

Tasks

[x] Create feature branch feature/filter-function
[ ] Create a SearchBar-component
[ ] Implement SearchBar-component on Activity List-Page
[x] Create SearchBar-input-Field and apply simple styling via styled-components

[x] Implement a useState for the searchTerm:

const [searchTerm, setSearchTerm] = useState('');

[x] Save the entry of the SearchBar-input-Field into an searchTerm
[x] Implement a eventHandler-variable, where the SearchTerm is set in order of clicking the search icon/pressing enter as a user -> This could look something like this:
```
const handleSearch = (event) => {
setSearchTerm(event.target.value);
};
```
[x] Implement a variable, which filters through the given data, lowers all Cases in the given item and compares the item to the searchTerm, which Cases are also lowered
```
const filteredData = data.filter((item) =>
item.toLowerCase().includes(searchTerm.toLowerCase())
);
```

FelineHuhn commented 4 months ago

LGTM - nice feature! 🥳 One idea: What about a ui feedback for the user, when the searched string has no match!?

nattenhagen commented 4 months ago

Very, very nice work! Its super handy as a user to be able to filter for several categories and also the error message makes it clear for me as a user to search again. The only small suggestion I have is to make the error message a little less aggressive (maybe another color?) :)

Volkerboehm1971 / activities-app