Skip to content

Commit

Permalink
Merge pull request #946 from the-hideout/trader-loading
Browse files Browse the repository at this point in the history 
fix trader page loading, dynamic trader links
  • Loading branch information
@Shebuka
Shebuka authored Jun 7, 2024
2 parents 5fa3b65 + 0d5fdde commit f48c232
Show file tree
Hide file tree
Showing 7 changed files with 57 additions and 129 deletions.
Binary file added public/images/traders/ref-icon.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/traders/ref-portrait.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/traders/ref.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 17 additions & 43 deletions src/components/menu/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
//import { Suspense } from 'react';
import { useMemo } from 'react';
import useStateWithLocalStorage from '../../hooks/useStateWithLocalStorage.jsx';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
Expand All @@ -25,6 +25,7 @@ import alertConfig from './alert-config.js';
import IntersectionObserverWrapper from './intersection-observer-wrapper.js';

import './index.css';
import useTradersData from '../../features/traders/index.js';

// automatically selects the alert color
const alertColor = alertConfig.alertColors[alertConfig.alertLevel];
Expand Down Expand Up @@ -64,6 +65,11 @@ const Menu = () => {
}

const { data: bosses } = useBossesData();
const { data: allTraders } = useTradersData();

const traders = useMemo(() => {
return allTraders.filter(t => t.barters?.length > 0)
}, [allTraders]);

