Refactor tournaments page: Double column layout, no paginations and others

[angeloanan]

This PR refactors the Tournaments page such that it removes pagination, uses double column layout for wide screen and refactors code to remove unnecessary code

CleanShot.2024-04-24.at.00.07.17-converted.mp4

Feel free to agree / disagree on my design decision; I understand that this PR is a semi-big refactor and I'm afraid that I do not have any means to contact the development team other than putting Issue / PRs.

I'm very open to suggestions it means that this page may further be improved!

Breaking Change

* Tournaments entries are sorted with the following priority:
* Official tournaments
* Most-recently created tournaments (descending Tournament ID)

• Uses the swr library - requires deployment to install extra dependency via npm i

Detailed change

TournamentEntry Component

• Put constants variables outside of the component such that it doesn't need to be re-computed every time the component is being rendered
• Replaced unnecessary function getters with nullish coalescing operator (??)
• Replaced unnecessary boolean declaration with ternaries
• Unified tournament time related functions to a single function that returns a tuple of start / end time
• Removed component's static width requirement, allowing parent component to control it
• Memoizes component such that it wont re-render if props didn't change
• Uses tabular number on tournament ID

/tournaments Page

• Removed pagination as data fetching is not necessary
• Layout has been set by default to double column. On mobile, it is set to 1 column
  * Tournaments has been sorted in the following importance:
  * Official Tournament
  * Most-recent tournamel (via ID)
• Uses useSWR for proper data fetching / mutation deduplication / error handling
• Fixed a bug where search box focus are lost when search returns empty
• Fixed a bug where "No tournaments found" alert is shown when tournaments are still being fetched
• Simplified component structure by inlining component code
• Removed unnecessary HTML tags and CSS classes
• Memoizes fetched data and searched data such that it doesn't recalculate every time the timer ticks

[EpicUsername12]

Hello,

I like the visual design, but I can't merge this right now since I'm unable review the code at the moment. (Might take a while)

I quickly looked over it but it definitely needs to have some changes, for example the sorting code is not needed since the API request for the tournaments (/api/tournaments) is already sorting the tournaments by Official status then by total player count. (Count is incremented when a player plays at least one race in the tournament)

I'm afraid that I do not have any means to contact the development team other than putting Issue / PRs.

I left Pretendo Network on my own because of some disagreement about NEX development while I was there.

(I'm still part of the GitHub org somehow and implicitly able to continue working on stuff I used to work on, like this website or the MK8 NEX server)

I cannot help with you contacting them, but you look like a very skilled web developer.

You should contact the devs in DM to see if they would like to have you on their team.

[00cedke]

RAMBOOOOOOO

[angeloanan]

Thanks for the kind words! As requested, I've went ahead and preemptively removed client-side data sorting in ee75795.

Please do take as much time that's needed to review the PR. If you have any suggestion / nit-picks, feel free to request the change!