@betterinternship/components 1.4.7 → 1.5.0

package/dist/hooks/useClientProcess.d.ts

@@ -1,7 +1,12 @@
-type ProcessStatus = "pending" | "handled" | "failed";
 export interface ProcessCallbackDto {
     processId: string;
     processName: string;
+    processCallbackUrl: string;
+}
+export interface ClientProcessOptions {
+    loadingMessage?: string;
+    successMessage?: string;
+    failureMessage?: string;
 }
 export interface ProcessResponse {
     processId: string;
@@ -10,24 +15,35 @@ export interface ProcessResponse {
     success: boolean;
     message?: string;
 }
+/**
+ * This should be at the root layout.
+ *
+ * @context
+ */
+export declare const ClientProcessesProvider: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
 /**
  * A simpler version, where u just pass the async function that returns process data.
  *
  * @param caller
  * @returns
  */
-export declare function useClientProcess<T, R>({ caller, loadingMessage, successMessage, failureMessage }: {
+export declare function useClientProcess<T, R>({ caller, loadingMessage, successMessage, failureMessage, }: {
     caller: (inputs: T) => Promise<ProcessResponse>;
     loadingMessage?: string;
     successMessage?: string;
     failureMessage?: string;
 }): {
     run: (inputs: T) => Promise<{
+        id: string;
         success: boolean;
         message: string | undefined;
     }>;
-    attempts: number;
-    status: ProcessStatus;
-    result: unknown;
+    get: (id: string) => {
+        id: string;
+        name: string;
+        result?: unknown;
+        success: boolean;
+    } | null;
 };
-export {};

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-import require$$0, { useState, useEffect, useRef } from 'react';
+import require$$0, { createContext, useState, useRef, useContext } from 'react';
 import { Slot } from '@radix-ui/react-slot';
-import { useQuery } from '@tanstack/react-query';
+import { useQueries } from '@tanstack/react-query';
 import { toast } from 'sonner';
 
 function styleInject(css, ref) {
@@ -3630,7 +3630,7 @@ const processStatusChecker = (processId) => fetch(`${config.orchestratorApi}/${e
  * @param processId
  * @returns
  */
-const processCallbackFetcher = (processId, processName, processCallbackUrl) => fetch(`${processCallbackUrl}`, {
+const processCallbackResultFetcher = (processId, processName, processCallbackUrl) => fetch(`${processCallbackUrl}`, {
     method: "POST",
     headers: {
         "Content-Type": "application/json",
@@ -3641,114 +3641,121 @@ const processCallbackFetcher = (processId, processName, processCallbackUrl) => f
     })
 }).then((response) => response.json());
 /**
- * Hook for handling async processes on client.
+ * We need a context to keep track of all client processes.
+ * This helps us manage the state of the toasts as well.
+ */
+const clientProcessesContext = createContext({});
+/**
+ * This should be at the root layout.
  *
- * @hook
- * @param UseAsyncProcessOptions
- * @returns
+ * @context
  */
-function useClientProcessBase({ processId, processName, processCallbackUrl, baseInterval = 1000, maxInterval = 30000, }) {
-    const [status, setStatus] = useState("pending");
-    const attemptRef = useRef(0);
-    const query = useQuery({
-        queryKey: ["process", processName, processId],
-        queryFn: async () => {
-            if (!processId)
-                throw new Error("No processId");
-            if (!processName)
-                throw new Error("No processName");
-            const { process } = await processStatusChecker(processId);
-            // Handled! Return the proper response too
-            if (process.status === "handled") {
-                const response = await processCallbackFetcher(processId, processName, processCallbackUrl);
-                setStatus("handled");
-                return response;
-            }
-            // Pending or failed
-            if (process.status === "pending") {
-                setStatus("pending");
-            }
-            else if (process.status === "failed") {
-                setStatus("failed");
-            }
-            // Return null since no response
-            return null;
-        },
-        // Fetching only works if the task hasn't been resolved
-        enabled: !!processId && !!processName,
-        // Returns the next interval length to use to wait for fetch
-        refetchInterval: (query) => {
-            const data = query.state.data;
-            if (data !== null)
-                return false;
-            const interval = Math.min(baseInterval * 2 ** attemptRef.current, maxInterval);
-            attemptRef.current += 1;
-            return interval;
-        },
+const ClientProcessesProvider = ({ children }) => {
+    const [clientProcessDtos, setClientProcessDtos] = useState({});
+    const clientProcessAttempts = useRef({});
+    const clientProcesses = useQueries({ queries: Object.entries(clientProcessDtos).map(([processId, { dto, options }]) => ({
+            queryKey: ['__process', processId],
+            queryFn: async () => {
+                if (!processId)
+                    throw new Error("No processId");
+                const { process } = await processStatusChecker(processId);
+                // Handled! Return the proper response too
+                if (process.status === "handled") {
+                    const result = await processCallbackResultFetcher(process.id, process.name, dto.processCallbackUrl);
+                    console.warn(process.name, options?.successMessage ?? "Success!");
+                    toast.success(options?.successMessage ?? "Success!", {
+                        id: process.id
+                    });
+                    setTimeout(() => toast.dismiss(process.id), 1500);
+                    return { id: process.id, name: process.name, success: true, result };
+                }
+                // Pending or failed
+                if (process.status === "pending") {
+                    console.log(process.name, options?.loadingMessage ?? "Loading...");
+                    toast.loading(options?.loadingMessage ?? "Loading...", {
+                        id: process.id,
+                        duration: Infinity,
+                    });
+                    return null;
+                }
+                else if (process.status === "failed") {
+                    console.error(process.name, options?.failureMessage ?? "Something went wrong.");
+                    toast.error(options?.failureMessage ?? "Something went wrong.", {
+                        id: process.id
+                    });
+                    setTimeout(() => toast.dismiss(process.id), 1500);
+                    return { id: process.id, name: process.name, success: false };
+                }
+                // Return null since no response
+                return null;
+            },
+            // Returns the next interval length to use to wait for fetch
+            refetchInterval: (query) => {
+                const data = query.state.data;
+                if (data !== null)
+                    return false;
+                // If not defined, init to 0
+                if (!clientProcessAttempts.current[processId])
+                    clientProcessAttempts.current[processId] = 0;
+                const interval = Math.min(500 * 2 ** clientProcessAttempts.current[processId], 10000);
+                clientProcessAttempts.current[processId] += 1;
+                return interval;
+            },
+        }))
     });
-    return {
-        status,
-        attempts: attemptRef.current,
-        result: query.data,
-        error: query.error,
-        isFetching: query.isFetching,
+    /**
+     * Registers a new process to handle
+     *
+     * @param processId
+     * @param processCallbackDto
+     * @param options
+     */
+    const registerProcess = (processId, processCallbackDto, options) => {
+        setClientProcessDtos({ ...clientProcessDtos, [processId]: { dto: processCallbackDto, options } });
     };
-}
+    /**
+     * Retrieves a process
+     *
+     * @param processId
+     * @returns
+     */
+    const getProcess = (processId) => {
+        return clientProcesses.find(clientProcess => clientProcess.data?.id === processId)?.data ?? null;
+    };
+    return (jsxRuntimeExports.jsx(clientProcessesContext.Provider, { value: {
+            registerProcess,
+            getProcess
+        }, children: children }));
+};
 /**
  * A simpler version, where u just pass the async function that returns process data.
  *
  * @param caller
  * @returns
  */
-function useClientProcess({ caller, loadingMessage, successMessage, failureMessage }) {
-    const [response, setResponse] = useState();
-    const clientProcess = useClientProcessBase({
-        processId: response?.processId,
-        processName: response?.processName,
-        processCallbackUrl: response?.processCallbackUrl,
-    });
-    useEffect(() => {
-        if (!response?.processId)
-            return;
-        // Update toast to show current state
-        if (clientProcess.status === 'pending') {
-            console.log(response.processName, loadingMessage ?? "Loading...");
-            toast.loading(loadingMessage ?? "Loading...", {
-                id: response.processId,
-                duration: Infinity,
-            });
-        }
-        else if (clientProcess.status === 'failed') {
-            console.error(response.processName, failureMessage ?? "Something went wrong.");
-            toast.error(failureMessage ?? "Something went wrong.", {
-                id: response.processId
-            });
-        }
-        else if (clientProcess.status === 'handled') {
-            console.warn(response.processName, successMessage ?? "Success!");
-            toast.success(successMessage ?? "Success!", {
-                id: response.processId
-            });
-        }
-    }, [response, clientProcess]);
+function useClientProcess({ caller, loadingMessage, successMessage, failureMessage, }) {
+    const clientProcessesApi = useContext(clientProcessesContext);
     // Note that the exposed function doesn't return process ids
     // Client should be oblivious to those
     // Abstraction BABY!
     const wrappedCaller = async (inputs) => {
         const response = await caller(inputs);
-        setResponse(response);
+        clientProcessesApi.registerProcess(response.processId, response, {
+            loadingMessage,
+            successMessage,
+            failureMessage
+        });
         return {
+            id: response.processId,
             success: response.success,
             message: response.message,
         };
     };
     return {
         run: wrappedCaller,
-        attempts: clientProcess.attempts,
-        status: clientProcess.status,
-        result: clientProcess.result
+        get: (id) => clientProcessesApi.getProcess(id)
     };
 }
 
-export { Button, buttonVariants, config, configure, useClientProcess };
+export { Button, ClientProcessesProvider, buttonVariants, config, configure, useClientProcess };
 //# sourceMappingURL=index.esm.js.map