As a user I can search snapshots by keywords so that I can filter results displayed by their text content or by era, genre or category of a snapshot
Acceptance Criteria
Search bar should appear at the top of any page displaying a list of snapshots
The list of snapshots should filter as the search bar is populated and only display results matching
Posts should be filterable by title, era, genre and category
Tasks
[x] Create form element for search bar in return of SnapshotsPage component. Prevent default behaviour on submit.
[x] Make use of useState hook to store and set the search query
[x] Assign query to the value prop of the search bar Form.Control component
[x] Set the onChange prop of Form.Control component with a function that calls setQuery and passes it the the value of the event
[x] Update API request with the additional search parameter, passing it the query state as a value.
[x] add query to the useEffect dependency array - ensures a new request is made each time user changes search text
[x] use setTimeout function inside useEffect hook. Run fetchSnapshots as the setTimeout callback function with 1000ms delay, so API request is not made on every key stroke. There should be a 1 second delay after the final keystroke before the API request is sent.
EPIC:
As a user I can search snapshots by keywords so that I can filter results displayed by their text content or by era, genre or category of a snapshot
Acceptance Criteria
Tasks
querystate as a value.queryto the useEffect dependency array - ensures a new request is made each time user changes search text