Merge branch 'main' into interchange-labels

src/components/barter-tooltip/index.js

@@ -2,24 +2,27 @@ import { useTranslation } from 'react-i18next';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
+import { Icon } from '@mdi/react';
+import {
+    mdiCached,
+    mdiProgressWrench
+} from '@mdi/js';
 
 import ItemImage from '../item-image/index.js';
 import formatPrice from '../../modules/format-price.js';
 import { isAnyDogtag, getDogTagCost } from '../../modules/dogtags.js';
 import { getCheapestPrice } from '../../modules/format-cost-items.js';
 import { getDurationDisplay } from '../../modules/format-duration.js';
-
-import { Icon } from '@mdi/react';
-import {
-    mdiCached,
-    mdiProgressWrench
-} from '@mdi/js';
+import useHideoutData from '../../features/hideout/index.js';
+import useTraderData from '../../features/traders/index.js';
 
 import './index.css';
 
 function BarterTooltip({ barter, showTitle = true, title, allowAllSources = false, crafts, barters, useBarterIngredients, useCraftIngredients }) {
     const settings = useSelector((state) => state.settings);
     const { t } = useTranslation();
+    const { data: hideout } = useHideoutData();
+    const { data: traders } = useTraderData();
 
     if (barters && typeof useBarterIngredients === 'undefined') {
         useBarterIngredients = true;
@@ -73,13 +76,16 @@ function BarterTooltip({ barter, showTitle = true, title, allowAllSources = fals
     let titleElement = '';
 
     if (showTitle) {
-        const trader = barter.trader ? 
-            `${barter.trader.name} ${t('LL{{level}}', { level: barter.level })}` :
-            `${barter.station.name} ${barter.level}`;
+        const source = barter.trader 
+            ? traders.find(t => t.id === barter.trader.id)
+            : hideout.find(s => s.id === barter.station.id);
+        const sourceLevelText = barter.trader ? 
+            `${source.name} ${t('LL{{level}}', { level: barter.level })}` :
+            `${source.name} ${barter.level}`;
 
         const tipTitle = barter.trader ?
-            t('Barter at {{trader}}', { trader: trader }) : 
-            t('Craft at {{station}}', {station: trader});
+            t('Barter at {{trader}}', { trader: sourceLevelText }) : 
+            t('Craft at {{station}}', {station: sourceLevelText});
 
         titleElement = (
             <h3>
@@ -121,15 +127,16 @@ function BarterTooltip({ barter, showTitle = true, title, allowAllSources = fals
                     />
                 );
                 if (requiredItem.cheapestPrice.type === 'craft') {
-                    const craftInfo = t('Craft at {{stationName}} {{stationLevel}}', {stationName: requiredItem.cheapestPrice.craft.station.name, stationLevel: requiredItem.cheapestPrice.craft.level});
+                    const station = hideout.find(s => s.id === requiredItem.cheapestPrice.craft.station.id);
+                    const craftInfo = t('Craft at {{stationName}} {{stationLevel}}', {stationName: station.name, stationLevel: requiredItem.cheapestPrice.craft.level});
                     sourceImage = (
                         <Link to={`/hideout-profit/?search=${requiredItem.item.name}`}>
                             <img
                                 alt={craftInfo}
                                 title={craftInfo}
                                 className="barter-tooltip-icon"
                                 loading="lazy"
-                                src={`${process.env.PUBLIC_URL}/images/stations/${sourceName}-icon.png`}
+                                src={station.imageLink}
                             />
                         </Link>
                     );

src/components/crafts-table/index.js

@@ -8,6 +8,7 @@ import DataTable from '../data-table/index.js';
 import fleaMarketFee from '../../modules/flea-market-fee.mjs';
 import useCraftsData from '../../features/crafts/index.js';
 import useBartersData from '../../features/barters/index.js';
+import useHideoutData from '../../features/hideout/index.js';
 import ValueCell from '../value-cell/index.js';
 import CostItemsCell from '../cost-items-cell/index.js';
 import formatCostItems from '../../modules/format-cost-items.js';
@@ -43,6 +44,7 @@ function CraftTable({ selectedStation, freeFuel, nameFilter, itemFilter, showAll
 
     const { data: meta } = useMetaData();
 
+    const { data: hideout} = useHideoutData();
 
     const data = useMemo(() => {
         let addedStations = {};
@@ -124,8 +126,8 @@ function CraftTable({ selectedStation, freeFuel, nameFilter, itemFilter, showAll
                     }
                 }
 
-                const station = craftRow.station.name;
-                const stationNormalized = craftRow.station.normalizedName;
+                const station = hideout.find(s => s.id === craftRow.station.id);
+                const stationNormalized = station.normalizedName;
                 const level = craftRow.level;
 
                 if (!nameFilter && selectedStation && selectedStation !== 'top' && selectedStation !== 'banned' && selectedStation !== stationNormalized) {
@@ -203,7 +205,7 @@ function CraftTable({ selectedStation, freeFuel, nameFilter, itemFilter, showAll
                     craftTime: craftDuration,
                     reward: {
                         item: craftRewardItem,
-                        source: `${station} (${t('Level')} ${level})`,
+                        source: `${station.name} (${t('Level')} ${level})`,
                         count: craftRow.rewardItems[0].count,
                         sellTo: bestSellTo.vendor.name,
                         sellToNormalized: bestSellTo.vendor.normalizedName,
@@ -343,6 +345,7 @@ function CraftTable({ selectedStation, freeFuel, nameFilter, itemFilter, showAll
         freeFuel,
         crafts,
         barters,
+        hideout,
         completedQuests,
         includeFlea,
         hasJaeger,

src/components/item-image/index.js

@@ -363,7 +363,7 @@ function ItemImage({
                     content={station.name}
                 >
                     <Link to={`/hideout-profit/?station=${station.normalizedName}&all=true&search=${item.name}`}>
-                        <img alt={station.name} src={`/images/stations/${station.normalizedName}-icon.png`} style={traderImageStyle}/>
+                        <img alt={station.name} src={station.imageLink} style={traderImageStyle}/>
                     </Link>
                 </Tippy>
             </div>}

src/components/items-for-hideout/index.js

@@ -97,7 +97,7 @@ function ItemsForHideout(props) {
                                             alt={item.moduleName}
                                             className="quest-giver-image"
                                             loading="lazy"
-                                            src={`${process.env.PUBLIC_URL}/images/stations/${item.normalizedName}-icon.png`}
+                                            src={item.imageLink}
                                         />
                                         <div>
                                             {item.moduleName}

src/components/items-summary-table/index.js

@@ -100,7 +100,7 @@ function ItemsSummaryTable({includeItems, includeTraders, includeStations}) {
                 ...station,
                 quantity: req.level,
                 //itemLink: `#`,
-                iconLink: `images/stations/${station.normalizedName}-icon.png`,
+                iconLink: station.imageLink,
                 types: [],
                 barters: [],
                 buyOnFleaPrice: 0,
@@ -274,7 +274,8 @@ function ItemsSummaryTable({includeItems, includeTraders, includeStations}) {
                             );
                         } else if (cheapestObtainInfo.craft) {
                             const craft = cheapestObtainInfo.craft;
-                            priceSource = `${craft.station.name} ${craft.level}`;
+                            const station = stations.find(s => s.id === craft.station.id);
+                            priceSource = `${station.name} ${craft.level}`;
                             let barterTipTitle = '';
                             if (craft.taskUnlock) {
                                 taskIcon = (
@@ -406,7 +407,7 @@ function ItemsSummaryTable({includeItems, includeTraders, includeStations}) {
         ];
 
         return useColumns;
-    }, [t, items, barters, crafts, settings]);
+    }, [t, items, barters, crafts, stations, settings]);
 
     const extraRow = (
         <>

src/components/small-item-table/index.js

@@ -32,6 +32,7 @@ import itemCanContain from '../../modules/item-can-contain.js';
 import useBartersData from '../../features/barters/index.js';
 import useCraftsData from '../../features/crafts/index.js';
 import useItemsData from '../../features/items/index.js';
+import useHideoutData from '../../features/hideout/index.js';
 import useMetaData from '../../features/meta/index.js';
 import CanvasGrid from '../../components/canvas-grid/index.js';
 
@@ -318,6 +319,8 @@ function SmallItemTable(props) {
 
     const { data: crafts } = useCraftsData();
 
+    const { data: hideout } = useHideoutData();
+
     const containedItems = useMemo(() => {
         if (!containedInFilter) 
             return {};
@@ -1671,7 +1674,8 @@ function SmallItemTable(props) {
                             );
                         } else if (cheapestObtainInfo.craft) {
                             const craft = cheapestObtainInfo.craft;
-                            priceSource = `${craft.station.name} ${craft.level}`;
+                            const station = hideout.find(s => s.id === craft.station.id);
+                            priceSource = `${station.name} ${craft.level}`;
                             let barterTipTitle = '';
                             if (craft.taskUnlock) {
                                 taskIcon = (
@@ -1867,6 +1871,7 @@ function SmallItemTable(props) {
         items,
         barters,
         crafts,
+        hideout,
         useBarterIngredients,
         useCraftIngredients,
         distance,

src/components/station-skill-trader-setting/index.js

@@ -86,12 +86,12 @@ const getOptionsForTrader = (t, traderKey) => {
 };
 
 const StationSkillTraderSetting = React.forwardRef((props, ref) => {
-    const { stateKey, type, isDisabled, label } = props;
+    const { stateKey, type, isDisabled, label, image } = props;
     const { t } = useTranslation();
 
     let selector;
     let options;
-    let iconExt = 'png';
+    let imageLink = image;
     const toolTip = label || t(capitalizeFirst(camelcaseToDashes(stateKey).replace(/-/g, ' ')));
     if (type === 'station') {
         selector = selectAllStations;
@@ -101,10 +101,11 @@ const StationSkillTraderSetting = React.forwardRef((props, ref) => {
         // t('Hideout Management')
         selector = selectAllSkills;
         options = getOptionsForSkill(t, stateKey);
+        imageLink = `${process.env.PUBLIC_URL}/images/${type}s/${stateKey}-icon.png`;
     } else if (type === 'trader') {
         selector = selectAllTraders;
         options = getOptionsForTrader(t, stateKey);
-        iconExt = 'jpg';
+        imageLink = `${process.env.PUBLIC_URL}/images/${type}s/${stateKey}-icon.jpg`;
     }
     const dispatch = useDispatch();
     const state = useSelector(selector);
@@ -123,7 +124,7 @@ const StationSkillTraderSetting = React.forwardRef((props, ref) => {
                     alt={`${stateKey}-icon`}
                     loading="lazy"
                     height={39}
-                    src={`${process.env.PUBLIC_URL}/images/${type}s/${stateKey}-icon.${iconExt}`}
+                    src={imageLink}
                     width={39}
                 />
                 <Select