Merge pull request #2957 from codecrafters-io/arpan/cc-1755-using-githubcom-to-view-full-code-for-any-code-example

Arpan-206 · web-flow · commit b4f7e3f672cb · 2025-08-14T10:34:24.000+05:30
Using github.com to view full code for any code example (Frontend PR)
diff --git a/app/components/course-page/course-stage-step/community-solution-card/changed-file-card.hbs b/app/components/course-page/course-stage-step/community-solution-card/changed-file-card.hbs
@@ -7,29 +7,11 @@
     class="bg-gray-100 dark:bg-gray-800 rounded-t py-2 px-4 border-b border-gray-200 dark:border-white/5 shadow-xs flex items-center justify-between sticky top-10 z-10"
   >
     <span class="font-mono text-xs text-gray-600 dark:text-gray-300 bold">{{@changedFile.filename}}</span>
-    <div>
-      {{#if @solution.isPublishedToPublicGithubRepository}}
-        <a
-          {{! @glint-expect-error call not ts-ified yet }}
-          href={{call (fn @solution.githubUrlForFile @changedFile.filename)}}
-          target="_blank"
-          rel="noopener noreferrer"
-          class="flex gap-x-1 items-center group"
-        >
-          <span class="text-[10px] text-gray-700 dark:text-gray-300 group-hover:underline">
-            View on GitHub
-          </span>
-          {{svg-jar "github" class="w-3.5 h-3.5 text-gray-600 dark:text-gray-400"}}
-        </a>
-      {{else if this.shouldShowPublishToGithubButton}}
-        <button type="button" {{on "click" @onPublishToGithubButtonClick}} class="flex gap-x-1 items-center group" data-test-publish-to-github-button>
-          <span class="text-[10px] text-gray-700 dark:text-gray-300 group-hover:underline">
-            Publish to GitHub
-          </span>
-          {{svg-jar "github" class="w-3.5 h-3.5 text-gray-600 dark:text-gray-400"}}
-        </button>
-      {{/if}}
-    </div>
+    <CoursePage::CourseStageStep::CommunitySolutionCard::GithubFileActions
+      @filename={{@changedFile.filename}}
+      @onPublishToGithubButtonClick={{@onPublishToGithubButtonClick}}
+      @solution={{@solution}}
+    />
   </div>
 
   <SyntaxHighlightedDiff
diff --git a/app/components/course-page/course-stage-step/community-solution-card/changed-file-card.ts b/app/components/course-page/course-stage-step/community-solution-card/changed-file-card.ts
@@ -1,6 +1,4 @@
 import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
-import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
 import type CommunityCourseStageSolution from 'codecrafters-frontend/models/community-course-stage-solution';
 
 interface Signature {
@@ -13,13 +11,7 @@ interface Signature {
   };
 }
 
-export default class ChangedFileCard extends Component<Signature> {
-  @service declare authenticator: AuthenticatorService;
-
-  get shouldShowPublishToGithubButton(): boolean {
-    return this.args.solution.user.id === this.authenticator.currentUser?.id && !this.args.solution.isPublishedToPublicGithubRepository;
-  }
-}
+export default class ChangedFileCard extends Component<Signature> {}
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {
diff --git a/app/components/course-page/course-stage-step/community-solution-card/github-file-actions.hbs b/app/components/course-page/course-stage-step/community-solution-card/github-file-actions.hbs
@@ -0,0 +1,39 @@
+<div>
+  {{#if @solution.isPublishedToPublicGithubRepository}}
+    <a
+      {{! @glint-expect-error call not ts-ified yet }}
+      href={{call (fn @solution.githubUrlForFile @filename)}}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="flex gap-x-1 items-center group"
+    >
+      <span class="text-[10px] text-gray-700 dark:text-gray-300 group-hover:underline">
+        View on GitHub
+      </span>
+      {{svg-jar "github" class="w-3.5 h-3.5 text-gray-600 dark:text-gray-400"}}
+    </a>
+  {{else if this.shouldShowPublishToGithubButton}}
+    <button type="button" {{on "click" @onPublishToGithubButtonClick}} class="flex gap-x-1 items-center group" data-test-publish-to-github-button>
+      <span class="text-[10px] text-gray-700 dark:text-gray-300 group-hover:underline">
+        Publish to GitHub
+      </span>
+      {{svg-jar "github" class="w-3.5 h-3.5 text-gray-600 dark:text-gray-400"}}
+    </button>
+  {{else}}
+    <button
+      type="button"
+      {{on "click" this.handleViewOnGithubButtonClick}}
+      class="flex gap-x-1 items-center group {{if this.isCreatingExport 'opacity-50 cursor-not-allowed'}}"
+      data-test-view-on-github-button
+    >
+      <span class="text-[10px] text-gray-700 dark:text-gray-300 group-hover:underline">
+        {{#if this.isCreatingExport}}
+          Loading...
+        {{else}}
+          View on GitHub
+        {{/if}}
+      </span>
+      {{svg-jar "github" class="w-3.5 h-3.5 text-gray-600 dark:text-gray-400"}}
+    </button>
+  {{/if}}
+</div>
diff --git a/app/components/course-page/course-stage-step/community-solution-card/github-file-actions.ts b/app/components/course-page/course-stage-step/community-solution-card/github-file-actions.ts
@@ -0,0 +1,77 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import * as Sentry from '@sentry/ember';
+import window from 'ember-window-mock';
+import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
+import type CommunityCourseStageSolution from 'codecrafters-frontend/models/community-course-stage-solution';
+import type CommunitySolutionExportModel from 'codecrafters-frontend/models/community-solution-export';
+import type Store from '@ember-data/store';
+
+interface Signature {
+  Element: HTMLDivElement;
+
+  Args: {
+    filename: string;
+    onPublishToGithubButtonClick: () => void;
+    solution: CommunityCourseStageSolution;
+  };
+}
+
+export default class GithubFileActionsComponent extends Component<Signature> {
+  @service declare authenticator: AuthenticatorService;
+  @service declare store: Store;
+
+  @tracked isCreatingExport = false;
+
+  get shouldShowPublishToGithubButton(): boolean {
+    return this.args.solution.user.id === this.authenticator.currentUser?.id && !this.args.solution.isPublishedToPublicGithubRepository;
+  }
+
+  private async createExport(): Promise<CommunitySolutionExportModel | null> {
+    if (this.isCreatingExport) return null;
+
+    this.isCreatingExport = true;
+
+    try {
+      const exportRecord = await this.args.solution.createExport();
+      this.isCreatingExport = false;
+
+      return exportRecord;
+    } catch (error) {
+      Sentry.captureException(error);
+      this.isCreatingExport = false;
+
+      return null;
+    }
+  }
+
+  private getLatestProvisionedExport(): CommunitySolutionExportModel | null {
+    return this.args.solution.exports.rejectBy('isExpired').filterBy('isProvisioned').sortBy('expiresAt').lastObject || null;
+  }
+
+  @action
+  async handleViewOnGithubButtonClick() {
+    const latestExport = this.getLatestProvisionedExport();
+
+    if (latestExport) {
+      const githubUrl = latestExport.githubUrlForFile(this.args.filename);
+      latestExport.markAsAccessed({});
+      window.open(githubUrl, '_blank', 'noopener,noreferrer');
+    } else {
+      const exportRecord = await this.createExport();
+
+      if (exportRecord) {
+        const githubUrl = exportRecord.githubUrlForFile(this.args.filename);
+        window.open(githubUrl, '_blank', 'noopener,noreferrer');
+      }
+    }
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'CoursePage::CourseStageStep::CommunitySolutionCard::GithubFileActions': typeof GithubFileActionsComponent;
+  }
+}
diff --git a/app/components/course-page/course-stage-step/community-solution-card/highlighted-file-card.hbs b/app/components/course-page/course-stage-step/community-solution-card/highlighted-file-card.hbs
@@ -7,29 +7,11 @@
     class="bg-gray-100 dark:bg-gray-800 rounded-t py-2 px-4 border-b border-gray-200 dark:border-white/5 shadow-xs flex items-center justify-between sticky top-10 z-10"
   >
     <span class="font-mono text-xs text-gray-600 dark:text-gray-300 bold">{{@highlightedFile.filename}}</span>
-    <div>
-      {{#if @solution.isPublishedToPublicGithubRepository}}
-        <a
-          {{! @glint-expect-error call not ts-ified yet }}
-          href={{call (fn @solution.githubUrlForFile @highlightedFile.filename)}}
-          target="_blank"
-          rel="noopener noreferrer"
-          class="flex gap-x-1 items-center group"
-        >
-          <span class="text-[10px] text-gray-700 dark:text-gray-300 group-hover:underline">
-            View on GitHub
-          </span>
-          {{svg-jar "github" class="w-3.5 h-3.5 text-gray-600 dark:text-gray-400"}}
-        </a>
-      {{else if this.shouldShowPublishToGithubButton}}
-        <button type="button" {{on "click" @onPublishToGithubButtonClick}} class="flex gap-x-1 items-center group" data-test-publish-to-github-button>
-          <span class="text-[10px] text-gray-700 dark:text-gray-300 group-hover:underline">
-            Publish to GitHub
-          </span>
-          {{svg-jar "github" class="w-3.5 h-3.5 text-gray-600 dark:text-gray-400"}}
-        </button>
-      {{/if}}
-    </div>
+    <CoursePage::CourseStageStep::CommunitySolutionCard::GithubFileActions
+      @filename={{@highlightedFile.filename}}
+      @onPublishToGithubButtonClick={{@onPublishToGithubButtonClick}}
+      @solution={{@solution}}
+    />
   </div>
 
   <CodeMirror
diff --git a/app/components/course-page/course-stage-step/community-solution-card/highlighted-file-card.ts b/app/components/course-page/course-stage-step/community-solution-card/highlighted-file-card.ts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
-import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
 import type CommunityCourseStageSolution from 'codecrafters-frontend/models/community-course-stage-solution';
 import type DarkModeService from 'codecrafters-frontend/services/dark-mode';
 import { codeCraftersDark, codeCraftersLight } from 'codecrafters-frontend/utils/code-mirror-themes';
@@ -17,7 +16,6 @@ interface Signature {
 }
 
 export default class HighlightedFileCard extends Component<Signature> {
-  @service declare authenticator: AuthenticatorService;
   @service declare darkMode: DarkModeService;
 
   get codeMirrorTheme() {
@@ -68,10 +66,6 @@ export default class HighlightedFileCard extends Component<Signature> {
     }));
   }
 
-  get shouldShowPublishToGithubButton(): boolean {
-    return this.args.solution.user.id === this.authenticator.currentUser?.id && !this.args.solution.isPublishedToPublicGithubRepository;
-  }
-
   get visibleRangesForCodeMirror(): LineRange[] {
     // Add 3 lines above and below the highlighted range
     const ranges = this.args.highlightedFile.highlighted_ranges.map((range) => ({
diff --git a/app/controllers/course/stage/code-examples.ts b/app/controllers/course/stage/code-examples.ts
@@ -102,7 +102,7 @@ export default class CodeExamplesController extends Controller {
     this.solutions = (await this.store.query('community-course-stage-solution', {
       course_stage_id: this.courseStage.id,
       language_id: this.currentLanguage.id,
-      include: 'user,language,course-stage,screencasts,current-user-upvotes,current-user-downvotes',
+      include: 'user,language,course-stage,screencasts,current-user-upvotes,current-user-downvotes,exports',
       order: this.order,
     })) as unknown as CommunityCourseStageSolutionModel[]; // TODO: Doesn't store.query support model type inference?
 
diff --git a/app/models/community-course-stage-solution.ts b/app/models/community-course-stage-solution.ts
@@ -9,6 +9,7 @@ import type CourseStageScreencastModel from './course-stage-screencast';
 import type LanguageModel from './language';
 import type TrustedCommunitySolutionEvaluationModel from './trusted-community-solution-evaluation';
 import type UserModel from './user';
+import type CommunitySolutionExportModel from './community-solution-export';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { memberAction } from 'ember-api-actions';
@@ -29,6 +30,7 @@ export default class CommunityCourseStageSolutionModel extends Model.extend(View
   declare trustedEvaluations: TrustedCommunitySolutionEvaluationModel[];
 
   @hasMany('community-course-stage-solution-comment', { async: false, inverse: 'target' }) declare comments: CourseStageCommentModel[];
+  @hasMany('community-solution-export', { async: false, inverse: 'communitySolution' }) declare exports: CommunitySolutionExportModel[];
   @hasMany('course-stage-screencast', { async: false, inverse: null }) declare screencasts: CourseStageScreencastModel[];
 
   // @ts-expect-error empty '' not supported
@@ -101,6 +103,7 @@ export default class CommunityCourseStageSolutionModel extends Model.extend(View
     return `https://github.com/${this.githubRepositoryName}/blob/${this.commitSha}/${filename}`;
   }
 
+  declare createExport: (this: Model) => Promise<CommunitySolutionExportModel>;
   declare fetchFileComparisons: (this: Model, payload: unknown) => Promise<FileComparison[]>;
   declare unvote: (this: Model, payload: unknown) => Promise<void>;
 }
@@ -135,3 +138,11 @@ CommunityCourseStageSolutionModel.prototype.unvote = memberAction({
     }
   },
 });
+
+CommunityCourseStageSolutionModel.prototype.createExport = function () {
+  const record = this.store.createRecord('community-solution-export', {
+    communitySolution: this,
+  });
+
+  return record.save();
+};
diff --git a/app/models/community-solution-export.ts b/app/models/community-solution-export.ts
@@ -0,0 +1,31 @@
+import Model, { attr, belongsTo } from '@ember-data/model';
+import { memberAction } from 'ember-api-actions';
+import type CommunityCourseStageSolutionModel from './community-course-stage-solution';
+
+export default class CommunitySolutionExportModel extends Model {
+  @belongsTo('community-course-stage-solution', { async: false, inverse: 'exports' })
+  declare communitySolution: CommunityCourseStageSolutionModel;
+
+  @attr('date') declare expiresAt: Date;
+  @attr('string') declare githubRepositoryUrl: string | null;
+  @attr('string') declare status: 'provisioning' | 'provisioned';
+
+  get isExpired(): boolean {
+    return new Date() >= this.expiresAt;
+  }
+
+  get isProvisioned(): boolean {
+    return this.status === 'provisioned';
+  }
+
+  githubUrlForFile(filename: string): string {
+    return `${this.githubRepositoryUrl}/blob/main/${filename}`;
+  }
+
+  declare markAsAccessed: (this: Model, payload: unknown) => Promise<void>;
+}
+
+CommunitySolutionExportModel.prototype.markAsAccessed = memberAction({
+  path: 'mark-as-accessed',
+  type: 'post',
+});
diff --git a/mirage/config.js b/mirage/config.js
@@ -10,6 +10,7 @@ import communityCourseStageSolutionComments from './handlers/community-course-st
 import communityCourseStageSolutions from './handlers/community-course-stage-solutions';
 import communitySolutionEvaluations from './handlers/community-solution-evaluations';
 import communitySolutionEvaluators from './handlers/community-solution-evaluators';
+import communitySolutionExports from './handlers/community-solution-exports';
 import communitySolutionsAnalyses from './handlers/community-solutions-analyses';
 import conceptEngagements from './handlers/concept-engagements';
 import conceptGroups from './handlers/concept-groups';
@@ -89,6 +90,7 @@ export default function (config) {
           currentUserDownvotes: hasMany('downvote', { inverse: 'downvotable' }),
           currentUserUpvotes: hasMany('upvote', { inverse: 'upvotable' }),
           evaluations: hasMany('community-solution-evaluation', { inverse: 'communitySolution' }),
+          exports: hasMany('community-solution-export', { inverse: 'communitySolution' }),
           language: belongsTo('language', { inverse: null }),
           screencasts: hasMany('course-stage-screencast', { inverse: 'solution' }),
           trustedEvaluations: hasMany('trusted-community-solution-evaluation', { inverse: 'communitySolution' }),
@@ -146,6 +148,7 @@ function routes() {
   communityCourseStageSolutions(this);
   communitySolutionEvaluations(this);
   communitySolutionEvaluators(this);
+  communitySolutionExports(this);
   communitySolutionsAnalyses(this);
   conceptEngagements(this);
   conceptGroups(this);
diff --git a/mirage/factories/community-solution-export.js b/mirage/factories/community-solution-export.js
@@ -0,0 +1,7 @@
+import { Factory } from 'miragejs';
+
+export default Factory.extend({
+  status: 'provisioned',
+  expiresAt: () => new Date(Date.now() + 24 * 60 * 60 * 1000), // 24 hours from now
+  githubRepositoryUrl: 'https://github.com/test-user/test-repo',
+});
diff --git a/mirage/handlers/community-solution-exports.js b/mirage/handlers/community-solution-exports.js
@@ -0,0 +1,7 @@
+export default function (server) {
+  server.post('/community-solution-exports');
+
+  server.post('/community-solution-exports/:id/mark-as-accessed', function (schema, request) {
+    return schema.communitySolutionExports.find(request.params.id);
+  });
+}
diff --git a/mirage/utils/create-community-course-stage-solution.js b/mirage/utils/create-community-course-stage-solution.js
@@ -1,8 +1,8 @@
-export default function createCourseStageSolution(server, course, stagePosition, language) {
+export default function createCourseStageSolution(server, course, stagePosition, language, user) {
   let stage = course.stages.models.filter((stage) => stage.position === stagePosition)[0];
 
   return server.create('community-course-stage-solution', {
-    user: server.schema.users.first(),
+    user: user || server.schema.users.first(),
     changedFiles: [
       {
         filename: 'README.md',
diff --git a/tests/acceptance/course-page/code-examples/export-to-github-test.js b/tests/acceptance/course-page/code-examples/export-to-github-test.js
diff --git a/tests/pages/course/code-examples-page.ts b/tests/pages/course/code-examples-page.ts
