Add useApi hook

packages/next-drupal/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useAntdBreakpoints'
+export * from './useApi'
 export * from './useAppState'
 export * from './useContentItems'
 export * from './useDebouncedValue'

packages/next-drupal/src/hooks/useApi.ts

@@ -0,0 +1,93 @@
+// @todo: add typescript types
+import {
+  DependencyList,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+
+const defaultHeaders: { [key: string]: { [key: string]: any } } = {
+  common: {
+    Accept: 'application/json',
+  },
+  del: {},
+  patch: {
+    'Content-Type': 'application/json',
+  },
+  post: {
+    'Content-Type': 'application/json',
+  },
+  put: {
+    'Content-Type': 'application/json',
+  },
+  get: {},
+}
+
+export function useApi(
+  path: string,
+  opts?: { manualTrigger?: boolean } & RequestInit,
+  deps?: DependencyList,
+) {
+  const [state, setState] = useState<any>({
+    data: null,
+    error: null,
+    loaded: false,
+    loading: false,
+  })
+
+  const getData = useCallback(
+    async (opts?: RequestInit) => {
+      setState((state) => ({ ...state, loaded: false, loading: true }))
+
+      const method = opts?.method || 'GET'
+      let result: any = null
+
+      const response = await fetch(path, {
+        ...(opts || {}),
+        headers: {
+          ...defaultHeaders.common,
+          ...defaultHeaders[method.toLowerCase()],
+          ...(opts?.headers || {}),
+        },
+      })
+
+      try {
+        result = await response.json()
+      } catch (error) {
+        result = {
+          message: response.statusText,
+        }
+      }
+
+      if (!response.ok) {
+        setState((state) => ({
+          ...state,
+          data: null,
+          error: result,
+          loaded: false,
+          loading: false,
+        }))
+        return
+      }
+
+      setState((state) => ({
+        ...state,
+        data: result,
+        error: null,
+        loaded: true,
+        loading: false,
+      }))
+    },
+    [path],
+  )
+
+  const value = useMemo(() => ({ ...state, getData }), [state, getData])
+
+  useEffect(() => {
+    if (opts?.manualTrigger) return
+    getData(opts)
+  }, [getData, opts, deps])
+
+  return value
+}