@noya-app/noya-api-client-react 0.1.19

package/src/react/context.ts

@@ -0,0 +1,41 @@
+import { NoyaAPI } from "@noya-app/noya-api";
+import { createContext, useContext, useMemo } from "react";
+
+type NoyaAPIContextValue = NoyaAPI.Client;
+
+const NoyaAPIContext = createContext<NoyaAPIContextValue | undefined>(
+  undefined
+);
+
+export const NoyaAPIProvider: React.Provider<NoyaAPIContextValue | undefined> =
+  NoyaAPIContext.Provider;
+
+export function useNoyaClient(): NoyaAPIContextValue {
+  const value = useContext(NoyaAPIContext);
+
+  if (!value) {
+    throw new Error("Missing NoyaAPIContextValue");
+  }
+
+  return value;
+}
+
+export function useOptionalNoyaClient(): NoyaAPIContextValue | undefined {
+  return useContext(NoyaAPIContext);
+}
+
+/**
+ * If there's no client, fallback to a memory client.
+ * We do this to safely render content when logged out (e.g. when sharing).
+ */
+export function useNoyaClientOrFallback(): NoyaAPIContextValue {
+  const value = useContext(NoyaAPIContext);
+
+  const memoryClient = useMemo(() => {
+    return new NoyaAPI.Client({
+      networkClient: new NoyaAPI.MemoryClient(),
+    });
+  }, []);
+
+  return value ?? memoryClient;
+}

package/src/react/hooks.ts

