-
Notifications
You must be signed in to change notification settings - Fork 2
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
feat: Use zustand middleware to persist to local storage #3767
Conversation
Removed vultr server and associated DNS entries |
<Collapse | ||
in={showSidebar} | ||
orientation="horizontal" | ||
collapsedSize={SIDEBAR_WIDTH_MINIMISED} | ||
sx={{ height: "100%" }} | ||
easing={"ease-in-out"} | ||
timeout={200} | ||
> |
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.
Diff here is a bit weird - I've just wrapped this component in a MUI Collapse (docs) instead of controlling this via variables passed to a styled component.
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.
Checked the Application tab and all seemed to go well for me with the Store object in there.
{"state":{"showSidebar":true},"version":0}
Only checked info I seen in this PR in terms of code changes, nothing outwith what I seen here
]); | ||
|
||
const [activeTab, setActiveTab] = useState<SidebarTabs>("PreviewBrowser"); | ||
const [isSidebarMinimised, setIsSidebarMinimised] = useState<boolean>(() => { | ||
const savedState = localStorage.getItem("isSidebarMinimised"); |
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.
@DafyddLlyr is the gain that we swap this for the code above it:
const [resetPreview, isFlowPublished, toggleSidebar, showSidebar] = useStore((state) => [
state.resetPreview,
state.isFlowPublished,
state.toggleSidebar,
state.showSidebar,
]);
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.
Yep, we also remove the togglePreview()
function below as it's now handled by Zustand.
hideTestEnvBanner: () => set({ isTestEnvBannerVisible: false }), | ||
}), | ||
{ | ||
name: "editorUIStore", |
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.
Is Local Storage the default here or have I missed where you specified this?
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.
That's correct, local storage is just default so we don't need to specify anything here.
This PR is a rethink of two Friday quick fixes -
isMinimised
prop #3765togglePreview()
method from store #3766Originally, I was just resolving a React error and then tidying up some unused store variables.
In this approach, I'm using Zustand's persist middleware pattern (docs) to handle the variable stores in local storage. Here's the benefits to this approach as I see them -
shouldForwardProp
etc)