chore: move api to another component

src/hooks/useApi.ts

@@ -1,26 +1,24 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
-type ApiFunction<T> = () => Promise<{ data: T }>;
+type ApiFunction<T, P> = (params?: P) => Promise<{ data: T }>;
 
-export function useApi<T>(apiFunction: ApiFunction<T>) {
+export function useManualApi<T, P>(apiFunction: ApiFunction<T, P>) {
   const [data, setData] = useState<T | null>(null);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState<unknown>(null);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response = await apiFunction();
-        setData(response.data);
-      } catch (err) {
-        setError(err);
-      } finally {
-        setLoading(false);
-      }
-    };
+  const execute = async (params?: P) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await apiFunction(params);
+      setData(response.data);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
 
-    fetchData();
-  }, [apiFunction]);
-
-  return { data, loading, error };
+  return { data, loading, error, execute };
 }