The-Adult-In-The-Room/poe2-tools PR #24 — Market Currency Page — PR #24
The-Adult-In-The-Room/poe2-tools · pull request #24 ·
Transcript
PlainEnglish
Hey there! Let's walk through pull request twenty-four — a complete market currency page for Path of Exile 2 tools. This is a full feature build bringing real-time exchange rates from poe dot ninja into the app.
PlainEnglish
Here's what we're going after. Two primary goals: get the market page working end-to-end with live poe ninja data, and build it out using a clean component hierarchy. We've also got a handful of supporting pieces — type definitions, full test coverage, image URL handling, and a small refactor to make the nav component more flexible. And we're keeping the existing API stable — no breaking changes to what's already there.
PlainEnglish
The app started with just a DPS calculator. Players who wanted to check currency exchange rates had to leave the app and go to poe dot ninja directly. This PR closes that gap by bringing the full market experience into the tool — live rates, trend sparklines, league and category filtering, all in one place.
Architecture
Let's look at the API layer. We're fetching leagues and currency overviews from poe ninja and caching the results for five minutes. The cache check happens before every fetch — if we've got fresh data, we skip the network call. This is a simple in-memory map with a time-to-live check, which keeps things snappy for users navigating between pages.
Architecture
The component structure follows atomic design. We've got a new Sparkline atom for those inline price trend charts, three new molecules for category tabs, currency rows, and league selection, one new organism that composes the table, and a page component that ties it all together. The Nav molecule also got a small refactor to accept dynamic icons instead of hardcoding them.
Architecture
The currency row includes three formatting helpers. The main one handles values from millions down to tiny decimals — one point five million becomes one point five M, two thousand becomes two k, and anything under point zero one gets four decimal places. There's also a ratio formatter that inverts sub-one values so you see one to two hundred instead of zero point zero zero five to one.
Architecture
Here's how the page wires together. The currency route validates search params, the loader fetches leagues and overview data, and the MarketCurrency page component receives that data and renders the league selector, category tabs, and the currency table. It's a straightforward top-down flow — route to loader to page to child components.
Architecture
Every new component has comprehensive test coverage. The Sparkline tests cover valid data and edge cases like null values and insufficient points. CurrencyRow tests nail down formatting precision across tiny decimals, thousands, and millions. The molecules and organisms test rendering, interaction, and state updates. And the page component tests the full integration including empty states and selector behavior.
PlainEnglish
After this lands, the app has a fully functional currency market page. Users can view live exchange rates from poe ninja, switch between leagues and categories, toggle reference currency between divine, exalted, and chaos, and see price trends with inline sparklines. The API caches results for five minutes, and the whole feature is backed by a solid test suite.
CodeQuality
Okay, let's look at what to watch. We've got five concerns here plotted by impact and likelihood. The top-right quadrant shows the most urgent — no error handling on the API fetch means a failed poe ninja call will crash the page load. And the league selector uses full-page reloads instead of client-side routing, which breaks router state. The other three are lower severity — concurrent cache misses, a floating-point equality check, and silent empty sparklines.
CodeQuality
Here's the route loader. Notice there's no try-catch around the fetch calls. If poe ninja is down or returns a bad response, the error propagates uncaught and the page load fails. You'll want to add error handling here — either a try-catch with a fallback state or a global error boundary to catch and display these failures gracefully.
CodeQuality
The league selector navigates by setting window dot location dot href. This triggers a full page reload instead of using TanStack Router's client-side navigation. That breaks router state and is slower than a client transition. Consider using the navigate hook or a Link component here to keep it in the router lifecycle.
PlainEnglish
Alright, that's the full picture. This is a well-structured feature build with clean component composition and comprehensive tests. The API layer works, the UI is solid, and the user experience is complete. The two main asks before merge: add error handling to the route loader so a failed API call doesn't crash the page, and switch the league selector to client-side navigation. The floating-point equality check is minor but worth a quick look. Nice work overall — looking forward to seeing this land!
How this was made
Lenzon read The-Adult-In-The-Room/poe2-tools at pull request #24 and generated this walkthrough automatically. The narration above is the transcript of what it says.
Explain a pull request from your own repo
Point Lenzon at a repo or a pull request and get a narrated walkthrough like this one.
Try it