feat(header): add leaderboard link for users with feature flag

- Add leaderboard link to header for authenticated users when the 
  'should-see-leaderboard' feature flag is enabled.
- Default leaderboard link routes to the user's preferred language 
  leaderboard.
- Update acceptance tests to cover new leaderboard link visibility and 
  navigation.
- Refactor tests to set up leaderboard data before each test for 
  consistency.

Author: rohitpaulk

app/components/header/index.hbs

@@ -44,7 +44,7 @@
           {{did-update this.handleDidUpdateCurrentRouteName this.router.currentRouteName}}
         >
           {{#each this.links as |link|}}
-            <Header::Link @route={{link.route}} @text={{link.text}} @type={{link.type}} class="px-2" />
+            <Header::Link @route={{link.route}} @text={{link.text}} @type={{link.type}} @routeParams={{link.routeParams}} class="px-2" />
           {{/each}}
 
           {{! Floating green bar }}

app/components/header/index.ts

@@ -4,6 +4,7 @@ import logoImage from '/assets/images/logo/logomark-color.svg';
 import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
 import type ContainerWidthService from 'codecrafters-frontend/services/container-width';
 import type FeatureFlagsService from 'codecrafters-frontend/services/feature-flags';
+import type PreferredLanguageLeaderboardService from 'codecrafters-frontend/services/preferred-language-leaderboard';
 import type RouterService from '@ember/routing/router-service';
 import type VersionTrackerService from 'codecrafters-frontend/services/version-tracker';
 import type { SafeString } from '@ember/template/-private/handlebars';
@@ -23,6 +24,7 @@ export default class Header extends Component<Signature> {
   @service declare authenticator: AuthenticatorService;
   @service declare containerWidth: ContainerWidthService;
   @service declare featureFlags: FeatureFlagsService;
+  @service declare preferredLanguageLeaderboard: PreferredLanguageLeaderboardService;
   @service declare router: RouterService;
   @service declare versionTracker: VersionTrackerService;
 
@@ -54,12 +56,21 @@ export default class Header extends Component<Signature> {
     ];
   }
 
-  get linksForAuthenticatedUser(): { text: string; route: string; type: 'route' | 'link' }[] {
-    const links: { text: string; route: string; type: 'route' | 'link' }[] = [
+  get linksForAuthenticatedUser(): { text: string; route: string; type: 'route' | 'link'; routeParams?: string[] }[] {
+    const links: { text: string; route: string; type: 'route' | 'link'; routeParams?: string[] }[] = [
       { text: 'Catalog', route: 'catalog', type: 'route' },
       { text: 'Roadmap', route: 'roadmap', type: 'route' },
     ];
 
+    if (this.featureFlags.shouldSeeLeaderboard) {
+      links.push({
+        text: 'Leaderboard',
+        route: 'leaderboard',
+        type: 'route',
+        routeParams: [this.preferredLanguageLeaderboard.defaultLanguageSlug],
+      });
+    }
+
     return links;
   }
 

app/components/header/link.hbs

@@ -1,6 +1,7 @@
 {{#if (eq @type "route")}}
   <LinkTo
     @route={{@route}}
+    @models={{(or @routeParams (array))}}
     class="text-sm relative hover:text-gray-900 dark:hover:text-gray-100
       {{if this.isActive 'text-gray-700 dark:text-gray-300' 'text-gray-600 dark:text-gray-400'}}
       "

app/components/header/link.ts

@@ -9,6 +9,7 @@ interface Signature {
     text: string;
     type: 'link' | 'route';
     route: string;
+    routeParams?: string[];
   };
 }
 

app/instance-initializers/preferred-language-leaderboard.ts

@@ -0,0 +1,11 @@
+import ApplicationInstance from '@ember/application/instance';
+import type PreferredLanguageLeaderboardService from 'codecrafters-frontend/services/preferred-language-leaderboard';
+
+export function initialize(applicationInstance: ApplicationInstance) {
+  const service = applicationInstance.lookup('service:preferred-language-leaderboard') as PreferredLanguageLeaderboardService;
+  service.onBoot();
+}
+
+export default {
+  initialize,
+};

app/models/leaderboard-entry.ts

@@ -2,6 +2,7 @@ import Model, { attr, belongsTo } from '@ember-data/model';
 import type LeaderboardModel from './leaderboard';
 import type UserModel from './user';
 import CourseModel from './course';
+import { collectionAction } from 'ember-api-actions';
 
 export default class LeaderboardEntryModel extends Model {
   @belongsTo('leaderboard', { async: false, inverse: 'entries' }) declare leaderboard: LeaderboardModel;
@@ -22,4 +23,22 @@ export default class LeaderboardEntryModel extends Model {
 
     return this.relatedCourseSlugs.map((slug) => allCourses.find((course) => course.slug === slug)).filter(Boolean);
   }
+
+  declare fetchForCurrentUser: (this: Model, payload: unknown) => Promise<LeaderboardEntryModel[]>;
 }
+
+LeaderboardEntryModel.prototype.fetchForCurrentUser = collectionAction({
+  path: 'for-current-user',
+  type: 'get',
+  urlType: 'findAll',
+
+  after(response) {
+    if (response.data) {
+      this.store.pushPayload(response);
+
+      return response.data.map((data: { id: string }) => this.store.peekRecord('leaderboard-entry', data.id));
+    } else {
+      return [];
+    }
+  },
+});

app/models/leaderboard.ts

@@ -1,9 +1,12 @@
 import Model, { attr, belongsTo, hasMany } from '@ember-data/model';
 import type ContestModel from './contest';
 import type LeaderboardEntryModel from './leaderboard-entry';
+import type LanguageModel from './language';
 
 export default class LeaderboardModel extends Model {
   @belongsTo('contest', { async: false, inverse: 'leaderboard' }) declare contest: ContestModel;
+  @belongsTo('language', { async: false, inverse: 'leaderboard' }) declare language: LanguageModel;
+
   @hasMany('leaderboard-entry', { async: false, inverse: 'leaderboard' }) declare entries: LeaderboardEntryModel[];
 
   @attr('string') declare type: string;

app/services/feature-flags.ts

@@ -18,6 +18,10 @@ export default class FeatureFlagsService extends Service {
     return this.authenticator.currentUser;
   }
 
+  get shouldSeeLeaderboard(): boolean {
+    return this.getFeatureFlagValue('should-see-leaderboard') === 'true';
+  }
+
   getFeatureFlagValue(flagName: string): string | null | undefined {
     const value = this.currentUser?.featureFlags?.[flagName];
 

app/services/preferred-language-leaderboard.ts

@@ -0,0 +1,84 @@
+import Service, { inject as service } from '@ember/service';
+import LocalStorageService from 'codecrafters-frontend/services/local-storage';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import type AuthenticatorService from './authenticator';
+import LeaderboardEntryModel from 'codecrafters-frontend/models/leaderboard-entry';
+import type Store from '@ember-data/store';
+
+class StoredData {
+  languageSlugs: string[];
+  storedAt: Date;
+
+  constructor(languageSlugs: string[], storedAt?: Date) {
+    this.languageSlugs = languageSlugs;
+    this.storedAt = storedAt || new Date();
+  }
+
+  static fromJSON(json: string): StoredData {
+    const { languageSlugs, storedAt } = JSON.parse(json);
+
+    return new StoredData(languageSlugs, storedAt);
+  }
+
+  toJSON(): string {
+    return JSON.stringify({
+      languageSlugs: this.languageSlugs,
+      storedAt: this.storedAt,
+    });
+  }
+}
+
+export default class PreferredLanguageLeaderboardService extends Service {
+  static STORAGE_KEY = 'preferred-language-leaderboard-v1';
+
+  @service declare authenticator: AuthenticatorService;
+  @service declare localStorage: LocalStorageService;
+  @service declare store: Store;
+
+  // We default to Rust since it's the first track in the catalog
+  @tracked preferredLanguageSlugs: string[] = [];
+
+  // This is used when a user clicks on the Leaderboard link in the header
+  get defaultLanguageSlug(): string {
+    return this.preferredLanguageSlugs[0] || 'rust';
+  }
+
+  @action
+  async onBoot(): Promise<void> {
+    if (!this.authenticator.isAuthenticated) {
+      return;
+    }
+
+    const serializedStoredData = this.localStorage.getItem(PreferredLanguageLeaderboardService.STORAGE_KEY);
+
+    if (!serializedStoredData) {
+      return;
+    }
+
+    // Let's use the latest value we have from
+    const storedData = StoredData.fromJSON(serializedStoredData);
+    this.preferredLanguageSlugs = storedData.languageSlugs;
+
+    // Re-fetch if data is more than 6 hours old
+    if (storedData.storedAt.getTime() < Date.now() - 1000 * 60 * 60 * 6) {
+      await this.refresh();
+    }
+  }
+
+  async refresh(): Promise<void> {
+    await this.authenticator.authenticate();
+
+    const userLeaderboardEntries = (await this.store
+      .createRecord('leaderboard-entry')
+      .fetchForCurrentUser({ include: 'leaderboard,leaderboard.language,user' })) as unknown as LeaderboardEntryModel[];
+
+    this.preferredLanguageSlugs = userLeaderboardEntries
+      .filter((entry) => entry.score > 0)
+      .sort((a, b) => b.score - a.score)
+      .map((entry) => entry.leaderboard.language.slug)
+      .slice(0, 3);
+
+    this.localStorage.setItem(PreferredLanguageLeaderboardService.STORAGE_KEY, new StoredData(this.preferredLanguageSlugs, new Date()).toJSON());
+  }
+}

mirage/handlers/leaderboard-entries.js

@@ -1,3 +1,5 @@
+import CurrentMirageUser from 'codecrafters-frontend/mirage/utils/current-mirage-user';
+
 export default function (server) {
   server.get('/leaderboard-entries', function (schema, request) {
     if (!request.queryParams.leaderboard_id) {
@@ -30,4 +32,8 @@ export default function (server) {
       throw new Error(`Invalid filter type: ${request.queryParams.filter_type}`);
     }
   });
+
+  server.get('/leaderboard-entries/for-current-user', function (schema) {
+    return schema.leaderboardEntries.all().filter((leaderboardEntry) => leaderboardEntry.user.id === CurrentMirageUser.currentUserId);
+  });
 }