Add positional parameters to Storage hooks (#81)

* refactor useDeleteFile parameters

* update docs

* refactor useDownloadBloc parameters

* update docs

* refactor useDownloadBytes parameters

* update docs

* refactor useDownloadLink parameters

* update docs

* refactor useFileMetadata parameters

* update docs

* refactor useUploadFile parameters

* update docs

* refactor useUploadFileResumable parameters

* update docs

* exclude directories for coverage

docs/hooks/useDeleteFile.md

@@ -9,7 +9,7 @@ tags:
 
 ```typescript
 const reference = ref(storage, "path/to/remote/file.png");
-const { dispatch } = useDeleteFile({ reference });
+const { dispatch } = useDeleteFile(reference);
 await dispatch();
 ```
 
@@ -19,7 +19,7 @@ await dispatch();
 You can also listen to the state:
 
 ```typescript
-const { state } = useDeleteFile({ reference });
+const { state } = useDeleteFile(reference);
 await dispatch();
 // `state` is "ready" | "loading" | "done"
 ```

docs/hooks/useDownloadBlob.md

@@ -11,7 +11,7 @@ A very simple example would be:
 
 ```typescript
 const reference = ref(storage, "path/to/remote/file.png");
-const { dispatch } = useDownloadBlob({ reference });
+const { dispatch } = useDownloadBlob(reference);
 const blob = await dispatch(file);
 ```
 
@@ -21,15 +21,15 @@ const blob = await dispatch(file);
 You can get the state of the progress with this example.
 
 ```typescript
-const { state } = useDownloadBlob({ reference });
+const { state } = useDownloadBlob(reference);
 const blob = await dispatch();
 // `state` is "ready" | "loading" | "done"
 ```
 
 `dispatch` method will return an instance of [`Blob`][BlobDoc], but additionally, you can also listen to [`Blob`][BlobDoc] from `useDownloadBlob` hook as well:
 
 ```typescript
-const { blob } = useDownloadBlob({ reference });
+const { blob } = useDownloadBlob(reference);
 // blob updates and rerenders when the state is `"done"`
 // until then, it is `undefined`
 await dispatch();

docs/hooks/useDownloadBytes.md

@@ -11,7 +11,7 @@ A very simple example would be:
 
 ```typescript
 const reference = ref(storage, "path/to/remote/file.png");
-const { dispatch } = useDownloadBytes({ reference });
+const { dispatch } = useDownloadBytes(reference);
 const bytes = await dispatch(file);
 ```
 
@@ -21,15 +21,15 @@ const bytes = await dispatch(file);
 You can get the state of the progress with this example.
 
 ```typescript
-const { state } = useDownloadBytes({ reference });
+const { state } = useDownloadBytes(reference);
 const bytes = await dispatch();
 // `state` is "ready" | "loading" | "done"
 ```
 
 `dispatch` method will return an instance of [`Blob`][BlobDoc], but additionally, you can also listen to [`Blob`][BlobDoc] from `useDownloadBytes` hook as well:
 
 ```typescript
-const { bytes } = useDownloadBytes({ reference });
+const { bytes } = useDownloadBytes(reference);
 // bytes updates and rerenders when the state is `"done"`
 // until then, it is `undefined`
 await dispatch();

docs/hooks/useDownloadLink.md

@@ -9,7 +9,7 @@ tags:
 
 ```typescript
 const reference = ref(storage, "path/to/remote/file.png");
-const { dispatch } = useDownloadLink({ reference });
+const { dispatch } = useDownloadLink(reference);
 const link = await dispatch();
 ```
 
@@ -19,15 +19,15 @@ const link = await dispatch();
 You can get the state of the progress with this example.
 
 ```typescript
-const { state } = useDownloadLink({ reference });
+const { state } = useDownloadLink(reference);
 const link = await dispatch();
 // `state` is "ready" | "loading" | "done"
 ```
 
 `dispatch` method will return an instance of `string`, but additionally, you can also listen to `link` from `useDownloadLink` hook as well:
 
 ```typescript
-const { link } = useDownloadLink({ reference });
+const { link } = useDownloadLink(reference);
 // link updates and rerenders when the state is `"done"`
 // until then, it is `undefined`
 await dispatch();

docs/hooks/useFileMetadata.md

@@ -9,7 +9,7 @@ tags:
 
 ```typescript
 const reference = ref(storage, "path/to/remote/file.png");
-const { dispatch } = useFileMetadata({ reference });
+const { dispatch } = useFileMetadata(reference);
 const metadata = await dispatch();
 ```
 
@@ -19,15 +19,15 @@ const metadata = await dispatch();
 You can get the state of the progress with this example.
 
 ```typescript
-const { state } = useFileMetadata({ reference });
+const { state } = useFileMetadata(reference);
 const metadata = await dispatch();
 // `state` is "ready" | "loading" | "done"
 ```
 
 `dispatch` method will return an instance of [`FullMetadata`][FullMetadataRefDoc], but additionally, you can also listen to `metadata` from `useFileMetadata` hook as well:
 
 ```typescript
-const { metadata } = useFileMetadata({ reference });
+const { metadata } = useFileMetadata(reference);
 // metadata updates and rerenders when the state is `"done"`
 // until then, it is `undefined`
 await dispatch();

docs/hooks/useUploadFile.md

@@ -9,15 +9,15 @@ tags:
 
 ```typescript
 const reference = ref(storage, "path/to/remote/file.png");
-const { dispatch } = useUploadFile({ reference });
+const { dispatch } = useUploadFile(reference);
 const result = await dispatch(file);
 ```
 
 !!! warning
     `useUploadFile` is lazy by default and will not do anything until you use `dispatch` function.
 
 ```typescript
-const { state } = useUploadFile({ reference });
+const { state } = useUploadFile(reference);
 await dispatch();
 // `state` is "ready" | "loading" | "done"
 ```

docs/hooks/useUploadFileResumable.md

@@ -9,7 +9,7 @@ tags:
 
 ```typescript
 const reference = ref(storage, "path/to/remote/file.png");
-const { dispatch } = useUploadFileResumable({ reference });
+const { dispatch } = useUploadFileResumable(reference);
 const result = await dispatch(file);
 ```
 
@@ -19,7 +19,7 @@ const result = await dispatch(file);
 You can listen to its state shown in example below:
 
 ```typescript
-const { state } = useUploadFileResumable({ reference });
+const { state } = useUploadFileResumable(reference);
 await dispatch();
 // `state` is "ready" | [number, number] | "done"
 

src/storage/StorageDownloadLink.tsx

@@ -18,7 +18,7 @@ export const StorageDownloadLink = ({
   onLoading = () => <></>,
   onDone,
 }: StorageDownloadLinkProps) => {
-  const { link, state, dispatch } = useDownloadLink({ reference });
+  const { link, state, dispatch } = useDownloadLink(reference);
 
   useEffect(() => {
     dispatch();

src/storage/StorageMetadata.tsx

@@ -18,7 +18,7 @@ export const StorageMetadata = ({
   onLoading = () => <></>,
   onDone,
 }: StorageMetadataProps) => {
-  const { metadata, state, dispatch } = useFileMetadata({ reference });
+  const { metadata, state, dispatch } = useFileMetadata(reference);
 
   useEffect(() => {
     dispatch();

src/storage/useDeleteFile.test.ts

@@ -11,7 +11,7 @@ import { storage } from "../firebase";
 const reference = ref(storage, "files/README.md");
 
 it("initially, useDeleteFile hook should have ready state", async () => {
-  const { result } = renderHook(() => useDeleteFile({ reference }));
+  const { result } = renderHook(() => useDeleteFile(reference));
   const { state } = result.current;
   expect(state).toBe("ready");
 });

src/storage/useDeleteFile.ts

@@ -6,20 +6,14 @@
 import { StorageReference, deleteObject } from "firebase/storage";
 import { useState } from "react";
 
-type UseDeleteFileParams = {
-  reference: StorageReference;
-};
-
 type UseDeleteFileState = "ready" | "loading" | "done";
 type UseDeleteFileDispatcher = () => Promise<void>;
 type UseDeleteFile = {
   state: UseDeleteFileState;
   dispatch: UseDeleteFileDispatcher;
 };
 
-export const useDeleteFile = ({
-  reference,
-}: UseDeleteFileParams): UseDeleteFile => {
+export const useDeleteFile = (reference: StorageReference): UseDeleteFile => {
   const [state, setState] = useState<UseDeleteFileState>("ready");
 
   const dispatch: UseDeleteFileDispatcher = async () => {

src/storage/useDownloadBlob.test.ts

@@ -11,7 +11,7 @@ import { storage } from "../firebase";
 const reference = ref(storage, "files/README.md");
 
 it("initially, useDownloadBlob hook should have ready state", async () => {
-  const { result } = renderHook(() => useDownloadBlob({ reference }));
+  const { result } = renderHook(() => useDownloadBlob(reference));
   const { state } = result.current;
   expect(state).toBe("ready");
 });

src/storage/useDownloadBlob.ts

@@ -6,10 +6,6 @@
 import { StorageReference, getBlob } from "firebase/storage";
 import { useState } from "react";
 
-type UseDownloadBlobParams = {
-  reference: StorageReference;
-};
-
 type UseDownloadBlobState = "ready" | "loading" | "done";
 type UseDownloadBlobDispatcher = (
   maxDownloadSizeBytes?: number,
@@ -20,9 +16,9 @@ type UseDownloadBlob = {
   dispatch: UseDownloadBlobDispatcher;
 };
 
-export const useDownloadBlob = ({
-  reference,
-}: UseDownloadBlobParams): UseDownloadBlob => {
+export const useDownloadBlob = (
+  reference: StorageReference,
+): UseDownloadBlob => {
   const [state, setState] = useState<UseDownloadBlobState>("ready");
   const [blob, setBlob] = useState<Blob | undefined>(undefined);
 

src/storage/useDownloadBytes.test.ts

@@ -11,7 +11,7 @@ import { storage } from "../firebase";
 const reference = ref(storage, "files/README.md");
 
 it("initially, useDownloadBytes hook should have ready state", async () => {
-  const { result } = renderHook(() => useDownloadBytes({ reference }));
+  const { result } = renderHook(() => useDownloadBytes(reference));
   const { state } = result.current;
   expect(state).toBe("ready");
 });

src/storage/useDownloadBytes.ts

@@ -6,10 +6,6 @@
 import { StorageReference, getBytes } from "firebase/storage";
 import { useState } from "react";
 
-type UseDownloadBytesParams = {
-  reference: StorageReference;
-};
-
 type UseDownloadBytesState = "ready" | "loading" | "done";
 type UseDownloadBytesDispatcher = (
   maxDownloadSizeBytes?: number,
@@ -20,9 +16,9 @@ type UseDownloadBytes = {
   dispatch: UseDownloadBytesDispatcher;
 };
 
-export const useDownloadBytes = ({
-  reference,
-}: UseDownloadBytesParams): UseDownloadBytes => {
+export const useDownloadBytes = (
+  reference: StorageReference,
+): UseDownloadBytes => {
   const [state, setState] = useState<UseDownloadBytesState>("ready");
   const [bytes, setBytes] = useState<ArrayBuffer | undefined>(undefined);
 

src/storage/useDownloadLink.test.ts

@@ -11,7 +11,7 @@ import { storage } from "../firebase";
 const reference = ref(storage, "files/README.md");
 
 it("initially, useDownloadLink hook should have ready state", async () => {
-  const { result } = renderHook(() => useDownloadLink({ reference }));
+  const { result } = renderHook(() => useDownloadLink(reference));
   const { state } = result.current;
   expect(state).toBe("ready");
 });

src/storage/useDownloadLink.ts

@@ -6,10 +6,6 @@
 import { StorageReference, getDownloadURL } from "firebase/storage";
 import { useState } from "react";
 
-type UseDownloadLinkParams = {
-  reference: StorageReference;
-};
-
 type UseDownloadLinkState = "ready" | "loading" | "done";
 type UseDownloadLinkDispatcher = () => Promise<string>;
 type UseDownloadLink = {
@@ -18,9 +14,9 @@ type UseDownloadLink = {
   dispatch: UseDownloadLinkDispatcher;
 };
 
-export const useDownloadLink = ({
-  reference,
-}: UseDownloadLinkParams): UseDownloadLink => {
+export const useDownloadLink = (
+  reference: StorageReference,
+): UseDownloadLink => {
   const [state, setState] = useState<UseDownloadLinkState>("ready");
   const [link, setLink] = useState<string | undefined>(undefined);
 

src/storage/useFileMetadata.test.ts

@@ -11,7 +11,7 @@ import { storage } from "../firebase";
 const reference = ref(storage, "files/README.md");
 
 it("initially, useFileMetadata hook should have ready state", async () => {
-  const { result } = renderHook(() => useFileMetadata({ reference }));
+  const { result } = renderHook(() => useFileMetadata(reference));
   const { state } = result.current;
   expect(state).toBe("ready");
 });

src/storage/useFileMetadata.ts

@@ -6,10 +6,6 @@
 import { FullMetadata, StorageReference, getMetadata } from "firebase/storage";
 import { useState } from "react";
 
-type UseFileMetadataParams = {
-  reference: StorageReference;
-};
-
 type UseFileMetadataState = "ready" | "loading" | "done";
 type UseFileMetadataDispatcher = () => Promise<FullMetadata>;
 type UseFileMetadata = {
@@ -18,9 +14,9 @@ type UseFileMetadata = {
   dispatch: UseFileMetadataDispatcher;
 };
 
-export const useFileMetadata = ({
-  reference,
-}: UseFileMetadataParams): UseFileMetadata => {
+export const useFileMetadata = (
+  reference: StorageReference,
+): UseFileMetadata => {
   const [state, setState] = useState<UseFileMetadataState>("ready");
   const [metadata, setMetadata] = useState<FullMetadata | undefined>(undefined);
 

src/storage/useUploadFile.test.ts

@@ -13,15 +13,15 @@ const reference = ref(storage, "files/README.md");
 
 describe("initially, useUploadFile hook", () => {
   it("should have ready state", async () => {
-    const { result } = renderHook(() => useUploadFile({ reference }));
+    const { result } = renderHook(() => useUploadFile(reference));
     const { state } = result.current;
     expect(state).toBe("ready");
   });
 });
 
 describe("useUploadFile hook", () => {
   it.skip("should upload file", async () => {
-    const { result } = renderHook(() => useUploadFile({ reference }));
+    const { result } = renderHook(() => useUploadFile(reference));
     const { dispatch } = result.current;
     const file = fs.readFileSync("README.md");
     await dispatch(file);

src/storage/useUploadFile.ts

@@ -11,10 +11,6 @@ import {
 } from "firebase/storage";
 import { useState } from "react";
 
-type UseUploadFileProps = {
-  reference: StorageReference;
-};
-
 type UseUploadFileState = "ready" | "loading" | "done";
 type UseUploadFileDispatcher = (
   file: Buffer | File | Blob,
@@ -25,9 +21,7 @@ type UseUploadFile = {
   dispatch: UseUploadFileDispatcher;
 };
 
-export const useUploadFile = ({
-  reference,
-}: UseUploadFileProps): UseUploadFile => {
+export const useUploadFile = (reference: StorageReference): UseUploadFile => {
   const [state, setState] = useState<UseUploadFileState>("ready");
 
   const dispatch: UseUploadFileDispatcher = async (file, metadata) => {

src/storage/useUploadFileResumable.test.ts

@@ -12,7 +12,7 @@ const reference = ref(storage, "files/README.md");
 
 describe("initially, useUploadFileResumable hook", () => {
   it("should have ready state", async () => {
-    const { result } = renderHook(() => useUploadFileResumable({ reference }));
+    const { result } = renderHook(() => useUploadFileResumable(reference));
     const { state } = result.current;
     expect(state).toBe("ready");
   });