Implementing filtering of search results

[Dex491]

Implementation of filtering search results:

Within Header.js:

• When a user uses the submit button in the search bar within in Header component we redirect them to the SearchResults component and pass down what the user typed in the search bar through the Link to the SearchResults component
  • Use useLocation to pass it down the searchQuery
  • When the user reach this page we use the query to initially set the url to /search?query=... where the ... is what the user searched

Within SearchResults.js

• When user types something in the search bar issue two client get requests, one for users, one for cohort.
  • Create a state value in the search component searchQuery, setSearchQuery
    • Controlled form to capture what the user typed to allow us to use the value for filtering
  • Create searchParams for users/cohorts using useSearchParams from react-router-dom
    • Use the searchParams to update the url /search?query=... where the ... is what the user searched
    • In handleSubmit we set searchParams to the searchQuery state value
  • Filtering should be case sensitive and partial matches
    • Use an includes() when looping through data to filter through every property.
    • Set saved search state and db state to lowercase
  • If no matches in a particular section (students, teachers, cohorts) return message saying "No matches found"
    • If result of the filtered array is of length 0, return "No matches found" in that particular section

[dogezen]

Use this example to implement the search parameters and reading of query parameters from the url: https://reactgo.com/react-router-query-params/

I think I am unclear fully about the flow:

1) the search bar is in

component, so the state for what the user types in search bar should be in this component. 2) once the user submits the search, then you redirect to the /search/query=... page, which will be the <SearchResults> component; here is where you then unpackage the query and submit the useEffect to fetch data and then apply the filters on the retrieved data.

[dogezen]

Hence, please break down the text above into some headings: each heading is the where that code / action is implemented. I think this will help.

Also not clear in which folder I should create the SearchResults component.

[Joelzor]

In terms of this comment, we create a folder called 'search' and the SearchResults component will sit inside of there

• this will be done in issue #190, we just updated it to make this more clear