Move api setup to automation root, fix initialization side-effect

[MAILPOET-4420]

mailpoet/assets/js/src/automation/api/hooks.ts

@@ -0,0 +1,81 @@
+import { useCallback, useEffect, useState } from 'react';
+import { api } from '../config';
+
+const API_URL = `${api.root}/mailpoet/v1/automation`;
+
+export const request = (
+  path: string,
+  init?: RequestInit,
+): ReturnType<typeof fetch> => fetch(`${API_URL}/${path}`, init);
+
+type Error<T> = {
+  response?: Response;
+  data?: T;
+};
+
+type State<T> = {
+  data?: T;
+  loading: boolean;
+  error?: Error<T>;
+};
+
+type Result<T> = [(init?: RequestInit) => Promise<void>, State<T>];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Data = Record<string, any>;
+
+export const useMutation = <T extends Data>(
+  path: string,
+  config?: RequestInit,
+): Result<T> => {
+  const [state, setState] = useState<State<T>>({
+    data: undefined,
+    loading: false,
+    error: undefined,
+  });
+
+  const mutation = useCallback(
+    async (init?: RequestInit) => {
+      setState((prevState) => ({ ...prevState, loading: true }));
+      const response = await request(path, {
+        ...config,
+        ...init,
+        headers: {
+          'content-type': 'application/json',
+          ...(init?.headers ?? {}),
+          'x-wp-nonce': api.nonce,
+        },
+      });
+
+      try {
+        const data = await response.json();
+        const error = response.ok ? null : { ...response, data };
+        setState((prevState) => ({ ...prevState, data, error }));
+      } catch (_) {
+        const error = { response };
+        setState((prevState) => ({ ...prevState, error }));
+      } finally {
+        setState((prevState) => ({ ...prevState, loading: false }));
+      }
+    },
+    [config, path],
+  );
+
+  return [mutation, state];
+};
+
+export const useQuery = <T extends Data>(
+  path: string,
+  init?: RequestInit,
+): State<T> => {
+  const [mutation, result] = useMutation<T>(path, init);
+
+  useEffect(
+    () => {
+      void mutation();
+    },
+    [] /* eslint-disable-line react-hooks/exhaustive-deps -- request only on initial load */,
+  );
+
+  return result;
+};