Saturday, September 2, 2023

Improved filter performance; implementing custom hooks with react-query made it easier

I finally got some time to do a little work on sportsmap.world, and used it to work on improving filter performance in the frontend.

Working with getting start times for all these sporting events displaying correctly in their local time zone is actually a little tricky; it gets harder when you consider how to filter by date.  Midnight on September 2 in Seattle is different from the start time of September 2 in Italy, when you consider all the times I'm working with are normalized to UTC.  I had previously been doing a calculation at filter time to determine if the local start time for an event fell within the date filter range; by moving that calculation to the initial query function, I was able to improve query performance in the frontend.  

(Not a super-complicated perf improvement, but as with all software tasks, it's just a matter of finding the time and getting in the right mental space to work on it.)

One thing I have warmed up to is using custom hooks in React, especially in conjunction with Tanstack's react-query library.  One of my setup tasks for this perf improvement was to refactor two similar backend queries into a single custom hook with input parameters.  By tying into react-query's existing hooks for data, isLoading, isError, etc., I've been able to greatly reduce my own usage of useEffect, which makes for cleaner components.

A great combination I used on a recent work project: OpenAPI to define backend APIs, openapi-typescript and openapi-typescript-fetch to turn the API into usable Typescript objects, react-query to do the querying and maintain loading state and show errors, and wrap it all up into a custom hook which can be re-used by multiple components.  A really clean solution, especially for projects where the frontend is stateless; that is, object state is the responsibility of the backend, which is an especially useful paradigm for microservice environments.

Monday, February 6, 2023

Big changes: more events starting with version 2 of sportsmap.world!

One of my goals with sportsmap.world was to be able to show the full, wide world of sporting events taking place around the world.  Not just the big events like the "Big Game" coming up next Sunday in Glendale, Ariz., but the small events, like the Everett Silvertips junior hockey team about a half hour up the interstate from my house.

I've had to dance around some of the limitations of my data source; simply put, I'm limited in the number of API calls I can make per month.  I can query each calendar day for events and updates, but only up to 1,000 calls per sport per month.  Most of the major events have venue information with lat/long locations attached to their event objects, but many more smaller events do not; this includes some leagues I wanted to represent on the map, including Japanese baseball (NPB), junior hockey across Canada and the U.S., minor league baseball, smaller soccer leagues across Europe and the rest of the world, etc.

For many summers as a kid, I would visit my dad in Great Falls, Montana; I spent several summer days at the local ballpark, watching the Great Falls Dodgers (now Great Falls Voyagers) rookie-league team.  It was something fun to do at a time when I would have been otherwise bored; I loved having the distraction, following the teams' budding young stars, and getting an up close seat of the action.  It was at one of these games, on a chilly, windy night, when I discovered my love for coffee (the ballpark had cups available for $0.25 each!).

I'd like for people who are traveling in an unfamiliar place to be able to see on a map where events are going on, no matter how small they are.  Now on the map, you can find really minor soccer leagues, lower levels of college basketball, college and junior hockey, and more.  I see these as "neighborhood" events; fun to check out if you're in the area, are bored, and want to see what sports looks like where you are.

One world of caution: to get the venues for these events, I'm querying for the home stadium of the listed home team.  This won't always be accurate; for example, my beloved Hanshin Tigers don't play all of their games at Koshien Stadium, even though that is how their home games would otherwise be listed (because my data feed lacks more specific venue information).  I'm considering ways to put a disclaimer on these events' venue information to call that out.  In other cases, I'm finding that the lat/long information for venues is not always correct; there are some typos in the data source.

In the meantime, as always, please verify the home venue and location before making travel plans for buying tickets.  Check the website of the league or hosting team, or consider calling or e-mailing them directly.  

Do give these teams and smaller leagues your support; in many cases they depend on live fan support and ticket sales to keep them afloat!