[MPDX-8393] Add useUserPreference hook
#1146
Conversation
|
Preview branch generated at https://8393-user-preference.d3dytjb8adxkk5.amplifyapp.com |
| const temp = [...flowOptions]; | ||
| if (originIndex > -1) { | ||
| temp[originIndex] = { | ||
| ...temp[originIndex], | ||
| statuses: temp[originIndex].statuses.filter( | ||
| (status) => status !== draggedStatus, | ||
| ), | ||
| }; | ||
| } | ||
| if (destinationIndex > -1) { | ||
| temp[destinationIndex] = { | ||
| ...temp[destinationIndex], | ||
| statuses: [...temp[destinationIndex].statuses, draggedStatus], | ||
| }; | ||
| } |
There was a problem hiding this comment.
Before this was updating cloning the array of flow options but still modifying the original column. This clones the column too before updating it.
| @@ -0,0 +1,15 @@ | |||
| query UserOption($key: String!) { | |||
There was a problem hiding this comment.
This query and mutation doesn't need to load the id field anymore because I changed the cache to use the key to generate Options' unique id.
| @@ -80,6 +82,15 @@ export const createCache = () => | |||
| people: paginationFieldPolicy, | |||
| tasks: paginationFieldPolicy, | |||
| userNotifications: paginationFieldPolicy, | |||
| // When loading a user option, look it up from the cache by its key | |||
| userOption: { | |||
There was a problem hiding this comment.
This makes it so that if some other component loaded all the user options with the userOptions query, the userOption (singular) query can pull the option out of the cache by its key instead of having to wait for it to load.
Bundle sizes [mpdx-react]Compared against d59ffdd No significant changes found |
| } | ||
|
|
||
| if (typeof defaultValue === 'string') { | ||
| setValue((data.userOption.value ?? defaultValue) as T); |
There was a problem hiding this comment.
Why do you not check if data.userOption.value needs to be pared as JSON here like you do below?
There was a problem hiding this comment.
This hook assumes that if defaultValue is a string, the component just needs to save a simple string as the preference. For example the view mode, which could be "list", "flows", or "map". If defaultValue isn't an object, it assumes that the component needs to save an object or array as the preference and does the automatic JSON serialization/deserialization. This branch is the simple string code path.
canac
force-pushed
the
8393-user-preference
branch
from
9c41fa4 to
0401c51
Compare
canac
force-pushed
the
8393-user-preference
branch
from
0401c51 to
d830fb2
Compare
Description
Create a new
useUserPreferencehook that is as ergonomic asuseStatebut syncs its value with a user preference.Usage:
Features:
setValueupdatesvalueimmediately without having to wait for the server to respond.defaultValueisn't a string, the value is transparently serialized and deserialized as JSON.userOptionsquery, this hook can extract the relevant option from the Apollo cache immediately before theuserOptionquery returns.Depends on https://github.com/CruGlobal/mpdx_api/pull/2872
I updated the code to use this new hook for the
setup_position, andflows(the flows columns) preferences to prove its usefulness. It could also be used for the view mode preference once #1131 is merged. I will also use it in the upcoming PR for the dismissible beacon.Checklist: