modified hook prevent to recall api

src/hooks/useDirectory.js

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