Merge pull request #2895 from codecrafters-io/andy/feat

feat(leaderboard): Implement team selection persistence and add leaderboard team storage service

Author: andy1li

app/components/course-leaderboard/index.ts

@@ -11,6 +11,7 @@ import { tracked } from '@glimmer/tracking';
 import type ActionCableConsumerService from 'codecrafters-frontend/services/action-cable-consumer';
 import type AnalyticsEventTrackerService from 'codecrafters-frontend/services/analytics-event-tracker';
 import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
+import type LeaderboardTeamStorageService from 'codecrafters-frontend/services/leaderboard-team-storage';
 import type RepositoryModel from 'codecrafters-frontend/models/repository';
 import type RouterService from '@ember/routing/router-service';
 import type Store from '@ember-data/store';
@@ -43,13 +44,21 @@ export default class CourseLeaderboardComponent extends Component<Signature> {
   @service declare actionCableConsumer: ActionCableConsumerService;
   @service declare analyticsEventTracker: AnalyticsEventTrackerService;
   @service declare authenticator: AuthenticatorService;
+  @service declare leaderboardTeamStorage: LeaderboardTeamStorageService;
   @service declare router: RouterService;
   @service declare store: Store;
   @service declare visibility: VisibilityService;
 
   constructor(owner: unknown, args: Signature['Args']) {
     super(owner, args);
-    this.team = this.currentUserTeams[0] ?? null;
+
+    if (this.leaderboardTeamStorage.lastSelectionWasGlobalLeaderboard) {
+      this.team = null;
+    } else {
+      const defaultTeam = this.currentUserTeams[0] ?? null;
+      const lastSelectedTeamId = this.leaderboardTeamStorage.lastSelectedTeamId;
+      this.team = this.currentUserTeams.find((team) => team.id === lastSelectedTeamId) ?? defaultTeam;
+    }
   }
 
   get currentUserIsTeamMember() {
@@ -189,6 +198,8 @@ export default class CourseLeaderboardComponent extends Component<Signature> {
     this.stopLeaderboardPoller();
 
     this.team = team;
+    this.leaderboardTeamStorage.setlastSelectedTeamId(team?.id ?? null);
+
     // this.entriesFromAPI = [];
     this.isReloadingEntries = true;
 

app/services/leaderboard-team-storage.ts

@@ -0,0 +1,22 @@
+import Service, { inject as service } from '@ember/service';
+import LocalStorageService from 'codecrafters-frontend/services/local-storage';
+
+const GLOBAL_LEADERBOARD_ID = 'GLOBAL_LEADERBOARD_ID';
+
+export default class LeaderboardTeamStorageService extends Service {
+  static STORAGE_KEY = 'leaderboard-team-selection-v1';
+
+  @service declare localStorage: LocalStorageService;
+
+  get lastSelectedTeamId(): string | null {
+    return this.localStorage.getItem(LeaderboardTeamStorageService.STORAGE_KEY);
+  }
+
+  get lastSelectionWasGlobalLeaderboard(): boolean {
+    return this.lastSelectedTeamId === GLOBAL_LEADERBOARD_ID;
+  }
+
+  setlastSelectedTeamId(teamId: string | null): void {
+    this.localStorage.setItem(LeaderboardTeamStorageService.STORAGE_KEY, teamId || GLOBAL_LEADERBOARD_ID);
+  }
+}

tests/acceptance/course-page/view-leaderboard-test.js

@@ -7,7 +7,7 @@ import testScenario from 'codecrafters-frontend/mirage/scenarios/test';
 import { assertTooltipContent, assertTooltipNotRendered } from 'ember-tooltips/test-support';
 import { currentURL, settled } from '@ember/test-helpers';
 import { module, test } from 'qunit';
-import { setupAnimationTest } from 'ember-animated/test-support';
+import { setupAnimationTest, animationsSettled } from 'ember-animated/test-support';
 import { setupApplicationTest } from 'codecrafters-frontend/tests/helpers';
 import { signIn, signInAsSubscriber, signInAsTeamMember } from 'codecrafters-frontend/tests/support/authentication-helpers';
 
@@ -286,6 +286,68 @@ module('Acceptance | course-page | view-leaderboard', function (hooks) {
     await percySnapshot('Leaderboard for teams - Viewing World');
   });
 
+  test('team dropdown selection persists across page refresh', async function (assert) {
+    testScenario(this.server);
+    signInAsTeamMember(this.owner, this.server);
+
+    let python = this.server.schema.languages.findBy({ name: 'Python' });
+    let redis = this.server.schema.courses.findBy({ slug: 'redis' });
+
+    let otherUser = this.server.create('user', {
+      id: 'other-user',
+      avatarUrl: 'https://github.com/Gufran.png',
+      createdAt: new Date(),
+      githubUsername: 'Gufran',
+      username: 'Gufran',
+    });
+
+    this.server.create('course-leaderboard-entry', {
+      status: 'idle',
+      currentCourseStage: redis.stages.models.find((x) => x.position === 2),
+      language: python,
+      user: otherUser,
+      lastAttemptAt: new Date(),
+    });
+
+    await catalogPage.visit();
+    await catalogPage.clickOnCourse('Build your own Redis');
+    await courseOverviewPage.clickOnStartCourse();
+
+    assert.strictEqual(coursePage.leaderboard.entries.length, 0, 'no leaderboard entries should be present by default');
+
+    // Open dropdown and switch to "Everyone" view
+    await coursePage.leaderboard.teamDropdown.toggle();
+    await coursePage.leaderboard.teamDropdown.clickOnLink('Everyone');
+
+    // Verify we're now seeing world leaderboard
+    assert.strictEqual(coursePage.leaderboard.entries.length, 1, 'leaderboard entries should be visible if filtering by world');
+
+    // Refresh the page
+    await catalogPage.visit();
+    await catalogPage.clickOnCourse('Build your own Redis');
+    await courseOverviewPage.clickOnStartCourse();
+
+    // Verify the selection persisted
+    assert.strictEqual(coursePage.leaderboard.entries.length, 1, 'leaderboard entries should still be visible after refresh');
+    await coursePage.leaderboard.teamDropdown.toggle();
+    assert.ok(coursePage.leaderboard.teamDropdown.hasLink('Everyone'), 'should still be on Everyone view');
+
+    // Switch to "Dummy Team" view
+    await coursePage.leaderboard.teamDropdown.clickOnLink('Dummy Team');
+    await animationsSettled();
+    assert.strictEqual(coursePage.leaderboard.entries.length, 0, 'leaderboard entries should be empty if filtering by team');
+
+    // Refresh the page
+    await catalogPage.visit();
+    await catalogPage.clickOnCourse('Build your own Redis');
+    await courseOverviewPage.clickOnStartCourse();
+
+    // Verify the selection persisted
+    assert.strictEqual(coursePage.leaderboard.entries.length, 0, 'leaderboard entries should still be empty after refresh');
+    await coursePage.leaderboard.teamDropdown.toggle();
+    assert.ok(coursePage.leaderboard.teamDropdown.hasLink('Dummy Team'), 'should still be on Dummy Team view');
+  });
+
   test('private leaderboard feature suggestion is shown to non-team members with a prompt', async function (assert) {
     testScenario(this.server);