45 lines
1.7 KiB
JavaScript
45 lines
1.7 KiB
JavaScript
import React from 'react'
|
|
import {Accordion} from "react-bootstrap";
|
|
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>)
|
|
} |