occheung/web2019
1
0
Fork 0
forked from M-Labs/web2019
Code Issues Pull Requests Projects Releases Wiki Activity

Move out subcomponents of ProductItem

Browse Source 
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:
Egor Savkin 2024-07-11 17:30:34 +08:00
parent c7b0d5568c
commit 52c05c2e2a
1 changed files with 29 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
static/js/shop/ProductItem.jsx
View File

@ -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>
); );
} }