From c3205810d1e13057bf817b94316066585cfb4a7f Mon Sep 17 00:00:00 2001
From: aericio <16523741+Aericio@users.noreply.github.com>
Date: Fri, 20 Oct 2023 17:15:36 -1000
Subject: [PATCH] Add generic fallback for ingredient suffix

---
 src/components/checklist/CategoryItem.jsx     | 14 ++++-------
 src/components/checklist/ItemComponent.jsx    | 23 ++++++++++---------
 .../checklist/ItemGeneralInfoTooltip.jsx      |  3 ++-
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/components/checklist/CategoryItem.jsx b/src/components/checklist/CategoryItem.jsx
index 4293c48..80f9486 100644
--- a/src/components/checklist/CategoryItem.jsx
+++ b/src/components/checklist/CategoryItem.jsx
@@ -55,8 +55,7 @@ function CategoryItem({ name, item }) {
 											rank,
 											item.maxLvl
 										)
-									}
-								>
+									}>
 									{rank}
 								</div>
 							);
@@ -67,19 +66,17 @@ function CategoryItem({ name, item }) {
 			<PaginatedTooltip
 				content={
 					<>
-						<ItemGeneralInfoTooltip item={item} />
+						<ItemGeneralInfoTooltip item={item} itemName={name} />
 						{item.relics && (
 							<ItemRelicTooltip item={item} name={name} />
 						)}
 					</>
-				}
-			>
+				}>
 				<div
 					className={classNames("item", {
 						"item-mastered": mastered,
 						"item-locked": masteryRankLocked
-					})}
-				>
+					})}>
 					<Button
 						className="item-name"
 						onClick={e => {
@@ -99,8 +96,7 @@ function CategoryItem({ name, item }) {
 									else masterItem(name, !mastered);
 								}
 							}
-						}}
-					>
+						}}>
 						{name +
 							((item.maxLvl || 30) !== 30
 								? ` [${
diff --git a/src/components/checklist/ItemComponent.jsx b/src/components/checklist/ItemComponent.jsx
index 4ae5260..f132423 100644
--- a/src/components/checklist/ItemComponent.jsx
+++ b/src/components/checklist/ItemComponent.jsx
@@ -3,26 +3,26 @@ import PropTypes from "prop-types";
 import { ingredientSuffixes } from "../../utils/items";
 
 export default function ItemComponent({
+	itemName,
 	componentName,
 	component,
 	isSubcomponent
 }) {
+	const imageName =
+		(componentName.includes(" Prime ") ? "prime-" : "") +
+		(component.generic
+			? ingredientSuffixes.find(suffix =>
+					componentName.endsWith(suffix)
+			  ) ?? componentName.replace(`${itemName} `, "")
+			: componentName);
+
 	return (
 		<div className={classNames({ "item-subcomponent": isSubcomponent })}>
 			<img
 				className="component-image"
 				src={`https://cdn.warframestat.us/img/${
 					component?.img ||
-					(componentName.includes(" Prime ") ? "prime-" : "") +
-						(component.generic
-							? ingredientSuffixes
-									.find(suffix =>
-										componentName.endsWith(suffix)
-									)
-									.split(" ")
-									.join("-")
-									.toLowerCase()
-							: componentName.toLowerCase().split(" ").join("-"))
+					imageName.split(" ").join("-").toLowerCase()
 				}.png`}
 				alt=""
 				width="24px"
@@ -37,8 +37,9 @@ export default function ItemComponent({
 						return (
 							<ItemComponent
 								key={subcomponentName}
-								component={subcomponent}
+								itemName={itemName}
 								componentName={subcomponentName}
+								component={subcomponent}
 								isSubcomponent
 							/>
 						);
diff --git a/src/components/checklist/ItemGeneralInfoTooltip.jsx b/src/components/checklist/ItemGeneralInfoTooltip.jsx
index bf76e77..bf4462d 100644
--- a/src/components/checklist/ItemGeneralInfoTooltip.jsx
+++ b/src/components/checklist/ItemGeneralInfoTooltip.jsx
@@ -6,7 +6,7 @@ import GluedComponents from "../GluedComponents";
 import { PaginatedTooltipTitle } from "../PaginatedTooltip";
 import ItemComponent from "./ItemComponent";
 
-function ItemGeneralInfoTooltip({ item }) {
+function ItemGeneralInfoTooltip({ item, itemName }) {
 	const isMacOS =
 		window.navigator.userAgentData?.platform === "macOS" ||
 		window.navigator.platform === "MacIntel"; //TODO: Remove usage of deprecated Navigator.platform
@@ -21,6 +21,7 @@ function ItemGeneralInfoTooltip({ item }) {
 							return (
 								<ItemComponent
 									key={componentName}
+									itemName={itemName}
 									componentName={componentName}
 									component={component}
 								/>