return (
<>
Expand Down Expand Up @@ -197,48 +203,16 @@ const Menu = () => {
<li className="submenu-wrapper submenu-items overflow-member" key="menu-traders" data-targetid="traders">
<Link to="/traders">{t('Traders')}</Link>
<ul>
<MenuItem
displayText={t('Prapor')}
key="menu-item-prapor"
to={`/trader/prapor`}
//onClick={setIsOpen.bind(this, false)}
/>
<MenuItem
displayText={t('Therapist')}
key="menu-item-therapist"
to={`/trader/therapist`}
//onClick={setIsOpen.bind(this, false)}
/>
<MenuItem
displayText={t('Skier')}
key="menu-item-skier"
to={`/trader/skier`}
//onClick={setIsOpen.bind(this, false)}
/>
<MenuItem
displayText={t('Peacekeeper')}
key="menu-item-peacekeeper"
to={`/trader/peacekeeper`}
//onClick={setIsOpen.bind(this, false)}
/>
<MenuItem
displayText={t('Mechanic')}
key="menu-item-mechanic"
to={`/trader/mechanic`}
//onClick={setIsOpen.bind(this, false)}
/>
<MenuItem
displayText={t('Ragman')}
key="menu-item-ragman"
to={`/trader/ragman`}
//onClick={setIsOpen.bind(this, false)}
/>
<MenuItem
displayText={t('Jaeger')}
key="menu-item-jaeger"
to={`/trader/jaeger`}
//onClick={setIsOpen.bind(this, false)}
/>
{traders.map(trader => {
return (
<MenuItem
displayText={trader.name}
key={`menu-item-${trader.normalizedName}`}
to={`/trader/${trader.normalizedName}`}
//onClick={setIsOpen.bind(this, false)}
/>
);
})}
</ul>
</li>
<li className="submenu-wrapper submenu-items overflow-member" key="menu-bosses" data-targetid="bosses">
Expand Down
103 changes: 24 additions & 79 deletions src/pages/start/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useCallback, useEffect, lazy, Suspense } from 'react';
import React, { useState, useCallback, useEffect, lazy, Suspense, useMemo } from 'react';
import { useSearchParams } from "react-router-dom";
import { Link } from 'react-router-dom';
import { HashLink } from 'react-router-hash-link';
Expand All @@ -13,6 +13,7 @@ import ItemIconList from '../../components/item-icon-list/index.js';
import LoadingSmall from '../../components/loading-small/index.js';

import { mapIcons, useMapImagesSortedArray } from '../../features/maps/index.js';
import useTradersData from '../../features/traders/index.js';

import { Icon } from '@mdi/react';
import {
Expand Down Expand Up @@ -58,6 +59,12 @@ function Start() {
return maps;
}, []);

const { data: allTraders } = useTradersData();

const traders = useMemo(() => {
return allTraders.filter(t => t.barters?.length > 0)
}, [allTraders]);

useEffect(() => {
setNameFilter(searchParams.get('search') || '');
}, [searchParams]);
Expand Down Expand Up @@ -278,86 +285,24 @@ function Start() {
</Link>
</h3>
<ul className="traders-list" key="traders-list">
<li key="start-link-prapor">
<Link to={`/trader/prapor`}>
<img
alt="Prapor icon"
className="trader-icon"
loading="lazy"
src={`${process.env.PUBLIC_URL}/images/traders/prapor-icon.jpg`}
/>
{t('Prapor')}
</Link>
</li>
<li key="start-link-therapist">
<Link to={`/trader/therapist`}>
<img
alt="Therapist icon"
className="trader-icon"
loading="lazy"
src={`${process.env.PUBLIC_URL}/images/traders/therapist-icon.jpg`}
/>
{t('Therapist')}
</Link>
</li>
<li key="start-link-skier">
<Link to={`/trader/skier`}>
<img
alt="Skier icon"
className="trader-icon"
loading="lazy"
src={`${process.env.PUBLIC_URL}/images/traders/skier-icon.jpg`}
/>
{t('Skier')}
</Link>
</li>
<li key="start-link-peacekeeper">
<Link to={`/trader/peacekeeper`}>
<img
alt="Peacekeeper icon"
className="trader-icon"
loading="lazy"
src={`${process.env.PUBLIC_URL}/images/traders/peacekeeper-icon.jpg`}
/>
{t('Peacekeeper')}
</Link>
</li>
<li key="start-link-mechanic">
<Link to={`/trader/mechanic`}>
<img
alt="Prapor icon"
className="trader-icon"
loading="lazy"
src={`${process.env.PUBLIC_URL}/images/traders/mechanic-icon.jpg`}
/>
{t('Mechanic')}
</Link>
</li>
<li key="start-link-ragman">
<Link to={`/trader/ragman`}>
<img
alt="Ragman icon"
className="trader-icon"
loading="lazy"
src={`${process.env.PUBLIC_URL}/images/traders/ragman-icon.jpg`}
/>
{t('Ragman')}
</Link>
</li>
<li key="start-link-jaeger">
<Link to={`/trader/jaeger`}>
<img
alt="Jaeger icon"
className="trader-icon"
loading="lazy"
src={`${process.env.PUBLIC_URL}/images/traders/jaeger-icon.jpg`}
/>
{t('Jaeger')}
</Link>
</li>
{traders.map(trader => {
return (
<li key={`start-link-${trader.normalizedName}`}>
<Link to={`/trader/${trader.normalizedName}`}>
<img
alt={`${trader.name} icon`}
className="trader-icon"
loading="lazy"
src={`${process.env.PUBLIC_URL}/images/traders/${trader.normalizedName}-icon.jpg`}
/>
{trader.name}
</Link>
</li>
);
})}
</ul>
<h3>
<Link to={'/bosses'} key={"maps-page"}>
<Link to={'/bosses'} key={"bosses-page"}>
<Icon
path={mdiEmoticonDevil}
size={1}
Expand Down
13 changes: 11 additions & 2 deletions src/pages/trader/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import SmallItemTable from '../../components/small-item-table/index.js';
import QuestTable from '../../components/quest-table/index.js';
import TraderResetTime from '../../components/trader-reset-time/index.js';
import ErrorPage from '../error-page/index.js';
import Loading from '../../components/loading/index.js';
import LoadingSmall from '../../components/loading-small/index.js';
import PropertyList from '../../components/property-list/index.js';
import formatPrice from '../../modules/format-price.js';
Expand Down Expand Up @@ -81,12 +82,17 @@ function Trader() {
},
[setNameFilter],
);
const { data: traders } = useTradersData();
const { data: traders, status } = useTradersData();

const trader = traders.find(tr => tr.normalizedName === traderName.toLowerCase());
const trader = useMemo(() => {
return traders.find(tr => tr.normalizedName === traderName.toLowerCase());;
}, [traders, traderName]);

const levelProperties = useMemo(() => {
const props = {};
if (!trader) {
return props;
}
if (!Number.isInteger(selectedTable)) {
return props;
}
Expand All @@ -100,6 +106,9 @@ function Trader() {
}
return props;
}, [trader, selectedTable, t]);
if (!trader && (status === 'idle' || status === 'loading')) {
return <Loading/>;
}
if (!trader)
return <ErrorPage />;

Expand Down
10 changes: 5 additions & 5 deletions src/pages/traders/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import TraderResetTime from '../../components/trader-reset-time/index.js';
import LoadingSmall from '../../components/loading-small/index.js';

import useTradersData from '../../features/traders/index.js';
import useItemsData from '../../features/items/index.js';

import i18n from '../../i18n.js';

Expand All @@ -19,12 +18,13 @@ import './index.css';
function Traders(props) {
const { t } = useTranslation();
const { data: allTraders } = useTradersData();
const { data: items } = useItemsData();

// filter traders to only those who sell items
// filter traders to only those who have barters
// we used to check for sell items, but requires all item data
// items.some(item => item.buyFor.some(offer => offer.vendor.trader?.id === trader.id))
const traders = useMemo(() => {
return allTraders.filter(trader => items.some(item => item.buyFor.some(offer => offer.vendor.trader?.id === trader.id)));
}, [allTraders, items]);
return allTraders.filter(trader => trader.barters?.length > 0);
}, [allTraders]);

return [
<SEO
Expand Down

0 comments on commit f48c232

Please sign in to comment.