Made it so the isPaid property is controlled with the file uploads/deletes
This commit is contained in:
Tiago Ribeiro
@@ -1,156 +1,143 @@
|
||||
import React, { ChangeEvent } from "react";
|
||||
import { BsUpload, BsDownload, BsTrash, BsArrowRepeat } from "react-icons/bs";
|
||||
import { FilesStorage } from "@/interfaces/storage.files";
|
||||
import React, {ChangeEvent} from "react";
|
||||
import {BsUpload, BsDownload, BsTrash, BsArrowRepeat} from "react-icons/bs";
|
||||
import {FilesStorage} from "@/interfaces/storage.files";
|
||||
import axios from "axios";
|
||||
|
||||
interface Asset {
|
||||
file: string | File;
|
||||
complete: boolean;
|
||||
file: string | File;
|
||||
complete: boolean;
|
||||
}
|
||||
|
||||
const PaymentAssetManager = (props: {
|
||||
asset: string | undefined;
|
||||
permissions: "read" | "write";
|
||||
type: FilesStorage;
|
||||
paymentId: string;
|
||||
asset: string | undefined;
|
||||
permissions: "read" | "write";
|
||||
type: FilesStorage;
|
||||
reload: () => void;
|
||||
paymentId: string;
|
||||
}) => {
|
||||
const { asset, permissions, type, paymentId } = props;
|
||||
const {asset, permissions, type, paymentId} = props;
|
||||
|
||||
const fileInputRef = React.useRef<HTMLInputElement>(null);
|
||||
const fileInputReplaceRef = React.useRef<HTMLInputElement>(null);
|
||||
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 [managingAsset, setManagingAsset] = React.useState<Asset>({
|
||||
file: asset || "",
|
||||
complete: asset ? true : false,
|
||||
});
|
||||
|
||||
const { file, complete } = managingAsset;
|
||||
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;
|
||||
}
|
||||
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);
|
||||
});
|
||||
}
|
||||
};
|
||||
console.error("File deletion failed");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error occurred during file deletion:", error);
|
||||
})
|
||||
.finally(props.reload);
|
||||
}
|
||||
};
|
||||
|
||||
const renderFileInput = (
|
||||
onChange: any,
|
||||
ref: React.RefObject<HTMLInputElement>
|
||||
) => (
|
||||
<input
|
||||
type="file"
|
||||
ref={ref}
|
||||
style={{ display: "none" }}
|
||||
onChange={onChange}
|
||||
multiple={false}
|
||||
accept="application/pdf"
|
||||
/>
|
||||
);
|
||||
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 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);
|
||||
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;
|
||||
}
|
||||
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);
|
||||
});
|
||||
}
|
||||
};
|
||||
console.error("File upload failed");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error occurred during file upload:", error);
|
||||
})
|
||||
.finally(props.reload);
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
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);
|
||||
});
|
||||
};
|
||||
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 (permissions === "read") {
|
||||
if (file) return <BsDownload onClick={downloadAsset} />;
|
||||
return null;
|
||||
}
|
||||
|
||||
if (file) {
|
||||
if (complete) {
|
||||
return (
|
||||
<>
|
||||
<BsDownload onClick={downloadAsset} />
|
||||
<BsArrowRepeat onClick={() => fileInputReplaceRef.current?.click()} />
|
||||
<BsTrash onClick={deleteAsset} />
|
||||
{renderFileInput(
|
||||
(e: Event) => handleFileChange(e, "patch"),
|
||||
fileInputReplaceRef
|
||||
)}
|
||||
{renderFileInput(
|
||||
(e: Event) => handleFileChange(e, "post"),
|
||||
fileInputRef
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (file) {
|
||||
if (complete) {
|
||||
return (
|
||||
<>
|
||||
<BsDownload onClick={downloadAsset} />
|
||||
<BsArrowRepeat 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 <span className="loading loading-infinity w-8" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<BsUpload onClick={() => fileInputRef.current?.click()} />
|
||||
{renderFileInput((e: Event) => handleFileChange(e, "post"), fileInputRef)}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<BsUpload onClick={() => fileInputRef.current?.click()} />
|
||||
{renderFileInput((e: Event) => handleFileChange(e, "post"), fileInputRef)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaymentAssetManager;
|
||||
|
||||
Reference in New Issue
Block a user