token generation and initial bootstrap query

Author: SandroMaglione

apps/client/src/lib/hooks/hook-query.ts

@@ -0,0 +1,25 @@
+import { type LoroSchema } from "@local/sync/loro";
+import { Effect } from "effect";
+import { LoroDoc } from "loro-crdt";
+import { TempWorkspace } from "../services/temp-workspace";
+import { WorkspaceManager } from "../services/workspace-manager";
+
+export const hookQuery = ({ workspaceId }: { workspaceId: string }) =>
+  Effect.gen(function* () {
+    const temp = yield* TempWorkspace;
+    const manager = yield* WorkspaceManager;
+
+    const workspace = yield* manager.getById({ workspaceId });
+
+    const tempWorkspace = yield* temp.getById({ workspaceId });
+
+    const doc = new LoroDoc<LoroSchema>();
+    if (workspace) {
+      doc.import(workspace.snapshot);
+    }
+    if (tempWorkspace) {
+      doc.import(tempWorkspace.snapshot);
+    }
+
+    return doc.getList("activity").toJSON();
+  });

apps/client/src/lib/hooks/use-activity.ts

@@ -0,0 +1,11 @@
+import { Activity } from "@local/sync/loro";
+import { RuntimeClient } from "../runtime-client";
+import { useDexieQuery } from "../use-dexie-query";
+import { hookQuery } from "./hook-query";
+
+export const useActivity = ({ workspaceId }: { workspaceId: string }) => {
+  return useDexieQuery(
+    () => RuntimeClient.runPromise(hookQuery({ workspaceId })),
+    Activity
+  );
+};

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

@@ -1,14 +1,16 @@
 import { Layer, ManagedRuntime } from "effect";
 import { ApiClient } from "./api-client";
 import { Dexie } from "./dexie";
+import { LoroStorage } from "./services/loro-storage";
 import { TempWorkspace } from "./services/temp-workspace";
 import { WorkspaceManager } from "./services/workspace-manager";
 
 const MainLayer = Layer.mergeAll(
   Dexie.Default,
   ApiClient.Default,
   WorkspaceManager.Default,
-  TempWorkspace.Default
+  TempWorkspace.Default,
+  LoroStorage.Default
 );
 
 export const RuntimeClient = ManagedRuntime.make(MainLayer);

apps/client/src/lib/schema.ts

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

apps/client/src/lib/services/loro-storage.ts

@@ -0,0 +1,74 @@
+import { Activity, type LoroSchema } from "@local/sync/loro";
+import { Effect, Schema } from "effect";
+import { LoroDoc, LoroMap, VersionVector } from "loro-crdt";
+import { TempWorkspace } from "./temp-workspace";
+import { WorkspaceManager } from "./workspace-manager";
+
+export class LoroStorage extends Effect.Service<LoroStorage>()("LoroStorage", {
+  accessors: true,
+  dependencies: [TempWorkspace.Default, WorkspaceManager.Default],
+  effect: Effect.gen(function* () {
+    const manager = yield* WorkspaceManager;
+    const temp = yield* TempWorkspace;
+
+    const load = ({ workspaceId }: { workspaceId: string }) =>
+      Effect.all(
+        {
+          workspace: manager.getById({ workspaceId }),
+          tempWorkspace: temp.getById({ workspaceId }),
+        },
+        { concurrency: "unbounded" }
+      ).pipe(
+        Effect.map(({ workspace, tempWorkspace }) => {
+          const doc = new LoroDoc<LoroSchema>();
+
+          if (workspace !== undefined) {
+            doc.import(workspace.snapshot);
+          }
+
+          if (tempWorkspace !== undefined) {
+            doc.import(tempWorkspace.snapshot);
+          }
+
+          return { doc, workspace };
+        })
+      );
+
+    const insert = ({
+      workspaceId,
+      value,
+    }: {
+      workspaceId: string;
+      value: typeof Activity.Type;
+    }) =>
+      Effect.gen(function* () {
+        const { doc, workspace } = yield* load({ workspaceId });
+
+        const list = doc.getList("activity");
+
+        const container = doc
+          .getList("activity")
+          .insertContainer(list.length, new LoroMap());
+
+        const activity = yield* Schema.encode(Activity)(value);
+
+        Object.entries(activity).forEach(([key, val]) => {
+          container.set(key as keyof typeof Activity.Type, val);
+        });
+
+        const snapshotExport =
+          workspace === undefined
+            ? doc.export({ mode: "snapshot" })
+            : doc.export({
+                mode: "update",
+                from: new VersionVector(workspace.version),
+              });
+
+        return yield* temp.put({ workspaceId, snapshot: snapshotExport });
+      });
+
+    return {
+      insertActivity: insert,
+    };
+  }),
+}) {}

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

@@ -14,16 +14,19 @@ export class TempWorkspace extends Effect.Service<TempWorkspace>()(
             Effect.flatMap((data) => query((_) => _.temp_workspace.put(data)))
           ),
 
-        get: ({ workspaceId }: { workspaceId: string }) =>
+        getById: ({ workspaceId }: { workspaceId: string }) =>
           query((_) =>
             _.temp_workspace
               .where("workspaceId")
               .equals(workspaceId)
               .limit(1)
               .first()
           ).pipe(
-            Effect.flatMap(Effect.fromNullable),
-            Effect.flatMap(Schema.decode(TempWorkspaceTable))
+            Effect.flatMap((workspace) =>
+              workspace === undefined
+                ? Effect.succeed(undefined)
+                : Schema.decode(TempWorkspaceTable)(workspace)
+            )
           ),
 
         clean: ({ workspaceId }: { workspaceId: string }) =>

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

