@ic-reactor/react 1.7.5 → 1.7.7
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 +15 -9
- package/dist/helpers/extractActorContext.js +4 -0
- package/dist/helpers/types.d.ts +4 -2
- package/dist/hooks/actor/index.d.ts +1 -0
- package/dist/hooks/actor/index.js +1 -0
- package/dist/hooks/actor/useActorState.d.ts +1 -1
- package/dist/hooks/actor/useActorStore.d.ts +32 -0
- package/dist/hooks/actor/useActorStore.js +39 -0
- package/dist/hooks/agent/useAuthState.d.ts +2 -2
- package/dist/hooks/agent/useAuthState.js +2 -2
- package/dist/hooks/useActor.js +1 -1
- package/package.json +3 -3
|
@@ -70,15 +70,20 @@ const DEFAULT_STATE = {
|
|
|
70
70
|
*/
|
|
71
71
|
const actorHooks = (actorManager) => {
|
|
72
72
|
const { actorStore, canisterId, visitFunction, methodAttributes, updateMethodState, extractMethodAttributes, extractInterface, callMethodWithOptions, initialize, } = actorManager;
|
|
73
|
-
const
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
73
|
+
const useActorStore = (selector = (s) => s) => {
|
|
74
|
+
return (0, zustand_1.useStore)(actorStore, (0, shallow_1.useShallow)(selector));
|
|
75
|
+
};
|
|
76
|
+
const useActorState = () => {
|
|
77
|
+
return useActorStore((state) => ({
|
|
78
|
+
name: state.name,
|
|
79
|
+
error: state.error,
|
|
80
|
+
initialized: state.initialized,
|
|
81
|
+
initializing: state.initializing,
|
|
82
|
+
canisterId,
|
|
83
|
+
}));
|
|
84
|
+
};
|
|
80
85
|
const useMethodState = (functionName, requestKey) => {
|
|
81
|
-
const state = (
|
|
86
|
+
const state = useActorStore((state) => { var _a; return (_a = state.methodState[functionName]) === null || _a === void 0 ? void 0 : _a[requestKey]; });
|
|
82
87
|
const setSharedState = React.useCallback((newState) => {
|
|
83
88
|
updateMethodState(functionName, requestKey, newState);
|
|
84
89
|
}, [functionName, requestKey]);
|
|
@@ -152,7 +157,7 @@ const actorHooks = (actorManager) => {
|
|
|
152
157
|
}
|
|
153
158
|
return () => clearInterval(intervalId.current);
|
|
154
159
|
}, [refetchInterval, refetchOnMount]);
|
|
155
|
-
return Object.assign({ call }, state);
|
|
160
|
+
return Object.assign({ call, intervalId }, state);
|
|
156
161
|
};
|
|
157
162
|
const useUpdateCall = useSharedCall;
|
|
158
163
|
const useMethod = (params) => {
|
|
@@ -207,6 +212,7 @@ const actorHooks = (actorManager) => {
|
|
|
207
212
|
};
|
|
208
213
|
return {
|
|
209
214
|
initialize,
|
|
215
|
+
useActorStore,
|
|
210
216
|
useMethodAttributes,
|
|
211
217
|
useMethodNames,
|
|
212
218
|
useMethod,
|
|
@@ -16,6 +16,9 @@ function extractActorContext(actorContext) {
|
|
|
16
16
|
const initialize = () => useActorContext().initialize();
|
|
17
17
|
const useMethodNames = () => useActorContext().useMethodNames();
|
|
18
18
|
const useMethodAttributes = () => useActorContext().useMethodAttributes();
|
|
19
|
+
const useActorStore = (selector = (s) => s) => {
|
|
20
|
+
return useActorContext().useActorStore(selector);
|
|
21
|
+
};
|
|
19
22
|
const useActorState = () => useActorContext().useActorState();
|
|
20
23
|
const useMethod = (args) => useActorContext().useMethod(args);
|
|
21
24
|
const useQueryCall = (args) => useActorContext().useQueryCall(args);
|
|
@@ -24,6 +27,7 @@ function extractActorContext(actorContext) {
|
|
|
24
27
|
const useVisitService = () => useActorContext().useVisitService();
|
|
25
28
|
const useActorInterface = () => useActorContext().useActorInterface();
|
|
26
29
|
return {
|
|
30
|
+
useActorStore,
|
|
27
31
|
useActorState,
|
|
28
32
|
useMethod,
|
|
29
33
|
useMethodNames,
|
package/dist/helpers/types.d.ts
CHANGED
|
@@ -38,7 +38,8 @@ export type LoginParameters = AuthClientLoginOptions;
|
|
|
38
38
|
export type LogoutParameters = {
|
|
39
39
|
returnTo?: string;
|
|
40
40
|
};
|
|
41
|
-
export
|
|
41
|
+
export type UseActorStore<A> = <T>(callback?: (state: ActorState<A>) => T) => T;
|
|
42
|
+
export interface UseActorStateReturnType extends Omit<ActorState, "methodState"> {
|
|
42
43
|
canisterId: string;
|
|
43
44
|
}
|
|
44
45
|
export interface UseSharedCallParameters<A, M extends FunctionName<A>> extends CallConfig {
|
|
@@ -90,7 +91,8 @@ export type UseVisitMethod<A> = <M extends FunctionName<A>>(functionName: M) =>
|
|
|
90
91
|
export type UseVisitService<A> = () => VisitService<A>;
|
|
91
92
|
export interface ActorHooksReturnType<A = BaseActor> {
|
|
92
93
|
initialize: () => Promise<void>;
|
|
93
|
-
|
|
94
|
+
useActorStore: UseActorStore<A>;
|
|
95
|
+
useActorState: () => UseActorStateReturnType;
|
|
94
96
|
useActorInterface: () => IDL.ServiceClass;
|
|
95
97
|
useMethodNames: <Actor = A>() => FunctionName<Actor>[];
|
|
96
98
|
useMethodAttributes: <Actor = A>() => MethodAttributes<Actor>;
|
|
@@ -2,6 +2,7 @@ export * from "./useMethodNames";
|
|
|
2
2
|
export * from "./useQueryCall";
|
|
3
3
|
export * from "./useUpdateCall";
|
|
4
4
|
export * from "./useMethodAttributes";
|
|
5
|
+
export * from "./useActorStore";
|
|
5
6
|
export * from "./useActorState";
|
|
6
7
|
export * from "./useVisitMethod";
|
|
7
8
|
export * from "./useVisitService";
|
|
@@ -18,6 +18,7 @@ __exportStar(require("./useMethodNames"), exports);
|
|
|
18
18
|
__exportStar(require("./useQueryCall"), exports);
|
|
19
19
|
__exportStar(require("./useUpdateCall"), exports);
|
|
20
20
|
__exportStar(require("./useMethodAttributes"), exports);
|
|
21
|
+
__exportStar(require("./useActorStore"), exports);
|
|
21
22
|
__exportStar(require("./useActorState"), exports);
|
|
22
23
|
__exportStar(require("./useVisitMethod"), exports);
|
|
23
24
|
__exportStar(require("./useVisitService"), exports);
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Provides a hook for accessing the state of an actor from the actor's store.
|
|
3
|
+
* This hook is part of a set of utilities that facilitate interactions with
|
|
4
|
+
* Internet Computer (IC) canisters by abstracting the complexities associated
|
|
5
|
+
* with actor management and state retrieval.
|
|
6
|
+
*
|
|
7
|
+
* The `useActorStore` hook allows components to subscribe to and retrieve state
|
|
8
|
+
* from the actor store in a reactive way. This enables components to re-render
|
|
9
|
+
* when specific parts of the actor state change, which is managed by a selector function.
|
|
10
|
+
*
|
|
11
|
+
* @template A The type of the actor, extending from a base actor structure.
|
|
12
|
+
* @template T The type of the data selected from the actor's state.
|
|
13
|
+
* @param {Function} [selector=(s: ActorState<A>) => s as T] A function that
|
|
14
|
+
* selects a part of the actor state. This function should accept the actor state
|
|
15
|
+
* and return a portion of the state. If no selector is provided, the entire
|
|
16
|
+
* state is returned.
|
|
17
|
+
*
|
|
18
|
+
* @returns {T} The selected state from the actor store. The nature of the returned
|
|
19
|
+
* state depends on the selector function provided.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* // Assuming a 'LedgerActor' has been setup and used to manage the actor store
|
|
24
|
+
* const name = useActorStore(state => state.name);
|
|
25
|
+
*
|
|
26
|
+
* return <div>Canister Name: {name}</div>;
|
|
27
|
+
* ```
|
|
28
|
+
*
|
|
29
|
+
* @see ActorManager for more details about the architecture and management of actor stores.
|
|
30
|
+
* @see ActorState for the structure and possible states an actor can hold.
|
|
31
|
+
*/
|
|
32
|
+
export declare const useActorStore: import("../../types").UseActorStore<import("@ic-reactor/core/dist/types").BaseActor>;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.useActorStore = void 0;
|
|
7
|
+
const hooks_1 = __importDefault(require("./hooks"));
|
|
8
|
+
/**
|
|
9
|
+
* Provides a hook for accessing the state of an actor from the actor's store.
|
|
10
|
+
* This hook is part of a set of utilities that facilitate interactions with
|
|
11
|
+
* Internet Computer (IC) canisters by abstracting the complexities associated
|
|
12
|
+
* with actor management and state retrieval.
|
|
13
|
+
*
|
|
14
|
+
* The `useActorStore` hook allows components to subscribe to and retrieve state
|
|
15
|
+
* from the actor store in a reactive way. This enables components to re-render
|
|
16
|
+
* when specific parts of the actor state change, which is managed by a selector function.
|
|
17
|
+
*
|
|
18
|
+
* @template A The type of the actor, extending from a base actor structure.
|
|
19
|
+
* @template T The type of the data selected from the actor's state.
|
|
20
|
+
* @param {Function} [selector=(s: ActorState<A>) => s as T] A function that
|
|
21
|
+
* selects a part of the actor state. This function should accept the actor state
|
|
22
|
+
* and return a portion of the state. If no selector is provided, the entire
|
|
23
|
+
* state is returned.
|
|
24
|
+
*
|
|
25
|
+
* @returns {T} The selected state from the actor store. The nature of the returned
|
|
26
|
+
* state depends on the selector function provided.
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```tsx
|
|
30
|
+
* // Assuming a 'LedgerActor' has been setup and used to manage the actor store
|
|
31
|
+
* const name = useActorStore(state => state.name);
|
|
32
|
+
*
|
|
33
|
+
* return <div>Canister Name: {name}</div>;
|
|
34
|
+
* ```
|
|
35
|
+
*
|
|
36
|
+
* @see ActorManager for more details about the architecture and management of actor stores.
|
|
37
|
+
* @see ActorState for the structure and possible states an actor can hold.
|
|
38
|
+
*/
|
|
39
|
+
exports.useActorStore = hooks_1.default.useActorStore;
|
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
* @example
|
|
5
5
|
* ```jsx
|
|
6
6
|
* function AuthStateComponent() {
|
|
7
|
-
* const {
|
|
7
|
+
* const { authenticated, authenticating, identity, error } = useAuthState();
|
|
8
8
|
*
|
|
9
9
|
* return (
|
|
10
10
|
* <div>
|
|
11
11
|
* {authenticating ? 'Authenticating...' : ''}
|
|
12
12
|
* {error ? `Error: ${error.message}` : ''}
|
|
13
|
-
* {
|
|
13
|
+
* {authenticated ? `User ${identity?.getPrincipal()} is authenticated.` : 'User is not authenticated.'}
|
|
14
14
|
* </div>
|
|
15
15
|
* );
|
|
16
16
|
* }
|
|
@@ -11,13 +11,13 @@ const hooks_1 = __importDefault(require("./hooks"));
|
|
|
11
11
|
* @example
|
|
12
12
|
* ```jsx
|
|
13
13
|
* function AuthStateComponent() {
|
|
14
|
-
* const {
|
|
14
|
+
* const { authenticated, authenticating, identity, error } = useAuthState();
|
|
15
15
|
*
|
|
16
16
|
* return (
|
|
17
17
|
* <div>
|
|
18
18
|
* {authenticating ? 'Authenticating...' : ''}
|
|
19
19
|
* {error ? `Error: ${error.message}` : ''}
|
|
20
|
-
* {
|
|
20
|
+
* {authenticated ? `User ${identity?.getPrincipal()} is authenticated.` : 'User is not authenticated.'}
|
|
21
21
|
* </div>
|
|
22
22
|
* );
|
|
23
23
|
* }
|
package/dist/hooks/useActor.js
CHANGED
|
@@ -167,7 +167,7 @@ const useActor = (config) => {
|
|
|
167
167
|
return;
|
|
168
168
|
}
|
|
169
169
|
if (!candidAdapter) {
|
|
170
|
-
throw new Error("CandidAdapter is necessary to fetch the Candid interface. Please ensure your application is wrapped with the CandidAdapterProvider
|
|
170
|
+
throw new Error("CandidAdapter is necessary to fetch the Candid interface. Please ensure your application is wrapped with the CandidAdapterProvider, or provide the idlFactory directly.");
|
|
171
171
|
}
|
|
172
172
|
let idlFactory;
|
|
173
173
|
if (candidString) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ic-reactor/react",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.7",
|
|
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,7 +35,7 @@
|
|
|
35
35
|
"node": ">=10"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@ic-reactor/core": "^1.7.
|
|
38
|
+
"@ic-reactor/core": "^1.7.4",
|
|
39
39
|
"zustand-utils": "^1.3"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"react": ">=16.8",
|
|
48
48
|
"zustand": "4.5"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "b29be90830729f198c63164041141e35ee0aaafa"
|
|
51
51
|
}
|