@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.
@@ -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 useActorState = () => (0, zustand_1.useStore)(actorStore, (0, shallow_1.useShallow)((state) => ({
74
- name: state.name,
75
- error: state.error,
76
- initialized: state.initialized,
77
- initializing: state.initializing,
78
- canisterId,
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 = (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;
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,
@@ -38,7 +38,8 @@ export type LoginParameters = AuthClientLoginOptions;
38
38
  export type LogoutParameters = {
39
39
  returnTo?: string;
40
40
  };
41
- export interface UseActorState extends Omit<ActorState, "methodState"> {
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
- useActorState: () => UseActorState;
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);
@@ -18,4 +18,4 @@
18
18
  * }
19
19
  *```
20
20
  */
21
- export declare const useActorState: () => import("../../types").UseActorState;
21
+ export declare const useActorState: () => import("../../types").UseActorStateReturnType;
@@ -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 { isAuthenticated, authenticating, identity, error } = useAuthState();
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
- * {isAuthenticated ? `User ${identity?.getPrincipal()} is authenticated.` : 'User is not authenticated.'}
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 { isAuthenticated, authenticating, identity, error } = useAuthState();
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
- * {isAuthenticated ? `User ${identity?.getPrincipal()} is authenticated.` : 'User is not authenticated.'}
20
+ * {authenticated ? `User ${identity?.getPrincipal()} is authenticated.` : 'User is not authenticated.'}
21
21
  * </div>
22
22
  * );
23
23
  * }
@@ -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.5",
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.3",
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": "6ff9d0880ddb86dcd4d8d66ea1480da44a93212e"
50
+ "gitHead": "b29be90830729f198c63164041141e35ee0aaafa"
51
51
  }