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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-api-client-react",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "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.34",
-    "@noya-app/noya-utils": "0.1.5",
-    "@noya-app/observable": "0.1.9",
-    "@noya-app/observable-react": "0.1.19"
+    "@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"
   },
   "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();
@@ -355,6 +311,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 +345,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 +361,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 +385,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,102 @@
+import { NoyaAPI, RefetchableObservable } from "@noya-app/noya-api";
+import { useObservable } from "@noya-app/noya-multiplayer-react";
+import { SelectConfig, SelectedShape } from "@noya-app/observable";
+import { useMemo } from "react";
+import { useNoyaClientOrFallback } from "./context";
+
+type FileListTableOptions = {
+  policy?: NoyaAPI.FetchPolicy;
+  debug?: boolean;
+};
+
+function useFileListTable<Config extends SelectConfig<NoyaAPI.FileListItem>>(
+  { where, select }: { where?: { id?: string | null }; select: Config },
+  options: FileListTableOptions
+): {
+  status: NoyaAPI.FetchStatus;
+  data: SelectedShape<NoyaAPI.FileListItem, Config>[];
+  refetch: () => void;
+} {
+  const client = useNoyaClientOrFallback();
+
+  const stableSelect = useMemo(() => {
+    return JSON.stringify(select);
+  }, [select]);
+
+  const observable = useMemo(() => {
+    if (where?.id === null) {
+      return new RefetchableObservable<{
+        status: NoyaAPI.FetchStatus;
+        data: SelectedShape<NoyaAPI.FileListItem, Config>[];
+      }>({
+        status: "success",
+        data: [],
+      });
+    }
+
+    const parsedSelect = JSON.parse(stableSelect) as typeof select;
+
+    return client.fileList$.query(
+      {
+        $where: { id: where?.id },
+        $select: parsedSelect,
+      },
+      {
+        policy: options.policy,
+        debug: options.debug,
+      }
+    );
+  }, [
+    client.fileList$,
+    options.policy,
+    stableSelect,
+    where?.id,
+    options.debug,
+  ]);
+
+  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: FileListTableOptions = {}
+): {
+  status: NoyaAPI.FetchStatus;
+  data: SelectedShape<NoyaAPI.FileListItem, Config>[];
+  refetch: () => void;
+} {
+  return useFileListTable({ select }, options);
+}
+
+export function useFileListItem<
+  Config extends SelectConfig<NoyaAPI.FileListItem>,
+>(
+  id: string | undefined,
+  select: Config,
+  options: FileListTableOptions = {}
+): {
+  status: NoyaAPI.FetchStatus;
+  data: SelectedShape<NoyaAPI.FileListItem, Config> | undefined;
+  refetch: () => void;
+} {
+  const { status, data, refetch } = useFileListTable(
+    { where: { id: id ?? null }, select },
+    options
+  );
+
+  return useMemo(() => {
+    return {
+      data: data.at(0),
+      status,
+      refetch,
+    };
+  }, [data, status, refetch]);
+}