create and enter workspace

Author: SandroMaglione

apps/client/src/lib/dexie.ts

@@ -6,6 +6,10 @@ import {
   type WorkspaceTable,
 } from "./schema";
 
+class QueryApiError extends Data.TaggedError("QueryApiError")<{
+  cause: unknown;
+}> {}
+
 class WriteApiError extends Data.TaggedError("WriteApiError")<{
   cause: unknown;
 }> {}
@@ -36,11 +40,25 @@ export class Dexie extends Effect.Service<Dexie>()("Dexie", {
     };
 
     db.version(1).stores({
+      client: "clientId",
       workspace: "workspaceId",
       temp_workspace: "workspaceId",
-      client: "clientId",
     });
 
+    const query = <T>(execute: (_: typeof db) => Promise<T>) =>
+      Effect.tryPromise({
+        try: () => execute(db),
+        catch: (error) => new QueryApiError({ cause: error }),
+      }).pipe(Effect.tapErrorCause(Effect.logError));
+
+    const initClient = query((_) => _.client.toCollection().last()).pipe(
+      Effect.map((client) => client?.clientId),
+      Effect.flatMap(Effect.fromNullable),
+      Effect.orElse(() =>
+        query((_) => _.client.add({ clientId: crypto.randomUUID() }))
+      )
+    );
+
     const formAction =
       <const R extends string, I, T>(
         source: Schema.Schema<I, Record<R, string>>,
@@ -74,6 +92,6 @@ export class Dexie extends Effect.Service<Dexie>()("Dexie", {
           )
         );
 
-    return { db };
+    return { db, initClient, query };
   }),
 }) {}

apps/client/src/lib/runtime-client.ts

@@ -1,7 +1,12 @@
 import { Layer, ManagedRuntime } from "effect";
 import { ApiClient } from "./api-client";
 import { Dexie } from "./dexie";
+import { WorkspaceManager } from "./services/workspace-manager";
 
-const MainLayer = Layer.mergeAll(Dexie.Default, ApiClient.Default);
+const MainLayer = Layer.mergeAll(
+  Dexie.Default,
+  ApiClient.Default,
+  WorkspaceManager.Default
+);
 
 export const RuntimeClient = ManagedRuntime.make(MainLayer);

apps/client/src/lib/schema.ts

@@ -10,7 +10,7 @@ export class WorkspaceTable extends Schema.Class<WorkspaceTable>(
 )({
   workspaceId: WorkspaceId,
   snapshot: Snapshot,
-  token: Schema.String,
+  token: Schema.NullOr(Schema.String),
 
   version: Schema.Uint8Array,
 }) {}

apps/client/src/lib/services/workspace-manager.ts

@@ -0,0 +1,43 @@
+import { Effect } from "effect";
+import { Dexie } from "../dexie";
+
+export class WorkspaceManager extends Effect.Service<WorkspaceManager>()(
+  "WorkspaceManager",
+  {
+    accessors: true,
+    dependencies: [Dexie.Default],
+    effect: Effect.gen(function* () {
+      const { query } = yield* Dexie;
+
+      return {
+        getAll: query((_) => _.workspace.toArray()),
+
+        getById: ({ workspaceId }: { workspaceId: string }) =>
+          query((_) =>
+            _.workspace
+              .where("workspaceId")
+              .equals(workspaceId)
+              .limit(1)
+              .first()
+          ).pipe(Effect.flatMap(Effect.fromNullable)),
+
+        putCurrent: (workspaceId: string | undefined) =>
+          query((_) =>
+            _.workspace.toCollection().modify({ current: false })
+          ).pipe(
+            Effect.andThen(
+              query((_) =>
+                _.workspace.put({
+                  workspaceId: workspaceId ?? crypto.randomUUID(),
+                  version: [],
+                  snapshot: [],
+                  token: null,
+                })
+              )
+            ),
+            Effect.map((workspaceId) => ({ workspaceId }))
+          ),
+      };
+    }),
+  }
+) {}

apps/client/src/routeTree.gen.ts

