web2019/static/js/shop/CrateMode.jsx

38 lines
1.3 KiB
React
Raw Normal View History

import React from 'react';
import {useShopStore} from "./shop_store";
// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";
/**
* Component that displays crate modes
*/
export function CrateMode({crate_index}) {
// #!render_count
const renderCount = useRenderCount();
const modes_order = useShopStore((state) => state.modes_order);
const crate_modes = useShopStore((state) => state.crate_modes);
const crate = useShopStore((state) => state.crates[crate_index],
(a, b) => a.id === b.id && a.crate_mode === b.crate_mode);
const setMode = useShopStore((state) => state.setCrateMode);
// #!render_count
console.log("CrateMode renders: ", renderCount)
if (modes_order.includes(crate.crate_mode)) {
return (
<div className="crate-mode">
{modes_order.map((mode_name, _) => (
<a
key={mode_name}
className={(crate.crate_mode === mode_name ? 'active' : '')}
onClick={() => setMode(crate.id, mode_name)}
href="#"
role="button">{crate_modes[mode_name].name}</a>
))}
</div>
);
} else {
return <div className="crate-mode"></div>
}
}