Improve based on feedback [percy]

codecrafters-io · Oct 29, 2024 · 146acc0 · 146acc0
1 parent 36a2e60
commit 146acc0
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 106 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,10 +1,4 @@
-<CoursePage::InstructionsCard
-  @title="How to pass this stage"
-  id="second-stage-instructions-card"
-  ...attributes
-  {{did-update this.loadLanguageGuides @courseStage}}
-  {{did-insert this.loadLanguageGuides}}
->
+<CoursePage::InstructionsCard @title="How to pass this stage" id="second-stage-instructions-card" ...attributes>
   <:content>
     <div class="prose dark:prose-invert mb-5">
       <p>
@@ -24,14 +18,14 @@
           @repository={{@repository}}
           @courseStage={{@courseStage}}
           @isComplete={{this.readInstructionsStepIsComplete}}
-          @isShowingLanguageGuide={{this.isShowingLanguageGuide}}
+          @shouldRecommendLanguageGuide={{@shouldRecommendLanguageGuide}}
         />
       {{else if (eq stepList.expandedStep.id "implement-solution")}}
         <CoursePage::CourseStageStep::SecondStageInstructionsCard::ImplementSolutionStep
           @repository={{@repository}}
           @courseStage={{@courseStage}}
           @isComplete={{this.implementSolutionStepIsComplete}}
-          @isShowingLanguageGuide={{this.isShowingLanguageGuide}}
+          @shouldRecommendLanguageGuide={{@shouldRecommendLanguageGuide}}
         />
       {{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,16 +5,15 @@ 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;
 
   Args: {
     repository: RepositoryModel;
     courseStage: CourseStageModel;
+    shouldRecommendLanguageGuide: boolean;
   };
 }
 
@@ -56,7 +55,6 @@ 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;
 
@@ -72,12 +70,6 @@ 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;
   }
@@ -119,18 +111,6 @@ 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,13 +3,12 @@
     Head over to your editor / IDE and implement your solution.
   </p>
   <p>
