@ic-reactor/react 1.4.4 → 1.5.0

package/dist/context/actor.d.ts

@@ -57,8 +57,7 @@ import { CreateActorContextParameters, CreateActorContextReturnType } from "./ty
  * };
  * ```
  *
- * This function streamlines the process of setting up a context for IC actor interactions within a React app, making it easier
- * to manage actor state and perform actions such as queries or updates. It abstracts away the complexities involved in directly
- * managing IC agents and actors, providing a simple, declarative API for developers.
+ * This function streamlines the process of setting up a context for IC actor interactions within a React app,
+ * it provides a type-safe and efficient way to manage actor state and interactions.
  */
 export declare function createActorContext<A = BaseActor>(contextConfig?: CreateActorContextParameters): CreateActorContextReturnType<A>;

package/dist/context/actor.js

@@ -75,9 +75,8 @@ const extractActorContext_1 = require("../helpers/extractActorContext");
  * };
  * ```
  *
- * This function streamlines the process of setting up a context for IC actor interactions within a React app, making it easier
- * to manage actor state and perform actions such as queries or updates. It abstracts away the complexities involved in directly
- * managing IC agents and actors, providing a simple, declarative API for developers.
+ * This function streamlines the process of setting up a context for IC actor interactions within a React app,
+ * it provides a type-safe and efficient way to manage actor state and interactions.
  */
 function createActorContext(contextConfig = {}) {
     const { canisterId: defaultCanisterId } = contextConfig, defaultConfig = __rest(contextConfig, ["canisterId"]);

package/dist/context/agent.d.ts

@@ -16,8 +16,8 @@ import type { CreateAgentContextReturnType, CreateAgentCotextParameters } from "
  *  Hooks extracted from the created context for managing agent and authentication state within components.
  *
  * @example
- * agent.ts
  * ```tsx
+ * // agent.ts
  * import { createAgentContext } from "@ic-reactor/react";
  * import { CreateAgentCotextParameters } from "@ic-reactor/react/dist/types";
  *
@@ -38,11 +38,11 @@ import type { CreateAgentContextReturnType, CreateAgentCotextParameters } from "
  *   useAgentManager,
  *   useUserPrincipal,
  * } = createAgentContext(agentConfig);
- *
- * // Now you can use the returned hooks in your React components
  *```
- * App.tsx
+ * Now you can use the returned hooks in your React components
+ *
  * ```tsx
+ * // App.tsx
  * import React from 'react';
  * import { AgentProvider } from './agent';
  *

package/dist/context/agent.js

@@ -38,8 +38,8 @@ const utils_1 = require("../utils");
  *  Hooks extracted from the created context for managing agent and authentication state within components.
  *
  * @example
- * agent.ts
  * ```tsx
+ * // agent.ts
  * import { createAgentContext } from "@ic-reactor/react";
  * import { CreateAgentCotextParameters } from "@ic-reactor/react/dist/types";
  *
@@ -60,11 +60,11 @@ const utils_1 = require("../utils");
  *   useAgentManager,
  *   useUserPrincipal,
  * } = createAgentContext(agentConfig);
- *
- * // Now you can use the returned hooks in your React components
  *```
- * App.tsx
+ * Now you can use the returned hooks in your React components
+ *
  * ```tsx
+ * // App.tsx
  * import React from 'react';
  * import { AgentProvider } from './agent';
  *

package/dist/context/types.d.ts

@@ -26,5 +26,4 @@ export interface CreateActorContextParameters extends Omit<ActorManagerParameter
     didjsId?: string;
     canisterId?: string;
     idlFactory?: IDL.InterfaceFactory;
-    loadingComponent?: React.ReactNode;
 }

