Improve ProductSelector response handling and UI

Enhanced the ProductSelector to robustly handle different response shapes from the products API, preventing runtime errors. Also adjusted dropdown and scroll area sizing for better UI consistency.
This commit is contained in:
NotII
2025-09-23 22:41:27 +01:00
parent 74b7aa4877
commit be952509a1
2 changed files with 14 additions and 6 deletions

View File

@@ -50,7 +50,15 @@ export default function ProductSelector({
setLoading(true); setLoading(true);
try { try {
const response = await fetchClient('/promotions/products/all'); const response = await fetchClient('/promotions/products/all');
setProducts(response); // Ensure we only set an array to state to avoid runtime errors
if (Array.isArray(response)) {
setProducts(response);
} else if (response && Array.isArray((response as any).products)) {
setProducts((response as any).products);
} else {
console.error('Unexpected products response shape:', response);
setProducts([]);
}
} catch (error) { } catch (error) {
console.error('Error fetching products:', error); console.error('Error fetching products:', error);
} finally { } finally {
@@ -119,8 +127,8 @@ export default function ProductSelector({
{/* Dropdown using absolute positioning within relative container */} {/* Dropdown using absolute positioning within relative container */}
{open && ( {open && (
<div <div
className="absolute top-full left-0 right-0 z-50 mt-1 bg-background border border-border rounded-md shadow-lg max-h-64 overflow-hidden" className="absolute top-full left-0 right-0 z-50 mt-1 bg-background border border-border rounded-md shadow-lg"
style={{ minWidth: '300px' }} style={{ minWidth: '300px', maxHeight: '400px' }}
> >
{/* Search Header */} {/* Search Header */}
<div className="flex items-center gap-2 p-3 border-b bg-muted/30"> <div className="flex items-center gap-2 p-3 border-b bg-muted/30">
@@ -135,7 +143,7 @@ export default function ProductSelector({
</div> </div>
{/* Products List */} {/* Products List */}
<ScrollArea className="max-h-48"> <ScrollArea className="h-[300px]">
{loading ? ( {loading ? (
<div className="p-4 text-center text-sm text-muted-foreground"> <div className="p-4 text-center text-sm text-muted-foreground">
Loading products... Loading products...

View File

@@ -1,4 +1,4 @@
{ {
"commitHash": "8554481", "commitHash": "74b7aa4",
"buildTime": "2025-09-17T17:02:11.044Z" "buildTime": "2025-09-23T12:09:08.230Z"
} }