web2019/static/js/shop/CrateList.jsx

35 lines
1.2 KiB
JavaScript

import React from 'react'
import {Accordion} from "react-bootstrap";
import {Crate} from "./Crate";
import {useShopStore} from "./shop_store";
export function CrateList() {
const {
crates,
active_crate,
onAddCrate,
setActiveCrate,
} = useShopStore(state=> ({
crates: state.crates,
active_crate: state.active_crate,
onAddCrate: state.newCrate,
setActiveCrate: state.setActiveCrate,
}));
return (
<Accordion defaultActiveKey={active_crate}>
{crates.map((crate, index) =>
<Accordion.Item eventKey={crate.id} key={"accordion"+crate.id} >
<Accordion.Header onClick={() => setActiveCrate(crate.id)}>Crate #{`${index}`}</Accordion.Header>
<Accordion.Body>
<Crate crate_index={index}/>
</Accordion.Body>
</Accordion.Item>
)}
<Accordion.Item eventKey="last">
<Accordion.Header onClick={onAddCrate}>
Add new crate
<img src="/images/shop/icon-add.svg" alt="add" width="32px"/>
</Accordion.Header>
</Accordion.Item>
</Accordion>)
}