@ic-reactor/react 1.6.6 → 1.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/helpers/actorHooks.js +17 -14
- package/dist/helpers/types.d.ts +6 -5
- package/dist/hooks/actor/useMethod.d.ts +4 -4
- package/dist/hooks/actor/useMethod.js +2 -2
- package/dist/hooks/actor/useQueryCall.d.ts +4 -4
- package/dist/hooks/actor/useQueryCall.js +2 -2
- package/dist/hooks/actor/useUpdateCall.d.ts +4 -4
- package/dist/hooks/actor/useUpdateCall.js +2 -2
- package/dist/hooks/actor/useVisitMethod.d.ts +1 -1
- package/package.json +8 -8
|
@@ -69,7 +69,7 @@ const DEFAULT_STATE = {
|
|
|
69
69
|
* 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.
|
|
70
70
|
*/
|
|
71
71
|
const actorHooks = (actorManager) => {
|
|
72
|
-
const { actorStore, canisterId, visitFunction, methodAttributes, updateMethodState, extractMethodAttributes, extractInterface,
|
|
72
|
+
const { actorStore, canisterId, visitFunction, methodAttributes, updateMethodState, extractMethodAttributes, extractInterface, callMethodWithOptions, initialize, } = actorManager;
|
|
73
73
|
const useActorState = () => (0, zustand_1.useStore)(actorStore, (0, shallow_1.useShallow)((state) => ({
|
|
74
74
|
error: state.error,
|
|
75
75
|
initialized: state.initialized,
|
|
@@ -104,20 +104,19 @@ const actorHooks = (actorManager) => {
|
|
|
104
104
|
}, [functionName]);
|
|
105
105
|
};
|
|
106
106
|
const useSharedCall = (_a) => {
|
|
107
|
-
var { args = [], functionName, throwOnError = false } = _a,
|
|
107
|
+
var { args = [], functionName, throwOnError = false, onError, onLoading, onSuccess } = _a, options = __rest(_a, ["args", "functionName", "throwOnError", "onError", "onLoading", "onSuccess"]);
|
|
108
108
|
const requestKey = React.useMemo(() => (0, utils_1.generateRequestHash)(args), [args]);
|
|
109
109
|
const [sharedState, setSharedState] = useMethodState(functionName, requestKey);
|
|
110
110
|
const reset = React.useCallback(() => updateMethodState(functionName, requestKey, DEFAULT_STATE), [functionName, requestKey]);
|
|
111
111
|
const call = React.useCallback((eventOrReplaceArgs) => __awaiter(void 0, void 0, void 0, function* () {
|
|
112
|
-
var _b, _c, _d, _e, _f;
|
|
113
112
|
setSharedState({ error: undefined, loading: true });
|
|
114
|
-
|
|
113
|
+
onLoading === null || onLoading === void 0 ? void 0 : onLoading(true);
|
|
115
114
|
try {
|
|
116
115
|
const replaceArgs = eventOrReplaceArgs instanceof Array ? eventOrReplaceArgs : args;
|
|
117
|
-
const data = yield
|
|
116
|
+
const data = yield callMethodWithOptions(options)(functionName, ...(replaceArgs !== null && replaceArgs !== void 0 ? replaceArgs : args));
|
|
118
117
|
setSharedState({ data, error: undefined, loading: false });
|
|
119
|
-
|
|
120
|
-
|
|
118
|
+
onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
|
|
119
|
+
onLoading === null || onLoading === void 0 ? void 0 : onLoading(false);
|
|
121
120
|
return data;
|
|
122
121
|
}
|
|
123
122
|
catch (error) {
|
|
@@ -127,12 +126,12 @@ const actorHooks = (actorManager) => {
|
|
|
127
126
|
error: error,
|
|
128
127
|
loading: false,
|
|
129
128
|
});
|
|
130
|
-
|
|
131
|
-
|
|
129
|
+
onError === null || onError === void 0 ? void 0 : onError(error);
|
|
130
|
+
onLoading === null || onLoading === void 0 ? void 0 : onLoading(false);
|
|
132
131
|
if (throwOnError)
|
|
133
132
|
throw error;
|
|
134
133
|
}
|
|
135
|
-
}), [args, functionName,
|
|
134
|
+
}), [args, functionName, options, onError, onLoading, onSuccess, throwOnError]);
|
|
136
135
|
return Object.assign({ call, reset, requestKey }, sharedState);
|
|
137
136
|
};
|
|
138
137
|
const useQueryCall = (_a) => {
|
|
@@ -140,25 +139,29 @@ const actorHooks = (actorManager) => {
|
|
|
140
139
|
const _b = useSharedCall(rest), { call } = _b, state = __rest(_b, ["call"]);
|
|
141
140
|
const intervalId = React.useRef();
|
|
142
141
|
React.useEffect(() => {
|
|
142
|
+
var _a;
|
|
143
143
|
if (refetchInterval) {
|
|
144
144
|
intervalId.current = setInterval(call, refetchInterval);
|
|
145
145
|
}
|
|
146
146
|
if (refetchOnMount && state.data === undefined) {
|
|
147
147
|
call();
|
|
148
148
|
}
|
|
149
|
+
else if (refetchOnMount && state.data !== undefined) {
|
|
150
|
+
(_a = rest.onSuccess) === null || _a === void 0 ? void 0 : _a.call(rest, state.data);
|
|
151
|
+
}
|
|
149
152
|
return () => clearInterval(intervalId.current);
|
|
150
153
|
}, [refetchInterval, refetchOnMount]);
|
|
151
154
|
return Object.assign({ call }, state);
|
|
152
155
|
};
|
|
153
156
|
const useUpdateCall = useSharedCall;
|
|
154
157
|
const useMethod = (params) => {
|
|
155
|
-
const
|
|
156
|
-
if (!
|
|
158
|
+
const attributes = React.useMemo(() => {
|
|
159
|
+
if (!methodAttributes[params.functionName]) {
|
|
157
160
|
throw new Error(`Method ${params.functionName} not found`);
|
|
158
161
|
}
|
|
159
|
-
return
|
|
162
|
+
return methodAttributes[params.functionName];
|
|
160
163
|
}, [params.functionName]);
|
|
161
|
-
const
|
|
164
|
+
const visit = React.useCallback((extractorClass, data) => visitFunction[params.functionName](extractorClass, data), [params.functionName]);
|
|
162
165
|
const validateArgs = React.useCallback((args, throwOnError = false) => {
|
|
163
166
|
if (attributes.numberOfArgs > 0) {
|
|
164
167
|
if (args === undefined || args.length === 0) {
|
package/dist/helpers/types.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { CallConfig } from "@dfinity/agent";
|
|
2
3
|
import type { IDL, ActorState, AuthClientLoginOptions, ActorMethodParameters, ActorMethodReturnType, Identity, Principal, FunctionName, VisitService, AuthState, HttpAgent, AgentState, BaseActor, MethodAttributes } from "../types";
|
|
3
4
|
export interface AgentHooksReturnType {
|
|
4
5
|
useAgent: () => HttpAgent | undefined;
|
|
@@ -40,14 +41,14 @@ export type LogoutParameters = {
|
|
|
40
41
|
export interface UseActorState extends Omit<ActorState, "methodState"> {
|
|
41
42
|
canisterId: string;
|
|
42
43
|
}
|
|
43
|
-
export
|
|
44
|
+
export interface UseSharedCallParameters<A, M extends FunctionName<A>> extends CallConfig {
|
|
44
45
|
functionName: M;
|
|
45
46
|
args?: ActorMethodParameters<A[M]>;
|
|
46
47
|
onLoading?: (loading: boolean) => void;
|
|
47
48
|
onError?: (error: Error | undefined) => void;
|
|
48
49
|
onSuccess?: (data: ActorMethodReturnType<A[M]> | undefined) => void;
|
|
49
50
|
throwOnError?: boolean;
|
|
50
|
-
}
|
|
51
|
+
}
|
|
51
52
|
export type UseSharedCallState<A, M extends FunctionName<A>> = {
|
|
52
53
|
data: ActorMethodReturnType<A[M]> | undefined;
|
|
53
54
|
error: Error | undefined;
|
|
@@ -58,15 +59,15 @@ export interface UseSharedCallReturnType<A, M extends FunctionName<A> = Function
|
|
|
58
59
|
reset: () => void;
|
|
59
60
|
call: (eventOrReplaceArgs?: React.MouseEvent | ActorMethodParameters<A[M]>) => Promise<ActorMethodReturnType<A[M]> | undefined>;
|
|
60
61
|
}
|
|
61
|
-
export type UseSharedCall<A> = <M extends FunctionName<A>>(
|
|
62
|
+
export type UseSharedCall<A> = <M extends FunctionName<A>>(params: UseSharedCallParameters<A, M>) => UseSharedCallReturnType<A, M>;
|
|
62
63
|
export interface UseQueryCallParameters<A, M extends FunctionName<A>> extends UseSharedCallParameters<A, M> {
|
|
63
64
|
refetchOnMount?: boolean;
|
|
64
65
|
refetchInterval?: number | false;
|
|
65
66
|
}
|
|
66
|
-
export type UseQueryCall<A> = <M extends FunctionName<A>>(
|
|
67
|
+
export type UseQueryCall<A> = <M extends FunctionName<A>>(params: UseQueryCallParameters<A, M>) => UseSharedCallReturnType<A, M>;
|
|
67
68
|
export interface UseUpdateCallParameters<A, M extends FunctionName<A>> extends UseSharedCallParameters<A, M> {
|
|
68
69
|
}
|
|
69
|
-
export type UseUpdateCall<A> = <M extends FunctionName<A>>(
|
|
70
|
+
export type UseUpdateCall<A> = <M extends FunctionName<A>>(params: UseUpdateCallParameters<A, M>) => UseSharedCallReturnType<A, M>;
|
|
70
71
|
export interface DynamicDataArgs<V = unknown> {
|
|
71
72
|
label: string;
|
|
72
73
|
value: V;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { BaseActor, FunctionName, UseMethodParameters } from "../../types";
|
|
1
|
+
import { BaseActor, FunctionName, UseMethodParameters, UseMethodReturnType } from "../../types";
|
|
2
2
|
/**
|
|
3
3
|
* Hook for making dynamically update or query calls to actors, handling loading states, and managing errors. It supports custom event handlers for loading, success, and error events.
|
|
4
4
|
*
|
|
5
|
-
* @param
|
|
6
|
-
* @returns
|
|
5
|
+
* @param args {@link UseMethodParameters}.
|
|
6
|
+
* @returns object {@link UseMethodReturnType}.
|
|
7
7
|
* @example
|
|
8
8
|
* ```tsx
|
|
9
9
|
* function MethodCallComponent() {
|
|
@@ -26,4 +26,4 @@ import { BaseActor, FunctionName, UseMethodParameters } from "../../types";
|
|
|
26
26
|
* }
|
|
27
27
|
* ```
|
|
28
28
|
*/
|
|
29
|
-
export declare function useMethod<A = BaseActor, M extends FunctionName<A> = FunctionName<A>>(args: UseMethodParameters<A, M>):
|
|
29
|
+
export declare function useMethod<A = BaseActor, M extends FunctionName<A> = FunctionName<A>>(args: UseMethodParameters<A, M>): UseMethodReturnType<A, M>;
|
|
@@ -8,8 +8,8 @@ const hooks_1 = __importDefault(require("./hooks"));
|
|
|
8
8
|
/**
|
|
9
9
|
* Hook for making dynamically update or query calls to actors, handling loading states, and managing errors. It supports custom event handlers for loading, success, and error events.
|
|
10
10
|
*
|
|
11
|
-
* @param
|
|
12
|
-
* @returns
|
|
11
|
+
* @param args {@link UseMethodParameters}.
|
|
12
|
+
* @returns object {@link UseMethodReturnType}.
|
|
13
13
|
* @example
|
|
14
14
|
* ```tsx
|
|
15
15
|
* function MethodCallComponent() {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { BaseActor, FunctionName, UseQueryCallParameters } from "../../types";
|
|
1
|
+
import { BaseActor, FunctionName, UseQueryCallParameters, UseSharedCallReturnType } from "../../types";
|
|
2
2
|
/**
|
|
3
3
|
* Hook for making query calls to actors. It supports automatic refetching on component mount and at specified intervals.
|
|
4
4
|
*
|
|
5
|
-
* @param
|
|
6
|
-
* @returns
|
|
5
|
+
* @param args {@link UseQueryCallParameters}.
|
|
6
|
+
* @returns object {@link UseSharedCallReturnType}.
|
|
7
7
|
* @example
|
|
8
8
|
* ```tsx
|
|
9
9
|
* function QueryCallComponent() {
|
|
@@ -25,4 +25,4 @@ import { BaseActor, FunctionName, UseQueryCallParameters } from "../../types";
|
|
|
25
25
|
* }
|
|
26
26
|
* ```
|
|
27
27
|
*/
|
|
28
|
-
export declare function useQueryCall<A = BaseActor, M extends FunctionName<A> = FunctionName<A>>(args: UseQueryCallParameters<A, M>):
|
|
28
|
+
export declare function useQueryCall<A = BaseActor, M extends FunctionName<A> = FunctionName<A>>(args: UseQueryCallParameters<A, M>): UseSharedCallReturnType<A, M>;
|
|
@@ -8,8 +8,8 @@ const hooks_1 = __importDefault(require("./hooks"));
|
|
|
8
8
|
/**
|
|
9
9
|
* Hook for making query calls to actors. It supports automatic refetching on component mount and at specified intervals.
|
|
10
10
|
*
|
|
11
|
-
* @param
|
|
12
|
-
* @returns
|
|
11
|
+
* @param args {@link UseQueryCallParameters}.
|
|
12
|
+
* @returns object {@link UseSharedCallReturnType}.
|
|
13
13
|
* @example
|
|
14
14
|
* ```tsx
|
|
15
15
|
* function QueryCallComponent() {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import type { BaseActor, FunctionName, UseUpdateCallParameters } from "../../types";
|
|
1
|
+
import type { BaseActor, FunctionName, UseUpdateCallParameters, UseSharedCallReturnType } from "../../types";
|
|
2
2
|
/**
|
|
3
3
|
* Hook for making update calls to actors, handling loading states, and managing errors. It supports custom event handlers for loading, success, and error events.
|
|
4
4
|
*
|
|
5
|
-
* @param
|
|
6
|
-
* @returns
|
|
5
|
+
* @param args {@link UseUpdateCallParameters}.
|
|
6
|
+
* @returns object {@link UseSharedCallReturnType}.
|
|
7
7
|
* @example
|
|
8
8
|
* ```tsx
|
|
9
9
|
* function UpdateCallComponent() {
|
|
@@ -26,4 +26,4 @@ import type { BaseActor, FunctionName, UseUpdateCallParameters } from "../../typ
|
|
|
26
26
|
* }
|
|
27
27
|
* ```
|
|
28
28
|
*/
|
|
29
|
-
export declare function useUpdateCall<A = BaseActor, M extends FunctionName<A> = FunctionName<A>>(args: UseUpdateCallParameters<A, M>):
|
|
29
|
+
export declare function useUpdateCall<A = BaseActor, M extends FunctionName<A> = FunctionName<A>>(args: UseUpdateCallParameters<A, M>): UseSharedCallReturnType<A, M>;
|
|
@@ -8,8 +8,8 @@ const hooks_1 = __importDefault(require("./hooks"));
|
|
|
8
8
|
/**
|
|
9
9
|
* Hook for making update calls to actors, handling loading states, and managing errors. It supports custom event handlers for loading, success, and error events.
|
|
10
10
|
*
|
|
11
|
-
* @param
|
|
12
|
-
* @returns
|
|
11
|
+
* @param args {@link UseUpdateCallParameters}.
|
|
12
|
+
* @returns object {@link UseSharedCallReturnType}.
|
|
13
13
|
* @example
|
|
14
14
|
* ```tsx
|
|
15
15
|
* function UpdateCallComponent() {
|
|
@@ -5,4 +5,4 @@ import type { BaseActor, FunctionName } from "../../types";
|
|
|
5
5
|
* @param functionName The name of the actor method to visit.
|
|
6
6
|
* @returns The visit service function for the specified method.
|
|
7
7
|
*/
|
|
8
|
-
export declare function useVisitMethod<A = BaseActor>(functionName: FunctionName<A>): <V extends import("@dfinity/candid/lib/cjs/idl").Visitor<unknown, unknown>>(extractorClass: V, data
|
|
8
|
+
export declare function useVisitMethod<A = BaseActor>(functionName: FunctionName<A>): <V extends import("@dfinity/candid/lib/cjs/idl").Visitor<unknown, unknown>>(extractorClass: V, data: import("@ic-reactor/core/dist/classes/actor/types").VisitorType<V>["data"]) => ReturnType<V["visitFunc"]>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ic-reactor/react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.1",
|
|
4
4
|
"description": "A React library for interacting with Internet Computer canisters",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -35,17 +35,17 @@
|
|
|
35
35
|
"node": ">=10"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@ic-reactor/core": "^1.
|
|
38
|
+
"@ic-reactor/core": "^1.7.1",
|
|
39
39
|
"zustand-utils": "^1.3"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
|
-
"@dfinity/agent": "^1.
|
|
43
|
-
"@dfinity/auth-client": "^1.
|
|
44
|
-
"@dfinity/candid": "^1.
|
|
45
|
-
"@dfinity/identity": "^1.
|
|
46
|
-
"@dfinity/principal": "^1.
|
|
42
|
+
"@dfinity/agent": "^1.3",
|
|
43
|
+
"@dfinity/auth-client": "^1.3",
|
|
44
|
+
"@dfinity/candid": "^1.3",
|
|
45
|
+
"@dfinity/identity": "^1.3",
|
|
46
|
+
"@dfinity/principal": "^1.3",
|
|
47
47
|
"react": ">=16.8",
|
|
48
48
|
"zustand": "4.5"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "d4013e2399602abb8646efad8bb564934a254b23"
|
|
51
51
|
}
|