chore(kitchensink): all of kitchensink should be under a single SanityApp (#375)

Author: ryanbonial

apps/kitchensink-react/src/App.tsx

@@ -1,20 +1,33 @@
+import {SanityConfig} from '@sanity/sdk'
+import {SanityApp} from '@sanity/sdk-react'
 import {Spinner, ThemeProvider} from '@sanity/ui'
 import {buildTheme} from '@sanity/ui/theme'
-import {type JSX, Suspense} from 'react'
+import {type JSX} from 'react'
 import {BrowserRouter} from 'react-router'
 
 import {AppRoutes} from './AppRoutes'
 
 const theme = buildTheme({})
 
+const sanityConfigs: SanityConfig[] = [
+  {
+    projectId: 'ppsg7ml5',
+    dataset: 'test',
+  },
+  {
+    projectId: 'ezwd8xes',
+    dataset: 'production',
+  },
+]
+
 export function App(): JSX.Element {
   return (
     <ThemeProvider theme={theme}>
-      <Suspense fallback={<Spinner />}>
+      <SanityApp sanityConfigs={sanityConfigs} fallback={<Spinner />}>
         <BrowserRouter>
           <AppRoutes />
         </BrowserRouter>
-      </Suspense>
+      </SanityApp>
     </ThemeProvider>
   )
 }

apps/kitchensink-react/src/AppRoutes.tsx

@@ -1,5 +1,3 @@
-import {SanityApp} from '@sanity/sdk-react'
-import {Spinner} from '@sanity/ui'
 import {type JSX} from 'react'
 import {Route, Routes} from 'react-router'
 
@@ -12,15 +10,11 @@ import {DocumentListRoute} from './DocumentCollection/DocumentListRoute'
 import {DocumentProjectionRoute} from './DocumentCollection/DocumentProjectionRoute'
 import {MultiResourceRoute} from './DocumentCollection/MultiResourceRoute'
 import {SearchRoute} from './DocumentCollection/SearchRoute'
-import Home from './Home'
 import {ProjectAuthHome} from './ProjectAuthentication/ProjectAuthHome'
-import {ProjectInstanceWrapper} from './ProjectAuthentication/ProjectInstanceWrapper'
 import {ProtectedRoute} from './ProtectedRoute'
 import {DashboardContextRoute} from './routes/DashboardContextRoute'
 import {DashboardWorkspacesRoute} from './routes/DashboardWorkspacesRoute'
 import {UsersRoute} from './routes/UsersRoute'
-import {UnauthenticatedHome} from './Unauthenticated/UnauthenticatedHome'
-import {UnauthenticatedInstanceWrapper} from './Unauthenticated/UnauthenticatedInstanceWrapper'
 
 const documentCollectionRoutes = [
   {
@@ -76,60 +70,34 @@ const frameRoutes = [1, 2, 3].map((frameNum) => ({
 export function AppRoutes(): JSX.Element {
   return (
     <Routes>
-      <Route path="/" element={<Home />} />
-
-      <Route path="/authenticated" element={<ProjectInstanceWrapper />}>
-        <Route
-          index
-          element={
-            <ProjectAuthHome
-              routes={[...documentCollectionRoutes, ...dashboardInteractionRoutes]}
-            />
-          }
-        />
-        <Route element={<ProtectedRoute subPath="/authenticated" />}>
+      <Route path="/">
+        <Route element={<ProtectedRoute subPath="/" />}>
+          <Route
+            index
+            element={
+              <ProjectAuthHome
+                routes={[
+                  ...documentCollectionRoutes,
+                  ...dashboardInteractionRoutes,
+                  {
+                    path: 'comlink-demo',
+                    element: <ParentApp />,
+                  },
+                ]}
+              />
+            }
+          />
           {documentCollectionRoutes.map((route) => (
             <Route key={route.path} path={route.path} element={route.element} />
           ))}
+          <Route path="comlink-demo" element={<ParentApp />} />
+        </Route>
+        <Route path="comlink-demo">
+          {frameRoutes.map((route) => (
+            <Route key={route.path} path={route.path} element={route.element} />
+          ))}
         </Route>
       </Route>
-
-      <Route path="/comlink-demo" element={<ProjectInstanceWrapper />}>
-        <Route index element={<ParentApp />} />
-        {frameRoutes.map((route) => (
-          <Route key={route.path} path={route.path} element={route.element} />
-        ))}
-      </Route>
-
-      <Route path="/unauthenticated" element={<UnauthenticatedInstanceWrapper />}>
-        <Route
-          index
-          element={
-            <UnauthenticatedHome
-              routes={[...documentCollectionRoutes, ...dashboardInteractionRoutes]}
-            />
-          }
-        />
-        {documentCollectionRoutes.map((route) => (
-          <Route key={route.path} path={route.path} element={route.element} />
-        ))}
-        {dashboardInteractionRoutes.map((route) => (
-          <Route key={route.path} path={route.path} element={route.element} />
-        ))}
-      </Route>
-
-      <Route
-        path="/sanity-app"
-        index
-        element={
-          <SanityApp
-            sanityConfigs={[{projectId: 'ppsg7ml5', dataset: 'test'}]}
-            fallback={<Spinner />}
-          >
-            <div>Welcome to the Sanity App</div>
-          </SanityApp>
-        }
-      />
     </Routes>
   )
 }

apps/kitchensink-react/src/Comlink/ParentApp.tsx

@@ -85,12 +85,7 @@ const ParentApp = (): ReactElement => {
   const frames = [1, 2, 3]
 
   return (
-    <PageLayout
-      title="Comlink demo"
-      subtitle="Explore comlink connections and fetch operations"
-      homePath="/comlink-demo"
-      homeText="Comlink Demo Home"
-    >
+    <PageLayout title="Comlink demo" subtitle="Explore comlink connections and fetch operations">
       <Stack space={4} height="fill">
         <Box flex={1}>
           <Box display="flex" height="fill">

apps/kitchensink-react/src/Home.tsx

@@ -11,12 +11,7 @@ export function ProjectAuthHome({
   routes: {path: string; element: JSX.Element}[]
 }): JSX.Element {
   return (
-    <PageLayout
-      title="Authenticated"
-      subtitle="Explore authentication examples and components"
-      homePath="/project-auth"
-      homeText="Authenticated Home"
-    >
+    <PageLayout title="Authenticated" subtitle="Explore authentication examples and components">
       <AuthBoundary>
         <Flex direction="column" gap={3}>
           {routes.map((route) => (

apps/kitchensink-react/src/ProjectAuthentication/ProjectAuthHome.tsx

@@ -1,12 +1,11 @@
-import {useAuthState, useCurrentUser, useLogOut} from '@sanity/sdk-react'
+import {useAuthState, useCurrentUser} from '@sanity/sdk-react'
 import {Avatar, Box, Button, Card, Flex} from '@sanity/ui'
 import {type JSX} from 'react'
 import {Link, Navigate, Outlet} from 'react-router'
 
 export function ProtectedRoute({subPath}: {subPath: string}): JSX.Element {
   const authState = useAuthState()
   const currentUser = useCurrentUser()
-  const logout = useLogOut()
 
   if (authState.type !== 'logged-in') {
     return <Navigate to={subPath} replace />
@@ -20,17 +19,13 @@ export function ProtectedRoute({subPath}: {subPath: string}): JSX.Element {
             <Link to="/" style={{textDecoration: 'none'}}>
               <Button mode="ghost" tone="primary" text="← Kitchen Sink Home" />
             </Link>
-            <Link to={subPath} style={{textDecoration: 'none'}}>
-              <Button mode="ghost" tone="primary" text="Home" />
-            </Link>
           </Flex>
 
           <Flex align="center" gap={3}>
             <Avatar src={currentUser?.profileImage} size={1} />
             <Box as="span" style={{color: '#6e7683'}}>
               {currentUser?.name}
             </Box>
-            <Button mode="ghost" tone="critical" onClick={() => logout()} text="Log out" />
           </Flex>
         </Flex>
       </Card>