Function Items

frontend/src/app/Pack/Items.tsx:20–99

({ items, unit })

}

const Items: React.FC<ItemsProps> = ({ items, unit }) => {
    const categories = getCategories(items);
    const weightByCategory = getWeightByCategory(unit, items);

    const itemDesc = (url?: string, product_name?: string) => {
        if (product_name && !url) {
            return product_name;
        }

        if (url) {
            const linkLabel = product_name || 'view item';
            return <a href={url} target="_blank">{linkLabel}</a>
        }

        return null;
    };

    return (
        <ItemList>
            {categories.map(cat => {
                const catItems = items.filter(i => i.categoryId === cat.id);
                const catWeight = weightByCategory.find(c => c.id === cat.id);

                const Header = (
                    <>
                        <h3>{cat.name}</h3>
                        <strong>{catWeight!.total.label} {unit}</strong>
                    </>
                )
                return (
                    <CategorySection key={cat.id}>
                        <ExpandablePanel Header={Header}>
                        {catItems.map(item => {
                            const { name, product_name, product_url, packItem: { notes, quantity, worn } } = item;
                            const { label } = getItemWeight(unit, item);
                            const NotesRow = notes && (
                                <ItemNotes>
                                    {notes}
                                </ItemNotes>
                            );
                            return (
                                <Row gutter={16} key={item.id} className="item-row">
                                    <Col span={18}>
                                        <ItemName>
                                            {name}
                                        </ItemName>
                                        <ItemDescription>
                                            {itemDesc(product_url, product_name)}
                                        </ItemDescription>
                                        <ItemQuantity>
                                            Quantity: {quantity}
                                        </ItemQuantity>
                                        {NotesRow}
                                    </Col>
                                    <Col span={2} className="align-right">
                                        {worn && (
                                            <WornIndicator className='active display'>
                                                <Tooltip title="Worn items are excluded from pack weight"