Test that api.example.add works

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["eslint:recommended", "next/core-web-vitals"]
+  "extends": ["eslint:recommended", "next"]
 }

package.json

@@ -15,19 +15,23 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "metacom": "^3.1.2",
     "next": "13.5.3",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@flydotio/dockerfile": "^0.4.10",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
     "autoprefixer": "^10.4.16",
     "eslint": "8.53.0",
     "eslint-config-next": "14.0.1",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "postcss": "^8.4.30",
     "prettier": "3.0.3",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2"
   }
 }

src/app/layout.jsx

@@ -2,6 +2,7 @@
 
 import ThemeProvider from '@/store/theme-context'
 import './global.css'
+import '@/utils/api'
 
 export default function RootLayout({ children }) {
   return (

src/app/page.jsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useCallback } from 'react'
 import Message from '@/components/Message'
 import ThemeToggle from '@/components/ThemeToggle'
+import { useApiRequest } from '@/utils'
 
 const now = Date.now()
 const MOCK_MESSAGES = [
@@ -17,6 +18,10 @@ const MOCK_MESSAGES = [
 
 export default function Home() {
   const [mounted, setMounted] = useState(false)
+  const { response } = useApiRequest(
+    useCallback(() => api.example.add({ a: 1, b: 2 }), []),
+    { autofetch: true }
+  )
 
   useEffect(() => {
     setMounted(true)
@@ -34,6 +39,7 @@ export default function Home() {
         </Message>
       ))}
       <ThemeToggle />
+      {response || 'no response yet'}
     </div>
   )
 }

src/utils/api.js

@@ -0,0 +1,63 @@
+'use client'
+
+import { useState, useCallback, useEffect } from 'react'
+import { Metacom } from 'metacom'
+
+const metacom = Metacom.create('ws://localhost:8000')
+
+;(async () => {
+  const { api } = metacom
+  await metacom.load('example')
+  window.api = api
+  console.log('api', api)
+})()
+
+// TODO: enhance this function
+export const useApiRequest = (
+  fetcher,
+  { onError, autofetch = false, onSuccess, onBeforeFetch, onResponse }
+) => {
+  const [isLoading, setLoading] = useState(false)
+  const [response, setResponse] = useState(null)
+
+  const refetch = useCallback(
+    async (args) => {
+      setLoading(true)
+      await onBeforeFetch?.()
+      const res = await fetcher(args)
+      if (!res) {
+        setLoading(false)
+        return
+      }
+      await onResponse?.(res)
+      if (!res) {
+        if (onError) {
+          await onError?.(res, args)
+        } else {
+          console.error('Api request error')
+        }
+      } else {
+        setResponse(res)
+        try {
+          await onSuccess?.(res, args)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+      setLoading(false)
+    },
+    [onBeforeFetch, fetcher, onResponse, onError, setResponse, onSuccess]
+  )
+
+  useEffect(() => {
+    if (autofetch) {
+      refetch({})
+    }
+  }, [refetch, fetcher, autofetch])
+
+  return {
+    isLoading,
+    response,
+    fetch,
+  }
+}

src/utils/index.js

@@ -1 +1,2 @@
 export * from './time'
+export * from './api'