Refactor todo service hooks and update dependencies in Next.js example

examples/nextjs/dfx.json

@@ -11,22 +11,25 @@
       }
     },
     "internet_identity": {
-      "type": "pull",
-      "id": "rdmx6-jaaaa-aaaaa-aaadq-cai"
+      "type": "custom",
+      "candid": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity.did",
+      "wasm": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity_dev.wasm.gz",
+      "remote": {
+        "id": {
+          "ic": "rdmx6-jaaaa-aaaaa-aaadq-cai",
+          "local": "rdmx6-jaaaa-aaaaa-aaadq-cai"
+        }
+      }
     },
     "frontend": {
-      "dependencies": [
-        "todo"
-      ],
+      "dependencies": ["todo"],
       "frontend": {
         "entrypoint": "out/index.html"
       },
-      "source": [
-        "out"
-      ],
+      "source": ["out"],
       "type": "assets"
     }
   },
   "output_env_file": ".env",
   "version": 1
-}
+}

examples/nextjs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

examples/nextjs/src/components/AddTodo.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from "react"
-import { useUpdateCall } from "service/todo"
+import { useUpdateTodo } from "service/todo"
 
 interface AddTodoProps {}
 
 const AddTodo: React.FC<AddTodoProps> = () => {
-  const { call, error, loading } = useUpdateCall({
+  const { call, error, loading } = useUpdateTodo({
     functionName: "addTodo"
   })
 

examples/nextjs/src/components/Todo.tsx

@@ -1,11 +1,11 @@
 import { ToDo } from "declarations/todo/todo.did"
 import React from "react"
-import { useUpdateCall } from "service/todo"
+import { useUpdateTodo } from "service/todo"
 
 interface TodoProps extends ToDo {}
 
 const Todo: React.FC<TodoProps> = ({ id, completed, description }) => {
-  const { call, error, loading } = useUpdateCall({
+  const { call, error, loading } = useUpdateTodo({
     functionName: "toggleTodo",
     args: [id]
   })

examples/nextjs/src/components/Todos.tsx

@@ -1,12 +1,13 @@
 import React from "react"
-import { useQueryCall } from "service/todo"
+import { useQueryTodo } from "service/todo"
 import Todo from "./Todo"
 
 interface TodosProps {}
 
 const Todos: React.FC<TodosProps> = () => {
-  const { data, error, loading } = useQueryCall({
+  const { data, error, loading } = useQueryTodo({
     functionName: "getAllTodos",
+    args: [],
     refetchOnMount: true,
     refetchInterval: 5000
   })

examples/nextjs/src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import { AgentProvider } from "@ic-reactor/react"
 import { AppProps } from "next/app"
 import { useEffect, useState } from "react"
+import { TodoActorProvider } from "service/todo"
 import "styles/global.css"
 
 const App: React.FC<AppProps> = ({ Component, pageProps }) => {
@@ -13,7 +14,9 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
 
   return mounted ? (
     <AgentProvider withLocalEnv>
-      <Component {...pageProps} />
+      <TodoActorProvider>
+        <Component {...pageProps} />
+      </TodoActorProvider>
     </AgentProvider>
   ) : null
 }

examples/nextjs/src/service/todo.ts

@@ -1,8 +1,11 @@
 import { createActorContext } from "@ic-reactor/react"
 import { canisterId, idlFactory, todo } from "declarations/todo"
 
-export const { useActorState, useQueryCall, useUpdateCall } =
-  createActorContext<typeof todo>({
-    idlFactory,
-    canisterId
-  })
+export const {
+  ActorProvider: TodoActorProvider,
+  useQueryCall: useQueryTodo,
+  useUpdateCall: useUpdateTodo
+} = createActorContext<typeof todo>({
+  idlFactory,
+  canisterId
+})