Implemented file storage handling for Corporate Transfer and Comission Transfer

2023-12-13 23:29:14 +00:00
parent 21b612eaa4
commit 020ecff29c
10 changed files with 473 additions and 12 deletions
--- a/src/components/PaymentAssetManager.tsx
+++ b/src/components/PaymentAssetManager.tsx
@@ -0,0 +1,156 @@
+import React, { ChangeEvent } from "react";
+import { BsUpload, BsDownload, BsTrash, BsFilePdf } from "react-icons/bs";
+import { FilesStorage } from "@/interfaces/storage.files";
+import axios from "axios";
+
+interface Asset {
+  file: string | File;
+  complete: boolean;
+}
+
+const PaymentAssetManager = (props: {
+  asset: string | undefined;
+  permissions: "read" | "write";
+  type: FilesStorage;
+  paymentId: string;
+}) => {
+  const { asset, permissions, type, paymentId } = props;
+
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+  const fileInputReplaceRef = React.useRef<HTMLInputElement>(null);
+
+  const [managingAsset, setManagingAsset] = React.useState<Asset>({
+    file: asset || "",
+    complete: asset ? true : false,
+  });
+
+  const { file, complete } = managingAsset;
+
+  const deleteAsset = () => {
+    if (confirm("Are you sure you want to delete this document?")) {
+      axios
+        .delete(`/api/payments/files/${type}/${paymentId}`)
+        .then((response) => {
+          if (response.status === 200) {
+            console.log("File deleted successfully!");
+            setManagingAsset({
+              file: "",
+              complete: false,
+            });
+            return;
+          }
+
+          console.error("File deletion failed");
+        })
+        .catch((error) => {
+          console.error("Error occurred during file deletion:", error);
+        });
+    }
+  };
+
+  const renderFileInput = (
+    onChange: any,
+    ref: React.RefObject<HTMLInputElement>
+  ) => (
+    <input
+      type="file"
+      ref={ref}
+      style={{ display: "none" }}
+      onChange={onChange}
+      multiple={false}
+      accept="application/pdf"
+    />
+  );
+
+  const handleFileChange = async (e: Event, method: "post" | "patch") => {
+    const newFile = (e.target as HTMLInputElement).files?.[0];
+    if (newFile) {
+      setManagingAsset({
+        file: newFile,
+        complete: false,
+      });
+
+      const formData = new FormData();
+      formData.append("file", newFile);
+
+      axios[method](`/api/payments/files/${type}/${paymentId}`, formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      })
+        .then((response) => {
+          if (response.status === 200) {
+            console.log("File uploaded successfully!");
+            console.log("Uploaded File URL:", response.data.ref);
+            // Further actions upon successful upload
+            setManagingAsset({
+              file: response.data.ref,
+              complete: true,
+            });
+            return;
+          }
+
+          console.error("File upload failed");
+        })
+        .catch((error) => {
+          console.error("Error occurred during file upload:", error);
+        });
+    }
+  };
+
+  const downloadAsset = () => {
+    axios
+      .get(`/api/payments/files/${type}/${paymentId}`)
+      .then((response) => {
+        if (response.status === 200) {
+          console.log("Uploaded File URL:", response.data.url);
+          const link = document.createElement("a");
+          link.download = response.data.filename;
+          link.href = response.data.url;
+          link.click();
+          return;
+        }
+
+        console.error("Failed to download file");
+      })
+      .catch((error) => {
+        console.error("Error occurred during file upload:", error);
+      });
+  };
+
+  if (permissions === "read") {
+    if (file) return <BsDownload onClick={downloadAsset} />;
+    return null;
+  }
+
+  if (file) {
+    if (complete) {
+      return (
+        <>
+          <BsDownload onClick={downloadAsset} />
+          <BsFilePdf onClick={() => fileInputReplaceRef.current?.click()} />
+          <BsTrash onClick={deleteAsset} />
+          {renderFileInput(
+            (e: Event) => handleFileChange(e, "patch"),
+            fileInputReplaceRef
+          )}
+          {renderFileInput(
+            (e: Event) => handleFileChange(e, "post"),
+            fileInputRef
+          )}
+        </>
+      );
+    }
+
+    return <span className="loading loading-infinity w-8" />;
+  }
+
+  return (
+    <>
+      <BsUpload onClick={() => fileInputRef.current?.click()} />
+      {renderFileInput((e: Event) => handleFileChange(e, "post"), fileInputRef)}
+    </>
+  );
+};
+
+export default PaymentAssetManager;