devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made it so the isPaid property is controlled with the file uploads/deletes

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-01-09 11:32:17 +00:00
parent 14d19257df
commit 0ed843125a
3 changed files with 261 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
src/components/PaymentAssetManager.tsx
View File

@@ -1,156 +1,143 @@
import React, { ChangeEvent } from "react"; import React, {ChangeEvent} from "react";
import { BsUpload, BsDownload, BsTrash, BsArrowRepeat } from "react-icons/bs"; import {BsUpload, BsDownload, BsTrash, BsArrowRepeat} from "react-icons/bs";
import { FilesStorage } from "@/interfaces/storage.files"; import {FilesStorage} from "@/interfaces/storage.files";
import axios from "axios"; import axios from "axios";
interface Asset { interface Asset {
file: string | File; file: string | File;
complete: boolean; complete: boolean;
} }
const PaymentAssetManager = (props: { const PaymentAssetManager = (props: {
asset: string | undefined; asset: string | undefined;
permissions: "read" | "write"; permissions: "read" | "write";
type: FilesStorage; type: FilesStorage;
paymentId: string; reload: () => void;
paymentId: string;
}) => { }) => {
const { asset, permissions, type, paymentId } = props; const {asset, permissions, type, paymentId} = props;
const fileInputRef = React.useRef<HTMLInputElement>(null); const fileInputRef = React.useRef<HTMLInputElement>(null);
const fileInputReplaceRef = React.useRef<HTMLInputElement>(null); const fileInputReplaceRef = React.useRef<HTMLInputElement>(null);
const [managingAsset, setManagingAsset] = React.useState<Asset>({ const [managingAsset, setManagingAsset] = React.useState<Asset>({
file: asset || "", file: asset || "",
complete: asset ? true : false, complete: asset ? true : false,
}); });
const { file, complete } = managingAsset; const {file, complete} = managingAsset;
const deleteAsset = () => { const deleteAsset = () => {
if (confirm("Are you sure you want to delete this document?")) { if (confirm("Are you sure you want to delete this document?")) {
axios axios
.delete(`/api/payments/files/${type}/${paymentId}`) .delete(`/api/payments/files/${type}/${paymentId}`)
.then((response) => { .then((response) => {
if (response.status === 200) { if (response.status === 200) {
console.log("File deleted successfully!"); console.log("File deleted successfully!");
setManagingAsset({ setManagingAsset({
file: "", file: "",
complete: false, complete: false,
}); });
return; return;
} }
console.error("File deletion failed"); console.error("File deletion failed");
}) })
.catch((error) => { .catch((error) => {
console.error("Error occurred during file deletion:", error); console.error("Error occurred during file deletion:", error);
}); })
} .finally(props.reload);
}; }
};
const renderFileInput = ( const renderFileInput = (onChange: any, ref: React.RefObject<HTMLInputElement>) => (
onChange: any, <input type="file" ref={ref} style={{display: "none"}} onChange={onChange} multiple={false} accept="application/pdf" />
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 handleFileChange = async (e: Event, method: "post" | "patch") => {
const newFile = (e.target as HTMLInputElement).files?.[0]; const newFile = (e.target as HTMLInputElement).files?.[0];
if (newFile) { if (newFile) {
setManagingAsset({ setManagingAsset({
file: newFile, file: newFile,
complete: false, complete: false,
}); });
const formData = new FormData(); const formData = new FormData();
formData.append("file", newFile); formData.append("file", newFile);
axios[method](`/api/payments/files/${type}/${paymentId}`, formData, { axios[method](`/api/payments/files/${type}/${paymentId}`, formData, {
headers: { headers: {
"Content-Type": "multipart/form-data", "Content-Type": "multipart/form-data",
}, },
}) })
.then((response) => { .then((response) => {
if (response.status === 200) { if (response.status === 200) {
console.log("File uploaded successfully!"); console.log("File uploaded successfully!");
console.log("Uploaded File URL:", response.data.ref); console.log("Uploaded File URL:", response.data.ref);
// Further actions upon successful upload // Further actions upon successful upload
setManagingAsset({ setManagingAsset({
file: response.data.ref, file: response.data.ref,
complete: true, complete: true,
}); });
return; return;
} }
console.error("File upload failed"); console.error("File upload failed");
}) })
.catch((error) => { .catch((error) => {
console.error("Error occurred during file upload:", error); console.error("Error occurred during file upload:", error);
}); })
} .finally(props.reload);
}; }
};
const downloadAsset = () => { const downloadAsset = () => {
axios axios
.get(`/api/payments/files/${type}/${paymentId}`) .get(`/api/payments/files/${type}/${paymentId}`)
.then((response) => { .then((response) => {
if (response.status === 200) { if (response.status === 200) {
console.log("Uploaded File URL:", response.data.url); console.log("Uploaded File URL:", response.data.url);
const link = document.createElement("a"); const link = document.createElement("a");
link.download = response.data.filename; link.download = response.data.filename;
link.href = response.data.url; link.href = response.data.url;
link.click(); link.click();
return; return;
} }
console.error("Failed to download file"); console.error("Failed to download file");
}) })
.catch((error) => { .catch((error) => {
console.error("Error occurred during file upload:", error); console.error("Error occurred during file upload:", error);
}); });
}; };
if (permissions === "read") { if (permissions === "read") {
if (file) return <BsDownload onClick={downloadAsset} />; if (file) return <BsDownload onClick={downloadAsset} />;
return null; return null;
} }
if (file) { if (file) {
if (complete) { if (complete) {
return ( return (
<> <>
<BsDownload onClick={downloadAsset} /> <BsDownload onClick={downloadAsset} />
<BsArrowRepeat onClick={() => fileInputReplaceRef.current?.click()} /> <BsArrowRepeat onClick={() => fileInputReplaceRef.current?.click()} />
<BsTrash onClick={deleteAsset} /> <BsTrash onClick={deleteAsset} />
{renderFileInput( {renderFileInput((e: Event) => handleFileChange(e, "patch"), fileInputReplaceRef)}
(e: Event) => handleFileChange(e, "patch"), {renderFileInput((e: Event) => handleFileChange(e, "post"), fileInputRef)}
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 ( return (
<> <>
<BsUpload onClick={() => fileInputRef.current?.click()} /> <BsUpload onClick={() => fileInputRef.current?.click()} />
{renderFileInput((e: Event) => handleFileChange(e, "post"), fileInputRef)} {renderFileInput((e: Event) => handleFileChange(e, "post"), fileInputRef)}
</> </>
); );
}; };
export default PaymentAssetManager; export default PaymentAssetManager;

289
src/pages/api/payments/files/[type]/[paymentId].ts
View File

@@ -1,194 +1,181 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next"; import type {NextApiRequest, NextApiResponse} from "next";
import { app, storage } from "@/firebase"; import {app, storage} from "@/firebase";
import { import {getFirestore, getDoc, doc, updateDoc, deleteField, setDoc} from "firebase/firestore";
getFirestore, import {withIronSessionApiRoute} from "iron-session/next";
getDoc, import {sessionOptions} from "@/lib/session";
doc, import {FilesStorage} from "@/interfaces/storage.files";
updateDoc,
deleteField,
} from "firebase/firestore";
import { withIronSessionApiRoute } from "iron-session/next";
import { sessionOptions } from "@/lib/session";
import { FilesStorage } from "@/interfaces/storage.files";
import { Payment } from "@/interfaces/paypal"; import {Payment} from "@/interfaces/paypal";
import fs from "fs"; import fs from "fs";
import { import {ref, uploadBytes, deleteObject, getDownloadURL} from "firebase/storage";
ref,
uploadBytes,
deleteObject,
getDownloadURL,
} from "firebase/storage";
import formidable from "formidable-serverless"; import formidable from "formidable-serverless";
const db = getFirestore(app); const db = getFirestore(app);
const getPaymentField = (type: FilesStorage) => { const getPaymentField = (type: FilesStorage) => {
switch (type) { switch (type) {
case "commission": case "commission":
return "commissionTransfer"; return "commissionTransfer";
case "corporate": case "corporate":
return "corporateTransfer"; return "corporateTransfer";
default: default:
return null; return null;
} }
}; };
const handleDelete = async ( const handleDelete = async (paymentId: string, paymentField: "commissionTransfer" | "corporateTransfer") => {
paymentId: string, const paymentRef = doc(db, "payments", paymentId);
paymentField: "commissionTransfer" | "corporateTransfer" const paymentDoc = await getDoc(paymentRef);
) => { const {[paymentField]: paymentFieldPath} = paymentDoc.data() as Payment;
const paymentRef = doc(db, "payments", paymentId); // Create a reference to the file to delete
const paymentDoc = await getDoc(paymentRef); const documentRef = ref(storage, paymentFieldPath);
const { [paymentField]: paymentFieldPath } = paymentDoc.data() as Payment; await deleteObject(documentRef);
// Create a reference to the file to delete await updateDoc(paymentRef, {
const documentRef = ref(storage, paymentFieldPath); [paymentField]: deleteField(),
await deleteObject(documentRef); isPaid: false,
await updateDoc(paymentRef, { });
[paymentField]: deleteField(),
});
}; };
const handleUpload = async ( const handleUpload = async (req: NextApiRequest, paymentId: string, paymentField: "commissionTransfer" | "corporateTransfer") =>
req: NextApiRequest, new Promise((resolve, reject) => {
paymentId: string, const form = formidable({keepExtensions: true});
paymentField: "commissionTransfer" | "corporateTransfer" form.parse(req, async (err: any, fields: any, files: any) => {
) => if (err) {
new Promise((resolve, reject) => { reject(err);
const form = formidable({ keepExtensions: true }); return;
form.parse(req, async (err: any, fields: any, files: any) => { }
if (err) { try {
reject(err); const {file} = files;
return; const fileName = Date.now() + "-" + file.name;
} const fileRef = ref(storage, fileName);
try {
const { file } = files;
const fileName = Date.now() + "-" + file.name;
const fileRef = ref(storage, fileName);
const binary = fs.readFileSync(file.path).buffer; const binary = fs.readFileSync(file.path).buffer;
const snapshot = await uploadBytes(fileRef, binary); const snapshot = await uploadBytes(fileRef, binary);
fs.rmSync(file.path); fs.rmSync(file.path);
const paymentRef = doc(db, "payments", paymentId); const paymentRef = doc(db, "payments", paymentId);
await updateDoc(paymentRef, { await updateDoc(paymentRef, {
[paymentField]: snapshot.ref.fullPath, [paymentField]: snapshot.ref.fullPath,
}); });
resolve(snapshot.ref.fullPath); resolve(snapshot.ref.fullPath);
} catch (err) { } catch (err) {
reject(err); reject(err);
} }
}); });
}); });
export default withIronSessionApiRoute(handler, sessionOptions); export default withIronSessionApiRoute(handler, sessionOptions);
async function handler(req: NextApiRequest, res: NextApiResponse) { async function handler(req: NextApiRequest, res: NextApiResponse) {
if (!req.session.user) { if (!req.session.user) {
res.status(401).json({ ok: false }); res.status(401).json({ok: false});
return; return;
} }
if (req.method === "GET") return await get(req, res); if (req.method === "GET") return await get(req, res);
if (req.method === "POST") return await post(req, res); if (req.method === "POST") return await post(req, res);
if (req.method === "DELETE") return await del(req, res); if (req.method === "DELETE") return await del(req, res);
if (req.method === "PATCH") return await patch(req, res); if (req.method === "PATCH") return await patch(req, res);
res.status(404).json(undefined); res.status(404).json(undefined);
} }
async function get(req: NextApiRequest, res: NextApiResponse) { async function get(req: NextApiRequest, res: NextApiResponse) {
const { type, paymentId } = req.query as { const {type, paymentId} = req.query as {
type: FilesStorage; type: FilesStorage;
paymentId: string; paymentId: string;
}; };
const paymentField = getPaymentField(type); const paymentField = getPaymentField(type);
if (paymentField === null) { if (paymentField === null) {
res.status(500).json({ error: "Failed to identify payment field" }); res.status(500).json({error: "Failed to identify payment field"});
return; return;
} }
const paymentRef = doc(db, "payments", paymentId); const paymentRef = doc(db, "payments", paymentId);
const { [paymentField]: paymentFieldPath } = ( const {[paymentField]: paymentFieldPath} = (await getDoc(paymentRef)).data() as Payment;
await getDoc(paymentRef)
).data() as Payment;
// Create a reference to the file to delete // Create a reference to the file to delete
const documentRef = ref(storage, paymentFieldPath); const documentRef = ref(storage, paymentFieldPath);
const url = await getDownloadURL(documentRef); const url = await getDownloadURL(documentRef);
res.status(200).json({ url, name: documentRef.name }); res.status(200).json({url, name: documentRef.name});
} }
async function post(req: NextApiRequest, res: NextApiResponse) { async function post(req: NextApiRequest, res: NextApiResponse) {
const { type, paymentId } = req.query as { const {type, paymentId} = req.query as {
type: FilesStorage; type: FilesStorage;
paymentId: string; paymentId: string;
}; };
const paymentField = getPaymentField(type); const paymentField = getPaymentField(type);
if (paymentField === null) { if (paymentField === null) {
res.status(500).json({ error: "Failed to identify payment field" }); res.status(500).json({error: "Failed to identify payment field"});
return; return;
} }
try { try {
const ref = await handleUpload(req, paymentId, paymentField); const ref = await handleUpload(req, paymentId, paymentField);
res.status(200).json({ ref }); console.log(ref);
} catch (error) {
res.status(500).json({ error }); const updatedDoc = (await getDoc(doc(db, "payments", paymentId))).data() as Payment;
} if (updatedDoc.commissionTransfer && updatedDoc.corporateTransfer) {
await setDoc(doc(db, "payments", paymentId), {isPaid: true}, {merge: true});
}
res.status(200).json({ref});
} catch (error) {
res.status(500).json({error});
}
} }
async function del(req: NextApiRequest, res: NextApiResponse) { async function del(req: NextApiRequest, res: NextApiResponse) {
const { type, paymentId } = req.query as { const {type, paymentId} = req.query as {
type: FilesStorage; type: FilesStorage;
paymentId: string; paymentId: string;
}; };
const paymentField = getPaymentField(type); const paymentField = getPaymentField(type);
if (paymentField === null) { if (paymentField === null) {
res.status(500).json({ error: "Failed to identify payment field" }); res.status(500).json({error: "Failed to identify payment field"});
return; return;
} }
try { try {
await handleDelete(paymentId, paymentField); await handleDelete(paymentId, paymentField);
res.status(200).json({ ok: true }); res.status(200).json({ok: true});
} catch (err) { } catch (err) {
console.error(err); console.error(err);
res.status(500).json({ error: "Failed to delete file" }); res.status(500).json({error: "Failed to delete file"});
} }
} }
async function patch(req: NextApiRequest, res: NextApiResponse) { async function patch(req: NextApiRequest, res: NextApiResponse) {
const { type, paymentId } = req.query as { const {type, paymentId} = req.query as {
type: FilesStorage; type: FilesStorage;
paymentId: string; paymentId: string;
}; };
const paymentField = getPaymentField(type); const paymentField = getPaymentField(type);
if (paymentField === null) { if (paymentField === null) {
res.status(500).json({ error: "Failed to identify payment field" }); res.status(500).json({error: "Failed to identify payment field"});
return; return;
} }
try { try {
await handleDelete(paymentId, paymentField); await handleDelete(paymentId, paymentField);
} catch (err) { } catch (err) {
console.error(err); console.error(err);
res.status(500).json({ error: "Failed to delete file" }); res.status(500).json({error: "Failed to delete file"});
return; return;
} }
try { try {
const ref = await handleUpload(req, paymentId, paymentField); const ref = await handleUpload(req, paymentId, paymentField);
res.status(200).json({ ref }); res.status(200).json({ref});
} catch (err) { } catch (err) {
res.status(500).json({ error: "Failed to upload file" }); res.status(500).json({error: "Failed to upload file"});
} }
} }
export const config = { export const config = {
api: { api: {
bodyParser: false, bodyParser: false,
}, },
}; };

6
src/pages/payment-record.tsx
View File

@@ -387,6 +387,7 @@ export default function PaymentRecord() {
cell: (info) => ( cell: (info) => (
<div className={containerClassName}> <div className={containerClassName}>
<PaymentAssetManager <PaymentAssetManager
reload={reload}
permissions={info.row.original.isPaid ? "read" : "write"} permissions={info.row.original.isPaid ? "read" : "write"}
asset={info.row.original.corporateTransfer} asset={info.row.original.corporateTransfer}
paymentId={info.row.original.id} paymentId={info.row.original.id}
@@ -404,6 +405,7 @@ export default function PaymentRecord() {
cell: (info) => ( cell: (info) => (
<div className={containerClassName}> <div className={containerClassName}>
<PaymentAssetManager <PaymentAssetManager
reload={reload}
permissions="read" permissions="read"
asset={info.row.original.commissionTransfer} asset={info.row.original.commissionTransfer}
paymentId={info.row.original.id} paymentId={info.row.original.id}
@@ -421,6 +423,7 @@ export default function PaymentRecord() {
cell: (info) => ( cell: (info) => (
<div className={containerClassName}> <div className={containerClassName}>
<PaymentAssetManager <PaymentAssetManager
reload={reload}
permissions="read" permissions="read"
asset={info.row.original.corporateTransfer} asset={info.row.original.corporateTransfer}
paymentId={info.row.original.id} paymentId={info.row.original.id}
@@ -435,6 +438,7 @@ export default function PaymentRecord() {
cell: (info) => ( cell: (info) => (
<div className={containerClassName}> <div className={containerClassName}>
<PaymentAssetManager <PaymentAssetManager
reload={reload}
permissions={info.row.original.isPaid ? "read" : "write"} permissions={info.row.original.isPaid ? "read" : "write"}
asset={info.row.original.commissionTransfer} asset={info.row.original.commissionTransfer}
paymentId={info.row.original.id} paymentId={info.row.original.id}
@@ -452,6 +456,7 @@ export default function PaymentRecord() {
cell: (info) => ( cell: (info) => (
<div className={containerClassName}> <div className={containerClassName}>
<PaymentAssetManager <PaymentAssetManager
reload={reload}
permissions="write" permissions="write"
asset={info.row.original.corporateTransfer} asset={info.row.original.corporateTransfer}
paymentId={info.row.original.id} paymentId={info.row.original.id}
@@ -466,6 +471,7 @@ export default function PaymentRecord() {
cell: (info) => ( cell: (info) => (
<div className={containerClassName}> <div className={containerClassName}>
<PaymentAssetManager <PaymentAssetManager
reload={reload}
permissions="write" permissions="write"
asset={info.row.original.commissionTransfer} asset={info.row.original.commissionTransfer}
paymentId={info.row.original.id} paymentId={info.row.original.id}