Persist issue/rehydrate

[asadbekabduvoitov-nordra]

Hello, guys. Just wanted to open a discussion for discussing a topic, I don't necessary want to say it as issue, because it's more of a use-case. So I will briefly describe what I'm building and after that I will post codes as well.

We're building an application, where user can have multiple organizations. In app we have roles page, where users can open roles by clicking into the card, and once they click it will be opened in new tab (inside application). The tabs functionality is almost same as browser tabs, where you can close, switch between tabs. And Im using zustand persist to store in the sessionStorage with dynamic key. I have seen/read a few discussions about dynamic key and how to rehydrate them. But the problem is switching between organization happens a lot faster, no refresh or anything needed. And opened tab needs to be stored on sessionStorage with organization id attached.

const useTabs = create<RolesTab>()(
	persist(tabStore, {
		name: `${localStorage.getItem("active_org")}/tabs/roles`,
		storage: createJSONStorage(() => sessionStorage),
	}),
);

This is how I was creating stores, but the problem is unless I refresh the page, it was not working even when I rehydrate with setting new name. Name was being set, but even with new name it was returning previous organization's tab records.

window.addEventListener("org-switch", () => {
       const storageKey = `${localStorage.getItem("active_org")}/tabs/roles`;
       useTabs?.persist?.setOptions({ name: storageKey });
       useTabs?.persist?.rehydrate();
});

This use case not worked for me. Not sure why, but unless I refresh the page, the tabs where mixed up with previous one. And I detected one odd behaviour, where it worked only when storage existed with the given name. Other wise it was using previous organization records.

How I figured out:

const createTabStore = () => {
	return create<RolesTab>()(
		persist(tabStore, {
			name: `${localStorage.getItem("active_org")}/tabs/roles`,
			storage: createJSONStorage(() => sessionStorage),
		}),
	);
};

const rolesTabs: ReturnType<typeof createTabStore>[] = [];

export const useRolesTab = () => {
	const storageKey = `${localStorage.getItem("active_org")}/tabs/roles`;
	const foundStore = rolesTabs.find(
		({ persist }) => persist?.getOptions().name === storageKey,
	);

	if (!foundStore) rolesTabs.push(createTabStore());

	foundStore?.persist?.rehydrate();

	return foundStore?.()!;
};

This is how I figured out. By creating separate store for each organization. Just wanted to know that is this best practice or is there any way to optimize the way it's built.

[dbritto-dev]

@asadbekabduvoitov-nordra you could use storage events to keep everything in sync so you don't need to refresh/hydrate your store

Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event

[asadbekabduvoitov-nordra]

Makes sense, but how should I build set function ?

Or is this a function that zustand provides as a first setter function in the paramter of create.

[asadbekabduvoitov-nordra]

@dbritto-dev
Thanks for the suggestion for taking a look to third-party libraries section, it's an art collection. I should definitely spend a bit more time to discover 🙌

[dbritto-dev]

@asadbekabduvoitov-nordra when I said set function is set (inside the state creator) and setState (from store itself)

[asadbekabduvoitov-nordra]

@dbritto-dev

Yes, makes sense. But the problem is that our app uses clerk. And clerk doesn't provide any callback to be called when organization switch happened. Nor storage gets called in the current tab, so I can sync with sessionStorage. That's the tricky part, if that makes sense ?

[dbritto-dev]

@asadbekabduvoitov-nordra what about afterSelectOrganizationUrl? are you using <OrganizationSwitcher />?