diff --git a/app/components/user-page/course-progress-list-item/index.hbs b/app/components/user-page/course-progress-list-item/index.hbs
index e58bdc186e..a3fa29f944 100644
--- a/app/components/user-page/course-progress-list-item/index.hbs
+++ b/app/components/user-page/course-progress-list-item/index.hbs
@@ -45,7 +45,7 @@
{{/if}}
- {{#each @courseParticipations as |courseParticipation|}}
+ {{#each this.languagesToDisplay as |courseParticipation|}}
{{#if courseParticipation.isCompleted}}
{{else}}
diff --git a/app/components/user-page/course-progress-list-item/index.js b/app/components/user-page/course-progress-list-item/index.js
index 740c7bcf3a..0df100ae6f 100644
--- a/app/components/user-page/course-progress-list-item/index.js
+++ b/app/components/user-page/course-progress-list-item/index.js
@@ -3,6 +3,8 @@ import arrayToSentence from 'array-to-sentence';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
+const MAX_LANGUAGES_TO_DISPLAY = 5;
+
export default class CourseProgressListItemComponent extends Component {
@service router;
@@ -34,6 +36,21 @@ export default class CourseProgressListItemComponent extends Component {
}
}
+ get languagesToDisplay() {
+ const completedParticipations = this.completedCourseParticipations.sort(
+ (a, b) => new Date(b.completedAt).getTime() - new Date(a.completedAt).getTime(),
+ );
+ const incompleteParticipations = this.args.courseParticipations
+ .filter((p) => !p.isCompleted)
+ .sort((a, b) => new Date(b.lastSubmissionAt).getTime() - new Date(a.lastSubmissionAt).getTime());
+
+ if (completedParticipations.length >= MAX_LANGUAGES_TO_DISPLAY) {
+ return completedParticipations.slice(0, MAX_LANGUAGES_TO_DISPLAY);
+ }
+
+ return [...completedParticipations, ...incompleteParticipations.slice(0, MAX_LANGUAGES_TO_DISPLAY - completedParticipations.length)];
+ }
+
@action
navigateToCourse() {
this.router.transitionTo('course-overview', this.course.slug);
diff --git a/tests/acceptance/view-user-profile-test.js b/tests/acceptance/view-user-profile-test.js
index 3c9e1b988e..1b1e5ef4c9 100644
--- a/tests/acceptance/view-user-profile-test.js
+++ b/tests/acceptance/view-user-profile-test.js
@@ -250,35 +250,4 @@ module('Acceptance | view-user-profile', function (hooks) {
assert.strictEqual(userPage.courseProgressListItems.length, 1, 'only one course progress list item should be shown');
assert.strictEqual(userPage.courseProgressListItems[0].name, 'Build your own grep', 'the course progress list item should be for grep');
});
-
- test('it does not show private courses in user profile', async function (assert) {
- testScenario(this.server);
-
- let currentUser = this.server.schema.users.first();
- let go = this.server.schema.languages.findBy({ slug: 'go' });
- let redis = this.server.schema.courses.findBy({ slug: 'redis' });
- let grep = this.server.schema.courses.findBy({ slug: 'grep' });
- redis.update({ visibility: 'private' });
-
- this.server.create('course-participation', {
- course: grep,
- language: go,
- user: currentUser,
- completedStageSlugs: grep.stages.models.sortBy('position').slice(0, 5).mapBy('slug'),
- lastSubmissionAt: new Date('2020-10-10'),
- });
-
- this.server.create('course-participation', {
- course: redis,
- language: go,
- user: currentUser,
- completedAt: new Date('2020-01-01'),
- });
-
- await userPage.visit({ username: 'rohitpaulk' });
-
- assert.strictEqual(userPage.courseProgressListItems.length, 1, 'only one course progress list item should be shown');
- assert.strictEqual(userPage.courseProgressListItems[0].name, 'Build your own grep', 'the course progress list item should be for grep');
- assert.notOk(userPage.courseProgressListItems.mapBy('name').includes('Build your own Redis'), 'private course should not be included');
- });
});