-
-
Notifications
You must be signed in to change notification settings - Fork 287
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[core] Implement persistent state hooks #3696
Conversation
docs/data/toolpad/core/components/persistent-state/persistent-state.md
Outdated
Show resolved
Hide resolved
docs/data/toolpad/core/components/persistent-state/persistent-state.md
Outdated
Show resolved
Hide resolved
…state.md Co-authored-by: Bharat Kashyap <[email protected]> Signed-off-by: Jan Potoms <[email protected]>
…state.md Co-authored-by: Bharat Kashyap <[email protected]> Signed-off-by: Jan Potoms <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great! It helps to make useLocalStorage
a shared utility too as I needed it for the theme switcher.
Found a few things such as a broken preview and it seems like useSessionStorage
wasn't actually using window.sessionStorage
?
<Stack direction="row" spacing={2}> | ||
<Button onClick={() => setValue({ foo: Math.random() })}>Set JSON</Button> | ||
<Button | ||
onClick={() => window.localStorage.setItem('error-value', 'invalid json')} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If using local storage directly I would expect this to just work, should this not be using setValue
from the hook? (but I might be misunderstanding something)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can't set invalid json with setValue
because it takes care of serialization
import Select from '@mui/material/Select'; | ||
import { z } from 'zod'; | ||
|
||
const schema = z.enum(['foo', 'bar', 'baz']).default('foo'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The zod
example part is not inside the preview in this one (I guess it's missing // preview-start
actually)
|
||
**Parameters** | ||
|
||
- `key`: `string | null` The key under which to store the value in `window.sessionStorage`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Doing API pages manually does let us explain things a bit better in some cases, maybe I might do the same for some components such as the AppProvider
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is no API generation for non-components at the moment (except for some specific base hooks). I think we can keep relying on it for components and instead be more elaborate in the demo page.
If it were up to me I'd rather work on generating these hooks pages rather than manually wrating component APIs.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh ok, when I adapted the API docs generation scripts I did not adapt the parts about hooks if there were any as we didn't have them at the time.
And yeah I actually just gave the component API pages a second look and I think they should still work well while being automatically generated.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Even the hooks generation for base is really just for base specific hooks, they won't work for ours. So a lot more work is needed.
packages/toolpad-core/src/useSessionStorageState/useSessionStorageState.tsx
Outdated
Show resolved
Hide resolved
docs/data/toolpad/core/components/persistent-state/use-session-storage-state-api.md
Outdated
Show resolved
Hide resolved
…rageState.tsx Co-authored-by: Pedro Ferreira <[email protected]> Signed-off-by: Jan Potoms <[email protected]>
…-storage-state-api.md Co-authored-by: Pedro Ferreira <[email protected]> Signed-off-by: Jan Potoms <[email protected]>
Closes #3745
Implement
useLocalStorageState
useSessionStorageState
docs
API docs useLocalStorageState
API docs useSessionStorageState