web2019/static/js/shop/CrateList.jsx

45 lines
1.7 KiB
React
Raw Normal View History

import React from 'react'
import {Accordion} from "react-bootstrap";
2023-12-12 18:21:09 +08:00
import {Crate} from "./Crate";
import {useShopStore} from "./shop_store";
// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";
export function CrateList() {
// #!render_count
const renderCount = useRenderCount();
const crates = useShopStore((state) => state.crates,
(a, b) => a.length === b.length);
const active_crate = useShopStore((state) => state.active_crate);
const onAddCrate = useShopStore((state) => state.newCrate);
const setActiveCrate = useShopStore((state) => state.setActiveCrate);
const onSelectHandler = (e) => {
// if e === null, that means that an accordion item was collapsed rather than expanded. e will be non-null when an item is expanded
if (e !== null)
setActiveCrate(e);
else
setActiveCrate("")
};
// #!render_count
console.log("CrateList renders: ", renderCount)
return (
<Accordion id="accordion_crates" flush activeKey={active_crate} onSelect={onSelectHandler}>
{crates.map((crate, index) =>
<Accordion.Item eventKey={crate.id} key={"accordion"+crate.id} className="accordion_crates_item">
<Accordion.Header>{crate.name ? crate.name : <>Crate #{`${index}`}</>} </Accordion.Header>
<Accordion.Body>
<Crate crate_index={index}/>
</Accordion.Body>
</Accordion.Item>
)}
<Accordion.Item eventKey="last" id="accordion_crates_add">
<Accordion.Header onClick={onAddCrate}>
Add new crate
</Accordion.Header>
</Accordion.Item>
</Accordion>)
}