Function PackItem

frontend/src/app/components/PackList/PackItem.tsx:17–67

({ pack, currentUserId, deletePack })

}

const PackItem: React.FC<Props & RouteComponentProps> = ({ pack, currentUserId, deletePack }) => {
    const { id, title } = pack;

    const metadata = () => {
        const { duration, duration_unit, season, itemCount } = pack;
        const durationDisplay = !!duration && <div>{duration} {duration_unit}</div>;
        const seasonDisplay = !!season && <div>{season}</div>;
        return (
            <Metadata>
                <div>{itemCount} Items</div>
                {durationDisplay}
                {seasonDisplay}
            </Metadata>
        )
    };

    const handleDelete = () => {
        if (deletePack) {
            deletePack(pack.id);
        }
    };

    const userOptions = () => {
        if (pack.user.id !== currentUserId) {
            return null;
        }

        return (
            <UserOptions>
                <Link to={getPackPath(id, title)}>view</Link>
                <Link to={`/pack/${id}`}>edit</Link>
                <Popconfirm title="Are you sure you want to delete this pack?"
                            okText="Delete"
                            placement="bottom"
                            onConfirm={handleDelete}>
                    <a href="#" className="remove-link">delete</a>
                </Popconfirm>
            </UserOptions>
        )
    };

    return (
        <PackWrapper>
            <Link to={getPackPath(id, title)} className="pack-link">
                {title}
            </Link>
            {metadata()}
            {userOptions()}
        </PackWrapper>
    )
};

export default withRouter(PackItem);