Reorganize Mod Data

[otobot1]

Closes #740.

[otobot1]

Nearly done. Just need to implement the tooltips.

[otobot1]

@ShouvikGhosh2048 When you have a chance, would you mind taking a look at this branch? I seem to have caused a bug: when the ExpandedMod component is open, after some time the getModRating queries end up getting sent over and over and the whole page can freeze up until the ExpandedMod is closed. I haven't been able to figure out why it's happening. I haven't been able to get it to happen in production mode though - just development.

[ShouvikGhosh2048]

Doesn't seem to happen for me. How long does it take for the requests to come?

We have set up TRPC to refetch every 5 min.

CelesteMods/src/utils/api.ts

Line 44 in a8c14c5

refetchInterval: REFETCH_INTERVAL_SECONDS * 1000,

Are the requests 5 min apart? This happens on the current website, but it doesn't cause the page to freeze.

[otobot1]

Doesn't seem to happen for me. How long does it take for the requests to come?

We have set up TRPC to refetch every 5 min.

CelesteMods/src/utils/api.ts

Line 44 in a8c14c5

refetchInterval: REFETCH_INTERVAL_SECONDS * 1000,

Are the requests 5 min apart? This happens on the current website, but it doesn't cause the page to freeze.

Yeah. It seems to be fine for the first refresh, but then if the ExpandedMod is still open for the next refresh the page will lag like crazy (I'll click on the row to collapse the mod and the corners will round right away but the ExpandedMod takes 5-15 seconds to actually go away. I also noticed that there's a bunch of errors coming from the ModCarousel and the DownloadButton. I think what is happening is that all of the 800+ queries coming in one after another are causing a bunch of re-renders of the whole page, which is making those two components send a bunch of their own fetch requests over and over. I'll try hoisting those fetches up to Mods as well and see if that helps. And I'll also modify the GameBanana hooks to make sure they're properly cancelling their fetches instead of erroring out. If not, I'll just leave it for a follow-up issue as it seems to be a non-issue in production.

[otobot1]

Follow-up issues:

1. Move difficulty tabs into separate component. I just went ahead and did this on this branch. Didn't work. Reverted and left as follow-up issue. Extract Difficulty Tabs Into Own Component #768
2. Fix ModsTableTooltip component. We are currently using floating tooltips, which break screen reader support and don't let the user select the text in the tooltip. We need to either:
   i. Use static tooltips instead. In this case, we need to get the multiline functionality working and make onMouseEnter and onMouseLeave work for the component in the dropdown.
   ii. Use the Mantine Popover component instead and simply style it to look like the Tooltip (this is probably simpler).
   EDIT: Fix ModsTableTooltip Component #765
3. Leave the GameBanana queries in the ModDownloadButton and ModCarousel components, but cache the results in contexts provided in _App.tsx. The contexts should be declared in a Provider component that wraps the application similarly to the "Extracting providers to a component" example here. There should be 1 context for modDownloadUrls and 1 for modImageUrls with each context containing an object with gamebananaModIds as the keys and the downloadUrl string or modImageUrl string arrays as the values. EDIT: Cache GameBanana API Results #764

[otobot1]

I wound up just fixing one of the "follow-up" issues myself (refactoring is kinda fun), but I'm done with this branch now XD. Ready for review!

[otobot1]

Summary of Changes:

1. Change columns in Mods table.
2. Changed how maps are fetched so that tech info can be attached to mods in the mods page component. This strategy is less efficient, but it will work for now. I'm already working on making the API changes needed to do this processing on the server instead of fetching all maps every time.
3. Remove ExpandedMod's header and move the 1-click install and more info buttons above the carousel.
4. Made various minor styling changes.
5. Update useFetch so it doesn't log an error every time a request gets cancelled for any reason (like the component being unmounted).
6. Add tooltips to Mods and Maps tables.
7. Make another new component and extract a third from its parent.
8. In the maps API file I make some formatting/style changes, fix a couple of endpoints, and make some changes to a helper function that didn't work when called from a couple of its consumers. Not sure why TypeScript didn't catch that... I also update the map types because they didn't mention the tech info that was already on the objects.
9. Change a bunch of older components so they have named exports instead of default exports.
10. Add character limits to a bunch of columns in the Mods table as an interim solution to just limiting the column widths properly and letting the ellipsis property do its job.

[otobot1]

I noticed that sometimes the DifficultyTabs component wasn't rendering after the page hot-reloads in dev mode. Some quick investigation made me think it was the table ref breaking because of React's Strict Mode causing double renders? Whatever the cause, I decided to move the difficulty tabs back into the ModsTable component for now - extracting them can be a low-priority follow-up issue.

[ShouvikGhosh2048]

Done reviewing, left a few comments.