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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-api-client-react",
-  "version": "0.1.35",
+  "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.35",
-    "@noya-app/noya-utils": "0.1.5",
-    "@noya-app/observable": "0.1.10",
-    "@noya-app/observable-react": "0.1.20"
+    "@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/index.ts

@@ -1,3 +1,4 @@
 export * from "@noya-app/noya-api";
 export * from "./react/context";
 export * from "./react/hooks";
+export * from "./react/tableHooks";

package/src/react/context.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { NoyaAPI } from "@noya-app/noya-api";
 import { createContext, useContext, useMemo } from "react";
 
@@ -31,11 +33,12 @@ export function useOptionalNoyaClient(): NoyaAPIContextValue | undefined {
 export function useNoyaClientOrFallback(): NoyaAPIContextValue {
   const value = useContext(NoyaAPIContext);
 
-  const memoryClient = useMemo(() => {
-    return new NoyaAPI.Client({
-      networkClient: new NoyaAPI.MemoryClient(),
-    });
-  }, []);
-
-  return value ?? memoryClient;
+  return useMemo(() => {
+    return (
+      value ??
+      new NoyaAPI.Client({
+        networkClient: new NoyaAPI.MemoryClient(),
+      })
+    );
+  }, [value]);
 }

package/src/react/hooks.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useSelector } from "@legendapp/state/react";
 import { GENERATED_PAGE_NAME_COUNT, NoyaAPI } from "@noya-app/noya-api";
 import { range } from "@noya-app/noya-utils";
@@ -9,52 +11,6 @@ import {
   useOptionalNoyaClient,
 } from "./context";
 
-export function useNoyaFiles(): {
-  files: NoyaAPI.File[];
-  loading: boolean;
-  reload: () => Promise<void>;
-} {
-  const client = useNoyaClientOrFallback();
-  const files = useSelector(client.files$);
-  const session = useSelector(useNoyaClient().session$);
-
-  useEffect(() => {
-    if (!session) return;
-
-    if (
-      files.loading === "notStarted" ||
-      files.loading === "populatedOnServer"
-    ) {
-      client.files.refetch();
-    }
-  }, [client, files.loading, session]);
-
-  const reload = useCallback(() => {
-    return client.files.refetch();
-  }, [client]);
-
-  return {
-    files: files.files,
-    loading: !(
-      files.loading === "loadedInClient" ||
-      files.loading === "populatedOnServer"
-    ),
-    reload,
-  };
-}
-
-export function useNoyaFile(fileId?: string) {
-  const client = useNoyaClientOrFallback();
-  const files = useSelector(client.files$);
-  return files.files.find((file) => file.id === fileId);
-}
-
-export function useNoyaIsOwnFile(fileId?: string) {
-  const file = useNoyaFile(fileId);
-  const session = useNoyaSession();
-  return file?.userId === session?.user.id;
-}
-
 export function useNoyaTools(initial?: NoyaAPI.Tool[]) {
   const didInitialize = useRef(false);
   const client = useNoyaClientOrFallback();
@@ -127,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 }), []);
@@ -355,6 +318,15 @@ export function useNoyaWorkspaces() {
   return workspaces;
 }
 
