chore: creates persisted store for Active Project Id using Zustand

package.json

@@ -117,7 +117,8 @@
 		"typescript-eslint": "^8.15.0",
 		"vite": "^5.4.11",
 		"vite-plugin-svgr": "^4.3.0",
-		"vitest": "2.1.8"
+		"vitest": "2.1.8",
+		"zustand": "5.0.2"
 	},
 	"overrides": {
 		"better-sqlite3": "11.5.0"

src/renderer/src/App.tsx

@@ -0,0 +1,41 @@
+import { CssBaseline, ThemeProvider } from '@mui/material'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+
+import { theme } from './Theme'
+import { ApiProvider } from './contexts/ApiContext'
+import { IntlProvider } from './contexts/IntlContext'
+import {
+	PersistedActiveProjectIdProvider,
+	createActiveProjectIdStore,
+} from './contexts/persistedState/PersistedProjectId'
+import { routeTree } from './routeTree.gen'
+
+const queryClient = new QueryClient()
+
+const router = createRouter({ routeTree })
+
+declare module '@tanstack/react-router' {
+	interface Register {
+		router: typeof router
+	}
+}
+
+const PersistedProjectIdStore = createActiveProjectIdStore({
+	isPersisted: true,
+})
+
+export const App = () => (
+	<ThemeProvider theme={theme}>
+		<CssBaseline />
+		<IntlProvider>
+			<QueryClientProvider client={queryClient}>
+				<PersistedActiveProjectIdProvider store={PersistedProjectIdStore}>
+					<ApiProvider>
+						<RouterProvider router={router} />
+					</ApiProvider>
+				</PersistedActiveProjectIdProvider>
+			</QueryClientProvider>
+		</IntlProvider>
+	</ThemeProvider>
+)

src/renderer/src/contexts/persistedState/PersistedProjectId.tsx

@@ -0,0 +1,21 @@
+import { createPersistedStoreWithProvider } from './createPersistedState'
+
+type PersistedActiveProjectId = { projectId: string }
+
+const { Provider, createStore, useCurrentStore, useActions } =
+	createPersistedStoreWithProvider<PersistedActiveProjectId>({
+		slice: { projectId: 'newId' },
+		actions: {
+			setProjectId: (newProjectId: string) => (set) => {
+				set({ projectId: newProjectId })
+			},
+		},
+		persistedStoreKey: 'ActiveProjectId',
+	})
+
+export {
+	Provider as PersistedActiveProjectIdProvider,
+	createStore as createActiveProjectIdStore,
+	useCurrentStore as usePersistedActiveProjectIdStore,
+	useActions as usePersistedActiveProjectIdActions,
+}

src/renderer/src/contexts/persistedState/createPersistedState.tsx

@@ -0,0 +1,128 @@
+import { createContext, useContext, type ReactNode } from 'react'
+import {
+	createStore as createZustandStore,
+	useStore,
+	type StateCreator,
+	type StoreApi,
+} from 'zustand'
+import { persist } from 'zustand/middleware'
+
+type PersistedStoreKey = 'ActiveProjectId'
+
+/**
+ * Follows the pattern of injecting persisted state with a context. See
+ * https://tkdodo.eu/blog/zustand-and-react-context. Allows for easier testing
+ */
+export function createPersistedStoreWithProvider<T>({
+	slice,
+	actions,
+	persistedStoreKey,
+}: {
+	slice: T
+	actions: StoreActions<T>
+	persistedStoreKey: PersistedStoreKey
+}) {
+	const Context = createContext<ReturnType<typeof createStore<T>> | null>(null)
+
+	const Provider = ({
+		children,
+		store,
+	}: {
+		children: ReactNode
+		store: ReturnType<typeof createStore<T>>
+	}) => {
+		return <Context.Provider value={store}>{children}</Context.Provider>
+	}
+
+	function useCurrentContext() {
+		const context = useContext(Context)
+		if (!context) {
+			throw new Error(`${persistedStoreKey} context not properly initialized`)
+		}
+		return context
+	}
+
+	// Hook to select store state
+	function useCurrentStore<Selected>(selector: (state: T) => Selected) {
+		const context = useCurrentContext()
+		return useStore(context.store as StoreApi<T>, selector)
+	}
+
+	function useActions() {
+		const context = useCurrentContext()
+		return context.actions
+	}
+
+	return {
+		Provider,
+		createStore: ({ isPersisted }: { isPersisted: boolean }) => {
+			return isPersisted
+				? createStore({ isPersisted: true, persistedStoreKey, actions, slice })
+				: createStore({ actions, slice, isPersisted: false })
+		},
+		useCurrentStore,
+		useActions,
+	}
+}
+
+function createPersistedStore<T>(
+	...args: Parameters<typeof createPersistMiddleware<T>>
+) {
+	const store = createZustandStore<T>()(createPersistMiddleware(...args))
+	store.setState((state) => ({
+		...state,
+		...args[0],
+	}))
+
+	return store
+}
+
+function createPersistMiddleware<State>(
+	slice: StateCreator<State>,
+	persistedStoreKey: PersistedStoreKey,
+) {
+	return persist(slice, {
+		name: persistedStoreKey,
+	})
+}
+
+type ActionCreator<T> = (
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	newState: any,
+) => (set: StoreApi<T>['setState'], get: StoreApi<T>['getState']) => void
+
+type StoreActions<T> = { [key: string]: ActionCreator<T> }
+
+type createStoreProps<T> = {
+	slice: T
+	actions: StoreActions<T>
+} & (
+	| { isPersisted: false }
+	| { isPersisted: true; persistedStoreKey: PersistedStoreKey }
+)
+
+export function createStore<T>(props: createStoreProps<T>) {
+	let store: StoreApi<T>
+
+	if (!props.isPersisted) {
+		store = createZustandStore<T>()(() => ({ ...props.slice }))
+	} else {
+		store = createPersistedStore<T>(
+			() => ({ ...props.slice }),
+			props.persistedStoreKey,
+		)
+	}
+
+	const actions = Object.fromEntries(
+		Object.entries(props.actions).map(([key, action]) => {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			const wrappedAction = (newState: any) => {
+				return action(newState)(store.setState, store.getState) // Pass `setState` and `getState`
+			}
+
+			return [key, wrappedAction]
+		}),
+	) as StoreActions<T>
+
+	return { store, actions }
+}

src/renderer/src/index.tsx

@@ -1,18 +1,9 @@
-import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { createRoot } from 'react-dom/client'
 
-import { routeTree } from './routeTree.gen'
-
 import './index.css'
 
-const router = createRouter({ routeTree })
-
-declare module '@tanstack/react-router' {
-	interface Register {
-		router: typeof router
-	}
-}
+import { App } from './App'
 
 const root = createRoot(document.getElementById('app') as HTMLElement)
 
-root.render(<RouterProvider router={router} />)
+root.render(<App />)

src/renderer/src/routes/index.tsx

@@ -2,6 +2,8 @@ import { useLayoutEffect } from 'react'
 import { useOwnDeviceInfo } from '@comapeo/core-react'
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 
+import { usePersistedActiveProjectIdStore } from '../contexts/persistedState/PersistedProjectId'
+
 export const Route = createFileRoute('/')({
 	component: RouteComponent,
 })
@@ -13,10 +15,14 @@ function RouteComponent() {
 	const navigate = useNavigate()
 	const { data } = useOwnDeviceInfo()
 	const hasCreatedDeviceName = data?.name !== undefined
+	const projectId = usePersistedActiveProjectIdStore((store) => store.projectId)
 
 	useLayoutEffect(() => {
 		if (!hasCreatedDeviceName) {
 			navigate({ to: '/Onboarding' })
+		}
+		if (!projectId) {
+			navigate({ to: '/Onboarding/CreateJoinProjectScreen' })
 		} else {
 			navigate({ to: '/tab1' })
 		}