chris/beachPartyBalloons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix CartDrawer build error: move grouping logic out of JSX

Browse Source 
The IIFE with an inline type declaration inside a JSX ternary didn't
compile. Pulled renderEntry and cartGroups into plain variables above
the cartBody const so the JSX stays clean.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chris 2026-06-18 12:08:34 -04:00
parent c72699da16
commit 7b7c3efb65
1 changed files with 102 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
estore/src/components/CartDrawer.tsx
View File

@ -405,28 +405,6 @@ export default function CartDrawer() {
// ── Step content ───────────────────────────────────────────────────────────
const cartBody = (
<>
{entries.length === 0 ? (
<p className="has-text-grey has-text-centered" style={{ marginTop: '3rem' }}>
Your order is empty.<br />Pick something from the shop!
</p>
) : (() => {
// Build render groups: bouquet entries grouped, regular entries standalone
type RenderGroup =
| { kind: 'single'; entry: CartEntry }
| { kind: 'bouquet'; groupId: string; items: CartEntry[] }
const groups: RenderGroup[] = []
const seen = new Set<string>()
entries.forEach((e) => {
if (!e.bouquetGroupId) {
groups.push({ kind: 'single', entry: e })
} else if (!seen.has(e.bouquetGroupId)) {
seen.add(e.bouquetGroupId)
groups.push({ kind: 'bouquet', groupId: e.bouquetGroupId, items: entries.filter((x) => x.bouquetGroupId === e.bouquetGroupId) })
}
})
const renderEntry = (entry: CartEntry, inBouquet = false) => (
<div key={entry.cartId} style={inBouquet ? { paddingBottom: '0.5rem', marginBottom: '0.5rem', borderBottom: '1px dashed #e0d8cc' } : { borderBottom: '1px solid #e6dfc8', paddingBottom: '0.75rem', marginBottom: '0.75rem' }}>
<div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
@ -499,9 +477,29 @@ export default function CartDrawer() {
</div>
)
return groups.map((group) => {
if (group.kind === 'single') return renderEntry(group.entry)
const cartGroups: Array<
| { kind: 'single'; entry: CartEntry }
| { kind: 'bouquet'; groupId: string; items: CartEntry[] }
> = []
const seenGroups = new Set<string>()
entries.forEach((e) => {
if (!e.bouquetGroupId) {
cartGroups.push({ kind: 'single', entry: e })
} else if (!seenGroups.has(e.bouquetGroupId)) {
seenGroups.add(e.bouquetGroupId)
cartGroups.push({ kind: 'bouquet', groupId: e.bouquetGroupId, items: entries.filter((x) => x.bouquetGroupId === e.bouquetGroupId) })
}
})
const cartBody = (
<>
{entries.length === 0 ? (
<p className="has-text-grey has-text-centered" style={{ marginTop: '3rem' }}>
Your order is empty.<br />Pick something from the shop!
</p>
) : (
cartGroups.map((group) => {
if (group.kind === 'single') return renderEntry(group.entry)
const bouquetTotal = group.items.reduce((sum, e) => sum + entryUnitPrice(e) * e.quantity, 0)
return (
<div key={group.groupId} style={{ border: '1px solid #b2e0e4', borderRadius: 10, padding: '0.75rem', marginBottom: '0.75rem', background: '#f7fdfd' }}>
@ -519,7 +517,6 @@ export default function CartDrawer() {
</div>
)
})
})()
)}
</>
)