@@ -11,10 +11,17 @@
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
+import { Route as WorkspaceIdImport } from './routes/$workspaceId'
 import { Route as IndexImport } from './routes/index'
 
 // Create/Update Routes
 
+const WorkspaceIdRoute = WorkspaceIdImport.update({
+  id: '/$workspaceId',
+  path: '/$workspaceId',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const IndexRoute = IndexImport.update({
   id: '/',
   path: '/',
@@ -32,39 +39,51 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
+    '/$workspaceId': {
+      id: '/$workspaceId'
+      path: '/$workspaceId'
+      fullPath: '/$workspaceId'
+      preLoaderRoute: typeof WorkspaceIdImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
 // Create and export the route tree
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/$workspaceId': typeof WorkspaceIdRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/$workspaceId': typeof WorkspaceIdRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
+  '/$workspaceId': typeof WorkspaceIdRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
+  fullPaths: '/' | '/$workspaceId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/'
-  id: '__root__' | '/'
+  to: '/' | '/$workspaceId'
+  id: '__root__' | '/' | '/$workspaceId'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  WorkspaceIdRoute: typeof WorkspaceIdRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  WorkspaceIdRoute: WorkspaceIdRoute,
 }
 
 export const routeTree = rootRoute
@@ -77,11 +96,15 @@ export const routeTree = rootRoute
     "__root__": {
       "filePath": "__root.tsx",
       "children": [
-        "/"
+        "/",
+        "/$workspaceId"
       ]
     },
     "/": {
       "filePath": "index.tsx"
+    },
+    "/$workspaceId": {
+      "filePath": "$workspaceId.tsx"
     }
   }
 }

apps/client/src/routes/$workspaceId.tsx

@@ -0,0 +1,14 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { RuntimeClient } from "../lib/runtime-client";
+import { WorkspaceManager } from "../lib/services/workspace-manager";
+
+export const Route = createFileRoute("/$workspaceId")({
+  component: RouteComponent,
+  loader: ({ params: { workspaceId } }) =>
+    RuntimeClient.runPromise(WorkspaceManager.getById({ workspaceId })),
+});
+
+function RouteComponent() {
+  const workspace = Route.useLoaderData();
+  return <div>Hello {workspace.workspaceId}</div>;
+}

apps/client/src/routes/index.tsx

@@ -1,7 +1,56 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { Effect } from "effect";
+import { RuntimeClient } from "../lib/runtime-client";
+import { WorkspaceManager } from "../lib/services/workspace-manager";
+import { useActionEffect } from "../lib/use-action-effect";
 
-export const Route = createFileRoute("/")({ component: HomeComponent });
+export const Route = createFileRoute("/")({
+  component: HomeComponent,
+  loader: () => RuntimeClient.runPromise(WorkspaceManager.getAll),
+});
 
 function HomeComponent() {
-  return <></>;
+  const allWorkspaces = Route.useLoaderData();
+  const navigate = useNavigate();
+
+  const [, putWorkspace] = useActionEffect((formData: FormData | undefined) =>
+    Effect.gen(function* () {
+      const workspaceId = formData?.get("workspaceId") as string | null;
+      const workspace = yield* WorkspaceManager.putCurrent(
+        workspaceId ?? undefined
+      );
+      yield* Effect.sync(() =>
+        navigate({
+          to: `/$workspaceId`,
+          params: { workspaceId: workspace.workspaceId },
+        })
+      );
+    })
+  );
+
+  return (
+    <div>
+      <p>Select workspace</p>
+      {allWorkspaces.map((workspace) => (
+        <Link
+          key={workspace.workspaceId}
+          to="/$workspaceId"
+          params={{ workspaceId: workspace.workspaceId }}
+        >
+          {workspace.workspaceId}
+        </Link>
+      ))}
+
+      <form action={putWorkspace}>
+        <input type="text" name="workspaceId" placeholder="Workspace id" />
+        <button type="submit">Switch workspace</button>
+      </form>
+
+      <div>
+        <button type="button" onClick={() => putWorkspace(undefined)}>
+          Create workspace
+        </button>
+      </div>
+    </div>
+  );
 }