forked from M-Labs/web2019
115 lines
4.2 KiB
JavaScript
115 lines
4.2 KiB
JavaScript
import React from 'react'
|
|
import {Draggable} from "@hello-pangea/dnd";
|
|
import {compareObjectsEmptiness, productStyle} from "./utils";
|
|
import {Resources} from "./Resources";
|
|
import {CardWarnings} from "./CardWarnings";
|
|
import {useShopStore} from "./shop_store";
|
|
import {OptionsDialogWrapper} from "./OptionsWrapper";
|
|
|
|
// #!render_count
|
|
import {useRenderCount} from "@uidotdev/usehooks";
|
|
|
|
/**
|
|
* Component that renders a product.
|
|
* Used in the crate
|
|
*/
|
|
export function ProductCartItem({card_index, crate_index, first, last}) {
|
|
// #!render_count
|
|
const renderCount = useRenderCount();
|
|
|
|
|
|
const card = useShopStore((state) => state.crates[crate_index].items[card_index],
|
|
(a, b) => a.id === b.id);
|
|
|
|
const card_show_warnings = useShopStore(state => state.crates[crate_index].items[card_index].show_warnings, compareObjectsEmptiness);
|
|
const card_counted_resources = useShopStore(state => state.crates[crate_index].items[card_index].counted_resources, compareObjectsEmptiness);
|
|
|
|
const highlighted = useShopStore((state) => state.crates[crate_index].id === state.highlighted.crate && card_index === state.highlighted.card);
|
|
const crate_id = useShopStore((state) => state.crates[crate_index].id);
|
|
const setHighlight = useShopStore((state) => state.highlightCard);
|
|
const removeHighlight = useShopStore((state) => state.highlightReset);
|
|
const onCardRemove = useShopStore((state) => state.deleteCard);
|
|
|
|
// #!render_count
|
|
console.log("ProductCartItem renders: ", renderCount)
|
|
|
|
|
|
const options = card && card.options && card.options.length > 0;
|
|
const warnings = card_show_warnings && card_show_warnings.length > 0;
|
|
const resources = card_counted_resources && card_counted_resources.length > 0;
|
|
|
|
return (
|
|
<Draggable draggableId={card.id} index={card_index}>
|
|
|
|
{(provided, snapshot) => (
|
|
<div
|
|
ref={provided.innerRef}
|
|
{...provided.draggableProps}
|
|
{...provided.dragHandleProps}
|
|
style={{
|
|
...productStyle(
|
|
provided.draggableProps.style,
|
|
snapshot,
|
|
true,
|
|
!!highlighted,
|
|
false,
|
|
true
|
|
)
|
|
}}
|
|
onMouseEnter={() => setHighlight(crate_id, card_index)}
|
|
onMouseLeave={removeHighlight}
|
|
>
|
|
|
|
{/* warning container */}
|
|
|
|
<div className="progress-container warning d-flex justify-content-evenly">
|
|
{warnings &&
|
|
(<CardWarnings crate_index={crate_index} card_index={card_index} />)
|
|
}
|
|
|
|
{options && (
|
|
<OptionsDialogWrapper
|
|
crate_index={crate_index}
|
|
card_index={card_index}
|
|
first={first}
|
|
last={last}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<h6>{card.name_number}</h6>
|
|
|
|
<div
|
|
onMouseEnter={() => setHighlight(crate_id, card_index)}
|
|
onClick={() => setHighlight(crate_id, card_index)}
|
|
>
|
|
|
|
<img
|
|
className='item-cart'
|
|
src={card.image}/>
|
|
</div>
|
|
|
|
{/* remove container */}
|
|
<div
|
|
style={{'display': highlighted ? 'flex' : 'none'}}
|
|
className="overlayRemove"
|
|
onClick={() => onCardRemove(crate_id, card_index)}>
|
|
|
|
<img src="/images/shop/icon-remove.svg" alt="rm"/>
|
|
|
|
<p>Remove</p>
|
|
</div>
|
|
|
|
{/* progression container */}
|
|
{resources && (
|
|
<Resources crate_index={crate_index} card_index={card_index} />
|
|
)}
|
|
|
|
|
|
</div>
|
|
)}
|
|
|
|
</Draggable>
|
|
);
|
|
}
|