Merge pull request #3087 from codecrafters-io/feat-add-leaderboard-link-header

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

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,13 +24,21 @@ 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;
 
   @tracked mobileMenuIsExpanded = false;
   @tracked floatingBarStyle: SafeString = htmlSafe('left: 0px; width: 0px; opacity: 0;');
   @tracked floatingBarContainer: HTMLElement | null = null;
 
+  constructor(owner: unknown, args: object) {
+    super(owner, args);
+
+    // This can't be in instance-initializers since it depends on the authenticator service
+    this.preferredLanguageLeaderboard.onBoot();
+  }
+
   get activeDiscountForYearlyPlan(): PromotionalDiscountModel | null {
     return this.currentUser?.activeDiscountForYearlyPlan || null;
   }
@@ -38,7 +47,7 @@ export default class Header extends Component<Signature> {
     return this.authenticator.currentUser;
   }
 
-  get links(): { text: string; route: string; type: 'route' | 'link' }[] {
+  get links(): { text: string; route: string; type: 'route' | 'link'; routeParams?: string[] }[] {
     if (this.currentUser) {
       return this.linksForAuthenticatedUser;
     } else {
@@ -54,12 +63,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/components/leaderboard-page/header.ts

@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 import type LanguageModel from 'codecrafters-frontend/models/language';
 import type RouterService from '@ember/routing/router-service';
 import type Store from '@ember-data/store';
+import type PreferredLanguageLeaderboardService from 'codecrafters-frontend/services/preferred-language-leaderboard';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -14,14 +15,24 @@ interface Signature {
 }
 
 export default class LeaderboardPageHeader extends Component<Signature> {
+  @service declare preferredLanguageLeaderboard: PreferredLanguageLeaderboardService;
   @service declare router: RouterService;
   @service declare store: Store;
 
   get sortedLanguagesForDropdown(): LanguageModel[] {
-    return this.store
-      .peekAll('language')
-      .sortBy('sortPositionForTrack')
-      .filter((language) => language.liveOrBetaStagesCount > 0);
+    const allLanguages = this.store.peekAll('language');
+    const preferredLanguageSlugs = this.preferredLanguageLeaderboard.preferredLanguageSlugs;
+
+    return [
+      // First show the user's preferred languages
+      ...preferredLanguageSlugs.map((slug) => allLanguages.find((language) => language.slug === slug)).filter(Boolean),
+
+      // Next, show all languages alphabetically
+      ...allLanguages
+        .sortBy('sortPositionForTrack')
+        .reject((language) => preferredLanguageSlugs.includes(language.slug))
+        .filter((language) => language.liveOrBetaStagesCount > 0),
+    ];
   }
 
   @action

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 | null;
+
   @hasMany('leaderboard-entry', { async: false, inverse: 'leaderboard' }) declare entries: LeaderboardEntryModel[];
 
   @attr('string') declare type: string;

app/models/user.ts

@@ -226,41 +226,47 @@ export default class UserModel extends Model {
 
   declare fetchCurrent: (this: Model, payload: unknown) => Promise<UserModel | null>;
   declare fetchNextInvoicePreview: (this: Model, payload: unknown) => Promise<InvoiceModel | null>;
+  declare fetchTopLanguageLeaderboardSlugs: (this: Model, payload: unknown) => Promise<string[]>;
   declare syncFeatureFlags: (this: Model, payload: unknown) => Promise<void>;
   declare syncUsernameFromGitHub: (this: Model, payload: unknown) => Promise<void>;
 }
 
-UserModel.prototype.fetchNextInvoicePreview = memberAction({
-  path: 'next-invoice-preview',
+UserModel.prototype.fetchCurrent = collectionAction({
+  path: 'current',
   type: 'get',
+  urlType: 'findRecord',
 
   after(response) {
     if (response.data) {
       this.store.pushPayload(response);
 
-      return this.store.peekRecord('invoice', response.data.id);
+      return this.store.peekRecord('user', response.data.id);
     } else {
       return null;
     }
   },
 });
 
-UserModel.prototype.fetchCurrent = collectionAction({
-  path: 'current',
+UserModel.prototype.fetchNextInvoicePreview = memberAction({
+  path: 'next-invoice-preview',
   type: 'get',
-  urlType: 'findRecord',
 
   after(response) {
     if (response.data) {
       this.store.pushPayload(response);
 
-      return this.store.peekRecord('user', response.data.id);
+      return this.store.peekRecord('invoice', response.data.id);
     } else {
       return null;
     }
   },
 });
 
+UserModel.prototype.fetchTopLanguageLeaderboardSlugs = memberAction({
+  path: 'top-language-leaderboard-slugs',
+  type: 'get',
+});
+
 UserModel.prototype.syncFeatureFlags = memberAction({
   path: 'sync-feature-flags',
   type: 'post',

app/routes/contest.ts

@@ -111,12 +111,15 @@ export default class ContestRoute extends BaseRoute {
       }
     }
 
-    const topLeaderboardEntries = await this.store.findAll('leaderboard-entry', {
+    // TODO[Vasyl]: This has an issue where it can end up picking _any_ leaderboard entry and not just the top ones. We
+    //              don't happen to render contest leaderboards elsewhere so it isn't a problem for now. As a pattern this is something
+    //              I'd like to figure out though. Maybe we use `query` instead of the adapterOptions strategy? Or maybe more explicit caching?
+    const topLeaderboardEntries = (await this.store.findAll('leaderboard-entry', {
       adapterOptions: {
         leaderboard_id: contest.leaderboard.id,
       },
       include: 'user,leaderboard',
-    });
+    })) as unknown as LeaderboardEntryModel[];
 
     const languages = await this.store.findAll('language');
 

app/services/feature-flags.ts

@@ -18,6 +18,10 @@ export default class FeatureFlagsService extends Service {
     return this.authenticator.currentUser;
   }
 
+  get shouldSeeLeaderboard(): boolean {
+    return this.currentUser?.isStaff || 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,75 @@
+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 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, new Date(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) {
+      await this.refresh();
+
+      return;
+    }
+
+    // Let's use the latest value we have from local storage
+    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();
+    this.preferredLanguageSlugs = (await this.authenticator.currentUser!.fetchTopLanguageLeaderboardSlugs({})).slice(0, 3);
+    this.localStorage.setItem(PreferredLanguageLeaderboardService.STORAGE_KEY, new StoredData(this.preferredLanguageSlugs, new Date()).toJSON());
+  }
+}