From e9861abbcac5dff320cf9b5f91f1eb9651df7693 Mon Sep 17 00:00:00 2001
From: Garvit Singhal <garvitsinghal2003@gmail.com>
Date: Tue, 13 Feb 2024 18:11:09 +0530
Subject: [PATCH] Refactor ContentCardList component and its dependencies for
 improved consistency

---
 .../plugins/coach/assets/src/constants/index.js |  7 +++++++
 .../CreateExamPage/CreatePracticeQuizPage.vue   |  4 ++--
 .../plan/CreateExamPage/ResourceSelection.vue   |  7 +++----
 .../ContentCardList.vue                         | 17 ++++++++++++-----
 .../plan/LessonResourceSelectionPage/index.vue  | 14 +++++++++-----
 5 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/constants/index.js b/kolibri/plugins/coach/assets/src/constants/index.js
index 77c47946239..b38f0f7c756 100644
--- a/kolibri/plugins/coach/assets/src/constants/index.js
+++ b/kolibri/plugins/coach/assets/src/constants/index.js
@@ -53,6 +53,13 @@ export const GroupModals = {
   DELETE_GROUP: 'DELETE_GROUP',
 };
 
+export const ViewMoreButtonStates = {
+  LOADING: 'LOADING',
+  HAS_MORE: 'HAS_MORE',
+  NO_MORE: 'NO_MORE',
+  ERROR: 'ERROR',
+};
+
 export const pageNameToModuleMap = {
   [PageNames.EXAMS]: 'examsRoot',
   [PageNames.EXAM_REPORT]: 'examReport',
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreatePracticeQuizPage.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreatePracticeQuizPage.vue
index cae42e01ac6..2a55d0861cb 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreatePracticeQuizPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreatePracticeQuizPage.vue
@@ -43,7 +43,7 @@
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import ResourceSelectionBreadcrumbs from '../../plan/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
-  import { PageNames } from '../../../constants';
+  import { PageNames, ViewMoreButtonStates } from '../../../constants/index';
   import ContentCardList from '../../plan/LessonResourceSelectionPage/ContentCardList';
   import commonCoach from '../../common';
   import CoachImmersivePage from '../../CoachImmersivePage';
@@ -58,7 +58,7 @@
     mixins: [commonCoreStrings, commonCoach],
     data() {
       return {
-        viewMoreButtonState: 'no_more_results',
+        viewMoreButtonState: ViewMoreButtonStates.NO_MORE,
         contentHasCheckbox: () => false,
         contentIsSelected: () => '',
       };
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 46aa59b8c75..4c8985c69f3 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -41,7 +41,6 @@
         :channelsLink="channelsLink"
         :topicsLink="topicsLink"
       />
-
       <ContentCardList
         :contentList="contentList"
         :showSelectAll="true"
@@ -97,7 +96,7 @@
   import { ContentNodeResource, ChannelResource } from 'kolibri.resources';
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
   import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
-  import { PageNames } from '../../../constants';
+  import { PageNames, ViewMoreButtonStates } from '../../../constants/index';
   import BookmarkIcon from '../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue';
   import useQuizResources from '../../../composables/useQuizResources';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
@@ -135,9 +134,9 @@
       // TODO let's not use text for this
       const viewMoreButtonState = computed(() => {
         if (hasMore.value) {
-          return 'yes';
+          return ViewMoreButtonStates.HAS_MORE;
         } else {
-          return 'no_more_results';
+          return ViewMoreButtonStates.NO_MORE;
         }
       });
 
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
index fe321cfb272..5d15dd56546 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
@@ -45,11 +45,11 @@
         @click="$emit('moreresults')"
       />
       <KCircularLoader
-        v-if="viewMoreButtonState === 'waiting'"
+        v-if="viewMoreButtonState === ViewMoreButtonStates.LOADING"
         :delay="false"
       />
       <!-- TODO introduce messages in next version -->
-      <p v-else-if="viewMoreButtonState === 'error'">
+      <p v-else-if="viewMoreButtonState === ViewMoreButtonStates.ERROR">
         <KIcon icon="error" />
         <!-- {{ $tr('moreResultsError') }} -->
       </p>
@@ -65,6 +65,8 @@
 <script>
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import { ViewMoreButtonStates } from '../../../constants/index';
+
   import LessonContentCard from './LessonContentCard';
 
   export default {
@@ -73,6 +75,12 @@
       LessonContentCard,
     },
     mixins: [commonCoreStrings],
+
+    setup() {
+      return {
+        ViewMoreButtonStates,
+      };
+    },
     props: {
       showSelectAll: {
         type: Boolean,
@@ -121,11 +129,10 @@
         required: true,
       },
     },
+
     computed: {
       showButton() {
-        return (
-          this.viewMoreButtonState !== 'waiting' && this.viewMoreButtonState !== 'no_more_results'
-        );
+        return this.viewMoreButtonState === this.ViewMoreButtonStates.HAS_MORE;
       },
       needCheckboxes() {
         return this.contentList.some(c => this.contentHasCheckbox(c));
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
index 421046311e4..533a11900f8 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
@@ -122,6 +122,7 @@
   import CoachAppBarPage from '../../CoachAppBarPage';
   import CoachImmersivePage from '../../CoachImmersivePage';
   import { LessonsPageNames } from '../../../constants/lessonsConstants';
+  import { ViewMoreButtonStates } from '../../../constants/index';
   import LessonsSearchBox from './SearchTools/LessonsSearchBox';
   import LessonsSearchFilters from './SearchTools/LessonsSearchFilters';
   import ResourceSelectionBreadcrumbs from './SearchTools/ResourceSelectionBreadcrumbs';
@@ -252,13 +253,16 @@
         );
       },
       viewMoreButtonState() {
-        if (this.moreResultsState === 'waiting' || this.moreResultsState === 'error') {
+        if (
+          this.moreResultsState === ViewMoreButtonStates.LOADING ||
+          this.moreResultsState === ViewMoreButtonStates.ERROR
+        ) {
           return this.moreResultsState;
         }
         if (!this.inSearchMode || this.numRemainingSearchResults === 0) {
-          return 'no_more_results';
+          return ViewMoreButtonStates.NO_MORE;
         }
-        return 'visible';
+        return ViewMoreButtonStates.HAS_MORE;
       },
       contentIsInLesson() {
         return ({ id }) =>
@@ -519,7 +523,7 @@
         });
       },
       handleMoreResults() {
-        this.moreResultsState = 'waiting';
+        this.moreResultsState = ViewMoreButtonStates.LOADING;
         this.fetchAdditionalSearchResults({
           searchTerm: this.searchTerm,
           kind: this.filters.kind,
@@ -530,7 +534,7 @@
             this.moreResultsState = null;
           })
           .catch(() => {
-            this.moreResultsState = 'error';
+            this.moreResultsState = ViewMoreButtonStates.ERROR;
           });
       },
       topicsLink(topicId) {