Display shelters based on user input #Issue 76 and #Issue 75 fixed.

[vakhil-98]

Fixes #75 and #76

What was changed?

• Initialized the 'searchQuery' state with a random keyword from list of shelters.

• Added conditional logic to filter data locally based on the 'searchQuery'.

• Removed the redundant return shelters; statement from the first .then() block.

• Updated the dependency array of the useEffect hook to include 'searchQuery'

• When the user presses Signup for Shifts from the navigation bar, there is now a search bar with a clear button and a search button. The user can also press enter while in the search bar field to search.

• The search bar validates users' input and only allows them to enter alphanumeric characters as well as "-", " ' ", '&', " / ", "(", ")", ":" or "," and requires the search to be at least 5 characters.

Here, describe what part of the application you changed (e.g. login page, database, etc.). If possible, mention what specific components were added, removed, or modified. client_app/src/Shelters.js client_app/src/Components/SearchBar.css, client_app/src/Components/SearchBar.js

Why was it changed? It is the part of the code base dealing with displaying shelters. To provide easier functionality for the user so they could search for a specific shelter instead of having to scroll through all the shelters.

Here, describe the issue that you are fixing with this code, and why your code fixes it. Display the list of shelters based on the text provided in the "Search" field. The code based on user provided input filters and displays data accordingly on page, else shows a message no match found and by default shows all shelters list as mentioned in issue description.

How was it changed? Reduced the number of displayed shelters based on searchQuery.

Here, get into detail about what files you modified, and talk about the most important lines in regards to fixing the issue. client_app/src/Shelters.js Line 9, 27, 30 - 33, 63 - 65, 146 - 169, 185, 203 - 209 Two new files SearchBar.js which holds the logic for the search bar component, as well as the search and clear button, as well as SearchBar.css which provides the styling for the search bar component.

Screenshots that show the changes (if applicable):

[SiriChandanaGarimella]

@vakhil-98 - Good work! Could you please check on the below points:

1. When the input in the Search box is cleared using the backspace key, all the available Shelters should be displayed.
2. If no Shelter names match the entered input, the message "No shelters found with that name." should be followed by a helpful suggestion such as "Explore the list below for available shelters."
3. If more than one space is entered between the words in the search input, then trim the extra spaces and match them to the shelter name.
4. Also, I see that you do not have the latest code from the main branch. Please sync your branch with the "main".