Refactor course introduction flow to handle language selection

- Added `onLanguageSelected` action to `CreateRepositoryCard` for better handling of language selection.
- Updated `IntroductionController` to manage repository and model refresh logic based on language selection.
- Introduced `shouldSkipNextModelRefresh` flag in `CourseController` to optimize model loading.
- Adjusted template to bind the new action for language selection.

This improves the user experience by ensuring the correct repository is set without unnecessary model refreshes.

Author: VasylMarchuk

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

@@ -3,7 +3,6 @@ import type Owner from '@ember/owner';
 import CoursePageStateService from 'codecrafters-frontend/services/course-page-state';
 import LanguageModel from 'codecrafters-frontend/models/language';
 import RepositoryModel from 'codecrafters-frontend/models/repository';
-import RouterService from '@ember/routing/router-service';
 import * as Sentry from '@sentry/ember';
 import { type Section as MultiSectionCardSection } from 'codecrafters-frontend/components/course-page/multi-section-card';
 import { Section, SectionList } from 'codecrafters-frontend/utils/pre-challenge-assessment-section-list';
@@ -15,13 +14,13 @@ interface Signature {
   Element: HTMLDivElement;
 
   Args: {
+    onLanguageSelected: (repository: RepositoryModel) => void;
     preferredLanguageSlug: string | undefined;
     repository: RepositoryModel;
   };
 }
 
 export default class CreateRepositoryCard extends Component<Signature> {
-  @service declare router: RouterService;
   @service declare coursePageState: CoursePageStateService;
 
   @tracked expandedSectionIndex: number | null = null;
@@ -72,7 +71,7 @@ export default class CreateRepositoryCard extends Component<Signature> {
 
     this.expandNextSection();
 
-    this.router.transitionTo({ queryParams: { repo: this.args.repository.id, track: null } });
+    this.args.onLanguageSelected(this.args.repository);
   }
 
   @action

app/controllers/course.ts

@@ -35,6 +35,7 @@ export default class CourseController extends Controller {
   @tracked track: string | undefined = undefined;
 
   @tracked configureGithubIntegrationModalIsOpen = false;
+  @tracked shouldSkipNextModelRefresh = false;
   @tracked sidebarIsExpandedOnDesktop = true;
   @tracked sidebarIsExpandedOnMobile = false;
   @tracked leaderboardIsExpanded = true;

app/controllers/course/introduction.ts

@@ -1,7 +1,11 @@
 import Controller from '@ember/controller';
+import CourseController from 'codecrafters-frontend/controllers/course';
+import { action } from '@ember/object';
+import { getOwner } from '@ember/owner';
 import { service } from '@ember/service';
 import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
 import type CoursePageStateService from 'codecrafters-frontend/services/course-page-state';
+import type RepositoryModel from 'codecrafters-frontend/models/repository';
 import type { ModelType as CourseRouteModelType } from 'codecrafters-frontend/routes/course';
 import type StepDefinition from 'codecrafters-frontend/utils/course-page-step-list/step';
 
@@ -14,4 +18,12 @@ export default class IntroductionController extends Controller {
   get currentStep(): StepDefinition {
     return this.coursePageState.currentStep as StepDefinition;
   }
+
+  @action
+  handleLanguageSelected(repository: RepositoryModel) {
+    const courseController = getOwner(this)!.lookup('controller:course') as CourseController;
+    courseController.shouldSkipNextModelRefresh = true;
+    courseController.repo = repository.id;
+    courseController.track = undefined;
+  }
 }

app/routes/course.ts

@@ -1,4 +1,5 @@
 import BaseRoute from 'codecrafters-frontend/utils/base-route';
+import CourseController from 'codecrafters-frontend/controllers/course';
 import { all as RSVPAll } from 'rsvp';
 import RepositoryPoller from 'codecrafters-frontend/utils/repository-poller';
 import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
@@ -118,6 +119,14 @@ export default class CourseRoute extends BaseRoute {
   }
 
   async model(params: { course_slug: string }, transition: Transition): Promise<ModelType> {
+    const courseController = this.controllerFor('course') as CourseController;
+
+    if (courseController.shouldSkipNextModelRefresh) {
+      courseController.shouldSkipNextModelRefresh = false;
+
+      return courseController.model;
+    }
+
     const [allCourses, allRepositories] = (await this.loadResources()) as [CourseModel[], RepositoryModel[]];
     const course = allCourses.find((course) => course.slug === params.course_slug) as CourseModel;
 

app/templates/course/introduction.hbs

@@ -2,6 +2,7 @@
   <div class="w-full pt-8 pb-32 px-3 md:px-6 lg:px-10">
     <CoursePage::IntroductionStep::WelcomeCard @repository={{@model.activeRepository}} class="mb-6" />
     <CoursePage::IntroductionStep::CreateRepositoryCard
+      @onLanguageSelected={{this.handleLanguageSelected}}
       @repository={{@model.activeRepository}}
       @preferredLanguageSlug={{@model.track}}
       class="mb-6"

app/utils/course-page-step-list/course-stage-step.ts

@@ -155,6 +155,7 @@ Check the [How to pass this stage](#first-stage-tutorial-heading) section for in
   }
 
   get status() {
+    // debugger;
     // TODO: Might need to prioritize "in_progress" when allowing users to change currentStage
     if (this.completedAt) {
       return 'complete';