Refactor: Replace barcodeImage with hub3aText in BillEditForm
- Changed from storing base64-encoded bitmap to decoded HUB-3A payment string - Implemented migration logic to convert legacy barcodeImage to hub3aText on component mount - Updated state management to use hub3aText instead of barcodeImage - Replaced image display with Pdf417Barcode component for consistent rendering - Added error handling for migration promise - Updated useEffect dependencies to prevent stale closures - More efficient storage and easier to work with payment data going forward 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Knee Cola
@@ -2,17 +2,18 @@
|
||||
|
||||
import { DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
|
||||
import { Bill, BilledTo, BillingLocation } from "../lib/db-types";
|
||||
import React, { FC } from "react";
|
||||
import React, { FC, useEffect } from "react";
|
||||
import { useFormState } from "react-dom";
|
||||
import { updateOrAddBill } from "../lib/actions/billActions";
|
||||
import Link from "next/link";
|
||||
import { formatYearMonth } from "../lib/format";
|
||||
import { DecodeResult, findDecodePdf417 } from "../lib/pdf/barcodeDecoder";
|
||||
import { decodeFromImage, DecodeResult, findDecodePdf417 } from "../lib/pdf/barcodeDecoder";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import { Pdf417Barcode } from "./Pdf417Barcode";
|
||||
|
||||
// Next.js does not encode an utf-8 file name correctly when sending a form with a file attachment
|
||||
// This is a workaround for that
|
||||
const updateOrAddBillMiddleware = (locationId: string, billId:string|undefined, billYear:number|undefined, billMonth:number|undefined, prevState:any, formData: FormData) => {
|
||||
const updateOrAddBillMiddleware = (locationId: string, billId: string | undefined, billYear: number | undefined, billMonth: number | undefined, prevState: any, formData: FormData) => {
|
||||
// URL encode the file name of the attachment so it is correctly sent to the server
|
||||
const billAttachment = formData.get('billAttachment') as File;
|
||||
formData.set('billAttachment', billAttachment, encodeURIComponent(billAttachment.name));
|
||||
@@ -24,26 +25,46 @@ export interface BillEditFormProps {
|
||||
bill?: Bill,
|
||||
}
|
||||
|
||||
export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
|
||||
export const BillEditForm: FC<BillEditFormProps> = ({ location, bill }) => {
|
||||
|
||||
const t = useTranslations("bill-edit-form");
|
||||
const locale = useLocale();
|
||||
|
||||
const { _id: billID, name, paid, billedTo = BilledTo.Tenant, attachment, notes, payedAmount: initialPayedAmount, barcodeImage: initialBarcodeImage } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
|
||||
const { _id: billID, name, paid, billedTo = BilledTo.Tenant, attachment, notes, payedAmount: initialPayedAmount } = bill ?? { _id: undefined, name: "", paid: false, notes: "" };
|
||||
|
||||
const { yearMonth:{year: billYear, month: billMonth}, _id: locationID } = location;
|
||||
const { yearMonth: { year: billYear, month: billMonth }, _id: locationID } = location;
|
||||
|
||||
const initialState = { message: null, errors: {} };
|
||||
|
||||
const handleAction = updateOrAddBillMiddleware.bind(null, locationID, billID, billYear, billMonth);
|
||||
|
||||
const [ isScanningPDF, setIsScanningPDF ] = React.useState<boolean>(false);
|
||||
const [ state, dispatch ] = useFormState(handleAction, initialState);
|
||||
const [ isPaid, setIsPaid ] = React.useState<boolean>(paid);
|
||||
const [ billedToValue, setBilledToValue ] = React.useState<BilledTo>(billedTo);
|
||||
const [ payedAmount, setPayedAmount ] = React.useState<string>(initialPayedAmount ? `${initialPayedAmount/100}` : "" );
|
||||
const [ barcodeImage, setBarcodeImage ] = React.useState<string | undefined>(initialBarcodeImage);
|
||||
const [ barcodeResults, setBarcodeResults ] = React.useState<Array<DecodeResult> | null>(null);
|
||||
const [isScanningPDF, setIsScanningPDF] = React.useState<boolean>(false);
|
||||
const [state, dispatch] = useFormState(handleAction, initialState);
|
||||
const [isPaid, setIsPaid] = React.useState<boolean>(paid);
|
||||
const [billedToValue, setBilledToValue] = React.useState<BilledTo>(billedTo);
|
||||
const [payedAmount, setPayedAmount] = React.useState<string>(initialPayedAmount ? `${initialPayedAmount / 100}` : "");
|
||||
|
||||
// legacy support - to be removed
|
||||
const [hub3aText, setHub3aText] = React.useState<string | undefined>(bill?.hub3aText);
|
||||
const [barcodeResults, setBarcodeResults] = React.useState<Array<DecodeResult> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// migrating the legacy `barcodeImage` field to `hub3aText`
|
||||
// by converting it to `hub3aText`
|
||||
if (!hub3aText && bill?.barcodeImage) {
|
||||
decodeFromImage(bill.barcodeImage).then(results => {
|
||||
if (results && results.length > 0) {
|
||||
const {
|
||||
hub3aText: decodedHub3aText,
|
||||
} = results[0];
|
||||
|
||||
setHub3aText(decodedHub3aText);
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('Failed to migrate barcodeImage to hub3aText:', error);
|
||||
});
|
||||
}
|
||||
}, [bill?.barcodeImage, hub3aText]);
|
||||
|
||||
|
||||
const billedTo_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@@ -62,43 +83,41 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
|
||||
setIsScanningPDF(true);
|
||||
|
||||
setPayedAmount("");
|
||||
setBarcodeImage(undefined);
|
||||
setBarcodeResults(null);
|
||||
|
||||
const results = await findDecodePdf417(event);
|
||||
|
||||
if(results && results.length > 0) {
|
||||
if (results && results.length > 0) {
|
||||
|
||||
if(results.length === 1) {
|
||||
if (results.length === 1) {
|
||||
const {
|
||||
barcodeImage,
|
||||
hub3aText,
|
||||
billInfo
|
||||
} = results[0];
|
||||
|
||||
setPayedAmount(`${billInfo.amount/100}`);
|
||||
setBarcodeImage(barcodeImage);
|
||||
setPayedAmount(`${billInfo.amount / 100}`);
|
||||
setHub3aText(hub3aText);
|
||||
} else {
|
||||
setPayedAmount("");
|
||||
setBarcodeImage(undefined);
|
||||
setBarcodeResults(results);
|
||||
setHub3aText(undefined);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
setIsScanningPDF(false);
|
||||
}
|
||||
|
||||
const handleBarcodeSelectClick = (result: DecodeResult) => {
|
||||
setPayedAmount(`${result.billInfo.amount/100}`);
|
||||
setBarcodeImage(result.barcodeImage);
|
||||
setPayedAmount(`${result.billInfo.amount / 100}`);
|
||||
setHub3aText(result.hub3aText);
|
||||
setBarcodeResults(null);
|
||||
}
|
||||
|
||||
return(
|
||||
return (
|
||||
<div className="card card-compact card-bordered bg-base-100 shadow-s">
|
||||
<div className="card-body">
|
||||
<h2 className="card-title">{`${formatYearMonth(location.yearMonth)} ${location.name}`}</h2>
|
||||
<form action={ dispatch }>
|
||||
<form action={dispatch}>
|
||||
{
|
||||
// don't show the delete button if we are adding a new bill
|
||||
bill ?
|
||||
@@ -149,7 +168,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
|
||||
<ul className="list-none">
|
||||
{barcodeResults.map((result, index) => (
|
||||
<li key={index} className="cursor-pointer mt-3" onClick={() => handleBarcodeSelectClick(result)}>
|
||||
👉 { result.billInfo.description }
|
||||
👉 {result.billInfo.description}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -188,12 +207,12 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="barcodeImage" value={barcodeImage} />
|
||||
<input type="hidden" name="hub3aText" value={hub3aText} />
|
||||
{
|
||||
barcodeImage ?
|
||||
hub3aText ?
|
||||
<div className="form-control p-1">
|
||||
<label className="cursor-pointer label p-2 grow bg-white">
|
||||
<img src={barcodeImage} className="grow sm:max-w-[350px]" alt="2D Barcode" />
|
||||
<Pdf417Barcode hub3aText={hub3aText} />
|
||||
</label>
|
||||
<p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p>
|
||||
</div> : null
|
||||
|
||||
Reference in New Issue
Block a user