Merge branch 'add-firestore-hooks' into auth-test

README.md

@@ -41,6 +41,7 @@ pnpm add @sonicgarden/react-fire-hooks
 
 ## Utility
 
+- [useAsync](https://github.com/SonicGarden/react-fire-hooks/blob/main/src/utils/useAsync.ts)
 - [useCustomCompareEffect](https://github.com/SonicGarden/react-fire-hooks/blob/main/src/utils/useCustomCompareEffect.ts)
 - [useDeepCompareEffect](https://github.com/SonicGarden/react-fire-hooks/blob/main/src/utils/useDeepCompareEffect.ts)
 

src/firestore/useDocumentData.ts

@@ -10,7 +10,7 @@ export const useDocumentData = <T>(ref?: DocumentReference<T> | null) => {
   useRefsEffect(() => {
     let isMounted = true;
     if (!ref) {
-      setData(undefined);
+      isMounted && setData(undefined);
       return;
     }
 

src/firestore/useDocumentsData.ts

@@ -30,16 +30,15 @@ export const useDocumentsData = <T>(refs?: DocumentReference<T>[] | null) => {
             resolve();
           },
           (error) => {
-            if (isMounted) setLoading(false);
             throw error;
           },
         );
         unsubscribes.push(unsubscribe);
       });
     });
 
-    Promise.all(fetchDataPromises).then(() => {
-      setLoading(false);
+    Promise.all(fetchDataPromises).finally(() => {
+      if (isMounted) setLoading(false);
     });
 
     return () => {

src/storage/useStorageUrl.ts

@@ -1,30 +1,15 @@
 import { getBlob, getStorage, ref } from 'firebase/storage';
-import { useEffect, useState } from 'react';
+import { useAsync } from '../utils/index.js';
 
 export const useStorageUrl = (path?: string | null) => {
-  const [loading, setLoading] = useState<boolean>(false);
-  const [url, setUrl] = useState<string | null>(null);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
+  const { loading, data, error } = useAsync(async () => {
     if (!path) {
-      setUrl(null);
-      setError(null);
-      return;
+      return null;
     }
 
-    setLoading(true);
-    getBlob(ref(getStorage(), path))
-      .then((blob) => {
-        setUrl(URL.createObjectURL(blob));
-      })
-      .catch((error) => {
-        setError(error);
-      })
-      .finally(() => {
-        setLoading(false);
-      });
+    const blob = await getBlob(ref(getStorage(), path));
+    return { url: URL.createObjectURL(blob), blob };
   }, [path]);
 
-  return { loading, url, error };
+  return { loading, data, error };
 };

src/utils/index.ts

@@ -1,2 +1,3 @@
+export * from './useAsync.js';
 export * from './useCustomCompareEffect.js';
 export * from './useDeepCompareEffect.js';

src/utils/useAsync.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import type { DependencyList } from 'react';
+
+export const useAsync = <T>(fn: () => T | Promise<T>, deps: DependencyList = []) => {
+  const [loading, setLoading] = useState<boolean>(true);
+  const [data, setData] = useState<T | null>(null);
+  const [error, setError] = useState<unknown>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    try {
+      (async () => {
+        const _data = await fn();
+        isMounted && setData(_data);
+      })();
+    } catch (error) {
+      isMounted && setError(error);
+    } finally {
+      isMounted && setLoading(false);
+    }
+
+    return () => {
+      isMounted = false;
+    };
+  }, deps);
+
+  return { loading, data, error };
+};