@noya-app/noya-api-client-react 0.1.37 → 0.1.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-api-client-react",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "@legendapp/state": "^2.1.1",
-    "@noya-app/noya-api": "0.1.37",
-    "@noya-app/noya-utils": "0.1.7",
+    "@noya-app/noya-api": "0.1.39",
+    "@noya-app/noya-utils": "0.1.8",
     "@noya-app/observable": "0.1.12",
-    "@noya-app/observable-store": "0.1.1",
+    "@noya-app/observable-store": "0.1.2",
     "@noya-app/observable-react": "0.1.22"
   },
   "peerDependencies": {

package/src/react/tableHooks.ts

@@ -5,13 +5,14 @@ import { Static, useObservable } from "@noya-app/noya-multiplayer-react";
 import { ActivityEvent, Resource } from "@noya-app/noya-schemas";
 import { SelectConfig, SelectedShape } from "@noya-app/observable";
 import {
+  Entity,
   EntitySchema,
   RefetchFunction,
   RefetchableObservable,
   Table,
   TableFetchOptions,
 } from "@noya-app/observable-store";
-import { useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { useNoyaClientOrFallback } from "./context";
 
 type GetRowType<TTable extends Table<EntitySchema>> = Static<TTable["schema"]>;
@@ -38,6 +39,10 @@ export function useTable<
   status: NoyaAPI.FetchStatus;
   data: SelectedShape<GetRowType<TTable>, Config>[];
   refetch: () => void;
+  optimisticUpdate: (
+    entity: Entity<TTable["schema"]>,
+    config?: GetSelectConfig<TTable>
+  ) => void;
 } {
   const stableSelect = useMemo(() => {
     return JSON.stringify(select);
@@ -101,14 +106,22 @@ export function useTable<
   }, [observable]);
 
   const { status, data } = useObservable(observable);
+  const optimisticUpdate = useCallback(
+    (entity: Entity<TTable["schema"]>, config?: GetSelectConfig<TTable>) => {
+      if (!table) return;
+      table.optimisticUpdate(entity, config);
+    },
+    [table]
+  );
 
   return useMemo(() => {
     return {
       status,
       data,
       refetch: observable.refetch,
+      optimisticUpdate,
     };
-  }, [status, data, observable]);
+  }, [status, data, observable, optimisticUpdate]);
 }
 
 export function useFileList<Config extends SelectConfig<NoyaAPI.FileListItem>>(
@@ -118,10 +131,25 @@ export function useFileList<Config extends SelectConfig<NoyaAPI.FileListItem>>(
   status: NoyaAPI.FetchStatus;
   data: SelectedShape<NoyaAPI.FileListItem, Config>[];
   refetch: RefetchFunction;
+  optimisticUpdate: (
+    entity: Partial<NoyaAPI.FileListItem> & { id: string },
+    config?: Config
+  ) => void;
 } {
   const client = useNoyaClientOrFallback();
 
-  return useTable(client.fileList$, { select }, options);
+  const { status, data, refetch, optimisticUpdate } = useTable(
+    client.fileList$,
+    { select },
+    options
+  );
+
+  return {
+    status,
+    data,
+    refetch,
+    optimisticUpdate,
+  };
 }
 
 export function useFileListItem<
@@ -134,10 +162,14 @@ export function useFileListItem<
   status: NoyaAPI.FetchStatus;
   data: SelectedShape<NoyaAPI.FileListItem, Config> | undefined;
   refetch: RefetchFunction;
+  optimisticUpdate: (
+    entity: Partial<NoyaAPI.FileListItem> & { id: string },
+    config?: Config
+  ) => void;
 } {
   const client = useNoyaClientOrFallback();
 
-  const { status, data, refetch } = useTable(
+  const { status, data, refetch, optimisticUpdate } = useTable(
     client.fileList$,
     { where: { id: id ?? null }, select },
     options
@@ -148,8 +180,9 @@ export function useFileListItem<
       data: data.at(0),
       status,
       refetch,
+      optimisticUpdate,
     };
-  }, [data, status, refetch]);
+  }, [data, status, refetch, optimisticUpdate]);
 }
 
 export function useResourcesList<Config extends SelectConfig<Resource>>(
@@ -160,14 +193,25 @@ export function useResourcesList<Config extends SelectConfig<Resource>>(
   status: NoyaAPI.FetchStatus;
   data: SelectedShape<Resource, Config>[];
   refetch: RefetchFunction;
+  optimisticUpdate: (
+    entity: Partial<Resource> & { id: string },
+    config?: Config
+  ) => void;
 } {
   const client = useNoyaClientOrFallback();
 
-  return useTable(
+  const { status, data, refetch, optimisticUpdate } = useTable(
     client.resources$,
     { select, where: { accessibleByFileId: fileId } },
     options
   );
+
+  return {
+    status,
+    data,
+    refetch,
+    optimisticUpdate,
+  };
 }
 
 export function useUser<Config extends SelectConfig<NoyaAPI.PublicUser>>(
@@ -178,10 +222,14 @@ export function useUser<Config extends SelectConfig<NoyaAPI.PublicUser>>(
   status: NoyaAPI.FetchStatus;
   data: SelectedShape<NoyaAPI.PublicUser, Config> | undefined;
   refetch: RefetchFunction;
+  optimisticUpdate: (
+    entity: Partial<NoyaAPI.PublicUser> & { id: string },
+    config?: Config
+  ) => void;
 } {
   const client = useNoyaClientOrFallback();
 
-  const { status, data, refetch } = useTable(
+  const { status, data, refetch, optimisticUpdate } = useTable(
     client.users$,
     { select, where: { id: id ?? null } },
     options
@@ -192,8 +240,9 @@ export function useUser<Config extends SelectConfig<NoyaAPI.PublicUser>>(
       status,
       data: data.at(0),
       refetch,
+      optimisticUpdate,
     };
-  }, [status, data, refetch]);
+  }, [status, data, refetch, optimisticUpdate]);
 }
 
 export function useActivityEventsList<
@@ -206,12 +255,23 @@ export function useActivityEventsList<
   status: NoyaAPI.FetchStatus;
   data: SelectedShape<ActivityEvent, Config>[];
   refetch: RefetchFunction;
+  optimisticUpdate: (
+    entity: Partial<ActivityEvent> & { id: string },
+    config?: Config
+  ) => void;
 } {
   const client = useNoyaClientOrFallback();
 
-  return useTable(
+  const { status, data, refetch, optimisticUpdate } = useTable(
     client.activityEvents$,
     { select, where: { fileId } },
     options
   );
+
+  return {
+    status,
+    data,
+    refetch,
+    optimisticUpdate,
+  };
 }