modified hook prevent to recall api

src/hooks/useDirectory.js

@@ -1,77 +1,64 @@
-import {useEffect, useState} from "react"
-import {DirectoryRepository} from "../repositories/DirectoryRepository";
-import {cacheData, getCachedData} from "../slices/apiDataManager";
+import { useEffect, useState } from "react";
+import { DirectoryRepository } from "../repositories/DirectoryRepository";
+import { cacheData, getCachedData } from "../slices/apiDataManager";
 
-export const useDirectory = () =>
-{
-    const [ contacts, setContacts ] = useState( [] )
-    const [ loading, setLoading ] = useState( false )
-    const [ error, setError ] = useState();
+export const useDirectory = () => {
+  const [contacts, setContacts] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState();
 
-
-
-    const fetch = async() =>
-    {
-        const cache_contacts = getCachedData( "contacts" );
-        if ( !cache_contacts )
-        {
-            setLoading(true)
-           try
-        {
-            const response = await DirectoryRepository.GetContacts();
-               setContacts( response.data )
-               cacheData( "contacts", response.data )
-               setLoading(false)
-        } catch ( error )
-        {
-               setError( error );
-               setLoading(false)
-        }  
-        } else
-        {
-            setContacts(cache_contacts)
-        }
-       
+  const fetch = async () => {
+    const cache_contacts = getCachedData("contacts");
+    if (!cache_contacts) {
+      setLoading(true);
+      try {
+        const response = await DirectoryRepository.GetContacts();
+        setContacts(response.data);
+        cacheData("contacts", response.data);
+        setLoading(false);
+      } catch (error) {
+        setError(error);
+        setLoading(false);
+      }
+    } else {
+      setContacts(cache_contacts);
     }
+  };
 
-    useState( () =>
-    {
-        fetch()
-    }, [] )
-    return {contacts,loading,error}
-}
+  useState(() => {
+    fetch();
+  }, []);
+  return { contacts, loading, error };
+};
 
-export const useBuckets = () =>
-{
-    const [ buckets, setbuckets ] = useState();
-    const [ loading, setLoading ] = useState();
-    const [ Error, setError ] = useState( '' )
-    
-    const fetch = async() =>
-    {    const cache_buckets = getCachedData("buckets")
-        if ( !cache_buckets )
-        {
-            setLoading(true)
-            try
-        {
-                const resp = await DirectoryRepository.GetBucktes();
-                setbuckets( resp.data );
-                cacheData( "bucktes", resp.data )
-                            setLoading(false)
-        } catch ( error )
-            { 
-                const msg = error.response.data.message || error.message || "Something wrong";
-            setError(msg)
-        }
-        } else
-        {
-            setbuckets(cache_buckets)
-        }
+export const useBuckets = () => {
+  const [buckets, setBuckets] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const fetchBuckets = async () => {
+    const cacheBuckets = getCachedData("buckets");
+    if (!cacheBuckets) {
+        setLoading( true );
+        console.log("called")
+      try {
+        const resp = await DirectoryRepository.GetBucktes(); 
+        setBuckets(resp.data);
+          cacheData( "buckets", resp.data );
+            setLoading(false);
+      } catch (error) {
+        const msg =
+          error?.response?.data?.message || error?.message || "Something went wrong";
+        setError(msg);
+      } 
+    } else {
+      setBuckets(cacheBuckets);
     }
+  };
 
-    useEffect( () =>
-    {
-        fetch()
-    }, [] )
-    return {buckets,loading,Error}
-}
+  useEffect(() => {
+    fetchBuckets();
+  }, []);
+
+  return { buckets, loading, error };
+};