Harden components: add ErrorBoundary, null-safe rendering
This commit is contained in:
@@ -17,7 +17,7 @@ function SmeltingPanel() {
|
||||
const furnaceStatus = inventory.furnaceStatus || {};
|
||||
const furnaceEntries = Object.entries(furnaceStatus);
|
||||
|
||||
const smeltableEntries = Object.entries(smeltable);
|
||||
const smeltableEntries = Object.entries(smeltable || {});
|
||||
|
||||
return (
|
||||
<div className="smelting-panel">
|
||||
@@ -44,31 +44,31 @@ function SmeltingPanel() {
|
||||
{furnaceEntries.length > 0 ? (
|
||||
<div className="furnace-grid">
|
||||
{furnaceEntries.map(([name, status]) => (
|
||||
<div key={name} className={`furnace-card ${status.active ? 'active' : 'idle'}`}>
|
||||
<div className="furnace-name">{name.replace(/^minecraft:/, '')}</div>
|
||||
<div key={name} className={`furnace-card ${(status && status.active) ? 'active' : 'idle'}`}>
|
||||
<div className="furnace-name">{(name || '').replace(/^minecraft:/, '')}</div>
|
||||
<div className="furnace-status">
|
||||
{status.input && (
|
||||
{status && status.input && (
|
||||
<div className="furnace-slot">
|
||||
<span className="slot-label">In:</span>
|
||||
<ItemIcon itemName={status.input.name} size={16} />
|
||||
<span>{status.input.count || 0}</span>
|
||||
</div>
|
||||
)}
|
||||
{status.fuel && (
|
||||
{status && status.fuel && (
|
||||
<div className="furnace-slot">
|
||||
<span className="slot-label">Fuel:</span>
|
||||
<ItemIcon itemName={status.fuel.name} size={16} />
|
||||
<span>{status.fuel.count || 0}</span>
|
||||
</div>
|
||||
)}
|
||||
{status.output && (
|
||||
{status && status.output && (
|
||||
<div className="furnace-slot">
|
||||
<span className="slot-label">Out:</span>
|
||||
<ItemIcon itemName={status.output.name} size={16} />
|
||||
<span>{status.output.count || 0}</span>
|
||||
</div>
|
||||
)}
|
||||
{!status.input && !status.fuel && !status.output && (
|
||||
{(!status || (!status.input && !status.fuel && !status.output)) && (
|
||||
<span className="furnace-empty">Empty</span>
|
||||
)}
|
||||
</div>
|
||||
@@ -90,6 +90,8 @@ function SmeltingPanel() {
|
||||
<div className="recipe-list">
|
||||
{smeltableEntries.map(([input, recipe]) => {
|
||||
const isDisabled = disabledRecipes[input];
|
||||
const result = (recipe && recipe.result) || '';
|
||||
const furnaces = (recipe && recipe.furnaces) || [];
|
||||
return (
|
||||
<div
|
||||
key={input}
|
||||
@@ -105,13 +107,13 @@ function SmeltingPanel() {
|
||||
</div>
|
||||
<span className="recipe-arrow">→</span>
|
||||
<div className="recipe-output">
|
||||
<ItemIcon itemName={recipe.result} size={20} />
|
||||
<span>{formatItemName(recipe.result)}</span>
|
||||
<ItemIcon itemName={result} size={20} />
|
||||
<span>{formatItemName(result)}</span>
|
||||
</div>
|
||||
<div className="recipe-furnaces">
|
||||
{(recipe.furnaces || []).map((f) => (
|
||||
{furnaces.map((f) => (
|
||||
<span key={f} className="furnace-tag">
|
||||
{f.replace(/^minecraft:/, '')}
|
||||
{(f || '').replace(/^minecraft:/, '')}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user