Es/example of persisted state #747
Conversation
| backgroundMapStoreSlice, | ||
| 'background-maps' | ||
| ) | ||
| export const usePersistedUiStore = createPersistedStore( | ||
| persistedUiStoreSlice, | ||
| 'ui' | ||
| ) | ||
|
|
||
| export const useBackgroundMapStore = () => { |
There was a problem hiding this comment.
Now this hooks encapsulates the logic for whether background maps is enable or not. And can only show and set the maps that are relevant to that state. No need to the developer to do a check everytime.
src/renderer/hooks/store.js
Outdated
| : [store.mapStyleLegacy, store.setMapStyleLegacy] | ||
| ) | ||
|
|
||
| return { mapStyle, setMapStyle } |
There was a problem hiding this comment.
ideally this would return an array, but I am not too sure how to the equivalent of as const
There was a problem hiding this comment.
I figured out how to return an array
| data: !legacyStyleQueryResult.data | ||
| ? [defaultMapStyle] | ||
| : legacyStyleQueryResult.data, |
There was a problem hiding this comment.
this encapsulates the undefined check so the consuming components do not have to do that
src/renderer/hooks/store.js
Outdated
| const DEFAULT_MAP = { | ||
| id: '487x2pc8ws801avhs5hw58qnxc', | ||
| url: 'mapbox://styles/mapbox/outdoors-v10', | ||
| bytesStored: 0, | ||
| name: m.defaultBackgroundMapName, | ||
| isImporting: false, | ||
| isDefault: true | ||
| } |
There was a problem hiding this comment.
This is in 2 places, so ideally should just be moved to one place!
|
Hey this makes sense. I've wrapped up the loose ends on this so it can be merged if you're happy with it |
this is incomplete, but I wanted to show an example of encapsulating the logic of whether background maps is on or off directly in the hook.
Also example of doing undefined check inside the useMapStylesQuery hook