knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Replace barcodeImage with hub3aText in BillEditForm

Browse Source 
- 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
2025-11-23 08:24:08 +01:00
parent a254ca5430
commit 278976b75b
1 changed files with 203 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
app/ui/BillEditForm.tsx
View File

@@ -2,17 +2,18 @@
import { DocumentIcon, TrashIcon } from "@heroicons/react/24/outline"; import { DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
import { Bill, BilledTo, BillingLocation } from "../lib/db-types"; 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 { useFormState } from "react-dom";
import { updateOrAddBill } from "../lib/actions/billActions"; import { updateOrAddBill } from "../lib/actions/billActions";
import Link from "next/link"; import Link from "next/link";
import { formatYearMonth } from "../lib/format"; 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 { 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 // 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 // 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 // URL encode the file name of the attachment so it is correctly sent to the server
const billAttachment = formData.get('billAttachment') as File; const billAttachment = formData.get('billAttachment') as File;
formData.set('billAttachment', billAttachment, encodeURIComponent(billAttachment.name)); formData.set('billAttachment', billAttachment, encodeURIComponent(billAttachment.name));
@@ -24,26 +25,46 @@ export interface BillEditFormProps {
bill?: Bill, bill?: Bill,
} }
export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => { export const BillEditForm: FC<BillEditFormProps> = ({ location, bill }) => {
const t = useTranslations("bill-edit-form"); const t = useTranslations("bill-edit-form");
const locale = useLocale(); 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 initialState = { message: null, errors: {} };
const handleAction = updateOrAddBillMiddleware.bind(null, locationID, billID, billYear, billMonth); const handleAction = updateOrAddBillMiddleware.bind(null, locationID, billID, billYear, billMonth);
const [ isScanningPDF, setIsScanningPDF ] = React.useState<boolean>(false); const [isScanningPDF, setIsScanningPDF] = React.useState<boolean>(false);
const [ state, dispatch ] = useFormState(handleAction, initialState); const [state, dispatch] = useFormState(handleAction, initialState);
const [ isPaid, setIsPaid ] = React.useState<boolean>(paid); const [isPaid, setIsPaid] = React.useState<boolean>(paid);
const [ billedToValue, setBilledToValue ] = React.useState<BilledTo>(billedTo); const [billedToValue, setBilledToValue] = React.useState<BilledTo>(billedTo);
const [ payedAmount, setPayedAmount ] = React.useState<string>(initialPayedAmount ? `${initialPayedAmount/100}` : "" ); 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); // 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>) => { const billedTo_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -62,43 +83,41 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
setIsScanningPDF(true); setIsScanningPDF(true);
setPayedAmount(""); setPayedAmount("");
setBarcodeImage(undefined);
setBarcodeResults(null); setBarcodeResults(null);
const results = await findDecodePdf417(event); const results = await findDecodePdf417(event);
if(results && results.length > 0) { if (results && results.length > 0) {
if(results.length === 1) { if (results.length === 1) {
const { const {
barcodeImage, hub3aText,
billInfo billInfo
} = results[0]; } = results[0];
setPayedAmount(`${billInfo.amount/100}`); setPayedAmount(`${billInfo.amount / 100}`);
setBarcodeImage(barcodeImage); setHub3aText(hub3aText);
} else { } else {
setPayedAmount(""); setPayedAmount("");
setBarcodeImage(undefined);
setBarcodeResults(results); setBarcodeResults(results);
setHub3aText(undefined);
} }
} }
setIsScanningPDF(false); setIsScanningPDF(false);
} }
const handleBarcodeSelectClick = (result: DecodeResult) => { const handleBarcodeSelectClick = (result: DecodeResult) => {
setPayedAmount(`${result.billInfo.amount/100}`); setPayedAmount(`${result.billInfo.amount / 100}`);
setBarcodeImage(result.barcodeImage); setHub3aText(result.hub3aText);
setBarcodeResults(null); setBarcodeResults(null);
} }
return( return (
<div className="card card-compact card-bordered bg-base-100 shadow-s"> <div className="card card-compact card-bordered bg-base-100 shadow-s">
<div className="card-body"> <div className="card-body">
<h2 className="card-title">{`${formatYearMonth(location.yearMonth)} ${location.name}`}</h2> <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 // don't show the delete button if we are adding a new bill
bill ? bill ?
@@ -149,7 +168,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
<ul className="list-none"> <ul className="list-none">
{barcodeResults.map((result, index) => ( {barcodeResults.map((result, index) => (
<li key={index} className="cursor-pointer mt-3" onClick={() => handleBarcodeSelectClick(result)}> <li key={index} className="cursor-pointer mt-3" onClick={() => handleBarcodeSelectClick(result)}>
👉 { result.billInfo.description } 👉 {result.billInfo.description}
</li> </li>
))} ))}
</ul> </ul>
@@ -188,12 +207,12 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
))} ))}
</div> </div>
<input type="hidden" name="barcodeImage" value={barcodeImage} /> <input type="hidden" name="hub3aText" value={hub3aText} />
{ {
barcodeImage ? hub3aText ?
<div className="form-control p-1"> <div className="form-control p-1">
<label className="cursor-pointer label p-2 grow bg-white"> <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> </label>
<p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p> <p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p>
</div> : null </div> : null