Merge pull request #8716 from rtibbles/i_think_im_a_clone_now

Handle duplicate resources

kolibri/plugins/learn/assets/src/composables/__tests__/useLearnerResources.spec.js

@@ -32,14 +32,42 @@ jest.mock('../useContentNodeProgress');
 
 const TEST_RESUMABLE_CONTENT_NODES = [
   // the following resources are used in classess
-  { id: 'resource-1-in-progress', title: 'Resource 1 (In Progress)' },
-  { id: 'resource-3-in-progress', title: 'Resource 3 (In Progress)' },
-  { id: 'resource-5-in-progress', title: 'Resource 5 (In Progress)' },
-  { id: 'resource-6-in-progress', title: 'Resource 6 (In Progress)' },
-  { id: 'resource-8-in-progress', title: 'Resource 8 (In Progress)' },
+  {
+    id: 'resource-1-in-progress',
+    title: 'Resource 1 (In Progress)',
+    content_id: 'resource-1-in-progress',
+  },
+  {
+    id: 'resource-3-in-progress',
+    title: 'Resource 3 (In Progress)',
+    content_id: 'resource-3-in-progress',
+  },
+  {
+    id: 'resource-5-in-progress',
+    title: 'Resource 5 (In Progress)',
+    content_id: 'resource-5-in-progress',
+  },
+  {
+    id: 'resource-6-in-progress',
+    title: 'Resource 6 (In Progress)',
+    content_id: 'resource-6-in-progress',
+  },
+  {
+    id: 'resource-8-in-progress',
+    title: 'Resource 8 (In Progress)',
+    content_id: 'resource-8-in-progress',
+  },
   // the following resources are not used in classses
-  { id: 'resource-9-in-progress', title: 'Resource 9 (In Progress)' },
-  { id: 'resource-10-in-progress', title: 'Resource 10 (In Progress)' },
+  {
+    id: 'resource-9-in-progress',
+    title: 'Resource 9 (In Progress)',
+    content_id: 'resource-9-in-progress',
+  },
+  {
+    id: 'resource-10-in-progress',
+    title: 'Resource 10 (In Progress)',
+    content_id: 'resource-10-in-progress',
+  },
 ];
 
 const TEST_CLASSES = [

kolibri/plugins/learn/assets/src/composables/__tests__/useSearch.spec.js

@@ -376,7 +376,7 @@ describe(`useSearch`, () => {
       expect(ContentNodeResource.fetchCollection).toHaveBeenCalledWith({ getParams: moreExpected });
     });
     it('should set results, more and labels', async () => {
-      const { labels, more, results, searchMore } = prep({
+      const { labels, more, results, searchMore, search } = prep({
         categories: `test1,test2,${NoCategories}`,
       });
       const expectedLabels = {
@@ -385,7 +385,18 @@ describe(`useSearch`, () => {
       const expectedMore = {
         cursor: 'adalskdjsadlkjsadlkjsalkd',
       };
-      const expectedResults = [{ id: 'node-id1' }];
+      const originalResults = [{ id: 'originalId', content_id: 'first' }];
+      ContentNodeResource.fetchCollection = jest.fn();
+      ContentNodeResource.fetchCollection.mockReturnValue(
+        Promise.resolve({
+          labels: expectedLabels,
+          results: originalResults,
+          more: expectedMore,
+        })
+      );
+      search();
+      await Vue.nextTick();
+      const expectedResults = [{ id: 'node-id1', content_id: 'second' }];
       ContentNodeResource.fetchCollection = jest.fn();
       ContentNodeResource.fetchCollection.mockReturnValue(
         Promise.resolve({
@@ -395,13 +406,11 @@ describe(`useSearch`, () => {
         })
       );
       set(more, {});
-      const originalResults = [{ id: 'originalId' }];
-      set(results, originalResults);
       searchMore();
       await Vue.nextTick();
       expect(get(labels)).toEqual(expectedLabels);
       expect(get(results)).toEqual(
-        originalResults.concat(expectedResults.map(normalizeContentNode))
+        originalResults.concat(expectedResults).map(normalizeContentNode)
       );
       expect(get(more)).toEqual(expectedMore);
     });

kolibri/plugins/learn/assets/src/composables/useLearnerResources.js

@@ -11,26 +11,27 @@ import flatMap from 'lodash/flatMap';
 import flatMapDepth from 'lodash/flatMapDepth';
 
 import { ContentNodeResource } from 'kolibri.resources';
+import { deduplicateResources } from '../utils/contentNode';
 import genContentLink from '../utils/genContentLink';
 import { LearnerClassroomResource } from '../apiResources';
 import { PageNames, ClassesPageNames } from '../constants';
 import { normalizeContentNode } from '../modules/coreLearn/utils';
 import useContentNodeProgress, { setContentNodeProgress } from './useContentNodeProgress';
 
 // The refs are defined in the outer scope so they can be used as a shared store
-const resumableContentNodes = ref([]);
+const _resumableContentNodes = ref([]);
 const moreResumableContentNodes = ref(null);
 const classes = ref([]);
 const { fetchContentNodeProgress } = useContentNodeProgress();
 
 export function setResumableContentNodes(nodes, more = null) {
-  set(resumableContentNodes, nodes.map(normalizeContentNode));
+  set(_resumableContentNodes, nodes.map(normalizeContentNode));
   set(moreResumableContentNodes, more);
   ContentNodeResource.cacheData(nodes);
 }
 
 function addResumableContentNodes(nodes, more = null) {
-  set(resumableContentNodes, [...get(resumableContentNodes), ...nodes.map(normalizeContentNode)]);
+  set(_resumableContentNodes, [...get(_resumableContentNodes), ...nodes.map(normalizeContentNode)]);
   set(moreResumableContentNodes, more);
   ContentNodeResource.cacheData(nodes);
 }
@@ -342,6 +343,10 @@ export default function useLearnerResources() {
     });
   }
 
+  const resumableContentNodes = computed(() => {
+    return deduplicateResources(get(_resumableContentNodes));
+  });
+
   return {
     classes,
     activeClassesLessons,

kolibri/plugins/learn/assets/src/composables/useSearch.js

@@ -2,6 +2,7 @@ import { get, set } from '@vueuse/core';
 import { computed, getCurrentInstance, ref, watch } from 'kolibri.lib.vueCompositionApi';
 import { ContentNodeResource } from 'kolibri.resources';
 import { AllCategories, NoCategories } from 'kolibri.coreVue.vuex.constants';
+import { deduplicateResources } from '../utils/contentNode';
 import { normalizeContentNode } from '../modules/coreLearn/utils';
 import useContentNodeProgress from './useContentNodeProgress';
 
@@ -27,7 +28,7 @@ export default function useSearch(store, router) {
 
   const searchLoading = ref(false);
   const moreLoading = ref(false);
-  const results = ref([]);
+  const _results = ref([]);
   const more = ref(null);
   const labels = ref(null);
 
@@ -123,7 +124,7 @@ export default function useSearch(store, router) {
         fetchContentNodeProgress(getParams);
       }
       ContentNodeResource.fetchCollection({ getParams }).then(data => {
-        set(results, (data.results || []).map(normalizeContentNode));
+        set(_results, (data.results || []).map(normalizeContentNode));
         set(more, data.more);
         set(labels, data.labels);
         set(searchLoading, false);
@@ -149,7 +150,7 @@ export default function useSearch(store, router) {
         fetchContentNodeProgress(get(more));
       }
       return ContentNodeResource.fetchCollection({ getParams: get(more) }).then(data => {
-        set(results, [...get(results), ...(data.results || []).map(normalizeContentNode)]);
+        set(_results, [...get(_results), ...(data.results || []).map(normalizeContentNode)]);
         set(more, data.more);
         set(labels, data.labels);
         set(moreLoading, false);
@@ -183,6 +184,10 @@ export default function useSearch(store, router) {
 
   watch(searchTerms, search);
 
+  const results = computed(() => {
+    return deduplicateResources(get(_results));
+  });
+
   return {
     searchTerms,
     displayingSearchResults,

kolibri/plugins/learn/assets/src/utils/contentNode.js

@@ -0,0 +1,30 @@
+import groupBy from 'lodash/groupBy';
+import sortBy from 'lodash/sortBy';
+import { currentLanguage } from 'kolibri.utils.i18n';
+
+export function deduplicateResources(contentNodes) {
+  const grouped = groupBy(contentNodes, 'content_id');
+  return Object.keys(grouped).map(key => {
+    const groupedNodes = grouped[key];
+    if (groupedNodes.length === 1) {
+      return groupedNodes[0];
+    }
+    const langCode = currentLanguage.split('-')[0];
+    const sortedNodes = sortBy(groupedNodes, n => {
+      if (n.lang && n.lang.id === currentLanguage) {
+        // Best language match return 0 to sort first
+        return 0;
+      }
+      if (n.lang && n.lang.lang_code === langCode) {
+        // lang_code match, so next best
+        return 1;
+      }
+      // Everything else
+      return 2;
+    });
+    const primaryNode = sortedNodes[0];
+    // Include self in copies
+    primaryNode.copies = sortedNodes;
+    return primaryNode;
+  });
+}

kolibri/plugins/learn/assets/src/views/ChannelCardGroupGrid.vue

@@ -16,17 +16,9 @@
         :numCoachContents="content.num_coach_contents"
         :link="genChannelLink(content.id, content.is_leaf)"
         :contentId="content.content_id"
-        :copiesCount="content.copies_count"
-        @openCopiesModal="openCopiesModal"
       />
     </KGridItem>
 
-    <CopiesModal
-      v-if="modalIsOpen"
-      :uniqueId="uniqueId"
-      :sharedContentId="sharedContentId"
-      @submit="modalIsOpen = false"
-    />
   </KGrid>
 
 </template>
@@ -37,13 +29,11 @@
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import { PageNames } from '../constants';
   import ChannelCard from './ChannelCard';
-  import CopiesModal from './CopiesModal';
 
   export default {
     name: 'ChannelCardGroupGrid',
     components: {
       ChannelCard,
-      CopiesModal,
     },
     mixins: [responsiveWindowMixin],
     props: {
@@ -52,11 +42,6 @@
         required: true,
       },
     },
-    data: () => ({
-      modalIsOpen: false,
-      sharedContentId: null,
-      uniqueId: null,
-    }),
     computed: {
       cardColumnSpan() {
         if (this.windowBreakpoint <= 2) return 4;
@@ -72,11 +57,6 @@
           params: { id },
         };
       },
-      openCopiesModal(contentId) {
-        this.sharedContentId = contentId;
-        this.uniqueId = this.contents.find(content => content.content_id === contentId).id;
-        this.modalIsOpen = true;
-      },
       getTagLine(content) {
         return content.tagline || content.description;
       },

kolibri/plugins/learn/assets/src/views/CopiesModal.vue

@@ -6,29 +6,24 @@
     @submit="$emit('submit')"
   >
     <transition mode="out-in">
-
-      <KCircularLoader
-        v-if="loading"
-        :delay="false"
-      />
-      <ul v-else>
+      <ul>
         <li
           v-for="(copy, index) in copies"
           :key="index"
           class="copy"
         >
           <div class="title">
             <KRouterLink
-              :text="copy[copy.length - 1].title"
-              :to="generateCopyLink(copy[copy.length - 1].id)"
+              :text="copy.title"
+              :to="genContentLink(copy)"
             />
           </div>
           <ol>
             <li
-              v-for="(ancestor, index2) in copy.slice(0, -1)"
+              v-for="(ancestor, index2) in copy.ancestors"
               :key="index2"
               class="ancestor"
-              :class="{ 'arrow': index2 < copy.slice(0, -1).length - 1 }"
+              :class="{ 'arrow': index2 < copy.ancestors.length - 1 }"
             >
               {{ ancestor.title }}
             </li>
@@ -43,53 +38,21 @@
 
 <script>
 
-  import toArray from 'lodash/toArray';
-  import { mapActions } from 'vuex';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import sortBy from 'lodash/sortBy';
-  import { PageNames } from '../constants';
 
   export default {
     name: 'CopiesModal',
     mixins: [commonCoreStrings],
     props: {
-      uniqueId: {
-        type: String,
+      copies: {
+        type: Array,
         required: true,
       },
-      sharedContentId: {
-        type: String,
+      genContentLink: {
+        type: Function,
         required: true,
       },
     },
-    data() {
-      return {
-        loading: true,
-        copies: [],
-      };
-    },
-    created() {
-      this.getCopies(this.sharedContentId).then(copies => {
-        // transform the copies objects from Array<Object> to Array<Array>
-        const arrayedCopies = copies.map(copy => {
-          return toArray(copy);
-        });
-        this.copies = sortBy(arrayedCopies, copy => copy[copy.length - 1].id !== this.uniqueId);
-        this.loading = false;
-      });
-    },
-    methods: {
-      ...mapActions(['getCopies']),
-      generateCopyLink(id) {
-        return {
-          name: PageNames.TOPICS_CONTENT,
-          params: { id },
-          query: {
-            searchTerm: this.$route.query.searchTerm || '',
-          },
-        };
-      },
-    },
     $trs: {
       copies: {
         message: 'Locations',