forked from M-Labs/web2019
Move out subcomponents of ProductItem
This improves maintenance as it reduces complexity of the ProductItem component and allows seeing components in react dev tools Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
parent
c7b0d5568c
commit
52c05c2e2a
|
@ -6,9 +6,33 @@ import {useShopStore} from "./shop_store";
|
||||||
// #!render_count
|
// #!render_count
|
||||||
import {useRenderCount} from "@uidotdev/usehooks";
|
import {useRenderCount} from "@uidotdev/usehooks";
|
||||||
|
|
||||||
|
|
||||||
|
function DatasheetLink({datasheet_file, datasheet_name}) {
|
||||||
|
return datasheet_file && datasheet_name && (<div className="ds">
|
||||||
|
<span className='doc-icon'></span>
|
||||||
|
<a href={datasheet_file} target="_blank" rel="noopener noreferrer">
|
||||||
|
{datasheet_name}
|
||||||
|
</a>
|
||||||
|
</div>)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardSpecs({specs}) {
|
||||||
|
return specs && specs.length > 0 && (<ul>
|
||||||
|
{specs.map((spec, index) =>
|
||||||
|
<li key={index}>{spec}</li>
|
||||||
|
)}
|
||||||
|
</ul>)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AddButton({onAdd}) {
|
||||||
|
return <button onClick={onAdd}>
|
||||||
|
<img src="/images/shop/icon-add.svg" alt="add"/>
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Component that renders a product.
|
* Component that renders a product.
|
||||||
* Used in the aside (e.g catalog of product)
|
* Used in the aside (e.g catalog of products)
|
||||||
*/
|
*/
|
||||||
export function ProductItem({card_index}) {
|
export function ProductItem({card_index}) {
|
||||||
// #!render_count
|
// #!render_count
|
||||||
|
@ -16,33 +40,14 @@ export function ProductItem({card_index}) {
|
||||||
|
|
||||||
const getCardDescription = useShopStore((state) => state.getCardDescription);
|
const getCardDescription = useShopStore((state) => state.getCardDescription);
|
||||||
const currency = useShopStore((state) => state.currency);
|
const currency = useShopStore((state) => state.currency);
|
||||||
const onAddCard = useShopStore((state) => state.addCardFromCatalog);
|
const addCardFromCatalog = useShopStore((state) => state.addCardFromCatalog);
|
||||||
const card = getCardDescription(card_index);
|
const card = getCardDescription(card_index);
|
||||||
|
|
||||||
// #!render_count
|
// #!render_count
|
||||||
console.log("ProductItem renders: ", renderCount)
|
console.log("ProductItem renders: ", renderCount)
|
||||||
|
|
||||||
|
|
||||||
const render_specs = (card.specs && card.specs.length > 0 && (
|
|
||||||
<ul>
|
|
||||||
{card.specs.map((spec, index) =>
|
|
||||||
<li key={index}>{spec}</li>
|
|
||||||
)}
|
|
||||||
</ul>
|
|
||||||
));
|
|
||||||
|
|
||||||
const render_datasheet_link = (card.datasheet_file && card.datasheet_name && (
|
|
||||||
<div className="ds">
|
|
||||||
<span className='doc-icon'></span>
|
|
||||||
<a href={card.datasheet_file} target="_blank" rel="noopener noreferrer">
|
|
||||||
{card.datasheet_name}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
));
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="productItem">
|
<section className="productItem">
|
||||||
|
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<h3 style={{'marginBottom': card.name_codename ? '5px' : '20px'}}>{card.name_number} {card.name}</h3>
|
<h3 style={{'marginBottom': card.name_codename ? '5px' : '20px'}}>{card.name_number} {card.name}</h3>
|
||||||
{card.name_codename ? (
|
{card.name_codename ? (
|
||||||
|
@ -51,16 +56,13 @@ export function ProductItem({card_index}) {
|
||||||
|
|
||||||
<div className="price">{`${currency} ${formatMoney(card.price)}`}</div>
|
<div className="price">{`${currency} ${formatMoney(card.price)}`}</div>
|
||||||
|
|
||||||
{render_specs}
|
<CardSpecs specs={card.specs}/>
|
||||||
|
|
||||||
{render_datasheet_link}
|
<DatasheetLink datasheet_file={card.datasheet_file} datasheet_name={card.datasheet_name}/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="content">
|
<div className="content">
|
||||||
|
<AddButton onAdd={() => addCardFromCatalog(null, card_index, null)} />
|
||||||
<button onClick={() => onAddCard(null, card_index, null)}>
|
|
||||||
<img src="/images/shop/icon-add.svg" alt="add"/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<Draggable draggableId={card.id + card_index} index={card_index}>
|
<Draggable draggableId={card.id + card_index} index={card_index}>
|
||||||
{(provided, snapshot) => (
|
{(provided, snapshot) => (
|
||||||
|
@ -83,10 +85,7 @@ export function ProductItem({card_index}) {
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)}
|
)}
|
||||||
</Draggable>
|
</Draggable>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
||||||
}
|
}
|
Loading…
Reference in New Issue