Merge pull request #857 from the-hideout/api-station-images

Use station images from API

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

src/features/crafts/do-fetch-crafts.mjs

@@ -10,7 +10,6 @@ class CraftsQuery extends APIQuery {
             crafts(lang: ${language}) {
                 station {
                     id
-                    name
                     normalizedName
                 }
                 level

src/features/hideout/do-fetch-hideout.mjs

@@ -6,6 +6,7 @@ const doFetchHideout = async (language, prebuild = false) => {
             id
             name
             normalizedName
+            imageLink
             levels {
                 id
                 level
@@ -32,6 +33,9 @@ const doFetchHideout = async (language, prebuild = false) => {
                     level
                 }
             }
+            crafts {
+                id
+            }
         }
     }`;
 

src/features/traders/do-fetch-traders.mjs

@@ -25,6 +25,9 @@ export default async function doFetchTraders(language, prebuild = false) {
                 insuranceRate
                 repairCostMultiplier
             }
+            barters {
+                id
+            }
         }
     }`;
 

src/pages/barters/index.js

@@ -19,7 +19,6 @@ import {
 import useStateWithLocalStorage from '../../hooks/useStateWithLocalStorage.jsx';
 
 import useTradersData from '../../features/traders/index.js';
-import useBartersData from '../../features/barters/index.js';
 import { toggleHideDogtagBarters } from '../../features/settings/settingsSlice.js';
 
 import './index.css';
@@ -47,7 +46,6 @@ function Barters() {
 
     const dispatch = useDispatch();
     const { data: allTraders } = useTradersData();
-    const { data: barters } = useBartersData();
 
     const { t } = useTranslation();
 
@@ -56,8 +54,8 @@ function Barters() {
     }, [searchParams]);
 
     const traders = useMemo(() => {
-        return allTraders.filter(trader => barters.some(b => b.trader.id === trader.id));
-    }, [allTraders, barters]);
+        return allTraders.filter(trader => trader.barters?.length);
+    }, [allTraders]);
 
     return [
         <SEO 

src/pages/crafts/index.js

@@ -5,7 +5,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Icon } from '@mdi/react';
 import { mdiProgressWrench, mdiCancel, mdiCached } from '@mdi/js';
 
-import useCraftsData from '../../features/crafts/index.js';
+import useHideoutData from '../../features/hideout/index.js';
 
 import useStateWithLocalStorage from '../../hooks/useStateWithLocalStorage.jsx';
 
@@ -57,22 +57,13 @@ function Crafts() {
         }
     }, [searchParams, setSelectedStation, setShowAll]);
 
-    const { data: crafts } = useCraftsData();
+    const { data: hideout } = useHideoutData();
 
     const stations = useMemo(() => {
-        const stn = [];
-        for (const craft of crafts) {
-            if (craft.station.normalizedName === 'bitcoin-farm') {
-                continue;
-            }
-            if (!stn.some(station => station.id === craft.station.id)) {
-                stn.push(craft.station);
-            }
-        }
-        return stn.sort((a, b) => {
+        return hideout.filter(s => s.crafts?.length && s.normalizedName !== 'bitcoin-farm').sort((a, b) => {
             return a.name.localeCompare(b.name);
         });
-    }, [crafts]);
+    }, [hideout]);
 
     return [
         <SEO 
@@ -122,7 +113,7 @@ function Crafts() {
                                         <img
                                             alt={station.name}
                                             loading="lazy"
-                                            src={`${process.env.PUBLIC_URL}/images/stations/${station.normalizedName}-icon.png`}
+                                            src={station.imageLink}
                                         />
                                     }
                                     onClick={() => {setSearchParams({'station': station.normalizedName})}}

src/pages/hideout/index.js

@@ -89,7 +89,7 @@ function Hideout() {
                                     <img
                                         alt={station.name}
                                         loading="lazy"
-                                        src={`${process.env.PUBLIC_URL}/images/stations/${station.normalizedName}-icon.png`}
+                                        src={station.imageLink}
                                     />
                                 }
                                 onClick={setSelectedStation.bind(

src/pages/settings/index.js

@@ -22,7 +22,6 @@ import {
     toggleHideDogtagBarters,
     // selectCompletedQuests,
 } from '../../features/settings/settingsSlice.js';
-import useCraftsData from '../../features/crafts/index.js';
 import useHideoutData from '../../features/hideout/index.js';
 import useTradersData from '../../features/traders/index.js';
 
@@ -92,21 +91,12 @@ function Settings() {
     }, [allTraders]);
 
     const { data: hideout } = useHideoutData();
-
-    const { data: crafts } = useCraftsData();
 
     const stations = useMemo(() => {
-        const stn = [];
-        for (const craft of crafts) {
-            if (!stn.some(station => station.id === craft.station.id)) {
-                stn.push(craft.station);
-            }
-        }
-        stn.push(hideout.find(h => h.normalizedName === 'solar-power'));
-        return stn.sort((a, b) => {
+        return hideout.filter(s => s.crafts?.length || s.normalizedName === 'solar-power').sort((a, b) => {
             return a.name.localeCompare(b.name);
         });
-    }, [crafts, hideout]);
+    }, [hideout]);
 
     useEffect(() => {
         if (useTarkovTracker) {
@@ -239,6 +229,7 @@ function Settings() {
                             stateKey={station.normalizedName}
                             ref={refs[station.normalizedName]}
                             isDisabled={useTarkovTracker}
+                            image={station.imageLink}
                         />
                     );
                 })}