Highlight language guides in second-stage-instructions-card [percy]

codecrafters-io · Oct 29, 2024 · 2beb262 · 2beb262
1 parent 0a63165
commit 2beb262
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 8 deletions.
diff --git a/app/components/course-page/course-stage-step/second-stage-instructions-card.hbs b/app/components/course-page/course-stage-step/second-stage-instructions-card.hbs
@@ -1,4 +1,10 @@
-<CoursePage::InstructionsCard @title="How to pass this stage" id="second-stage-instructions-card" ...attributes>
+<CoursePage::InstructionsCard
+  @title="How to pass this stage"
+  id="second-stage-instructions-card"
+  ...attributes
+  {{did-update this.loadLanguageGuides @courseStage}}
+  {{did-insert this.loadLanguageGuides}}
+>
   <:content>
     <div class="prose dark:prose-invert mb-5">
       <p>
@@ -18,12 +24,14 @@
           @repository={{@repository}}
           @courseStage={{@courseStage}}
           @isComplete={{this.readInstructionsStepIsComplete}}
+          @isShowingLanguageGuide={{this.isShowingLanguageGuide}}
         />
       {{else if (eq stepList.expandedStep.id "implement-solution")}}
         <CoursePage::CourseStageStep::SecondStageInstructionsCard::ImplementSolutionStep
           @repository={{@repository}}
           @courseStage={{@courseStage}}
           @isComplete={{this.implementSolutionStepIsComplete}}
+          @isShowingLanguageGuide={{this.isShowingLanguageGuide}}
         />
       {{else if (eq stepList.expandedStep.id "run-tests")}}
         <CoursePage::CourseStageStep::SecondStageInstructionsCard::RunTestsStep

diff --git a/app/components/course-page/course-stage-step/second-stage-instructions-card.ts b/app/components/course-page/course-stage-step/second-stage-instructions-card.ts
@@ -5,7 +5,9 @@ import Store from '@ember-data/store';
 import type RepositoryModel from 'codecrafters-frontend/models/repository';
 import type CourseStageModel from 'codecrafters-frontend/models/course-stage';
 import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
 import type { Step } from 'codecrafters-frontend/components/expandable-step-list';
+import type FeatureFlagsService from 'codecrafters-frontend/services/feature-flags';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -54,6 +56,7 @@ class RunTestsStep extends BaseStep implements Step {
 }
 
 export default class SecondStageInstructionsCardComponent extends Component<Signature> {
+  @service declare featureFlags: FeatureFlagsService;
   @service declare coursePageState: CoursePageStateService;
   @service declare store: Store;
 
@@ -69,6 +72,11 @@ export default class SecondStageInstructionsCardComponent extends Component<Sign
     return this.coursePageState.manuallyCompletedStepIdsInSecondStageInstructions.includes('implement-solution');
   }
 
+  get isShowingLanguageGuide() {
+    const languageGuide = this.args.courseStage.languageGuides.findBy('language', this.args.repository.language);
+    return this.featureFlags.canSeeLanguageGuidesForStage2 && !!languageGuide;
+  }
+
   get readInstructionsStepIsComplete() {
     return this.implementSolutionStepIsComplete || this.readInstructionsStepWasMarkedAsComplete;
   }
@@ -110,6 +118,18 @@ export default class SecondStageInstructionsCardComponent extends Component<Sign
   handleViewLogsButtonClick() {
     this.coursePageState.testResultsBarIsExpanded = true;
   }
+
+  @action
+  loadLanguageGuides(): void {
+    this.loadLanguageGuidesTask.perform();
+  }
+
+  loadLanguageGuidesTask = task({ keepLatest: true }, async (): Promise<void> => {
+    await this.store.query('course-stage-language-guide', {
+      course_stage_id: this.args.courseStage.id,
+      include: 'course-stage,language',
+    });
+  });
 }
 
 declare module '@glint/environment-ember-loose/registry' {

diff --git a/.../course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.hbs b/.../course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.hbs
@@ -3,7 +3,13 @@
     Head over to your editor / IDE and implement your solution.
   </p>
   <p>
-    If you want a quick look at what functions to use or how to structure your code, we recommend looking at
-    <LinkTo @route="course.stage.code-examples">Code Examples</LinkTo>.
+    {{#if @isShowingLanguageGuide}}
+      If you want a quick look at what functions to use, we recommend looking at
+      <a href="#language-guide-card">{{this.currentLanguageName}} Guide</a>.
+    {{else}}
+      If you want a quick look at what functions to use or how to structure your code, we recommend looking at
+      <LinkTo @route="course.stage.code-examples">Code Examples</LinkTo>.
+    {{/if}}
+
   </p>
 </div>
diff --git a/...s/course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.ts b/...s/course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.ts
@@ -9,10 +9,15 @@ interface Signature {
     repository: RepositoryModel;
     courseStage: CourseStageModel;
     isComplete: boolean;
+    isShowingLanguageGuide: boolean;
   };
 }
 
-export default class ImplementSolutionStepComponent extends Component<Signature> {}
+export default class ImplementSolutionStepComponent extends Component<Signature> {
+  get currentLanguageName(): string {
+    return this.args.repository.language!.name;
+  }
+}
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {

diff --git a/...s/course-page/course-stage-step/second-stage-instructions-card/read-instructions-step.hbs b/...s/course-page/course-stage-step/second-stage-instructions-card/read-instructions-step.hbs
@@ -9,9 +9,16 @@
   </p>
   <ul>
     <li>
-      The
-      <LinkTo @route="course.stage.code-examples">Code Examples</LinkTo>
-      tab, which contains code examples from other users.
+      {{#if @isShowingLanguageGuide}}
+        The
+        <a href="#language-guide-card">{{this.currentLanguageName}} Guide</a>
+        card, which contains
+        {{this.currentLanguageName}}-specific instructions for this stage.
+      {{else}}
+        The
+        <LinkTo @route="course.stage.code-examples">Code Examples</LinkTo>
+        tab, which contains code examples from other users.
+      {{/if}}
     </li>
 
     {{! Let's limit to 2 suggestions for now so that we don't overwhelm the user.}}

diff --git a/...ts/course-page/course-stage-step/second-stage-instructions-card/read-instructions-step.ts b/...ts/course-page/course-stage-step/second-stage-instructions-card/read-instructions-step.ts
@@ -9,10 +9,15 @@ interface Signature {
     repository: RepositoryModel;
     courseStage: CourseStageModel;
     isComplete: boolean;
+    isShowingLanguageGuide: boolean;
   };
 }
 
-export default class ReadInstructionsStepComponent extends Component<Signature> {}
+export default class ReadInstructionsStepComponent extends Component<Signature> {
+  get currentLanguageName(): string {
+    return this.args.repository.language!.name;
+  }
+}
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {