@betterinternship/components 2.9.2 → 2.9.3

package/dist/components/ui/checkbox.js

@@ -4,7 +4,7 @@ import { CheckIcon } from 'lucide-react';
 import { cn } from '../../utils.js';
 
 function Checkbox({ className, ...props }) {
-    return (jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", onClick: (e) => e.stopPropagation(), className: cn('peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 cursor-pointer rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current transition-none", children: jsx(CheckIcon, { className: "size-3.5" }) }) }));
+    return (jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", onClick: (e) => e.stopPropagation(), className: cn('peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 cursor-pointer rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current transition-none", children: jsx(CheckIcon, { className: "size-3.5 stroke-3" }) }) }));
 }
 
 export { Checkbox };

package/dist/components/ui/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../src/components/ui/checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon } from 'lucide-react';\n\nimport { cn } from '@/utils';\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      onClick={(e) => e.stopPropagation()}\n      className={cn(\n        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 cursor-pointer rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"flex items-center justify-center text-current transition-none\"\n      >\n        <CheckIcon className=\"size-3.5\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"],"names":["_jsx"],"mappings":";;;;;AAMA,SAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EAC4C,EAAA;IACpD,QACEA,GAAA,CAAC,iBAAiB,CAAC,IAAI,iBACX,UAAU,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,EACnC,SAAS,EAAE,EAAE,CACX,4fAA4f,EAC5f,SAAS,CACV,EAAA,GACG,KAAK,EAAA,QAAA,EAETA,GAAA,CAAC,iBAAiB,CAAC,SAAS,EAAA,EAAA,WAAA,EAChB,oBAAoB,EAC9B,SAAS,EAAC,+DAA+D,EAAA,QAAA,EAEzEA,GAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,UAAU,EAAA,CAAG,EAAA,CACN,EAAA,CACP;AAE7B;;;;"}
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/ui/checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon } from 'lucide-react';\n\nimport { cn } from '@/utils';\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      onClick={(e) => e.stopPropagation()}\n      className={cn(\n        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 cursor-pointer rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"flex items-center justify-center text-current transition-none\"\n      >\n        <CheckIcon className=\"size-3.5 stroke-3\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"],"names":["_jsx"],"mappings":";;;;;AAMA,SAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EAC4C,EAAA;IACpD,QACEA,GAAA,CAAC,iBAAiB,CAAC,IAAI,iBACX,UAAU,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,EACnC,SAAS,EAAE,EAAE,CACX,4fAA4f,EAC5f,SAAS,CACV,EAAA,GACG,KAAK,EAAA,QAAA,EAETA,GAAA,CAAC,iBAAiB,CAAC,SAAS,EAAA,EAAA,WAAA,EAChB,oBAAoB,EAC9B,SAAS,EAAC,+DAA+D,EAAA,QAAA,EAEzEA,GAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,mBAAmB,EAAA,CAAG,EAAA,CACf,EAAA,CACP;AAE7B;;;;"}

package/dist/components/ui/fab.js

@@ -1,9 +1,9 @@
-import { jsx } from 'react/jsx-runtime';
-import { Button } from './button.js';
-
-const FloatingActionButton = ({ onClick, children }) => {
-    return (jsx(Button, { onClick: onClick, className: "fixed bottom-4 right-4 z-50 rounded-full p-4 shadow-lg bg-primary text-white hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary", children: children }));
-};
-
-export { FloatingActionButton };
-//# sourceMappingURL=fab.js.map
+import { jsx } from 'react/jsx-runtime';
+import { Button } from './button.js';
+
+const FloatingActionButton = ({ onClick, children }) => {
+    return (jsx(Button, { onClick: onClick, className: "fixed bottom-4 right-4 z-50 rounded-full p-4 shadow-lg bg-primary text-white hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary", children: children }));
+};
+
+export { FloatingActionButton };
+//# sourceMappingURL=fab.js.map

package/dist/config.d.ts

@@ -1,6 +1,6 @@
-interface PackageConfig {
-    orchestratorApi: string;
-}
-export declare let config: PackageConfig;
-export declare const configure: (newConfig: PackageConfig) => void;
-export {};
+interface PackageConfig {
+    orchestratorApi: string;
+}
+export declare let config: PackageConfig;
+export declare const configure: (newConfig: PackageConfig) => void;
+export {};

package/dist/config.js

@@ -1,9 +1,9 @@
-let config = {
-    orchestratorApi: 'https://orca.betterinternship.com/process',
-};
-const configure = (newConfig) => {
-    config = { ...config, ...newConfig };
-};
-
-export { config, configure };
-//# sourceMappingURL=config.js.map
+let config = {
+    orchestratorApi: 'https://orca.betterinternship.com/process',
+};
+const configure = (newConfig) => {
+    config = { ...config, ...newConfig };
+};
+
+export { config, configure };
+//# sourceMappingURL=config.js.map

package/dist/hooks/useClientProcess.d.ts

@@ -1,69 +1,69 @@
-interface ClientProcess<T> {
-    dto?: ProcessCallbackDto;
-    metadata?: ClientProcessMetadata;
-    options?: ClientProcessOptions;
-    result?: T;
-    success?: boolean;
-    pending?: boolean;
-    error?: string;
-}
-export interface ProcessCallbackDto {
-    processId: string;
-    processName: string;
-    processCallbackUrl: string;
-}
-export interface ClientProcessOptions {
-    onLoading?: (processId: string, processName: string) => void;
-    onSuccess?: <R>(processId: string, processName: string, result: R) => void;
-    onFailure?: (processId: string, processName: string, error?: string) => void;
-}
-export interface ClientProcessMetadata {
-    filterKey: string;
-    metadata?: Record<string, string>;
-}
-export interface ProcessResponse {
-    processId: string;
-    processName: string;
-    processCallbackUrl: string;
-    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, invalidator, filterKey, onLoading, onSuccess, onFailure, }: {
-    caller?: (inputs: T) => Promise<ProcessResponse>;
-    invalidator?: (result: R) => boolean;
-    filterKey: string;
-    onLoading?: (processId: string, processName: string) => void;
-    onSuccess?: <R>(processId: string, processName: string, result: R) => void;
-    onFailure?: (processId: string, processName: string, error?: string) => void;
-}): {
-    run: (inputs: T, metadata?: Record<string, string>) => Promise<{
-        id: string;
-        success: boolean;
-        message: string | undefined;
-    } | {
-        id: null;
-        success: boolean;
-        message: string;
-    }>;
-    get: (id: string) => ClientProcess<unknown> | null;
-    getAll: () => ClientProcess<unknown>[];
-    getAllPending: () => ClientProcess<unknown>[];
-    getAllHandled: () => ClientProcess<unknown>[];
-    getAllFailed: () => ClientProcess<unknown>[];
-    refreshCache: () => Promise<void>;
-};
-export {};
+interface ClientProcess<T> {
+    dto?: ProcessCallbackDto;
+    metadata?: ClientProcessMetadata;
+    options?: ClientProcessOptions;
+    result?: T;
+    success?: boolean;
+    pending?: boolean;
+    error?: string;
+}
+export interface ProcessCallbackDto {
+    processId: string;
+    processName: string;
+    processCallbackUrl: string;
+}
+export interface ClientProcessOptions {
+    onLoading?: (processId: string, processName: string) => void;
+    onSuccess?: <R>(processId: string, processName: string, result: R) => void;
+    onFailure?: (processId: string, processName: string, error?: string) => void;
+}
+export interface ClientProcessMetadata {
+    filterKey: string;
+    metadata?: Record<string, string>;
+}
+export interface ProcessResponse {
+    processId: string;
+    processName: string;
+    processCallbackUrl: string;
+    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, invalidator, filterKey, onLoading, onSuccess, onFailure, }: {
+    caller?: (inputs: T) => Promise<ProcessResponse>;
+    invalidator?: (result: R) => boolean;
+    filterKey: string;
+    onLoading?: (processId: string, processName: string) => void;
+    onSuccess?: <R>(processId: string, processName: string, result: R) => void;
+    onFailure?: (processId: string, processName: string, error?: string) => void;
+}): {
+    run: (inputs: T, metadata?: Record<string, string>) => Promise<{
+        id: string;
+        success: boolean;
+        message: string | undefined;
+    } | {
+        id: null;
+        success: boolean;
+        message: string;
+    }>;
+    get: (id: string) => ClientProcess<unknown> | null;
+    getAll: () => ClientProcess<unknown>[];
+    getAllPending: () => ClientProcess<unknown>[];
+    getAllHandled: () => ClientProcess<unknown>[];
+    getAllFailed: () => ClientProcess<unknown>[];
+    refreshCache: () => Promise<void>;
+};
+export {};

package/dist/hooks/useClientProcess.js

@@ -1,255 +1,255 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useRef, useState, useEffect, useContext } from 'react';
-import { useQueryClient, useQueries } from '@tanstack/react-query';
-import { config } from '../config.js';
-
-/**
- * The orchestrator service to get the process from.
- *
- * @param processId
- * @returns
- */
-const processStatusChecker = (processId) => {
-    if (!processId)
-        return { process: null };
-    return fetch(`${config.orchestratorApi}/${encodeURIComponent(processId)}`, {
-        method: 'GET',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-    }).then((response) => response.json());
-};
-/**
- * This fetches from the callback endpoint.
- *
- * @param processId
- * @returns
- */
-const processCallbackResultFetcher = (processId, processName, processCallbackUrl) => fetch(`${processCallbackUrl}`, {
-    method: 'POST',
-    headers: {
-        'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-        processId,
-        processName,
-    }),
-}).then((response) => response.json());
-/**
- * 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.
- *
- * @context
- */
-const ClientProcessesProvider = ({ children, }) => {
-    const queryClient = useQueryClient();
-    const clientProcessAttempts = useRef({});
-    const [clientProcessDtos, setClientProcessDtos] = useState({});
-    // Populates the state object with cached data on mount
-    useEffect(() => {
-        setClientProcessDtos((oldData) => {
-            if (Object.keys(oldData).length > 0)
-                return oldData;
-            const cachedClientProcesses = queryClient
-                .getQueryCache()
-                .findAll({ queryKey: ['.__process'], exact: false });
-            const seededClientProcesses = {};
-            for (const query of cachedClientProcesses) {
-                const processId = query.queryKey[2];
-                if (typeof processId !== 'string')
-                    continue;
-                const data = query.state.data;
-                if (!data?.dto || !data?.metadata)
-                    continue;
-                seededClientProcesses[processId] = {
-                    dto: data.dto,
-                    metadata: data.metadata,
-                    options: data.options,
-                };
-            }
-            return { ...oldData, ...seededClientProcesses };
-        });
-    }, [queryClient]);
-    // The query for all the processes, pending and sht
-    const clientProcesses = useQueries({
-        queries: Object.entries(clientProcessDtos).map(([processId, { dto, metadata, options }]) => ({
-            staleTime: Infinity,
-            gcTime: 3 * 60 * 1000,
-            refetchOnWindowFocus: true,
-            refetchIntervalInBackground: true,
-            refetchOnMount: true,
-            refetchOnReconnect: true,
-            queryKey: ['.__process', metadata.filterKey, 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);
-                    // Log and call runner
-                    console.warn(`Handled ${process.name} (${process.id})!`);
-                    options?.onSuccess?.(process.id, process.name, result);
-                    return {
-                        dto,
-                        metadata,
-                        options,
-                        success: true,
-                        pending: false,
-                        result,
-                    };
-                }
-                // Pending or failed
-                if (process?.status === 'pending') {
-                    console.log(`Running process ${process.name} (${process.id})...`);
-                    options?.onLoading?.(process.id, process.name);
-                    return { dto, metadata, options, pending: true };
-                }
-                else if (process?.status === 'failed') {
-                    console.error(`Failed ${process.name} (${process.id}) - ${process.error}.`);
-                    return {
-                        dto,
-                        metadata,
-                        options,
-                        success: false,
-                        pending: false,
-                        error: process.error,
-                    };
-                }
-                // Return null since no response
-                return { dto, metadata, options, pending: true };
-            },
-            // Returns the next interval length to use to wait for fetch
-            refetchInterval: (query) => {
-                const data = query.state.data;
-                if (data?.success !== undefined)
-                    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;
-            },
-        })),
-    });
-    /**
-     * Registers a new process to handle
-     *
-     * @param processId
-     * @param processCallbackDto
-     * @param options
-     */
-    const registerProcess = (processId, processCallbackDto, metadata, options) => {
-        setClientProcessDtos({
-            ...clientProcessDtos,
-            [processId]: { dto: processCallbackDto, metadata, options },
-        });
-    };
-    /**
-     * Retrieves a process
-     *
-     * @param processId
-     * @returns
-     */
-    const getProcess = (processId) => {
-        const clientProcess = clientProcesses.find((clientProcess) => clientProcess.data?.dto?.processId === processId)?.data ?? null;
-        return clientProcess ?? null;
-    };
-    /**
-     * Filters processes by the provided attribute.
-     *
-     * @param filterKey
-     */
-    const filterProcesses = (filterKey) => {
-        return clientProcesses
-            .filter((clientProcess) => !!clientProcess.data?.dto)
-            .map((clientProcess) => clientProcess.data)
-            .filter((clientProcessData) => clientProcessData?.metadata.filterKey === filterKey);
-    };
-    /**
-     * Refreshes the cache and invalidates all related processes.
-     */
-    const invalidateBasedOnResult = async (filter, invalidator) => {
-        await queryClient.invalidateQueries({
-            queryKey: ['.__process', filter],
-            exact: false,
-        });
-        const cachedClientProcesses = queryClient
-            .getQueryCache()
-            .findAll({ queryKey: ['.__process', filter], exact: false });
-        for (const query of cachedClientProcesses) {
-            const processId = query.queryKey[2];
-            if (typeof processId !== 'string')
-                continue;
-            const data = query.state.data;
-            if (!data.result)
-                continue;
-            // If invalidator says we gotta clear the cache, we clear it
-            if (invalidator && invalidator?.(data.result)) {
-                queryClient.removeQueries({ queryKey: query.queryKey });
-            }
-        }
-    };
-    return (jsx(clientProcessesContext.Provider, { value: {
-            registerProcess,
-            getProcess,
-            filterProcesses,
-            invalidateBasedOnResult,
-        }, children: children }));
-};
-/**
- * A simpler version, where u just pass the async function that returns process data.
- *
- * @param caller
- * @returns
- */
-function useClientProcess({ caller, invalidator, filterKey, onLoading, onSuccess, onFailure, }) {
-    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, metadata) => {
-        const response = await caller?.(inputs);
-        if (response) {
-            clientProcessesApi.registerProcess(response.processId, response, { filterKey, metadata }, {
-                onLoading,
-                onSuccess,
-                onFailure,
-            });
-            return {
-                id: response.processId,
-                success: response.success,
-                message: response.message,
-            };
-        }
-        return {
-            id: null,
-            success: false,
-            message: 'No `caller` specified for useClientProcess().',
-        };
-    };
-    return {
-        run: wrappedCaller,
-        get: (id) => clientProcessesApi.getProcess(id),
-        getAll: () => clientProcessesApi.filterProcesses(filterKey),
-        getAllPending: () => clientProcessesApi
-            .filterProcesses(filterKey)
-            .filter((process) => process.pending),
-        getAllHandled: () => clientProcessesApi
-            .filterProcesses(filterKey)
-            .filter((process) => process.success),
-        getAllFailed: () => clientProcessesApi
-            .filterProcesses(filterKey)
-            .filter((process) => !process.success),
-        refreshCache: () => clientProcessesApi.invalidateBasedOnResult(filterKey, invalidator),
-    };
-}
-
-export { ClientProcessesProvider, useClientProcess };
-//# sourceMappingURL=useClientProcess.js.map
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useRef, useState, useEffect, useContext } from 'react';
+import { useQueryClient, useQueries } from '@tanstack/react-query';
+import { config } from '../config.js';
+
+/**
+ * The orchestrator service to get the process from.
+ *
+ * @param processId
+ * @returns
+ */
+const processStatusChecker = (processId) => {
+    if (!processId)
+        return { process: null };
+    return fetch(`${config.orchestratorApi}/${encodeURIComponent(processId)}`, {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    }).then((response) => response.json());
+};
+/**
+ * This fetches from the callback endpoint.
+ *
+ * @param processId
+ * @returns
+ */
+const processCallbackResultFetcher = (processId, processName, processCallbackUrl) => fetch(`${processCallbackUrl}`, {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+        processId,
+        processName,
+    }),
+}).then((response) => response.json());
+/**
+ * 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.
+ *
+ * @context
+ */
+const ClientProcessesProvider = ({ children, }) => {
+    const queryClient = useQueryClient();
+    const clientProcessAttempts = useRef({});
+    const [clientProcessDtos, setClientProcessDtos] = useState({});
+    // Populates the state object with cached data on mount
+    useEffect(() => {
+        setClientProcessDtos((oldData) => {
+            if (Object.keys(oldData).length > 0)
+                return oldData;
+            const cachedClientProcesses = queryClient
+                .getQueryCache()
+                .findAll({ queryKey: ['.__process'], exact: false });
+            const seededClientProcesses = {};
+            for (const query of cachedClientProcesses) {
+                const processId = query.queryKey[2];
+                if (typeof processId !== 'string')
+                    continue;
+                const data = query.state.data;
+                if (!data?.dto || !data?.metadata)
+                    continue;
+                seededClientProcesses[processId] = {
+                    dto: data.dto,
+                    metadata: data.metadata,
+                    options: data.options,
+                };
+            }
+            return { ...oldData, ...seededClientProcesses };
+        });
+    }, [queryClient]);
+    // The query for all the processes, pending and sht
+    const clientProcesses = useQueries({
+        queries: Object.entries(clientProcessDtos).map(([processId, { dto, metadata, options }]) => ({
+            staleTime: Infinity,
+            gcTime: 3 * 60 * 1000,
+            refetchOnWindowFocus: true,
+            refetchIntervalInBackground: true,
+            refetchOnMount: true,
+            refetchOnReconnect: true,
+            queryKey: ['.__process', metadata.filterKey, 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);
+                    // Log and call runner
+                    console.warn(`Handled ${process.name} (${process.id})!`);
+                    options?.onSuccess?.(process.id, process.name, result);
+                    return {
+                        dto,
+                        metadata,
+                        options,
+                        success: true,
+                        pending: false,
+                        result,
+                    };
+                }
+                // Pending or failed
+                if (process?.status === 'pending') {
+                    console.log(`Running process ${process.name} (${process.id})...`);
+                    options?.onLoading?.(process.id, process.name);
+                    return { dto, metadata, options, pending: true };
+                }
+                else if (process?.status === 'failed') {
+                    console.error(`Failed ${process.name} (${process.id}) - ${process.error}.`);
+                    return {
+                        dto,
+                        metadata,
+                        options,
+                        success: false,
+                        pending: false,
+                        error: process.error,
+                    };
+                }
+                // Return null since no response
+                return { dto, metadata, options, pending: true };
+            },
+            // Returns the next interval length to use to wait for fetch
+            refetchInterval: (query) => {
+                const data = query.state.data;
+                if (data?.success !== undefined)
+                    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;
+            },
+        })),
+    });
+    /**
+     * Registers a new process to handle
+     *
+     * @param processId
+     * @param processCallbackDto
+     * @param options
+     */
+    const registerProcess = (processId, processCallbackDto, metadata, options) => {
+        setClientProcessDtos({
+            ...clientProcessDtos,
+            [processId]: { dto: processCallbackDto, metadata, options },
+        });
+    };
+    /**
+     * Retrieves a process
+     *
+     * @param processId
+     * @returns
+     */
+    const getProcess = (processId) => {
+        const clientProcess = clientProcesses.find((clientProcess) => clientProcess.data?.dto?.processId === processId)?.data ?? null;
+        return clientProcess ?? null;
+    };
+    /**
+     * Filters processes by the provided attribute.
+     *
+     * @param filterKey
+     */
+    const filterProcesses = (filterKey) => {
+        return clientProcesses
+            .filter((clientProcess) => !!clientProcess.data?.dto)
+            .map((clientProcess) => clientProcess.data)
+            .filter((clientProcessData) => clientProcessData?.metadata.filterKey === filterKey);
+    };
+    /**
+     * Refreshes the cache and invalidates all related processes.
+     */
+    const invalidateBasedOnResult = async (filter, invalidator) => {
+        await queryClient.invalidateQueries({
+            queryKey: ['.__process', filter],
+            exact: false,
+        });
+        const cachedClientProcesses = queryClient
+            .getQueryCache()
+            .findAll({ queryKey: ['.__process', filter], exact: false });
+        for (const query of cachedClientProcesses) {
+            const processId = query.queryKey[2];
+            if (typeof processId !== 'string')
+                continue;
+            const data = query.state.data;
+            if (!data.result)
+                continue;
+            // If invalidator says we gotta clear the cache, we clear it
+            if (invalidator && invalidator?.(data.result)) {
+                queryClient.removeQueries({ queryKey: query.queryKey });
+            }
+        }
+    };
+    return (jsx(clientProcessesContext.Provider, { value: {
+            registerProcess,
+            getProcess,
+            filterProcesses,
+            invalidateBasedOnResult,
+        }, children: children }));
+};
+/**
+ * A simpler version, where u just pass the async function that returns process data.
+ *
+ * @param caller
+ * @returns
+ */
+function useClientProcess({ caller, invalidator, filterKey, onLoading, onSuccess, onFailure, }) {
+    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, metadata) => {
+        const response = await caller?.(inputs);
+        if (response) {
+            clientProcessesApi.registerProcess(response.processId, response, { filterKey, metadata }, {
+                onLoading,
+                onSuccess,
+                onFailure,
+            });
+            return {
+                id: response.processId,
+                success: response.success,
+                message: response.message,
+            };
+        }
+        return {
+            id: null,
+            success: false,
+            message: 'No `caller` specified for useClientProcess().',
+        };
+    };
+    return {
+        run: wrappedCaller,
+        get: (id) => clientProcessesApi.getProcess(id),
+        getAll: () => clientProcessesApi.filterProcesses(filterKey),
+        getAllPending: () => clientProcessesApi
+            .filterProcesses(filterKey)
+            .filter((process) => process.pending),
+        getAllHandled: () => clientProcessesApi
+            .filterProcesses(filterKey)
+            .filter((process) => process.success),
+        getAllFailed: () => clientProcessesApi
+            .filterProcesses(filterKey)
+            .filter((process) => !process.success),
+        refreshCache: () => clientProcessesApi.invalidateBasedOnResult(filterKey, invalidator),
+    };
+}
+
+export { ClientProcessesProvider, useClientProcess };
+//# sourceMappingURL=useClientProcess.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterinternship/components",
-  "version": "2.9.2",
+  "version": "2.9.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",