chore: useApi added to the components

src/hooks/useApi.ts

@@ -1,24 +1,65 @@
-import { useState } from 'react';
+import type { ApiResponse } from '@/types/apiResponse';
+import { useToast } from '@rkheftan/harmony-ui';
+import type { AxiosError } from 'axios';
+import { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
-type ApiFunction<T, P> = (params?: P) => 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, P>(apiFunction: ApiFunction<T, P>) {
+export function useApi<T extends ApiResponse, P extends any[]>(
+  apiFunction: (...args: P) => Promise<{ data: T }>,
+  options: UseApiOptions = {},
+) {
+  const toast = useToast();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
   const [data, setData] = useState<T | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<unknown>(null);
 
-  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);
+  const execute = useCallback(
+    async (...args: P) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const response = await apiFunction(...args);
+
+        setData(response.data);
+      } catch (err: unknown) {
+        const axisoError: AxiosError = err as AxiosError;
+
+        if (axisoError.response?.status === 401) {
+          navigate('/login');
+        }
+
+        if (axisoError.response?.status === 500) {
+          toast({
+            message: t('messages.serverError'),
+            severity: 'error',
+          });
+        }
+
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [apiFunction, navigate, t, toast],
+  );
+
+  // 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, execute };
 }