chore: fix styles and change the apis

src/hooks/useApi.ts

@@ -1,26 +1,46 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
+import { type ApiResponse } from '@/types/apiResponse';
 
-type ApiFunction<T> = () => Promise<{ data: T }>;
+// Define options for the hook
+interface UseApiOptions {
+  // If true, the API call will be executed immediately on mount
+  immediate?: boolean;
+}
 
-export function useApi<T>(apiFunction: ApiFunction<T>) {
+export function useApi<T extends ApiResponse, P extends any[]>(
+  apiFunction: (...args: P) => Promise<{ data: T }>,
+  options: UseApiOptions = {},
+) {
   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 () => {
+  const execute = useCallback(
+    async (...args: P) => {
+      setLoading(true);
+      setError(null);
+
       try {
-        const response = await apiFunction();
+        const response = await apiFunction(...args);
+
         setData(response.data);
       } catch (err) {
+        // TODO: can handle some common errors here, 400 and 500 errors
         setError(err);
       } finally {
         setLoading(false);
       }
-    };
+    },
+    [apiFunction],
+  );
 
-    fetchData();
-  }, [apiFunction]);
+  // If the 'immediate' option is true, execute the function on mount
+  useEffect(() => {
+    if (options.immediate) {
+      // We pass undefined as params for the initial call.
+      execute(...(undefined as unknown as P));
+    }
+  }, [execute, options.immediate]);
 
-  return { data, loading, error };
+  return { data, loading, error, execute };
 }