web2019/static/js/shop/CrateWarnings.jsx

24 lines
885 B
JavaScript

import React from "react";
import {LevelUI} from "./warnings";
import {useShopStore} from "./shop_store";
import {useRenderCount} from "@uidotdev/usehooks";
const compareArrays = (a, b) =>
a.length === b.length &&
a.every((element, index) => element.id === b[index].id);
export function CrateWarnings({crate_index}) {
const renderCount = useRenderCount();
const crate_warnings = useShopStore(state => (state.crates[crate_index].warnings), compareArrays)
console.log("CrateWarnings renders: ", renderCount)
// TODO UI/colors
return (
<div className="crate-info">
{crate_warnings.map((rule, index) => (
<p key={index} className="rule" style={{'color': LevelUI(rule.level).color}}>
<img src={LevelUI(rule.level).icon} /> <i>{rule.message}</i>
</p>
))}
</div>
)
}