Add useDeleteFile hook

docs/hooks/useDeleteFile.md

@@ -0,0 +1,44 @@
+---
+tags:
+  - hook
+---
+
+# `useDeleteFile` Hook
+
+`useDeleteFile` hook is used to delete a file from Firebase Storage. A very simple example would be:
+
+```typescript
+const reference = ref(storage, "path/to/remote/file.png");
+const { dispatch } = useDeleteFile({ reference });
+await dispatch();
+```
+
+!!! warning
+    `useDeleteFile` is lazy by default and will not do anything until you use `dispatch` function.
+
+You can also listen to the state:
+
+```typescript
+const { state } = useDeleteFile({ reference });
+await dispatch();
+// `state` is "ready" | "loading" | "done"
+```
+
+## Input Parameters
+
+Input parameters for `useDeleteFile` hook is as follows:
+
+| Name | Type | Description | Required | Default Value |
+|---|---|---|---|---|
+| `reference` | [`firebase/storage/StorageReference`][StorageReferenceRefDoc] | Reference to a file in Storage. | ✅ | - |
+
+## Return Type
+
+`useDeleteFile` hook returns an object with properties as below:
+
+| Name | Type | Description |
+|---|---|---|
+| `state` | `"ready" | "loading" | "done"` | The state of the deletion process. |
+| `dispatch` | `() => Promise<void>` | A callback to start deletion process. |
+
+[StorageReferenceRefDoc]: https://firebase.google.com/docs/reference/js/storage.storagereference

docs/storage/deleting-a-file.md

@@ -0,0 +1,5 @@
+# Deleting a File
+
+You can use one of the following ways to delete a file from Firebase Storage:
+
+ - [`useDeleteFile` hook](../hooks/useDeleteFile.md)

mkdocs.yml

@@ -60,6 +60,7 @@ nav:
   - Storage:
     - storage/uploading-a-file.md
     - storage/downloading-a-file.md
+    - storage/deleting-a-file.md
   - Hooks:
     - Firestore:
       - hooks/useDocument.md
@@ -82,6 +83,7 @@ nav:
       - hooks/useDownloadLink.md
       - hooks/useDownloadBlob.md
       - hooks/useDownloadBytes.md
+      - hooks/useDeleteFile.md
   - Components:
     - Firestore:
       - components/FirestoreDocument.md

src/storage/index.ts

@@ -14,3 +14,5 @@ export * from "./StorageDownloadLink";
 export * from "./useDownloadBlob";
 
 export * from "./useDownloadBytes";
+
+export * from "./useDeleteFile";

src/storage/useDeleteFile.test.ts

@@ -0,0 +1,17 @@
+// Copyright (c) 2024 Eray Erdin
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+import { renderHook } from "@testing-library/react";
+import { ref } from "firebase/storage";
+import { useDeleteFile } from ".";
+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 { state } = result.current;
+  expect(state).toBe("ready");
+});

src/storage/useDeleteFile.ts

@@ -0,0 +1,32 @@
+// Copyright (c) 2024 Eray Erdin
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+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 => {
+  const [state, setState] = useState<UseDeleteFileState>("ready");
+
+  const dispatch: UseDeleteFileDispatcher = async () => {
+    setState("loading");
+    await deleteObject(reference);
+    setState("done");
+  };
+
+  return { state, dispatch };
+};