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 )
-        {
-            setLoading(true)
-           try
-        {
         const response = await DirectoryRepository.GetContacts();
-               setContacts( response.data )
+        setContacts(response.data);
-               cacheData( "contacts", response.data )
+        cacheData("contacts", response.data);
-               setLoading(false)
+        setLoading(false);
-        } catch ( error )
+      } catch (error) {
-        {
+        setError(error);
-               setError( error );
+        setLoading(false);
-               setLoading(false)
       }
-        } else
+    } else {
-        {
+      setContacts(cache_contacts);
-            setContacts(cache_contacts)
     }
+  };
 
-    }
+  useState(() => {
+    fetch();
+  }, []);
+  return { contacts, loading, error };
+};
 
-    useState( () =>
+export const useBuckets = () => {
-    {
+  const [buckets, setBuckets] = useState([]);
-        fetch()
+  const [loading, setLoading] = useState(false);
-    }, [] )
+  const [error, setError] = useState("");
-    return {contacts,loading,error}
-}
 
-export const useBuckets = () =>
+  const fetchBuckets = async () => {
-{
+    const cacheBuckets = getCachedData("buckets");
-    const [ buckets, setbuckets ] = useState();
+    if (!cacheBuckets) {
-    const [ loading, setLoading ] = useState();
+        setLoading( true );
-    const [ Error, setError ] = useState( '' )
+        console.log("called")
-    
+      try {
-    const fetch = async() =>
-    {    const cache_buckets = getCachedData("buckets")
-        if ( !cache_buckets )
-        {
-            setLoading(true)
-            try
-        {
         const resp = await DirectoryRepository.GetBucktes(); 
-                setbuckets( resp.data );
+        setBuckets(resp.data);
-                cacheData( "bucktes", resp.data )
+          cacheData( "buckets", resp.data );
-                            setLoading(false)
+            setLoading(false);
-        } catch ( error )
+      } catch (error) {
-            { 
+        const msg =
-                const msg = error.response.data.message || error.message || "Something wrong";
+          error?.response?.data?.message || error?.message || "Something went wrong";
-            setError(msg)
+        setError(msg);
-        }
-        } else
-        {
-            setbuckets(cache_buckets)
       } 
+    } else {
+      setBuckets(cacheBuckets);
     }
+  };
 
-    useEffect( () =>
+  useEffect(() => {
-    {
+    fetchBuckets();
-        fetch()
+  }, []);
-    }, [] )
+
-    return {buckets,loading,Error}
+  return { buckets, loading, error };
-}
+};