Merge pull request #3001 from codecrafters-io/refactor/update-course-stage-slug

refactor: update course stage identifier to use slug format

Author: rohitpaulk

app/components/course-admin/stage-insights-page/header.hbs

@@ -18,7 +18,7 @@
     <div class="flex flex-col items-end">
       <LinkTo
         @route="course.stage.instructions"
-        @models={{array @stage.course.slug @stage.identifierForURL}}
+        @models={{array @stage.course.slug @stage.slug}}
         class="text-gray-400 flex items-center hover:text-gray-600"
         target="_blank"
         rel="noopener noreferrer"

app/components/track-page/course-card/stage-list-item.hbs

@@ -1,6 +1,6 @@
 <LinkTo
   @route="course.stage.instructions"
-  @models={{array @stage.course.slug @stage.identifierForURL}}
+  @models={{array @stage.course.slug @stage.slug}}
   class="block hover:bg-gray-50 dark:hover:bg-gray-700/50 py-1.5 -mx-1.5 px-1.5 rounded-sm"
   data-test-stage-list-item
   ...attributes

app/models/course-stage.ts

@@ -70,10 +70,6 @@ export default class CourseStageModel extends Model {
     return this.screencasts.length > 0;
   }
 
-  get identifierForURL() {
-    return this.slug;
-  }
-
   get isBaseStage() {
     return !this.primaryExtensionSlug;
   }

app/router.ts

@@ -50,8 +50,7 @@ Router.map(function () {
     this.route('introduction');
     this.route('setup');
 
-    // Stage identifier either be '1' (for base stages) or 'ext2:1' (for extension stages)
-    this.route('stage', { path: '/stages/:stage_identifier' }, function () {
+    this.route('stage', { path: '/stages/:stage_slug' }, function () {
       this.route('code-examples');
       this.route('concepts');
       this.route('instructions', { path: '/' });

app/routes/course/stage.js

@@ -24,7 +24,7 @@ export default class CourseStageRoute extends BaseRoute {
   async model(params) {
     const courseRouteModel = this.modelFor('course');
 
-    const courseStage = courseRouteModel.course.stages.find((courseStage) => courseStage.identifierForURL === params.stage_identifier);
+    const courseStage = courseRouteModel.course.stages.find((courseStage) => courseStage.slug === params.stage_slug);
 
     return {
       courseStage: courseStage,

app/services/course-page-state.ts

@@ -51,12 +51,11 @@ export default class CoursePageStateService extends Service {
     } else if (this.router.currentRouteName && this.router.currentRouteName.startsWith('course.stage')) {
       const courseStageRoute = this.router.currentRoute.find((route: { name: string }) => route.name === 'course.stage');
 
-      const routeParams = courseStageRoute!.params as { stage_identifier: string };
-      const stageIdentifier = routeParams.stage_identifier;
+      const routeParams = courseStageRoute!.params as { stage_slug: string };
 
       return (
         this.stepList!.steps.find(
-          (step) => step.type === 'CourseStageStep' && (step as CourseStageStep).courseStage.identifierForURL === stageIdentifier,
+          (step) => step.type === 'CourseStageStep' && (step as CourseStageStep).courseStage.slug === routeParams.stage_slug,
         ) || null
       );
     } else {

app/templates/course-admin/code-example.hbs

@@ -1,12 +1,7 @@
 <div class="bg-white min-h-screen">
   <div class="container mx-auto pt-4 pb-10 px-6">
     <div class="py-3 border-b border-gray-200 mb-6">
-      <TertiaryLinkButton
-        @route="course.stage.code-examples"
-        @models={{array @model.solution.courseStage.identifierForURL}}
-        @size="small"
-        class="pl-1.5 mb-3"
-      >
+      <TertiaryLinkButton @route="course.stage.code-examples" @models={{array @model.solution.courseStage.slug}} @size="small" class="pl-1.5 mb-3">
         <div class="flex items-center">
           {{svg-jar "arrow-circle-left" class="w-4 h-4 mr-1.5 text-gray-500"}}
 

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

@@ -121,7 +121,7 @@ Check the [How to pass this stage](#first-stage-tutorial-card) section for instr
   get routeParams() {
     return {
       route: 'course.stage.instructions',
-      models: [this.courseStage.course.slug, this.courseStage.identifierForURL],
+      models: [this.courseStage.course.slug, this.courseStage.slug],
     };
   }