Replace provide/inject

kolibri/plugins/coach/assets/src/composables/useResourceSelection.js

@@ -1,5 +1,5 @@
 import uniqBy from 'lodash/uniqBy';
-import { ref, provide, inject, computed, getCurrentInstance, watch } from '@vue/composition-api';
+import { ref, computed, getCurrentInstance, watch } from '@vue/composition-api';
 import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
 import ChannelResource from 'kolibri-common/apiResources/ChannelResource';
 import useFetch from './useFetch';
@@ -101,42 +101,16 @@ export default function useResourceSelection() {
 
   const selectionRules = [];
 
-  provide('topic', topic);
-  provide('channelsFetch', channelsFetch);
-  provide('bookmarksFetch', bookmarksFetch);
-  provide('treeFetch', treeFetch);
-  provide('selectionRules', selectionRules);
-  provide('selectedResources', selectedResources);
-  provide('selectResources', selectResources);
-  provide('deselectResources', deselectResources);
-  provide('setSelectedResources', setSelectedResources);
-
-  return {
-    loading,
-    selectedResources,
-  };
-}
-
-export function injectResourceSelection() {
-  const topic = inject('topic');
-  const channelsFetch = inject('channelsFetch');
-  const bookmarksFetch = inject('bookmarksFetch');
-  const treeFetch = inject('treeFetch');
-  const selectionRules = inject('selectionRules');
-  const selectedResources = inject('selectedResources');
-  const selectResources = inject('selectResources');
-  const deselectResources = inject('deselectResources');
-  const setSelectedResources = inject('setSelectedResources');
-
   return {
     topic,
+    loading,
     channelsFetch,
     bookmarksFetch,
     treeFetch,
     selectionRules,
+    selectedResources,
     selectResources,
     deselectResources,
-    selectedResources,
     setSelectedResources,
   };
 }

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue

@@ -23,7 +23,7 @@
         :showRadioButtons="!multi"
         @changeselectall="handleSelectAll"
         @change_content_card="toggleSelected"
-        @moreresults="fetchMoreResources"
+        @moreresults="fetchMore"
       />
     </div>
   </div>
@@ -33,14 +33,11 @@
 
 <script>
 
-  import { computed } from '@vue/composition-api';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { ContentNodeKinds } from 'kolibri/constants';
   import ContentCardList from '../../lessons/LessonResourceSelectionPage/ContentCardList.vue';
   import ResourceSelectionBreadcrumbs from '../../lessons/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
   import { PageNames } from '../../../constants';
-  import { injectResourceSelection } from '../../../composables/useResourceSelection';
-  import { ResourceContentSource } from './sidePanels/LessonResourceSelection/constants';
 
   export default {
     name: 'UpdatedResourceSelection',
@@ -49,54 +46,6 @@
       ResourceSelectionBreadcrumbs,
     },
     mixins: [commonCoreStrings],