-    {{#if @isShowingLanguageGuide}}
+    {{#if @shouldRecommendLanguageGuide}}
       If you want a quick look at what functions to use, we recommend looking at
-      <a href="#language-guide-card">{{this.currentLanguageName}} Guide</a>.
+      <a href="#language-guide-card">{{@repository.language.name}} 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,15 +9,11 @@ interface Signature {
     repository: RepositoryModel;
     courseStage: CourseStageModel;
     isComplete: boolean;
-    isShowingLanguageGuide: boolean;
+    shouldRecommendLanguageGuide: boolean;
   };
 }
 
-export default class ImplementSolutionStepComponent extends Component<Signature> {
-  get currentLanguageName(): string {
-    return this.args.repository.language!.name;
-  }
-}
+export default class ImplementSolutionStepComponent extends Component<Signature> {}
 
 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
@@ -1,19 +1,20 @@
 <div class="prose dark:prose-invert prose-compact">
   <p>
     The
-    <a href="#your-task-card">"Your Task"</a>
+    <a href="#your-task-card">Your Task</a>
     card below contains a description of what you need to implement to pass tests.
   </p>
   <p>
     We also recommend taking a look at:
   </p>
   <ul>
     <li>
-      {{#if @isShowingLanguageGuide}}
+      {{#if @shouldRecommendLanguageGuide}}
         The
-        <a href="#language-guide-card">{{this.currentLanguageName}} Guide</a>
+        <a href="#language-guide-card">{{@repository.language.name}} Guide</a>
         card, which contains
-        {{this.currentLanguageName}}-specific instructions for this stage.
+        {{@repository.language.name}}
+        -specific instructions for this stage.
       {{else}}
         The
         <LinkTo @route="course.stage.code-examples">Code Examples</LinkTo>

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,15 +9,11 @@ interface Signature {
     repository: RepositoryModel;
     courseStage: CourseStageModel;
     isComplete: boolean;
-    isShowingLanguageGuide: boolean;
+    shouldRecommendLanguageGuide: boolean;
   };
 }
 
-export default class ReadInstructionsStepComponent extends Component<Signature> {
-  get currentLanguageName(): string {
-    return this.args.repository.language!.name;
-  }
-}
+export default class ReadInstructionsStepComponent extends Component<Signature> {}
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {

diff --git a/app/components/course-page/course-stage-step/simple-language-guide-card.hbs b/app/components/course-page/course-stage-step/simple-language-guide-card.hbs
@@ -1,45 +1,41 @@
-<div {{did-update this.loadLanguageGuides @courseStage}} {{did-insert this.loadLanguageGuides}}>
-  {{#if this.languageGuide}}
-    <CoursePage::InstructionsCard
-      @contentIdentifier={{@courseStage.id}}
-      @isCollapsedByDefault={{true}}
-      @onExpand={{this.handleExpand}}
-      id="language-guide-card"
-      data-test-language-guide-card
-      ...attributes
-    >
-      <:header>
-        <div class="flex items-center justify-between border-b dark:border-white/5 pb-2 mb-5 w-full">
-          <div class="flex items-center gap-x-3">
-            <h2 class="font-semibold text-lg text-gray-700 dark:text-gray-200 flex items-center">
-              {{@language.name}}&nbsp;Guide
-            </h2>
+<CoursePage::InstructionsCard
+  @contentIdentifier={{@courseStage.id}}
+  @isCollapsedByDefault={{true}}
+  @onExpand={{this.handleExpand}}
+  id="language-guide-card"
+  data-test-language-guide-card
+  ...attributes
+>
+  <:header>
+    <div class="flex items-center justify-between border-b dark:border-white/5 pb-2 mb-5 w-full">
+      <div class="flex items-center gap-x-3">
+        <h2 class="font-semibold text-lg text-gray-700 dark:text-gray-200 flex items-center">
+          {{@language.name}}&nbsp;Guide
+        </h2>
 
-            <Pill @color="green" class="text-xs">
-              BETA
-              <EmberTooltip @text="This is a beta feature, please send us feedback!" @side="top" />
-            </Pill>
-          </div>
+        <Pill @color="green" class="text-xs">
+          BETA
+          <EmberTooltip @text="This is a beta feature, please send us feedback!" @side="top" />
+        </Pill>
+      </div>
 
-          <FeedbackButton
-            @source="course_stage_language_guide"
-            @sourceMetadata={{hash language_slug=@language.slug}}
-            class="inline-flex"
-            @dropdownPosition="right"
-            data-test-feedback-button
-          >
-            <TertiaryButton @size="small">
-              Share Feedback
-            </TertiaryButton>
-          </FeedbackButton>
-        </div>
-      </:header>
+      <FeedbackButton
+        @source="course_stage_language_guide"
+        @sourceMetadata={{hash language_slug=@language.slug}}
+        class="inline-flex"
+        @dropdownPosition="right"
+        data-test-feedback-button
+      >
+        <TertiaryButton @size="small">
+          Share Feedback
+        </TertiaryButton>
+      </FeedbackButton>
+    </div>
+  </:header>
 
-      <:content>
-        <div class="prose dark:prose-invert has-prism-highlighting" {{highlight-code-blocks this.languageGuide.markdownForBeginner}}>
-          {{markdown-to-html this.languageGuide.markdownForBeginner}}
-        </div>
-      </:content>
-    </CoursePage::InstructionsCard>
-  {{/if}}
-</div>
+  <:content>
+    <div class="prose dark:prose-invert has-prism-highlighting" {{highlight-code-blocks this.languageGuide.markdownForBeginner}}>
+      {{markdown-to-html this.languageGuide.markdownForBeginner}}
+    </div>
+  </:content>
+</CoursePage::InstructionsCard>
diff --git a/app/components/course-page/course-stage-step/simple-language-guide-card.ts b/app/components/course-page/course-stage-step/simple-language-guide-card.ts
@@ -4,7 +4,6 @@ import LanguageModel from 'codecrafters-frontend/models/language';
 import Store from '@ember-data/store';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { task } from 'ember-concurrency';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -28,18 +27,6 @@ export default class SimpleLanguageGuideCardComponent extends Component<Signatur
       this.languageGuide.createView();
     }
   }
-
-  @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/app/controllers/course/stage/instructions.ts b/app/controllers/course/stage/instructions.ts
@@ -10,12 +10,15 @@ import type CourseStageStep from 'codecrafters-frontend/utils/course-page-step-l
 import { action } from '@ember/object';
 import type RouterService from '@ember/routing/router-service';
 import { next } from '@ember/runloop';
+import { task } from 'ember-concurrency';
+import type Store from '@ember-data/store';
 
 export default class CourseStageInstructionsController extends Controller {
   @service declare authenticator: AuthenticatorService;
   @service declare coursePageState: CoursePageStateService;
   @service declare featureFlags: FeatureFlagsService;
   @service declare router: RouterService;
+  @service declare store: Store;
 
   @tracked commentListIsFilteredByLanguage = true;
 
@@ -47,7 +50,13 @@ export default class CourseStageInstructionsController extends Controller {
   }
 
   get shouldShowLanguageGuide() {
-    return !this.model.courseStage.isFirst && (this.featureFlags.canSeeLanguageGuidesForStage2 || this.authenticator.currentUser?.isStaff);
+    const languageGuide = this.model.courseStage.languageGuides.findBy('language', this.model.activeRepository.language);
+
+    return (
+      !this.model.courseStage.isFirst &&
+      !!languageGuide &&
+      (this.featureFlags.canSeeLanguageGuidesForStage2 || this.authenticator.currentUser?.isStaff)
+    );
   }
 
   get shouldShowPrerequisites() {
@@ -109,4 +118,16 @@ export default class CourseStageInstructionsController extends Controller {
   handleTestRunnerCardExpandedOnFirstStage() {
     document.getElementById('first-stage-tutorial-card')?.scrollIntoView({ behavior: 'smooth' });
   }
+
+  @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.model.courseStage.id,
+      include: 'course-stage,language',
+    });
+  });
 }
diff --git a/app/templates/course/stage/instructions.hbs b/app/templates/course/stage/instructions.hbs
@@ -1,4 +1,8 @@
-<CoursePage::PreviousStepsIncompleteOverlay @currentStep={{this.currentStep}}>
+<CoursePage::PreviousStepsIncompleteOverlay
+  @currentStep={{this.currentStep}}
+  {{did-update this.loadLanguageGuides @model.courseStage}}
+  {{did-insert this.loadLanguageGuides}}
+>
   <div class="pt-6 pb-32 px-3 md:px-6 lg:px-10" {{did-update this.handleDidUpdateTestsStatus this.currentStep.testsStatus}}>
     {{#if this.shouldShowUpgradePrompt}}
       <CoursePage::CourseStageStep::UpgradePrompt @featureSlugToHighlight="content" class="mb-6" />
@@ -36,6 +40,7 @@
       <CoursePage::CourseStageStep::SecondStageInstructionsCard
         @repository={{@model.activeRepository}}
         @courseStage={{@model.courseStage}}
+        @shouldRecommendLanguageGuide={{this.shouldShowLanguageGuide}}
         class="mb-6"
       />
     {{/if}}