chore: persisted active project Id

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/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' })
 		}