console: more efficiently route to the project view

.changeset/pretty-hats-lick.md

@@ -0,0 +1,5 @@
+---
+'@triplit/console': patch
+---
+
+more efficiently route to the project view

packages/console/package.json

@@ -52,7 +52,6 @@
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7"
   },
-  "@triplit/ui": "workspace:^",
   "devDependencies": {
     "@triplit/ui": "workspace:^",
     "@types/lodash": "^4",

packages/console/server/index.ts

@@ -17,8 +17,9 @@ export function createServer(_assetPath, consoleParams) {
     const extname = path.extname(filePath);
 
     if (consoleParams && req.url === '/') {
+      const id = consoleParams.server.split('://')[1];
       res.writeHead(302, {
-        Location: '/?' + new URLSearchParams(consoleParams).toString(),
+        Location: `/${id}?` + new URLSearchParams(consoleParams).toString(),
       });
       res.end();
       return;

packages/console/src/App.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { JWTPayloadIsOfCorrectForm } from './utils/server';
+import { initializeFromUrl } from './utils/project';
 import { Modal } from '@triplit/ui';
 import {
   ImportProjectForm,
@@ -9,24 +9,11 @@ import {
 import { useNavigate } from 'react-router-dom';
 import { addProjectToConsole } from './utils/project.js';
 
-async function initializeFromUrl() {
-  if (typeof window === 'undefined') return;
-  const url = new URL(window.location.href);
-  const params = new URLSearchParams(url.search);
-  const token = params.get('token');
-  if (!(token && JWTPayloadIsOfCorrectForm(token))) return;
-  const server = params.get('server');
-  if (!server) return;
-  const projName = params.get('projName');
-  const projId = await addProjectToConsole({
-    server,
-    token,
-    displayName: projName ?? 'triplit-project',
-  });
-  window.location.href = '/' + projId;
-}
-
-initializeFromUrl();
+initializeFromUrl().then((importedProjectId) => {
+  if (importedProjectId) {
+    window.location.href = '/' + importedProjectId;
+  }
+});
 
 function App() {
   const navigate = useNavigate();

packages/console/src/components/project-options-menu.tsx

@@ -28,7 +28,7 @@ export function ProjectOptionsMenu({
   const [deleteProjectDialogIsOpen, setDeleteProjectDialogIsOpen] =
     useState(false);
   const { results: project } = useProject(projectPrimaryKey);
-  if (!(project && projectPrimaryKey)) return null;
+  if (!(project && projectPrimaryKey)) return children;
   return (
     <>
       <DeleteProjectDialog

packages/console/src/components/project-viewer.tsx

@@ -5,20 +5,23 @@ import { CaretDown, GridFour, Selection } from '@phosphor-icons/react';
 import { DataViewer, FullScreenWrapper, Project } from '.';
 import { Button } from '@triplit/ui';
 import { ProjectOptionsMenu } from './project-options-menu';
-import { useConnectionStatus, useEntity } from '@triplit/react';
+import { useEntity } from '@triplit/react';
 import { CreateCollectionDialog } from './create-collection-dialog';
 import { CollectionStats, fetchCollectionStats } from '../utils/server';
 import { useSelectedCollection } from '../hooks/useSelectedCollection';
 import { useLoaderData, redirect } from 'react-router-dom';
 import { consoleClient } from 'triplit/client.js';
+import { initializeFromUrl } from 'src/utils/project.js';
 
 const projectClients = new Map<string, TriplitClient<any>>();
 
-export async function loader(projectId: string) {
-  const projectEntities = await consoleClient.fetch(
-    consoleClient.query('projects').build()
-  );
-  const project = projectEntities?.get(projectId);
+const initFromUrlPromise = initializeFromUrl();
+
+export async function loader(slugProjectId?: string) {
+  const importedProjectId = await initFromUrlPromise;
+  const projectId = slugProjectId ?? importedProjectId;
+  if (!projectId) return redirect('/');
+  const project = await consoleClient.fetchById('projects', projectId);
   if (!project) return redirect('/');
   const collectionStats = await fetchCollectionStats(project);
   const savedClient = projectClients.get(projectId);
@@ -44,7 +47,6 @@ export function ProjectViewer() {
     project: Project;
     collectionStats: CollectionStats[];
   };
-
   useEffect(() => {
     client?.syncEngine.connect();
     return () => {
@@ -74,13 +76,12 @@ export function ProjectViewer() {
   if (!client) return <FullScreenWrapper>Loading...</FullScreenWrapper>;
   const shouldShowCreateCollectionButton =
     schema || collectionsTolist.length === 0;
-
   // If client, render hooks that rely on client safely
   return (
     <div className="flex bg-popover max-w-[100vw] overflow-hidden">
       <div className=" border-r h-screen flex flex-col p-4 w-[250px] shrink-0 overflow-y-auto">
         <ProjectOptionsMenu>
-          <Button variant="secondary" className="w-full">
+          <Button variant="secondary" className="w-full h-[2.5rem]">
             <div className="font-bold truncate">{project?.displayName}</div>
             <CaretDown className="ml-2 shrink-0" />
           </Button>

packages/console/src/main.tsx

@@ -12,8 +12,7 @@ const router = createBrowserRouter([
   },
   {
     path: ':projectId',
-    loader: ({ params }) =>
-      params.projectId ? loader(params.projectId) : null,
+    loader: ({ params }) => loader(params.projectId),
     element: <ProjectViewer />,
     // we have to disable revalidation because otherwise it's re-mounting
     // the component and re-running the loader whenever the query params change

packages/console/src/utils/project.ts

@@ -1,5 +1,5 @@
 import { ImportProjectFormValues } from 'src/components/import-project-form.js';
-import { getProjectIdFromApiKey } from './server.js';
+import { JWTPayloadIsOfCorrectForm, getProjectIdFromApiKey } from './server.js';
 import { TokenReadError } from '@triplit/server-core';
 import { consoleClient } from 'triplit/client.js';
 
@@ -22,3 +22,20 @@ export async function addProjectToConsole(formValues: ImportProjectFormValues) {
     throw new TokenReadError();
   }
 }
+
+export async function initializeFromUrl() {
+  if (typeof window === 'undefined') return null;
+  const url = new URL(window.location.href);
+  const params = new URLSearchParams(url.search);
+  const token = params.get('token');
+  if (!(token && JWTPayloadIsOfCorrectForm(token))) return null;
+  const server = params.get('server');
+  if (!server) return null;
+  const projName = params.get('projName');
+  const projId = await addProjectToConsole({
+    server,
+    token,
+    displayName: projName ?? 'triplit-project',
+  });
+  return projId;
+}