Use controller state for repo/track instead of transitionTo query params

- Set course route queryParams repo/track to refreshModel: false
- Add activeRepositoryOverride and activeRepository getter on course controller
- Add handleTryOtherLanguage, handleRetryWithSameLanguage, handleSelectRepository;
  set repo/track and override in controller instead of transitionTo/replaceWith
- Replace "Try other language" link with button calling onTryOtherLanguage
- Use controller activeRepository in course and introduction templates
- Pass optional callbacks from course to sidebar to repository dropdown for
  try-different-language, retry-same-language, and select-repository

Author: VasylMarchuk

app/components/course-page/introduction-step/create-repository-card/index.hbs

@@ -14,10 +14,11 @@
   <:expandedSection>
     {{#if (eq this.expandedSection.type "SelectLanguageSection")}}
       <CoursePage::IntroductionStep::CreateRepositoryCard::SelectLanguageSection
-        @preferredLanguageSlug={{@preferredLanguageSlug}}
         @errorMessage={{@repositoryCreationErrorMessage}}
-        @repository={{@repository}}
         @onLanguageSelection={{this.handleLanguageSelection}}
+        @onTryOtherLanguage={{@onTryOtherLanguage}}
+        @preferredLanguageSlug={{@preferredLanguageSlug}}
+        @repository={{@repository}}
       />
     {{else if (eq this.expandedSection.type "SelectLanguageProficiencyLevelSection")}}
       <CoursePage::IntroductionStep::CreateRepositoryCard::SelectLanguageProficiencyLevelSection

app/components/course-page/introduction-step/create-repository-card/index.ts

@@ -14,6 +14,7 @@ interface Signature {
 
   Args: {
     onLanguageSelection: (language: LanguageModel) => void | Promise<boolean>;
+    onTryOtherLanguage: () => void;
     preferredLanguageSlug: string | undefined;
     repository: RepositoryModel;
     repositoryCreationErrorMessage?: string;

app/components/course-page/introduction-step/create-repository-card/select-language-section.hbs

@@ -29,15 +29,14 @@
           @isSelected={{true}}
         />
 
-        <TertiaryLinkButton
+        <TertiaryButton
           {{! @glint-expect-error isNew is not typed correctly }}
           @isDisabled={{@repository.isNew}}
-          @route="course.introduction"
-          @models={{array @repository.course.slug}}
-          @query={{hash repo="new" track=null}}
+          {{on "click" @onTryOtherLanguage}}
+          data-test-try-other-language-button
         >
           Try other language
-        </TertiaryLinkButton>
+        </TertiaryButton>
       {{/if}}
     {{else}}
       {{#if (and (gt this.preferredLanguages.length 0) (not this.shouldShowNonPreferredLanguages))}}

app/components/course-page/introduction-step/create-repository-card/select-language-section.ts

@@ -14,9 +14,10 @@ interface Signature {
 
   Args: {
     errorMessage?: string;
+    onLanguageSelection: (language: LanguageModel) => void;
+    onTryOtherLanguage: () => void;
     preferredLanguageSlug?: string;
     repository: RepositoryModel;
-    onLanguageSelection: (language: LanguageModel) => void;
   };
 }
 

app/components/course-page/repository-dropdown/index.ts

@@ -13,8 +13,11 @@ interface Signature {
   Element: HTMLDivElement;
 
   Args: {
-    repositories: RepositoryModel[];
     activeRepository: RepositoryModel;
+    onRetryWithSameLanguage?: (dropdownActions: { close: () => void }) => void;
+    onSelectRepository?: (repository: RepositoryModel, dropdownActions: { close: () => void }) => void;
+    onTryDifferentLanguage?: () => void;
+    repositories: RepositoryModel[];
   };
 
   Blocks: {
@@ -102,24 +105,36 @@ export default class CoursePageRepositoryDropdown extends Component<Signature> {
 
   @action
   async handleRepositoryLinkClick(repository: RepositoryModel, dropdownActions: { close: () => void }) {
-    // TODO: Even though we're using replaceWith, this does seem to cause a history entry to be added. Debug why?
-    await this.router.replaceWith('course', repository.course.slug, { queryParams: { repo: repository.id } }).followRedirects();
-    dropdownActions.close();
+    if (this.args.onSelectRepository) {
+      this.args.onSelectRepository(repository, dropdownActions);
+    } else {
+      // TODO: Even though we're using replaceWith, this does seem to cause a history entry to be added. Debug why?
+      await this.router.replaceWith('course', repository.course.slug, { queryParams: { repo: repository.id } }).followRedirects();
+      dropdownActions.close();
+    }
   }
 
   @action
   async handleRetryWithSameLanguageActionClick(dropdownActions: { close: () => void }) {
-    this.router
-      .transitionTo('course.introduction', { queryParams: { repo: 'new', track: this.args.activeRepository.language!.slug } })
-      .followRedirects();
-
-    dropdownActions.close();
+    if (this.args.onRetryWithSameLanguage) {
+      this.args.onRetryWithSameLanguage(dropdownActions);
+    } else {
+      this.router
+        .transitionTo('course.introduction', { queryParams: { repo: 'new', track: this.args.activeRepository.language!.slug } })
+        .followRedirects();
+      dropdownActions.close();
+    }
   }
 
   @action
   async handleTryDifferentLanguageActionClick(dropdownActions: { close: () => void }) {
-    this.router.transitionTo('course.introduction', { queryParams: { repo: 'new', track: null } });
-    dropdownActions.close();
+    if (this.args.onTryDifferentLanguage) {
+      this.args.onTryDifferentLanguage();
+      dropdownActions.close();
+    } else {
+      this.router.transitionTo('course.introduction', { queryParams: { repo: 'new', track: null } });
+      dropdownActions.close();
+    }
   }
 }
 

app/components/course-page/sidebar/index.hbs

@@ -3,7 +3,13 @@
   data-test-course-page-sidebar
   ...attributes
 >
-  <CoursePage::RepositoryDropdown @repositories={{@repositories}} @activeRepository={{@activeRepository}} />
+  <CoursePage::RepositoryDropdown
+    @activeRepository={{@activeRepository}}
+    @onRetryWithSameLanguage={{@onRetryWithSameLanguage}}
+    @onSelectRepository={{@onSelectRepository}}
+    @onTryDifferentLanguage={{@onTryDifferentLanguage}}
+    @repositories={{@repositories}}
+  />
 
   <div class="px-3 mt-1">
     <div class="h-px bg-gray-200 dark:bg-white/5 w-full"></div>

app/components/course-page/sidebar/index.ts

@@ -12,10 +12,13 @@ interface Signature {
   Element: HTMLDivElement;
 
   Args: {
-    course: CourseModel;
-    repositories: RepositoryModel[];
     activeRepository: RepositoryModel;
+    course: CourseModel;
     onCollapseButtonClick: () => void;
+    onRetryWithSameLanguage?: (dropdownActions: { close: () => void }) => void;
+    onSelectRepository?: (repository: RepositoryModel, dropdownActions: { close: () => void }) => void;
+    onTryDifferentLanguage?: () => void;
+    repositories: RepositoryModel[];
   };
 }
 

app/controllers/course.ts

@@ -12,9 +12,11 @@ import type RouterService from '@ember/routing/router-service';
 import type AnalyticsEventTrackerService from 'codecrafters-frontend/services/analytics-event-tracker';
 import type FeatureFlagsService from 'codecrafters-frontend/services/feature-flags';
 import type LanguageModel from 'codecrafters-frontend/models/language';
+import type RepositoryModel from 'codecrafters-frontend/models/repository';
 import type { ModelType } from 'codecrafters-frontend/routes/course';
 import type { StepDefinition } from 'codecrafters-frontend/utils/course-page-step-list';
 import type { StepStatus, StepType } from 'codecrafters-frontend/utils/course-page-step-list/step';
+import { StepListDefinition } from 'codecrafters-frontend/utils/course-page-step-list';
 import * as Sentry from '@sentry/ember';
 import { task } from 'ember-concurrency';
 
@@ -36,6 +38,9 @@ export default class CourseController extends Controller {
   @tracked repo: string | undefined = undefined;
   @tracked track: string | undefined = undefined;
 
+  /** When set, used instead of model.activeRepository (avoids model refresh on QP change). */
+  @tracked activeRepositoryOverride: RepositoryModel | null = null;
+
   @tracked configureGithubIntegrationModalIsOpen = false;
   @tracked sidebarIsExpandedOnDesktop = true;
   @tracked sidebarIsExpandedOnMobile = false;
@@ -48,6 +53,10 @@ export default class CourseController extends Controller {
 
   @tracked repositoryCreationErrorMessage: string | undefined;
 
+  get activeRepository(): RepositoryModel {
+    return this.activeRepositoryOverride ?? this.model.activeRepository;
+  }
+
   get currentUser() {
     return this.authenticator.currentUser;
   }
@@ -83,7 +92,7 @@ export default class CourseController extends Controller {
       this.configureGithubIntegrationModalIsOpen = true;
 
       next(() => {
-        this.router.transitionTo({ queryParams: { action: null } }); // reset param
+        this.action = undefined;
       });
     }
   }
@@ -109,20 +118,22 @@ export default class CourseController extends Controller {
   @action
   async handleLanguageSelection(language: LanguageModel): Promise<boolean> {
     this.repositoryCreationErrorMessage = undefined;
-    this.model.activeRepository.language = language;
+    this.activeRepository.language = language;
 
     try {
-      await this.model.activeRepository.save();
+      await this.activeRepository.save();
     } catch (error) {
-      this.model.activeRepository.language = undefined;
+      this.activeRepository.language = undefined;
       this.repositoryCreationErrorMessage =
         'Failed to create repository, please try again? Contact us at hello@codecrafters.io if this error persists.';
       Sentry.captureException(error);
 
       return false;
     }
 
-    this.router.transitionTo({ queryParams: { repo: this.model.activeRepository.id, track: null } });
+    this.repo = this.activeRepository.id;
+    this.track = undefined;
+    this.activeRepositoryOverride = null;
 
     return true;
   }
@@ -132,30 +143,71 @@ export default class CourseController extends Controller {
     // Nothing to do at the moment
   }
 
+  @action
+  handleRetryWithSameLanguage(dropdownActions: { close: () => void }) {
+    const trackSlug = this.activeRepository.language?.slug ?? undefined;
+    this.handleTryOtherLanguage(trackSlug ?? null);
+    dropdownActions.close();
+  }
+
   @action
   async handleRouteChanged() {
     this.sidebarIsExpandedOnMobile = false;
   }
 
+  @action
+  handleSelectRepository(repository: RepositoryModel, dropdownActions: { close: () => void }) {
+    this.activeRepositoryOverride = repository;
+    this.repo = repository.id;
+    this.track = undefined;
+    this.coursePageState.setStepList(new StepListDefinition(repository));
+    dropdownActions.close();
+  }
+
   @action
   handleToggleTestResultsBar() {
     this.coursePageState.testResultsBarIsExpanded = !this.coursePageState.testResultsBarIsExpanded;
   }
 
+  @action
+  handleTryOtherLanguage(track: string | null) {
+    const course = this.model.course;
+    const existingNew = this.store.peekAll('repository').find((repository) => repository.isNew);
+
+    let newRepository: RepositoryModel;
+
+    if (existingNew) {
+      (existingNew as RepositoryModel).course = course;
+      (existingNew as RepositoryModel).user = this.authenticator.currentUser!;
+      newRepository = existingNew as RepositoryModel;
+    } else {
+      newRepository = this.store.createRecord('repository', {
+        course,
+        user: this.authenticator.currentUser,
+      }) as RepositoryModel;
+    }
+
+    this.activeRepositoryOverride = newRepository;
+    this.repo = 'new';
+    this.track = track ?? undefined;
+    this.coursePageState.setStepList(new StepListDefinition(newRepository));
+  }
+
   @action
   async handleWillDestroyContainer() {
     this.teardownRouteChangeListeners();
   }
 
   pollRepositoryTask = task({ keepLatest: true }, async (): Promise<void> => {
-    await new RepositoryPoller(this.model.activeRepository).doPoll();
+    await new RepositoryPoller(this.activeRepository).doPoll();
   });
 
   @action
   resetController(_controller: unknown, isExiting: boolean, _transition: unknown) {
     if (isExiting) {
       this.repo = undefined;
       this.track = undefined;
+      this.activeRepositoryOverride = null;
     }
   }
 

app/routes/course.ts

@@ -29,10 +29,10 @@ export default class CourseRoute extends BaseRoute {
 
   queryParams = {
     repo: {
-      refreshModel: true,
+      refreshModel: false,
     },
     track: {
-      refreshModel: true,
+      refreshModel: false,
     },
   };
 

app/templates/course.hbs

@@ -21,20 +21,23 @@
   {{! @glint-expect-error on-key modifier types aren't right? }}
   {{on-key "cmd+KeyJ" this.handleToggleTestResultsBar}}
 >
-  {{#if @model.activeRepository.id}}
+  {{#if this.activeRepository.id}}
     <div
       class="hidden"
-      {{on-action-cable-message this.pollRepositoryTask.perform channel="RepositoryChannel" args=(hash repository_id=@model.activeRepository.id)}}
+      {{on-action-cable-message this.pollRepositoryTask.perform channel="RepositoryChannel" args=(hash repository_id=this.activeRepository.id)}}
       {{on-visibility-change this.pollRepositoryTask.perform if="visible"}}
     />
   {{/if}}
 
   {{#if this.sidebarIsExpandedOnDesktop}}
     <CoursePage::Sidebar
+      @activeRepository={{this.activeRepository}}
       @course={{@model.course}}
-      @repositories={{@model.repositories}}
-      @activeRepository={{@model.activeRepository}}
       @onCollapseButtonClick={{this.handleCollapseSidebarButtonClick}}
+      @onRetryWithSameLanguage={{this.handleRetryWithSameLanguage}}
+      @onSelectRepository={{this.handleSelectRepository}}
+      @onTryDifferentLanguage={{fn this.handleTryOtherLanguage null}}
+      @repositories={{@model.repositories}}
       {{! pb-12 accounts for the test results bar at the bottom !}}
       class="group relative pb-12 w-full max-w-[18em] shrink-0 h-screen hidden lg:flex"
     />
@@ -48,10 +51,13 @@
       </div>
 
       <CoursePage::Sidebar
+        @activeRepository={{this.activeRepository}}
         @course={{@model.course}}
-        @repositories={{@model.repositories}}
-        @activeRepository={{@model.activeRepository}}
         @onCollapseButtonClick={{this.handleCollapseSidebarButtonClick}}
+        @onRetryWithSameLanguage={{this.handleRetryWithSameLanguage}}
+        @onSelectRepository={{this.handleSelectRepository}}
+        @onTryDifferentLanguage={{fn this.handleTryOtherLanguage null}}
+        @repositories={{@model.repositories}}
         class="group relative w-full max-w-[18em] shrink-0 h-screen lg:hidden"
       />
     </CoursePage::Sidebar::MobileBackdrop>
@@ -66,7 +72,7 @@
     />
 
     <CoursePage::Header::MainSection
-      @activeRepository={{@model.activeRepository}}
+      @activeRepository={{this.activeRepository}}
       @activeStep={{this.coursePageState.activeStep}}
       @course={{@model.course}}
       @currentStep={{this.coursePageState.currentStep}}
@@ -91,7 +97,7 @@
       </div>
 
       <CoursePage::RightSidebar
-        @activeRepository={{@model.activeRepository}}
+        @activeRepository={{this.activeRepository}}
         @course={{@model.course}}
         @isExpanded={{this.leaderboardIsExpanded}}
         @onCollapseButtonClick={{this.handleCollapseLeaderboardButtonClick}}
@@ -106,7 +112,7 @@
   <CoursePage::TestResultsBar
     @activeStep={{this.coursePageState.activeStep}}
     @currentStep={{this.coursePageState.currentStep}}
-    @repository={{@model.activeRepository}}
+    @repository={{this.activeRepository}}
     class="absolute bottom-0 left-0 right-0 z-20"
   />
 </div>
@@ -115,7 +121,7 @@
   <ModalBackdrop>
     {{! @glint-expect-error: not ts-ified yet }}
     <CoursePage::ConfigureGithubIntegrationModal
-      @repository={{@model.activeRepository}}
+      @repository={{this.activeRepository}}
       {{! @glint-expect-error: mut not ts-ified yet }}
       @onClose={{fn (mut this.configureGithubIntegrationModalIsOpen) false}}
     />