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

package/package.json

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

package/src/react/hooks.ts

@@ -83,6 +83,13 @@ export function useNoyaAssets(fileId?: string) {
   return assets ?? empty;
 }
 
+export function useNoyaAssetsByFileVersionId(fileVersionId: string) {
+  const client = useNoyaClientOrFallback();
+  const empty = useMemo(() => ({ assets: [], loading: true }), []);
+  const assets = useSelector(client.assetsByFileVersionId$[fileVersionId]);
+  return assets ?? empty;
+}
+
 export function useNoyaSecrets(fileId?: string) {
   const client = useNoyaClientOrFallback();
   const empty = useMemo(() => ({ secrets: [], loading: true }), []);

package/src/react/tableHooks.ts

@@ -1,58 +1,104 @@
-import { NoyaAPI, RefetchableObservable } from "@noya-app/noya-api";
-import { useObservable } from "@noya-app/noya-multiplayer-react";
+"use client";
+
+import { NoyaAPI } from "@noya-app/noya-api";
+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 { useMemo } from "react";
+import {
+  EntitySchema,
+  RefetchFunction,
+  RefetchableObservable,
+  Table,
+  TableFetchOptions,
+} from "@noya-app/observable-store";
+import { useEffect, useMemo } from "react";
 import { useNoyaClientOrFallback } from "./context";
 
-type FileListTableOptions = {
-  policy?: NoyaAPI.FetchPolicy;
-  debug?: boolean;
-};
+type GetRowType<TTable extends Table<EntitySchema>> = Static<TTable["schema"]>;
+type GetSelectConfig<TTable extends Table<EntitySchema>> = SelectConfig<
+  GetRowType<TTable>[]
+>;
+
+type UseTableOptions = Omit<TableFetchOptions, "autoStart">;
 
-function useFileListTable<Config extends SelectConfig<NoyaAPI.FileListItem>>(
-  { where, select }: { where?: { id?: string | null }; select: Config },
-  options: FileListTableOptions
+export function useTable<
+  TTable extends Table<any>,
+  Config extends GetSelectConfig<TTable>,
+>(
+  table: TTable | null | undefined,
+  {
+    where,
+    select,
+  }: {
+    where?: Partial<Record<string, any>> & { id?: string | null };
+    select: Config;
+  },
+  options: UseTableOptions = {}
 ): {
   status: NoyaAPI.FetchStatus;
-  data: SelectedShape<NoyaAPI.FileListItem, Config>[];
+  data: SelectedShape<GetRowType<TTable>, Config>[];
   refetch: () => void;
 } {
-  const client = useNoyaClientOrFallback();
-
   const stableSelect = useMemo(() => {
     return JSON.stringify(select);
   }, [select]);
 
-  const observable = useMemo(() => {
-    if (where?.id === null) {
+  const stableWhere = useMemo(() => {
+    let cloneWithNoUndefined: Partial<typeof where> = {};
+    for (const [key, value] of Object.entries(where ?? {})) {
+      if (value !== undefined) {
+        cloneWithNoUndefined[key] = value;
+      }
+    }
+    return JSON.stringify(cloneWithNoUndefined);
+  }, [where]);
+
+  const observable = useMemo((): RefetchableObservable<{
+    status: NoyaAPI.FetchStatus;
+    data: SelectedShape<GetRowType<TTable>, Config>[];
+  }> => {
+    const parsedSelect = JSON.parse(stableSelect) as typeof select;
+    const parsedWhere = JSON.parse(stableWhere) as typeof where;
+
+    if (!table) {
       return new RefetchableObservable<{
         status: NoyaAPI.FetchStatus;
-        data: SelectedShape<NoyaAPI.FileListItem, Config>[];
+        data: SelectedShape<GetRowType<TTable>, Config>[];
       }>({
-        status: "success",
+        status: "idle",
         data: [],
       });
     }
 
-    const parsedSelect = JSON.parse(stableSelect) as typeof select;
+    if (parsedWhere?.id === null) {
+      return new RefetchableObservable<{
+        status: NoyaAPI.FetchStatus;
+        data: SelectedShape<GetRowType<TTable>, Config>[];
+      }>({
+        status: "success",
+        data: [],
+      });
+    }
 
-    return client.fileList$.query(
+    return table.query(
       {
-        $where: { id: where?.id },
+        $where: parsedWhere,
         $select: parsedSelect,
       },
       {
         policy: options.policy,
         debug: options.debug,
+        autoStart: false,
       }
-    );
-  }, [
-    client.fileList$,
-    options.policy,
-    stableSelect,
-    where?.id,
-    options.debug,
-  ]);
+    ) as RefetchableObservable<{
+      status: NoyaAPI.FetchStatus;
+      data: any[];
+    }>;
+  }, [stableSelect, stableWhere, table, options.policy, options.debug]);
+
+  useEffect(() => {
+    observable.start?.();
+  }, [observable]);
 
   const { status, data } = useObservable(observable);
 
@@ -67,13 +113,15 @@ function useFileListTable<Config extends SelectConfig<NoyaAPI.FileListItem>>(
 
 export function useFileList<Config extends SelectConfig<NoyaAPI.FileListItem>>(
   select: Config,
-  options: FileListTableOptions = {}
+  options: UseTableOptions = {}
 ): {
   status: NoyaAPI.FetchStatus;
   data: SelectedShape<NoyaAPI.FileListItem, Config>[];
-  refetch: () => void;
+  refetch: RefetchFunction;
 } {
-  return useFileListTable({ select }, options);
+  const client = useNoyaClientOrFallback();
+
+  return useTable(client.fileList$, { select }, options);
 }
 
 export function useFileListItem<
@@ -81,13 +129,16 @@ export function useFileListItem<
 >(
   id: string | undefined,
   select: Config,
-  options: FileListTableOptions = {}
+  options: UseTableOptions = {}
 ): {
   status: NoyaAPI.FetchStatus;
   data: SelectedShape<NoyaAPI.FileListItem, Config> | undefined;
-  refetch: () => void;
+  refetch: RefetchFunction;
 } {
-  const { status, data, refetch } = useFileListTable(
+  const client = useNoyaClientOrFallback();
+
+  const { status, data, refetch } = useTable(
+    client.fileList$,
     { where: { id: id ?? null }, select },
     options
   );
@@ -100,3 +151,67 @@ export function useFileListItem<
     };
   }, [data, status, refetch]);
 }
+
+export function useResourcesList<Config extends SelectConfig<Resource>>(
+  fileId: string,
+  select: Config,
+  options: UseTableOptions = {}
+): {
+  status: NoyaAPI.FetchStatus;
+  data: SelectedShape<Resource, Config>[];
+  refetch: RefetchFunction;
+} {
+  const client = useNoyaClientOrFallback();
+
+  return useTable(
+    client.resources$,
+    { select, where: { accessibleByFileId: fileId } },
+    options
+  );
+}
+
+export function useUser<Config extends SelectConfig<NoyaAPI.PublicUser>>(
+  id: string | null | undefined,
+  select: Config,
+  options: UseTableOptions = {}
+): {
+  status: NoyaAPI.FetchStatus;
+  data: SelectedShape<NoyaAPI.PublicUser, Config> | undefined;
+  refetch: RefetchFunction;
+} {
+  const client = useNoyaClientOrFallback();
+
+  const { status, data, refetch } = useTable(
+    client.users$,
+    { select, where: { id: id ?? null } },
+    options
+  );
+
+  return useMemo(() => {
+    return {
+      status,
+      data: data.at(0),
+      refetch,
+    };
+  }, [status, data, refetch]);
+}
+
+export function useActivityEventsList<
+  Config extends SelectConfig<ActivityEvent>,
+>(
+  fileId: string,
+  select: Config,
+  options: UseTableOptions = {}
+): {
+  status: NoyaAPI.FetchStatus;
+  data: SelectedShape<ActivityEvent, Config>[];
+  refetch: RefetchFunction;
+} {
+  const client = useNoyaClientOrFallback();
+
+  return useTable(
+    client.activityEvents$,
+    { select, where: { fileId } },
+    options
+  );
+}