+export function useNoyaMultiplayerRoomToken(fileId: string) {
+  const client = useNoyaClientOrFallback();
+  const multiplayerRoomToken = useObservable(
+    client.multiplayerRoomTokens$,
+    useMemo(() => (tokens) => tokens[fileId]?.payload ?? undefined, [fileId])
+  );
+  return multiplayerRoomToken as { access: "read" | "write" } | undefined;
+}
+
 export function useNoyaWorkspaceInvitations(workspaceId: string) {
   const client = useNoyaClientOrFallback();
   const workspaceInvitations = useSelector(
@@ -380,15 +352,15 @@ export function useNoyaWorkspaceInvitations(workspaceId: string) {
 
 const emptyObservedFileVersions: {
   fileVersions: NoyaAPI.FileVersion[];
-  loading: NoyaAPI.DataLoadingState;
+  loading: NoyaAPI.FetchStatus;
 } = {
   fileVersions: [],
-  loading: "notStarted",
+  loading: "idle",
 };
 
 export function useNoyaOwnedFileVersions(fileId: string): {
   fileVersions: NoyaAPI.FileVersion[];
-  loading: NoyaAPI.DataLoadingState;
+  loading: NoyaAPI.FetchStatus;
   reload: () => Promise<void>;
 } {
   const client = useNoyaClientOrFallback();
@@ -396,7 +368,7 @@ export function useNoyaOwnedFileVersions(fileId: string): {
   const fileVersions = useObservable(client.ownedFileVersions$, path);
 
   useEffect(() => {
-    if (!fileVersions || fileVersions.loading === "notStarted") {
+    if (!fileVersions || fileVersions.loading === "idle") {
       client.fileVersions.refetch({ fileId, type: "owned" });
     }
   }, [client, fileId, fileVersions, fileVersions?.loading]);
@@ -420,13 +392,13 @@ export function useNoyaTemplates() {
   const { templates, loading } = useSelector(client.templates$);
 
   useEffect(() => {
-    if (loading === "notStarted" || loading === "populatedOnServer") {
+    if (loading === "idle") {
       client.templates.read();
     }
   }, [client, loading]);
 
   return {
     templates,
-    loading: !(loading === "loadedInClient" || loading === "populatedOnServer"),
+    loading: loading === "fetching",
   };
 }

package/src/react/tableHooks.ts

@@ -0,0 +1,217 @@
+"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 {
+  EntitySchema,
+  RefetchFunction,
+  RefetchableObservable,
+  Table,
+  TableFetchOptions,
+} from "@noya-app/observable-store";
+import { useEffect, useMemo } from "react";
+import { useNoyaClientOrFallback } from "./context";
+
+type GetRowType<TTable extends Table<EntitySchema>> = Static<TTable["schema"]>;
+type GetSelectConfig<TTable extends Table<EntitySchema>> = SelectConfig<
+  GetRowType<TTable>[]
+>;
+
+type UseTableOptions = Omit<TableFetchOptions, "autoStart">;
+
+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<GetRowType<TTable>, Config>[];
+  refetch: () => void;
+} {
+  const stableSelect = useMemo(() => {
+    return JSON.stringify(select);
+  }, [select]);
+
+  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<GetRowType<TTable>, Config>[];
+      }>({
+        status: "idle",
+        data: [],
+      });
+    }
+
+    if (parsedWhere?.id === null) {
+      return new RefetchableObservable<{
+        status: NoyaAPI.FetchStatus;
+        data: SelectedShape<GetRowType<TTable>, Config>[];
+      }>({
+        status: "success",
+        data: [],
+      });
+    }
+
+    return table.query(
+      {
+        $where: parsedWhere,
+        $select: parsedSelect,
+      },
+      {
+        policy: options.policy,
+        debug: options.debug,
+        autoStart: false,
+      }
+    ) as RefetchableObservable<{
+      status: NoyaAPI.FetchStatus;
+      data: any[];
+    }>;
+  }, [stableSelect, stableWhere, table, options.policy, options.debug]);
+
+  useEffect(() => {
+    observable.start?.();
+  }, [observable]);
+
+  const { status, data } = useObservable(observable);
+
+  return useMemo(() => {
+    return {
+      status,
+      data,
+      refetch: observable.refetch,
+    };
+  }, [status, data, observable]);
+}
+
+export function useFileList<Config extends SelectConfig<NoyaAPI.FileListItem>>(
+  select: Config,
+  options: UseTableOptions = {}
+): {
+  status: NoyaAPI.FetchStatus;
+  data: SelectedShape<NoyaAPI.FileListItem, Config>[];
+  refetch: RefetchFunction;
+} {
+  const client = useNoyaClientOrFallback();
+
+  return useTable(client.fileList$, { select }, options);
+}
+
+export function useFileListItem<
+  Config extends SelectConfig<NoyaAPI.FileListItem>,
+>(
+  id: string | undefined,
+  select: Config,
+  options: UseTableOptions = {}
+): {
+  status: NoyaAPI.FetchStatus;
+  data: SelectedShape<NoyaAPI.FileListItem, Config> | undefined;
+  refetch: RefetchFunction;
+} {
+  const client = useNoyaClientOrFallback();
+
+  const { status, data, refetch } = useTable(
+    client.fileList$,
+    { where: { id: id ?? null }, select },
+    options
+  );
+
+  return useMemo(() => {
+    return {
+      data: data.at(0),
+      status,
+      refetch,
+    };
+  }, [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
+  );
+}