Refactor Clan and Leaderboard Pages: Implement New Leaderboard API, Update Layout, and Improve Navigation

[Skoivumaki]

✨ Enhancement Description

Provide a brief description of the enhancement or improvement being suggested:

• What is it?: Refactor and enhance the Clan Page and Leaderboard Page. Implement new API calls for leaderboard functionality, update related components, and improve the layout and navigation.
• Why improve it?: The current code uses old queries and a non-optimal layout/navigation. This enhancement will modernize API usage, centralize logic, and improve both user and developer experience.

---

🌟 Benefits of the Enhancement

Explain how this enhancement will improve the project or user experience:

• User Experience: Leaderboard data loads more efficiently and navigation is clearer, especially on desktop.
• Project Impact: Code is easier to maintain and extend, queries are centralized, and the UI is aligned with backend standards.

---

🛠️ Proposed Implementation

Outline how the enhancement could be implemented, including any technical considerations:

• Technical Details:

  • Create a new leaderboardApi.ts file to handle all API calls related to the leaderboard.
  • Add the following endpoints to that file:
    • GET /leaderboard/player
    • GET /leaderboard/clan
    • GET /leaderboard/clan/position
    • Use Swagger documentation for all endpoints. (or use other Api files as example)
  • Switch old queries in leaderboardClans.tsx to use the new API calls defined in leaderboardApi.ts.
  • Remove the current NavMenuWithDropdowns from the leaderboard page.
  • Update LeaderboardLayout so it uses the full width of the page on desktop (mobile is already correct).
  • Add a new route to the Leaderboard page in NavbarDesktop under the "Game" section.
  • Update the leaderboard route in the Clan page’s NavMenuWithDropdowns to href /leaderboard.

• Implementation Plan:

  1. Create leaderboardApi.ts and implement all specified API methods, documented with Swagger.
  2. Refactor leaderboardClans.tsx to use the new API functions.
  3. Remove NavMenuWithDropdowns from the leaderboard page.
  4. Update the LeaderboardLayout component to span full width on desktop.
  5. Modify NavbarDesktop to add the new leaderboard route. (remember i18n)
  6. Change Clan Page navigation to link to /leaderboard.

---

📎 Additional Information

Include any additional context, examples, or resources that could help in understanding or implementing the enhancement:

• Links & References:
  • Swagger documentation
  • Figma Design (example)
• Mockups/Examples:

5. Where the Leaderboard link should goto:

6. Which link should be updated. On Clan Page /en/clans