@@ -1,4 +1,6 @@
+import { type LoroSchema, Snapshot } from "@local/sync/loro";
 import { Effect, Schema } from "effect";
+import { LoroDoc } from "loro-crdt";
 import { Dexie } from "../dexie";
 import { WorkspaceTable } from "../schema";
 
@@ -33,19 +35,32 @@ export class WorkspaceManager extends Effect.Service<WorkspaceManager>()(
               .equals(workspaceId)
               .limit(1)
               .first()
-          ).pipe(Effect.flatMap(Effect.fromNullable)),
+          ).pipe(
+            Effect.flatMap((workspace) =>
+              workspace === undefined
+                ? Effect.succeed(undefined)
+                : Schema.decode(WorkspaceTable)(workspace)
+            )
+          ),
 
         createOrJoin: (workspaceId: string | undefined) =>
           query((_) =>
             _.workspace.toCollection().modify({ current: false })
           ).pipe(
             Effect.andThen(
+              Schema.encode(Snapshot)(
+                new LoroDoc<LoroSchema>().export({
+                  mode: "snapshot",
+                })
+              )
+            ),
+            Effect.flatMap((snapshot) =>
               query((_) =>
                 _.workspace.put({
-                  workspaceId: workspaceId ?? crypto.randomUUID(),
-                  version: [],
-                  snapshot: [],
+                  snapshot,
                   token: null,
+                  version: null,
+                  workspaceId: workspaceId ?? crypto.randomUUID(),
                 })
               )
             ),

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

@@ -3,20 +3,30 @@ import { BrowserWorker } from "@effect/platform-browser";
 import { createFileRoute } from "@tanstack/react-router";
 import { Effect } from "effect";
 import { startTransition } from "react";
+import { useActivity } from "../lib/hooks/use-activity";
 import { RuntimeClient } from "../lib/runtime-client";
+import { LoroStorage } from "../lib/services/loro-storage";
 import { WorkspaceManager } from "../lib/services/workspace-manager";
 import { useActionEffect } from "../lib/use-action-effect";
 import { Bootstrap } from "../workers/schema";
 
 export const Route = createFileRoute("/$workspaceId")({
   component: RouteComponent,
   loader: ({ params: { workspaceId } }) =>
-    RuntimeClient.runPromise(WorkspaceManager.getById({ workspaceId })),
+    RuntimeClient.runPromise(
+      WorkspaceManager.getById({ workspaceId }).pipe(
+        Effect.flatMap(Effect.fromNullable)
+      )
+    ),
 });
 
 function RouteComponent() {
   const workspace = Route.useLoaderData();
 
+  const { data, error, loading } = useActivity({
+    workspaceId: workspace.workspaceId,
+  });
+
   const [, bootstrap] = useActionEffect(
     ({ workspaceId }: { workspaceId: string }) =>
       Effect.gen(function* () {
@@ -36,6 +46,22 @@ function RouteComponent() {
       )
   );
 
+  const [, onAdd] = useActionEffect((formData: FormData) =>
+    Effect.gen(function* () {
+      const loroStorage = yield* LoroStorage;
+
+      const name = formData.get("name") as string;
+
+      yield* loroStorage.insertActivity({
+        workspaceId: workspace.workspaceId,
+        value: {
+          id: crypto.randomUUID(),
+          name,
+        },
+      });
+    })
+  );
+
   return (
     <div>
       <p>{workspace.workspaceId}</p>
@@ -48,6 +74,21 @@ function RouteComponent() {
       >
         Bootstrap
       </button>
+
+      <form action={onAdd}>
+        <input type="text" name="name" />
+        <button type="submit">Add activity</button>
+      </form>
+
+      <div>
+        {loading && <p>Loading...</p>}
+        {error && <pre>{JSON.stringify(error, null, 2)}</pre>}
+        {(data ?? []).map((activity) => (
+          <div key={activity.id}>
+            <label>Name {activity.name}</label>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

apps/client/src/workers/sync.ts

@@ -22,22 +22,25 @@ const WorkerLive = WorkerRunner.layerSerialized(WorkerMessage, {
 
       const workspace = yield* manager
         .getById({ workspaceId: params.workspaceId })
-        .pipe(Effect.mapError(() => "Get workspace error"));
+        .pipe(
+          Effect.flatMap(Effect.fromNullable),
+          Effect.mapError(() => "Get workspace error")
+        );
 
       const clientId = yield* initClient.pipe(
         Effect.mapError(() => "Init client error")
       );
 
       const tempUpdates = yield* temp
-        .get({ workspaceId: workspace.workspaceId })
+        .getById({ workspaceId: workspace.workspaceId })
         .pipe(Effect.mapError(() => "Get temp workspace error"));
 
-      if (tempUpdates !== null) {
+      if (tempUpdates !== undefined) {
         const response = yield* Effect.fromNullable(workspace.token).pipe(
           Effect.flatMap((token) =>
             client.syncData
               .push({
-                headers: { Authorization: `Bearer ${token}` },
+                // headers: { Authorization: `Bearer ${token}` },
                 path: { workspaceId: workspace.workspaceId },
                 payload: { clientId, snapshot: tempUpdates.snapshot },
               })
@@ -79,6 +82,10 @@ const WorkerLive = WorkerRunner.layerSerialized(WorkerMessage, {
           })
           .pipe(Effect.mapError(() => "Put workspace error"));
 
+        yield* temp
+          .clean({ workspaceId: workspace.workspaceId })
+          .pipe(Effect.mapError(() => "Clean temp workspace error"));
+
         yield* Effect.log("Sync completed");
       } else {
         yield* Effect.log("No sync updates");