fus-marcom/franciscan-react

Add search filters to browser history

cr101 opened this issue · 5 comments

cr101 commented

It would be a good idea to add the ticked checkboxes to the browser history so that if a user sends the search page url to a friend then that person will not see a blank page.

Maybe it's possible to change the URL's querystring based on the checkboxes ticked
(eg. franciscan.edu/search?departments=true&faculty=true)

This https://github.com/zeit/next.js#shallow-routing has more information about replacing the URL silently.

This is a good idea. I don't think it is necessary before launch, but should be high on the list of things to do..

cr101 commented

url-search-params will help with checking if a particular URL search parameter exists.

Does replacing the URL using Shallow Routing create browser history every time the url is changed? If not, the history JS library will be handy but it would make more sense to use NextJS Shallow Routing to keep the JS file size small

The query parameters in the URL are available on the object that gets passed into getInitialProps

https://github.com/zeit/next.js/#fetching-data-and-component-lifecycle
A bit down, under the section that lists what's in the context object.

The state of true/false for the checkboxes can probably be set based on the query parameters on the initial load (so, inside getInitialProps). If that's acceptable, I know it's a no-no to sync state and props in some lifecycle hooks, it seems like it would be ok here.

This has been partially implemented. I think we just need to change the url when searching from the search page without actually navigating anywhere. Very similar to what was done with the app bar and side drawer search inputs.