30 lines
1.1 KiB
JavaScript
30 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
import {useShopStore} from "./shop_store";
|
|
import {useRenderCount} from "@uidotdev/usehooks";
|
|
|
|
/**
|
|
* Component that displays crate modes
|
|
*/
|
|
export function CrateMode({crate_index}) {
|
|
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);
|
|
|
|
console.log("CrateMode renders: ", renderCount)
|
|
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>
|
|
);
|
|
} |