Update dependencies and refactor code

examples/candid-react/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ic-reactor/react": "^0.5.5",
+    "@ic-reactor/react": "^*",
     "@types/node": "^16.18.68",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",

examples/candid-react/src/components/Candid/MethodCall.tsx

@@ -1,4 +1,4 @@
-import { FunctionName, FunctionType } from "@ic-reactor/core"
+import { FunctionName, FunctionType } from "@ic-reactor/core/dist/types"
 import MethodForm from "./MethodForm"
 import { useMethodCall } from "@ic-reactor/react"
 
@@ -7,9 +7,8 @@ export interface FormFieldsProps {
   type: FunctionType
 }
 
-const MethodCall: React.FC<FormFieldsProps> = ({ functionName, type }) => {
-  const { call, data, loading, error, field } = useMethodCall({
-    type,
+const MethodCall: React.FC<FormFieldsProps> = ({ functionName }) => {
+  const { call, data, loading, error, visit } = useMethodCall({
     functionName,
   })
 

examples/candid-react/src/components/CandidViewer.tsx

@@ -0,0 +1,37 @@
+import { extractActorHooks, useReactor } from "@ic-reactor/react"
+import { ActorContextType } from "@ic-reactor/react/dist/types"
+import { createContext } from "react"
+
+const ActorContext = createContext<ActorContextType | null>(null)
+
+const CandidViewer = () => {
+  const { hooks, fetching, fetchError } = useReactor({
+    canisterId: "ryjl3-tyaaa-aaaaa-aaaba-cai",
+  })
+
+  return (
+    <ActorContext.Provider value={hooks as ActorContextType}>
+      <h2>IC Canister Interaction</h2>
+      {fetching && <p>Loading Candid interface...</p>}
+      {fetchError && <p>Error: {fetchError}</p>}
+      {hooks && <CanisterName />}
+    </ActorContext.Provider>
+  )
+}
+
+const { useQueryCall } = extractActorHooks(ActorContext)
+
+const CanisterName = () => {
+  const { data } = useQueryCall({
+    functionName: "name",
+  })
+
+  return (
+    <div>
+      <h3>Query Call</h3>
+      <p>Result: {JSON.stringify(data)}</p>
+    </div>
+  )
+}
+
+export default CandidViewer

examples/candid-react/src/index.tsx

@@ -1,6 +1,12 @@
 import ReactDOM from "react-dom/client"
 import "./index.css"
-import App from "./App"
+
+import CandidViewer from "./components/CandidViewer"
+import { AgentProvider } from "@ic-reactor/react"
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
-root.render(<App />)
+root.render(
+  <AgentProvider withDevtools>
+    <CandidViewer />
+  </AgentProvider>
+)

examples/react-provider/src/App.tsx

@@ -2,8 +2,7 @@ import Login from "Login"
 import Notes from "Notes"
 import AddNote from "./AddNote"
 import { backend } from "declarations/candid"
-import { AgentProvider } from "@ic-reactor/react/dist/context/agent"
-import { createReactorContext } from "@ic-reactor/react/dist/context/actor"
+import { AgentProvider, createReactorContext } from "@ic-reactor/react"
 
 const publicKey = crypto.getRandomValues(new Uint8Array(48))
 

examples/react-provider/src/Login.tsx

@@ -1,4 +1,4 @@
-import { useAuthClient } from "@ic-reactor/react/dist/context/agent"
+import { useAuthClient } from "@ic-reactor/react"
 
 const Login = () => {
   const {

packages/react/src/helpers/actor.ts

@@ -1,11 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useStore } from "zustand"
 import type {
   ActorCallState,
@@ -72,6 +65,7 @@ export const getActorHooks = <A = BaseActor>(
   }) => {
     const [state, setState] =
       useState<ActorCallState<A, typeof functionName>>(DEFAULT_STATE)
+
     const reset = useCallback(() => setState(DEFAULT_STATE), [])
 
     const call = useCallback(
@@ -109,7 +103,7 @@ export const getActorHooks = <A = BaseActor>(
           if (throwOnError) throw error
         }
       },
-      [args, functionName, events, callMethod]
+      [args, functionName, events]
     )
 
     return { call, reset, ...state }
@@ -124,14 +118,16 @@ export const getActorHooks = <A = BaseActor>(
     const intervalId = useRef<NodeJS.Timeout>()
 
     useEffect(() => {
-      if (refetchInterval)
+      if (refetchInterval) {
         intervalId.current = setInterval(call, refetchInterval)
-      return () => clearInterval(intervalId.current)
-    }, [refetchInterval, call])
+      }
 
-    useLayoutEffect(() => {
-      if (refetchOnMount) call()
-    }, [call, refetchOnMount])
+      if (refetchOnMount) {
+        call()
+      }
+
+      return () => clearInterval(intervalId.current)
+    }, [refetchInterval, refetchOnMount])
 
     return { call, ...state }
   }

packages/react/src/helpers/agent.ts

@@ -1,9 +1,10 @@
 import type { AgentManager } from "@ic-reactor/core/dist/agent"
 import type { HttpAgent } from "@ic-reactor/core/dist/types"
+import type { AgentHooks } from "./types"
 import { useEffect, useState } from "react"
 import { useStore } from "zustand"
 
-export const getAgentHooks = (agentManager: AgentManager) => {
+export const getAgentHooks = (agentManager: AgentManager): AgentHooks => {
   const { agentStore, getAgent, subscribeAgent } = agentManager
 
   const useAgentState = () => useStore(agentStore)

packages/react/src/helpers/auth.ts

@@ -7,13 +7,14 @@ import type {
   UseAuthClientReturn,
   LoginOptions,
   LoginState,
+  AuthHooks,
 } from "../types"
 import {
   IC_INTERNET_IDENTITY_PROVIDER,
   LOCAL_INTERNET_IDENTITY_PROVIDER,
 } from "@ic-reactor/core/dist/tools"
 
-export const getAuthHooks = (agentManager: AgentManager) => {
+export const getAuthHooks = (agentManager: AgentManager): AuthHooks => {
   const { authenticate: authenticator, authStore, isLocalEnv } = agentManager
 
   const useAuthState = () => useStore(authStore)

packages/react/src/helpers/types.ts

@@ -1,6 +1,4 @@
 import type { AuthClientLoginOptions } from "@dfinity/auth-client"
-import type { getAgentHooks } from "./agent"
-import type { getAuthHooks } from "./auth"
 import type {
   ActorState,
   CanisterId,
@@ -11,11 +9,32 @@ import type {
   FunctionName,
   VisitService,
   AuthClient,
+  AuthState,
+  HttpAgent,
+  AgentState,
 } from "@ic-reactor/core/dist/types"
 
-export type AgentHooks = ReturnType<typeof getAgentHooks>
+export interface AgentHooks {
+  useAgent: () => HttpAgent | undefined
+  useAgentState: () => AgentState
+}
+
+export interface AuthHooks {
+  useUserPrincipal: () => Principal | undefined
+  useAuthState: () => AuthState
+  useAuthClient: (events?: UseAuthClientArgs) => UseAuthClientReturn
+}
 
-export type AuthHooks = ReturnType<typeof getAuthHooks>
+export interface ActorHooks<A> {
+  initialize: () => Promise<void>
+  useActorState: () => UseActorState
+  useQueryCall: UseQueryCall<A>
+  useUpdateCall: UseUpdateCall<A>
+  useMethodCall: UseMethodCall<A>
+  useVisitMethod: <M extends FunctionName<A>>(
+    functionName: M
+  ) => VisitService<A>[M]
+}
 
 export interface UseAuthClientArgs {
   onAuthentication?: (promise: () => Promise<Identity>) => void
@@ -117,14 +136,3 @@ export type UseMethodCallArg<A, M extends FunctionName<A>> = ReactorCallArgs<
 export interface UseActorState extends Omit<ActorState, "methodState"> {
   canisterId: CanisterId
 }
-
-export interface ActorHooks<A> {
-  initialize: () => Promise<void>
-  useActorState: () => UseActorState
-  useQueryCall: UseQueryCall<A>
-  useUpdateCall: UseUpdateCall<A>
-  useMethodCall: UseMethodCall<A>
-  useVisitMethod: <M extends FunctionName<A>>(
-    functionName: M
-  ) => VisitService<A>[M]
-}

packages/react/src/hooks/index.ts

@@ -1,2 +1 @@
 export * from "./useReactor"
-export * from "./useCandid"

packages/react/src/hooks/types.ts

@@ -0,0 +1,26 @@
+import { IDL } from "@dfinity/candid"
+import { ActorManagerOptions, BaseActor } from "@ic-reactor/core/dist/types"
+import { ActorHooks, AgentContextType } from "../types"
+
+export interface UseReactorOptions
+  extends Omit<
+    ActorManagerOptions,
+    "idlFactory" | "agentManager" | "canisterId"
+  > {
+  canisterId: string
+  idlFactory?: IDL.InterfaceFactory
+  agentContext?: AgentContextType
+  didjsCanisterId?: string
+}
+
+export interface UseReactorState {
+  idlFactory?: IDL.InterfaceFactory
+  fetching: boolean
+  fetchError: string | null
+}
+
+export interface UseReactorReturn<A = BaseActor> {
+  hooks: ActorHooks<A> | null
+  fetching: boolean
+  fetchError: string | null
+}