package/dist/helpers/actorHooks.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -19,13 +42,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.actorHooks = void 0;
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const zustand_1 = require("zustand");
+const utils_1 = require("../utils");
+const shallow_1 = require("zustand/react/shallow");
 const DEFAULT_STATE = {
     data: undefined,
     error: undefined,
@@ -47,19 +69,34 @@ const DEFAULT_STATE = {
  * Each hook is designed to simplify the process of interacting with actors in IC projects by abstracting away the complexity of state management, error handling, and method invocation.
  */
 const actorHooks = (actorManager) => {
-    const { actorStore, canisterId, visitFunction, methodAttributes, extractMethodAttributes, extractInterface, callMethod, initialize, } = actorManager;
-    const useActorState = () => (Object.assign(Object.assign({}, (0, zustand_1.useStore)(actorStore)), { canisterId }));
+    const { actorStore, canisterId, visitFunction, methodAttributes, updateMethodState, extractMethodAttributes, extractInterface, callMethod, initialize, } = actorManager;
+    const useActorState = () => (0, zustand_1.useStore)(actorStore, (0, shallow_1.useShallow)((state) => ({
+        error: state.error,
+        initialized: state.initialized,
+        initializing: state.initializing,
+        canisterId,
+    })));
+    const useMethodState = (functionName, requestKey) => {
+        const state = (0, zustand_1.useStore)(actorStore, (0, shallow_1.useShallow)((state) => { var _a; return (_a = state.methodState[functionName]) === null || _a === void 0 ? void 0 : _a[requestKey]; })) || DEFAULT_STATE;
+        const setSharedState = React.useCallback((newState) => {
+            updateMethodState(functionName, requestKey, newState);
+        }, [functionName, requestKey]);
+        return [state, setSharedState];
+    };
+    const useMethodAttributes = () => {
+        return React.useMemo(extractMethodAttributes, []);
+    };
     const useMethodNames = () => {
-        return react_1.default.useMemo(() => Object.keys(extractMethodAttributes()), []);
+        return React.useMemo(() => Object.keys(extractMethodAttributes()), []);
     };
     const useActorInterface = () => {
-        return react_1.default.useMemo(() => extractInterface(), []);
+        return React.useMemo(() => extractInterface(), []);
     };
     const useVisitService = () => {
         return visitFunction;
     };
     const useVisitMethod = (functionName) => {
-        return react_1.default.useMemo(() => {
+        return React.useMemo(() => {
             if (!visitFunction[functionName]) {
                 throw new Error(`Method ${functionName} not found`);
             }
@@ -68,11 +105,12 @@ const actorHooks = (actorManager) => {
     };
     const useSharedCall = (_a) => {
         var { args = [], functionName, throwOnError = false } = _a, events = __rest(_a, ["args", "functionName", "throwOnError"]);
-        const [sharedState, setSharedState] = react_1.default.useState(DEFAULT_STATE);
-        const reset = react_1.default.useCallback(() => setSharedState(DEFAULT_STATE), []);
-        const call = react_1.default.useCallback((eventOrReplaceArgs) => __awaiter(void 0, void 0, void 0, function* () {
+        const requestKey = React.useMemo(() => (0, utils_1.generateRequestHash)(args), [args]);
+        const [sharedState, setSharedState] = useMethodState(functionName, requestKey);
+        const reset = React.useCallback(() => updateMethodState(functionName, requestKey, DEFAULT_STATE), [functionName, requestKey]);
+        const call = React.useCallback((eventOrReplaceArgs) => __awaiter(void 0, void 0, void 0, function* () {
             var _b, _c, _d, _e, _f;
-            setSharedState((prev) => (Object.assign(Object.assign({}, prev), { error: undefined, loading: true })));
+            setSharedState({ error: undefined, loading: true });
             (_b = events === null || events === void 0 ? void 0 : events.onLoading) === null || _b === void 0 ? void 0 : _b.call(events, true);
             try {
                 const replaceArgs = eventOrReplaceArgs instanceof Array ? eventOrReplaceArgs : args;
@@ -85,24 +123,27 @@ const actorHooks = (actorManager) => {
             catch (error) {
                 // eslint-disable-next-line no-console
                 console.error("Error in call:", error);
-                setSharedState((prevState) => (Object.assign(Object.assign({}, prevState), { error: error, loading: false })));
+                setSharedState({
+                    error: error,
+                    loading: false,
+                });
                 (_e = events === null || events === void 0 ? void 0 : events.onError) === null || _e === void 0 ? void 0 : _e.call(events, error);
                 (_f = events === null || events === void 0 ? void 0 : events.onLoading) === null || _f === void 0 ? void 0 : _f.call(events, false);
                 if (throwOnError)
                     throw error;
             }
         }), [args, functionName, events]);
-        return Object.assign({ call, reset }, sharedState);
+        return Object.assign({ call, reset, requestKey }, sharedState);
     };
     const useQueryCall = (_a) => {
         var { refetchOnMount = true, refetchInterval = false } = _a, rest = __rest(_a, ["refetchOnMount", "refetchInterval"]);
         const _b = useSharedCall(rest), { call } = _b, state = __rest(_b, ["call"]);
-        const intervalId = react_1.default.useRef();
-        react_1.default.useEffect(() => {
+        const intervalId = React.useRef();
+        React.useEffect(() => {
             if (refetchInterval) {
                 intervalId.current = setInterval(call, refetchInterval);
             }
-            if (refetchOnMount) {
+            if (refetchOnMount && state.data === undefined) {
                 call();
             }
             return () => clearInterval(intervalId.current);
@@ -110,37 +151,61 @@ const actorHooks = (actorManager) => {
         return Object.assign({ call }, state);
     };
     const useUpdateCall = useSharedCall;
-    const useMethod = (args) => {
-        const visit = useVisitMethod(args.functionName);
-        const attributes = methodAttributes[args.functionName];
-        let refetchOnMount = args.refetchOnMount;
-        let refetchInterval = args.refetchInterval;
+    const useMethod = (params) => {
+        const visit = React.useCallback((extractorClass, data) => {
+            if (!visitFunction[params.functionName]) {
+                throw new Error(`Method ${params.functionName} not found`);
+            }
+            return visitFunction[params.functionName](extractorClass, data);
+        }, [params.functionName]);
+        const attributes = React.useMemo(() => methodAttributes[params.functionName], [params.functionName]);
+        const validateArgs = React.useCallback((args, throwOnError = false) => {
+            if (attributes.numberOfArgs > 0) {
+                if (args === undefined || args.length === 0) {
+                    if (throwOnError) {
+                        throw new Error(`Method ${params.functionName} requires ${attributes.numberOfArgs} arguments, but none were provided.`);
+                    }
+                    return false;
+                }
+                try {
+                    attributes.validate(args);
+                    return true;
+                }
+                catch (error) {
+                    if (throwOnError) {
+                        throw error;
+                    }
+                    return false;
+                }
+            }
+            return true;
+        }, [attributes]);
+        let refetchOnMount = params.refetchOnMount;
+        let refetchInterval = params.refetchInterval;
         let formRequired = true;
         switch (attributes.type) {
             case "query":
-                try {
-                    if (attributes.numberOfArgs > 0 && args.args === undefined) {
-                        throw new Error("Args required");
-                    }
-                    attributes.validate((args.args || []));
-                    formRequired = args.refetchOnMount === false ? true : false;
+                if (validateArgs(params.args)) {
+                    formRequired = params.refetchOnMount === false ? true : false;
                 }
-                catch (error) {
+                else {
                     refetchOnMount = false;
                     refetchInterval = false;
                 }
-                return Object.assign(Object.assign({ visit }, useQueryCall(Object.assign(Object.assign({}, args), { refetchOnMount,
+                return Object.assign(Object.assign({ visit,
+                    validateArgs }, useQueryCall(Object.assign(Object.assign({}, params), { refetchOnMount,
                     refetchInterval }))), { formRequired });
             case "update":
-                return Object.assign(Object.assign({ visit }, useUpdateCall(args)), { formRequired });
+                return Object.assign(Object.assign({ visit, validateArgs }, useUpdateCall(params)), { formRequired });
             default:
                 throw new Error(`Method type ${attributes.type} not found`);
         }
     };
     return {
         initialize,
-        useMethod,
+        useMethodAttributes,
         useMethodNames,
+        useMethod,
         useQueryCall,
         useUpdateCall,
         useActorState,

package/dist/helpers/extractActorContext.js

@@ -40,6 +40,7 @@ function extractActorContext(actorContext) {
     };
     const initialize = () => useActorContext().initialize();
     const useMethodNames = () => useActorContext().useMethodNames();
+    const useMethodAttributes = () => useActorContext().useMethodAttributes();
     const useActorState = () => useActorContext().useActorState();
     const useMethod = (args) => useActorContext().useMethod(args);
     const useQueryCall = (args) => useActorContext().useQueryCall(args);
@@ -51,6 +52,7 @@ function extractActorContext(actorContext) {
         useActorState,
         useMethod,
         useMethodNames,
+        useMethodAttributes,
         useQueryCall,
         useUpdateCall,
         useVisitMethod,

package/dist/helpers/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { ServiceClass } from "@dfinity/candid/lib/cjs/idl";
-import type { ActorState, CanisterId, AuthClientLoginOptions, ActorMethodParameters, ActorMethodReturnType, Identity, Principal, FunctionName, VisitService, AuthState, HttpAgent, AgentState, BaseActor } from "@ic-reactor/core/dist/types";
+import type { ActorState, CanisterId, AuthClientLoginOptions, ActorMethodParameters, ActorMethodReturnType, Identity, Principal, FunctionName, VisitService, AuthState, HttpAgent, AgentState, BaseActor, MethodAttributes } from "@ic-reactor/core/dist/types";
 export interface AgentHooksReturnType {
     useAgent: () => HttpAgent | undefined;
     useAgentState: () => AgentState;
@@ -55,6 +55,7 @@ export type UseSharedCallState<A, M extends FunctionName<A>> = {
     loading: boolean;
 };
 export interface UseSharedCallReturnType<A, M extends FunctionName<A> = FunctionName<A>> extends UseSharedCallState<A, M> {
+    requestKey: string;
     reset: () => void;
     call: (eventOrReplaceArgs?: React.MouseEvent | ActorMethodParameters<A[M]>) => Promise<ActorMethodReturnType<A[M]> | undefined>;
 }
@@ -76,8 +77,10 @@ export interface UseMethodParameters<A, M extends FunctionName<A>> extends UseQu
 export interface UseMethodReturnType<A, M extends FunctionName<A> = FunctionName<A>> {
     loading: boolean;
     formRequired: boolean;
+    requestKey: string;
     error: Error | undefined;
     data: ActorMethodReturnType<A[M]> | undefined;
+    validateArgs: (args?: ActorMethodParameters<A[M]> | undefined) => boolean;
     visit: VisitService<A>[M];
     reset: () => void;
     call: (eventOrReplaceArgs?: React.MouseEvent | ActorMethodParameters<A[M]>) => Promise<ActorMethodReturnType<A[M]> | undefined>;
@@ -90,6 +93,7 @@ export interface ActorHooksReturnType<A = BaseActor> {
     useActorState: () => UseActorState;
     useActorInterface: () => ServiceClass;
     useMethodNames: <Actor = A>() => FunctionName<Actor>[];
+    useMethodAttributes: <Actor = A>() => MethodAttributes<Actor>;
     useMethod: UseMethod<A>;
     useQueryCall: UseQueryCall<A>;
     useUpdateCall: UseUpdateCall<A>;

package/dist/hooks/actor/index.d.ts

@@ -3,6 +3,7 @@ export * from "./useActorState";
 export * from "./useQueryCall";
 export * from "./useUpdateCall";
 export * from "./useMethodNames";
+export * from "./useMethodAttributes";
 export * from "./useVisitMethod";
 export * from "./useVisitService";
 export * from "./useActorInterface";

package/dist/hooks/actor/index.js

@@ -19,6 +19,7 @@ __exportStar(require("./useActorState"), exports);
 __exportStar(require("./useQueryCall"), exports);
 __exportStar(require("./useUpdateCall"), exports);
 __exportStar(require("./useMethodNames"), exports);
+__exportStar(require("./useMethodAttributes"), exports);
 __exportStar(require("./useVisitMethod"), exports);
 __exportStar(require("./useVisitService"), exports);
 __exportStar(require("./useActorInterface"), exports);

package/dist/hooks/actor/useMethodAttributes.d.ts

@@ -0,0 +1,7 @@
+import { BaseActor } from "../../types";
+/**
+ * Hook for accessing the method attributes of an actor.
+ *
+ * @returns An array of method attributes for the actor.
+ */
+export declare const useMethodAttributes: <A = BaseActor>() => import("@ic-reactor/core/dist/classes/actor/types").MethodAttributes<A>;

package/dist/hooks/actor/useMethodAttributes.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMethodAttributes = void 0;
+const hooks_1 = require("./hooks");
+/**
+ * Hook for accessing the method attributes of an actor.
+ *
+ * @returns An array of method attributes for the actor.
+ */
+const useMethodAttributes = () => hooks_1.ActorHooks.useMethodAttributes();
+exports.useMethodAttributes = useMethodAttributes;

package/dist/provider/actor.d.ts

@@ -4,10 +4,12 @@
  * It wraps child components, providing them access to actor-specific hooks and functionalities based on the provided canister ID and configuration.
  *
  * Props:
- * - `children`: React Node - The child components that will have access to the actor context.
  * - `canisterId` (optional): string - The Canister ID for actor interactions. If not provided, the default from `createActorContext` is used.
+ * - `idlFactory` (optional): IDL.InterfaceFactory - The IDL factory for the actor interface. If not provided, the default from `createActorContext` is used.
+ * - `didjsId` (optional): string - The DID.js ID for authentication. If not provided, the default from `createActorContext` is used.
  * - `loadingComponent` (optional): React Node - A component displayed during the loading/fetching state. Defaults to a simple message.
- * - `...restConfig`: Additional configuration options that will be merged with the default configuration provided during context creation.
+ * - `authenticatingComponent` (optional): React Node - A component displayed during the authentication state. Defaults to a simple message.
+ * - `children`: React Node - The child components that will have access to the actor context.
  *
  * Behavior:
  * - Validates the presence of a `canisterId`. Throws an error if it is missing, ensuring that a valid canister ID is always used for actor operations.

package/dist/provider/actor.js

@@ -7,10 +7,12 @@ const hooks_1 = require("../hooks/actor/hooks");
  * It wraps child components, providing them access to actor-specific hooks and functionalities based on the provided canister ID and configuration.
  *
  * Props:
- * - `children`: React Node - The child components that will have access to the actor context.
  * - `canisterId` (optional): string - The Canister ID for actor interactions. If not provided, the default from `createActorContext` is used.
+ * - `idlFactory` (optional): IDL.InterfaceFactory - The IDL factory for the actor interface. If not provided, the default from `createActorContext` is used.
+ * - `didjsId` (optional): string - The DID.js ID for authentication. If not provided, the default from `createActorContext` is used.
  * - `loadingComponent` (optional): React Node - A component displayed during the loading/fetching state. Defaults to a simple message.
- * - `...restConfig`: Additional configuration options that will be merged with the default configuration provided during context creation.
+ * - `authenticatingComponent` (optional): React Node - A component displayed during the authentication state. Defaults to a simple message.
+ * - `children`: React Node - The child components that will have access to the actor context.
  *
  * Behavior:
  * - Validates the presence of a `canisterId`. Throws an error if it is missing, ensuring that a valid canister ID is always used for actor operations.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ic-reactor/react",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "A React library for interacting with Internet Computer canisters",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -47,5 +47,5 @@
     "react": ">=16.8",
     "zustand": "4.5"
   },
-  "gitHead": "89bab92f75cbbe39c9bdd6a0ac60344c6844ce5d"
+  "gitHead": "a47381d101bc666053eb9c38bdc759fa61c6e117"
 }