@@ -0,0 +1,262 @@
+import { useSelector } from "@legendapp/state/react";
+import { GENERATED_PAGE_NAME_COUNT, NoyaAPI } from "@noya-app/noya-api";
+import { range } from "@noya-app/noya-utils";
+import { useEffect, useMemo, useRef } from "react";
+import {
+  useNoyaClient,
+  useNoyaClientOrFallback,
+  useOptionalNoyaClient,
+} from "./context";
+
+export function useNoyaFiles(): {
+  files: NoyaAPI.File[];
+  loading: NoyaAPI.DataLoadingState;
+} {
+  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]);
+
+  return files;
+}
+
+export function useNoyaIsOwnFile(fileId?: string) {
+  const client = useNoyaClientOrFallback();
+  const files = useSelector(client.files$);
+  const session = useSelector(client.session$);
+  const file = files.files.find((file) => file.id === fileId);
+  return file?.userId === session?.user.id;
+}
+
+export function useNoyaTools(initial?: NoyaAPI.Tool[]) {
+  const didInitialize = useRef(false);
+  const client = useNoyaClientOrFallback();
+  const tools = useSelector(client.tools$);
+  useEffect(() => {
+    if (didInitialize.current) return;
+    didInitialize.current = true;
+
+    if (initial) {
+      client.tools.setInitial(initial);
+    } else {
+      client.tools.list();
+    }
+  }, [client, initial]);
+  return tools;
+}
+
+export function useOptionalNoyaTools(initial?: NoyaAPI.Tool[]) {
+  const client = useNoyaClientOrFallback();
+  const tools = useSelector(client.tools$);
+  return useMemo(
+    () =>
+      tools.loading && initial ? { loading: true, tools: initial } : tools,
+    [initial, tools]
+  );
+}
+
+export function useNoyaTags() {
+  const client = useNoyaClient();
+  const tags = useSelector(client.tags$);
+  useEffect(() => {
+    client.tags.read();
+  }, [client]);
+  return tags;
+}
+
+export function useOptionalNoyaTags() {
+  const client = useNoyaClientOrFallback();
+  const tags = useSelector(client.tags$);
+  useEffect(() => {
+    client.tags.read();
+  }, [client]);
+  return tags;
+}
+
+export function useNoyaCreators() {
+  const client = useNoyaClientOrFallback();
+  const creators = useSelector(client.creators$);
+  useEffect(() => {
+    client.creators.read();
+  }, [client]);
+  return creators;
+}
+
+export function useOptionalNoyaCreators() {
+  const client = useNoyaClientOrFallback();
+  const creators = useSelector(client.creators$);
+  useEffect(() => {
+    client.creators.read();
+  }, [client]);
+  return creators;
+}
+
+export function useNoyaAssets(fileId?: string) {
+  const client = useNoyaClientOrFallback();
+  const empty = useMemo(() => ({ assets: [], loading: true }), []);
+  const assets = useSelector(
+    fileId ? client.assetsByFileId$[fileId] : client.assets$
+  );
+  return assets ?? empty;
+}
+
+export function useNoyaSession() {
+  const session = useSelector(useNoyaClient().session$);
+  return session;
+}
+
+export function useOptionalNoyaSession() {
+  const session = useSelector(useOptionalNoyaClient()?.session$);
+  return session;
+}
+
+export function useNoyaBilling() {
+  const billing = useSelector(useNoyaClient().billing$);
+  return billing;
+}
+
+export function useNoyaEmailLists() {
+  const emailLists = useSelector(useNoyaClient().emailLists$);
+  return emailLists;
+}
+
+export function useNoyaUserData() {
+  const userData = useSelector(useNoyaClientOrFallback().userData$);
+  return userData;
+}
+
+export function useOptionalNoyaUserData() {
+  const userData = useSelector(useNoyaClientOrFallback().userData$);
+  return userData;
+}
+
+export function useIsBeta() {
+  const userData = useOptionalNoyaUserData();
+  return userData?.userData?.beta ?? false;
+}
+
+export function useMetadata<T extends NoyaAPI.Json>(key: string) {
+  const { userData } = useNoyaUserData();
+  const metadata = userData?.metadata || [];
+  const metadataItem = metadata.find((item) => item.key === key);
+  return metadataItem?.value as T | undefined;
+}
+
+export function useGeneratedComponentNames(name: string) {
+  const key = name.trim().toLowerCase();
+  const { generatedNames$, loadingNames$ } = useNoyaClientOrFallback();
+  const result = useSelector(
+    () => generatedNames$[key].get() as NoyaAPI.GeneratedName[] | undefined
+  );
+  const loading = useSelector(() => loadingNames$[key].get());
+  return useMemo(() => ({ names: result ?? [], loading }), [loading, result]);
+}
+
+export function useGeneratedComponentDescriptions() {
+  const { generatedDescriptions$, loadingDescriptions$ } =
+    useNoyaClientOrFallback();
+  const descriptions = useSelector(generatedDescriptions$);
+  const loading = useSelector(loadingDescriptions$);
+  return useMemo(() => ({ descriptions, loading }), [loading, descriptions]);
+}
+
+export function useGeneratedComponentDescription(name: string) {
+  const key = name.trim().toLowerCase();
+  const { generatedDescriptions$, loadingDescriptions$ } =
+    useNoyaClientOrFallback();
+  const description = useSelector(
+    () => generatedDescriptions$[key].get() as string | undefined
+  );
+  const loading = useSelector(() => loadingDescriptions$[key].get());
+  return useMemo(() => ({ description, loading }), [loading, description]);
+}
+
+export function useRandomImages() {
+  const { randomImages$, loadingRandomImages$ } = useNoyaClientOrFallback();
+  const images = useSelector(randomImages$);
+  const loading = useSelector(loadingRandomImages$);
+  return useMemo(() => ({ images, loading }), [loading, images]);
+}
+
+export function useRandomIcons() {
+  const { randomIcons$, loadingRandomIcons$ } = useNoyaClientOrFallback();
+  const icons = useSelector(randomIcons$);
+  const loading = useSelector(loadingRandomIcons$);
+  return useMemo(() => ({ icons, loading }), [loading, icons]);
+}
+
+export function useNetworkRequests() {
+  const { requests$ } = useNoyaClientOrFallback();
+  const requests = useSelector(requests$) as NoyaAPI.RequestSnapshot[];
+  return requests;
+}
+
+export type EnhancedGeneratedPageName = NoyaAPI.GeneratedName & {
+  index: number;
+  type: "suggestion";
+};
+
+export function useGeneratedPageNames(): EnhancedGeneratedPageName[] {
+  const { generatedPageNames$ } = useNoyaClientOrFallback();
+  const names = useSelector(generatedPageNames$) as NoyaAPI.GeneratedName[];
+
+  const namesWithDefaultsAndTypes = useMemo(() => {
+    const rangeArray = range(0, GENERATED_PAGE_NAME_COUNT);
+
+    // Fill any empty slots with default names in the 'loading' state
+    const withDefaults = rangeArray.map((index): NoyaAPI.GeneratedName => {
+      const name = names[index];
+      return name ?? { name: `Page ${index + 1}`, loading: true, key: "" };
+    });
+
+    return withDefaults.map(
+      (name, index): EnhancedGeneratedPageName => ({
+        ...name,
+        index,
+        type: "suggestion",
+      })
+    );
+  }, [names]);
+
+  // Take the first 3
+  return namesWithDefaultsAndTypes.slice(0, 3);
+}
+
+export function useGeneratedPageComponentNames(): EnhancedGeneratedPageName[] {
+  const { generatedPageComponentNames$: generatedComponentNames$ } =
+    useNoyaClientOrFallback();
+  const names = useSelector(
+    generatedComponentNames$
+  ) as NoyaAPI.GeneratedName[];
+
+  const namesWithDefaultsAndTypes = useMemo(() => {
+    const rangeArray = range(0, GENERATED_PAGE_NAME_COUNT);
+
+    // Fill any empty slots with default names in the 'loading' state
+    const withDefaults = rangeArray.map((index): NoyaAPI.GeneratedName => {
+      const name = names[index];
+      return name ?? { name: `Component ${index + 1}`, loading: true, key: "" };
+    });
+
+    return withDefaults.map(
+      (name, index): EnhancedGeneratedPageName => ({
+        ...name,
+        index,
+        type: "suggestion",
+      })
+    );
+  }, [names]);
+
+  // Take the first 3
+  return namesWithDefaultsAndTypes.slice(0, 3);
+}

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@repo/typescript-config/library.json"
+}