Routing utils to use with RouterStore (from mobx-react-router) on your MobX stores.
yarn add mobx-react-router-utils
import { computedRouteParam, setRoutingStore } from 'mobx-react-router-utils'
// Set the reference to your routing store before any usage
// You ony need to this once in your application
setRoutingStore(routingStore)
const routes = {
search: '/search',
citySearch: '/cities/:city'
}
class DemoSearchStore {
city = computedRouteParam('city', {
patterns: [routes.citySearch],
})
// this one will come from the query string
checkIn = computedRouteParam('checkIn', {
// Define the route patterns for which this one is valid
patterns: [routes.search, routes.citySearch],
// Set a parsing fn to transform from string
parse: _parseDate,
// Set a formatting fn to transform into string
format: _formatDate,
// It'll return the default value in case it's
// not present on the route or with an empty value
defaultValue: 'temecula'
})
checkOut = computedRouteParam('checkOut', {
patterns: [routes.search, routes.citySearch],
parse: _parseDate,
format: _formatDate,
})
setCity = (city: Maybe<string>) => {
// For updating the current route, push() and replace() methods are available:
// - push: will add the new url to the browsing history
// - replace: will replace the current url on the browsing history
this.city.push(city, {
// enforce a route pattern if needed, otherwise, it will use the
// current location (if matches the config) or first pattern available
pattern: !city && routes.search,
// cleanup all other params (default: false)
cleanParams: true,
// OR cleanup only selected params
cleanParams: [
this.checkIn,
this.checkOut
]
})
}
setPeriod = (checkIn: Maybe<Date>, checkOut: Maybe<Date>) => {
this.checkIn.push(checkIn)
this.checkOut.replace(checkOut)
}
// ...
}