-    setup(props) {
-      const {
-        topic,
-        bookmarksFetch,
-        treeFetch,
-        selectionRules = [],
-        selectedResources,
-        selectResources,
-        deselectResources,
-        setSelectedResources,
-      } = injectResourceSelection();
-
-      const contentFetch = computed(() => {
-        const contentSources = {
-          [ResourceContentSource.BOOKMARKS]: bookmarksFetch,
-          [ResourceContentSource.TOPIC_TREE]: treeFetch,
-        };
-
-        return contentSources[props.source];
-      });
-
-      const contentList = computed(() => {
-        const { data } = contentFetch.value;
-        return data.value;
-      });
-
-      const viewMoreButtonState = computed(() => {
-        const { moreState } = contentFetch.value;
-        return moreState.value;
-      });
-
-      function fetchMoreResources() {
-        const { fetchMore } = contentFetch.value;
-        fetchMore?.();
-      }
-
-      return {
-        topic,
-        contentList,
-        selectionRules,
-        selectedResources,
-        fetchMoreResources,
-        viewMoreButtonState,
-        selectResources,
-        deselectResources,
-        setSelectedResources,
-      };
-    },
     props: {
       canSelectAll: {
         type: Boolean,
@@ -106,12 +55,32 @@
         type: Boolean,
         default: true,
       },
-      source: {
+      topic: {
+        type: Object,
+        required: true,
+      },
+      contentList: {
+        type: Array,
+        required: true,
+      },
+      viewMoreButtonState: {
         type: String,
+        required: false,
+        default: null,
+      },
+      fetchMore: {
+        type: Function,
+        required: false,
+        default: null,
+      },
+      selectionRules: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      selectedResources: {
+        type: Array,
         required: true,
-        validator(value) {
-          return Object.values(ResourceContentSource).includes(value);
-        },
       },
     },
     computed: {
@@ -164,9 +133,9 @@
       },
       handleSelectAll(checked) {
         if (checked) {
-          this.selectResources(this.selectableContentList);
+          this.$emit('selectResources', this.selectableContentList);
         } else {
-          this.deselectResources(this.selectableContentList);
+          this.$emit('deselectResources', this.selectableContentList);
         }
       },
       contentCheckboxDisabled(resource) {
@@ -180,12 +149,12 @@
       },
       toggleSelected({ content, checked }) {
         if (!this.multi) {
-          return this.setSelectedResources(checked ? [content] : []);
+          return this.$emit('setSelectedResources', checked ? [content] : []);
         }
         if (checked) {
-          this.selectResources([content]);
+          this.$emit('selectResources', [content]);
         } else {
-          this.deselectResources([content]);
+          this.$emit('deselectResources', [content]);
         }
       },
       showCheckbox(node) {

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue

@@ -25,6 +25,15 @@
       v-else
       :setTitle="setTitle"
       :setGoBack="setGoBack"
+      :topic="topic"
+      :channelsFetch="channelsFetch"
+      :bookmarksFetch="bookmarksFetch"
+      :treeFetch="treeFetch"
+      :selectionRules="selectionRules"
+      :selectedResources="selectedResources"
+      @selectResources="selectResources"
+      @deselectResources="deselectResources"
+      @setSelectedResources="setSelectedResources"
     />
     <!-- <component
       :is="view.component"
@@ -68,13 +77,32 @@
       SidePanelModal,
     },
     setup() {
-      const { selectedResources, loading } = useResourceSelection();
+      const {
+        loading,
+        topic,
+        channelsFetch,
+        bookmarksFetch,
+        treeFetch,
+        selectionRules,
+        selectedResources,
+        selectResources,
+        deselectResources,
+        setSelectedResources,
+      } = useResourceSelection();
 
       const { saveAndFinishAction$, selectFromBookmarks$ } = coreStrings;
 
       return {
         loading,
         selectedResources,
+        topic,
+        channelsFetch,
+        bookmarksFetch,
+        treeFetch,
+        selectionRules,
+        selectResources,
+        deselectResources,
+        setSelectedResources,
         selectFromBookmarks$,
         saveAndFinishAction$,
       };

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromBookmarks.vue

@@ -3,7 +3,13 @@
   <div>
     <UpdatedResourceSelection
       canSelectAll
-      :source="ResourceContentSource.BOOKMARKS"
+      :contentList="contentList"
+      :viewMoreButtonState="viewMoreButtonState"
+      :fetchMore="fetchMore"
+      :selectionRules="selectionRules"
+      :selectedResources="selectedResources"
+      @selectResources="$emit('selectResources', $event)"
+      @deselectResources="$emit('deselectResources', $event)"
     />
   </div>
 
@@ -14,7 +20,6 @@
 
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
   import UpdatedResourceSelection from '../../../UpdatedResourceSelection.vue';
-  import { ResourceContentSource } from '../constants';
   import { PageNames } from '../../../../../../constants';
 
   export default {
@@ -31,6 +36,14 @@
           name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
         });
       });
+
+      const { data, moreState, fetchMore } = props.bookmarksFetch;
+
+      return {
+        contentList: data,
+        viewMoreButtonState: moreState,
+        fetchMore,
+      };
     },
     props: {
       setTitle: {
@@ -41,11 +54,19 @@
         type: Function,
         default: () => {},
       },
-    },
-    data() {
-      return {
-        ResourceContentSource,
-      };
+      bookmarksFetch: {
+        type: Object,
+        required: true,
+      },
+      selectionRules: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      selectedResources: {
+        type: Array,
+        required: true,
+      },
     },
     methods: {
       /**

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromChannels.vue

@@ -28,7 +28,14 @@
 
     <UpdatedResourceSelection
       canSelectAll
-      :source="ResourceContentSource.TOPIC_TREE"
+      :topic="topic"
+      :contentList="contentList"
+      :viewMoreButtonState="viewMoreButtonState"
+      :fetchMore="fetchMore"
+      :selectionRules="selectionRules"
+      :selectedResources="selectedResources"
+      @selectResources="$emit('selectResources', $event)"
+      @deselectResources="$emit('deselectResources', $event)"
     />
   </div>
 
@@ -38,9 +45,7 @@
 <script>
 
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
-  import { ResourceContentSource } from '../constants';
   import UpdatedResourceSelection from '../../../UpdatedResourceSelection.vue';
-  import { injectResourceSelection } from '../../../../../../composables/useResourceSelection';
   import { coachStrings } from '../../../../../common/commonCoachStrings';
   import { PageNames } from '../../../../../../constants';
 
@@ -52,7 +57,6 @@
     setup(props, { root }) {
       const { selectFromChannels$, searchLabel$ } = coreStrings;
       const { manageLessonResourcesTitle$ } = coachStrings;
-      const { topic } = injectResourceSelection();
 
       props.setTitle(manageLessonResourcesTitle$());
       props.setGoBack(() => {
@@ -61,8 +65,11 @@
         });
       });
 
+      const { data, moreState, fetchMore } = props.treeFetch;
       return {
-        topic,
+        contentList: data,
+        viewMoreButtonState: moreState,
+        fetchMore,
         searchLabel$,
         selectFromChannels$,
       };
@@ -76,11 +83,23 @@
         type: Function,
         default: () => {},
       },
-    },
-    data() {
-      return {
-        ResourceContentSource,
-      };
+      topic: {
+        type: Object,
+        required: true,
+      },
+      treeFetch: {
+        type: Object,
+        required: true,
+      },
+      selectionRules: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      selectedResources: {
+        type: Array,
+        required: true,
+      },
     },
     beforeRouteEnter(to, _, next) {
       const { topicId } = to.query;