Merge pull request #12745 from nucleogenesis/0.18--useLanguages-Searc…

…hChips-fixaroos

Move useChannels & SearchChips to kolibri-common

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

@@ -15,9 +15,9 @@ import useMinimumKolibriVersion from 'kolibri.coreVue.composables.useMinimumKoli
 import useUser from 'kolibri.coreVue.composables.useUser';
 import { localeCompare } from 'kolibri.utils.i18n';
 import plugin_data from 'plugin_data';
+import useChannels from 'kolibri-common/composables/useChannels';
 import { KolibriStudioId } from '../constants';
 import { learnStrings } from '../views/commonLearnStrings';
-import useChannels from './useChannels';
 
 /**
  * The ref is defined in the outer scope so it can be used as a shared store

kolibri/plugins/learn/assets/src/routes/index.js

@@ -2,7 +2,7 @@ import { get } from '@vueuse/core';
 import store from 'kolibri.coreVue.vuex.store';
 import router from 'kolibri.coreVue.router';
 import useUser from 'kolibri.coreVue.composables.useUser';
-import useChannels from '../composables/useChannels';
+import useChannels from 'kolibri-common/composables/useChannels';
 import { PageNames, ClassesPageNames, KolibriStudioId } from '../constants';
 import LibraryPage from '../views/LibraryPage';
 import HomePage from '../views/HomePage';

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

@@ -125,7 +125,7 @@
   import { ContentLevels, Categories } from 'kolibri.coreVue.vuex.constants';
   import camelCase from 'lodash/camelCase';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
-  import useChannels from '../composables/useChannels';
+  import useChannels from 'kolibri-common/composables/useChannels';
   import LearningActivityLabel from './LearningActivityLabel';
   import LearningActivityDuration from './LearningActivityDuration';
   import commonLearnStrings from './commonLearnStrings';

kolibri/plugins/learn/assets/src/views/ChannelRenderer/CustomContentRenderer.vue

@@ -36,9 +36,9 @@
   import router from 'kolibri.coreVue.router';
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
   import { events, MessageStatuses } from 'hashi/src/hashiBase';
+  import useChannels from 'kolibri-common/composables/useChannels';
   import { validateChannelTheme } from '../../utils/validateChannelTheme';
   import useContentLink from '../../composables/useContentLink';
-  import useChannels from '../../composables/useChannels';
   import ContentModal from './ContentModal';
 
   const { channelsMap } = useChannels();

kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js

@@ -9,10 +9,11 @@ import useTotalProgress, {
   useTotalProgressMock,
 } from 'kolibri.coreVue.composables.useTotalProgress';
 import { ref } from 'kolibri.lib.vueCompositionApi';
+// eslint-disable-next-line import/named
+import useChannels, { useChannelsMock } from 'kolibri-common/composables/useChannels';
 import { ClassesPageNames, PageNames } from '../../../constants';
 import HomePage from '../index';
 /* eslint-disable import/named */
-import useChannels, { useChannelsMock } from '../../../composables/useChannels';
 import useDeviceSettings, { useDeviceSettingsMock } from '../../../composables/useDeviceSettings';
 import useLearnerResources, {
   useLearnerResourcesMock,
@@ -21,7 +22,7 @@ import useLearnerResources, {
 jest.mock('kolibri.client');
 jest.mock('kolibri.urls');
 jest.mock('kolibri.coreVue.componentSets.sync');
-jest.mock('../../../composables/useChannels');
+jest.mock('kolibri-common/composables/useChannels');
 jest.mock('kolibri.coreVue.composables.useUser');
 jest.mock('../../../composables/useDeviceSettings');
 jest.mock('../../../composables/useLearnerResources');

kolibri/plugins/learn/assets/src/views/HomePage/index.vue

@@ -67,8 +67,8 @@
   import client from 'kolibri.client';
   import urls from 'kolibri.urls';
   import useUser from 'kolibri.coreVue.composables.useUser';
+  import useChannels from 'kolibri-common/composables/useChannels';
   import ResourceSyncingUiAlert from '../ResourceSyncingUiAlert';
-  import useChannels from '../../composables/useChannels';
   import useDeviceSettings from '../../composables/useDeviceSettings';
   import useLearnerResources, {
     setClasses,

kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/index.vue

@@ -72,7 +72,7 @@
 
   import { validateLinkObject } from 'kolibri.utils.validators';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import useChannels from '../../composables/useChannels';
+  import useChannels from 'kolibri-common/composables/useChannels';
   import LearningActivityLabel from '../LearningActivityLabel';
   import commonLearnStrings from '../commonLearnStrings';
   import CardThumbnail from './CardThumbnail.vue';

kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue

@@ -176,6 +176,7 @@
   import { searchKeys } from 'kolibri-common/composables/useBaseSearch';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel';
+  import useChannels from 'kolibri-common/composables/useChannels';
   import { KolibriStudioId, PageNames } from '../../constants';
   import useCardViewStyle from '../../composables/useCardViewStyle';
   import useContentLink from '../../composables/useContentLink';
@@ -194,7 +195,6 @@
   import SearchResultsGrid from '../SearchResultsGrid';
   import LearnAppBarPage from '../LearnAppBarPage';
   import PostSetupModalGroup from '../../../../../device/assets/src/views/PostSetupModalGroup.vue';
-  import useChannels from './../../composables/useChannels';
   import ResumableContentGrid from './ResumableContentGrid';
   import OtherLibraries from './OtherLibraries';
 

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

@@ -76,8 +76,8 @@
   import { ref } from 'kolibri.lib.vueCompositionApi';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import SearchChips from 'kolibri-common/components/SearchChips';
   import CopiesModal from './CopiesModal';
-  import SearchChips from './SearchChips';
   import LibraryAndChannelBrowserMainContent from './LibraryAndChannelBrowserMainContent';
 
   export default {

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

@@ -173,9 +173,9 @@
   import GlobalSnackbar from 'kolibri-common/components/GlobalSnackbar';
   import LearningActivityChip from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
+  import useChannels from 'kolibri-common/composables/useChannels';
   import { PageNames, ClassesPageNames } from '../constants';
   import SkipNavigationLink from '../../../../../../kolibri/core/assets/src/views/SkipNavigationLink';
-  import useChannels from '../composables/useChannels';
   import useContentLink from '../composables/useContentLink';
   import useCoreLearn from '../composables/useCoreLearn';
   import useContentNodeProgress from '../composables/useContentNodeProgress';

kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue

@@ -274,8 +274,8 @@
   import LearningActivityChip from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel';
+  import useChannels from 'kolibri-common/composables/useChannels';
   import { PageNames } from '../../constants';
-  import useChannels from '../../composables/useChannels';
   import useSearch from '../../composables/useSearch';
   import useContentLink from '../../composables/useContentLink';
   import useContentNodeProgress from '../../composables/useContentNodeProgress';

kolibri/plugins/learn/assets/src/views/thumbnails/ContentNodeThumbnail.vue

@@ -27,7 +27,7 @@
 <script>
 
   import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
-  import useChannels from '../../composables/useChannels';
+  import useChannels from 'kolibri-common/composables/useChannels';
   import Thumbnail from './Thumbnail';
 
   /**

kolibri/plugins/learn/assets/test/views/explore-libraries-page.spec.js

@@ -8,7 +8,7 @@ localVue.use(Vuex);
 localVue.use(VueRouter);
 
 jest.mock('../../src/composables/useCardLayoutSpan');
-jest.mock('../../src/composables/useChannels');
+jest.mock('kolibri-common/composables/useChannels');
 jest.mock('../../src/composables/useDevices');
 jest.mock('../../src/composables/useContentLink');
 jest.mock('../../src/composables/usePinnedDevices');

kolibri/plugins/learn/assets/test/views/library-page.spec.js

@@ -8,12 +8,12 @@ import { ContentNodeResource } from 'kolibri.resources';
 import useUser from 'kolibri.coreVue.composables.useUser';
 /* eslint-disable import/named */
 import useBaseSearch, { useBaseSearchMock } from 'kolibri-common/composables/useBaseSearch';
+import useChannels, { useChannelsMock } from 'kolibri-common/composables/useChannels';
 /* eslint-enable import/named */
 import { PageNames } from '../../src/constants';
 import LibraryPage from '../../src/views/LibraryPage';
 import OtherLibraries from '../../src/views/LibraryPage/OtherLibraries';
 /* eslint-disable import/named */
-import useChannels, { useChannelsMock } from '../../src/composables/useChannels';
 import usePinnedDevices, { usePinnedDevicesMock } from '../../src/composables/usePinnedDevices';
 import useDevices, { useDevicesMock } from '../../src/composables/useDevices';
 /* eslint-enable import/named */
@@ -38,7 +38,7 @@ const CHANNEL = {
   thumbnail: 'test thumbnail',
 };
 
-jest.mock('../../src/composables/useChannels');
+jest.mock('kolibri-common/composables/useChannels');
 jest.mock('../../src/composables/useCardLayoutSpan');
 jest.mock('../../src/composables/useDevices');
 jest.mock('../../src/composables/useLearnerResources');

kolibri/plugins/learn/assets/test/views/search-results-grid.spec.js

@@ -79,7 +79,7 @@ describe('when search results are loaded', () => {
           displayingSearchResults: true,
           searchLoading: false,
         },
-        stubs: ['LibraryAndChannelBrowserMainContent'],
+        stubs: ['LibraryAndChannelBrowserMainContent', 'SearchChips'],
       });
 
       const moreButton = wrapper.find('[data-test="more-results-button"]');

kolibri/plugins/learn/assets/test/views/topic-content.spec.js

@@ -1,21 +1,22 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import flushPromises from 'flush-promises';
 import { ContentNodeResource } from 'kolibri.resources';
+// eslint-disable-next-line import/named
+import useChannels, { useChannelsMock } from 'kolibri-common/composables/useChannels';
 import makeStore from '../makeStore';
 import TopicsContentPage from '../../src/views/TopicsContentPage';
 /* eslint-disable import/named */
 import useDownloadRequests, {
   useDownloadRequestsMock,
 } from '../../src/composables/useDownloadRequests';
-import useChannels, { useChannelsMock } from '../../src/composables/useChannels';
 import useCoreLearn, { useCoreLearnMock } from '../../src/composables/useCoreLearn';
 /* eslint-enable import/named */
 
 jest.mock('kolibri.urls');
 jest.mock('kolibri.client');
 jest.mock('kolibri.resources');
 jest.mock('../../src/composables/useDownloadRequests');
-jest.mock('../../src/composables/useChannels');
+jest.mock('kolibri-common/composables/useChannels');
 jest.mock('../../src/composables/useCoreLearn');
 jest.mock('../../src/composables/useDevices');
 

kolibri/plugins/learn/assets/test/views/topics-page.spec.js

@@ -9,12 +9,13 @@ import { ContentNodeResource } from 'kolibri.resources';
 import plugin_data from 'plugin_data';
 // eslint-disable-next-line import/named
 import useBaseSearch, { useBaseSearchMock } from 'kolibri-common/composables/useBaseSearch';
+// eslint-disable-next-line import/named
+import useChannels, { useChannelsMock } from 'kolibri-common/composables/useChannels';
 import makeStore from '../makeStore';
 import CustomContentRenderer from '../../src/views/ChannelRenderer/CustomContentRenderer';
 import { PageNames } from '../../src/constants';
 import TopicsPage from '../../src/views/TopicsPage';
 // eslint-disable-next-line import/named
-import useChannels, { useChannelsMock } from '../../src/composables/useChannels';
 
 jest.mock('kolibri.coreVue.componentSets.sync');
 jest.mock('plugin_data', () => {
@@ -89,7 +90,7 @@ jest.mock('kolibri.urls');
 jest.mock('kolibri.coreVue.composables.useUser');
 jest.mock('kolibri-common/composables/useBaseSearch');
 jest.mock('../../src/composables/useContentLink');
-jest.mock('../../src/composables/useChannels');
+jest.mock('kolibri-common/composables/useChannels');
 // Needed to test anything using mount() where children use this composable
 jest.mock('../../src/composables/useLearningActivities');
 

kolibri/plugins/learn/assets/src/views/SearchChips.vue → packages/kolibri-common/components/SearchChips.vue

@@ -33,16 +33,23 @@
   import flatMap from 'lodash/flatMap';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { NoCategories } from 'kolibri.coreVue.vuex.constants';
-  import useChannels from '../composables/useChannels';
-  import useLanguages from '../composables/useLanguages';
+  import useChannels from 'kolibri-common/composables/useChannels';
+  import { injectBaseSearch } from 'kolibri-common/composables/useBaseSearch';
 
   export default {
     name: 'SearchChips',
     mixins: [commonCoreStrings],
     setup() {
-      const { languagesMap } = useLanguages();
+      const { availableLanguages } = injectBaseSearch();
+      const languagesMap = availableLanguages.value.reduce((map, lang) => {
+        map[lang.id] = lang;
+        return map;
+      }, {});
       const { channelsMap } = useChannels();
-      return { channelsMap, languagesMap };
+      return {
+        channelsMap,
+        languagesMap,
+      };
     },
     props: {
       searchTerms: {

packages/kolibri-common/composables/useBaseSearch.js

@@ -23,7 +23,6 @@ import {
 import useUser from 'kolibri.coreVue.composables.useUser';
 
 import { deduplicateResources } from '../utils/contentNode';
-import { setLanguages } from './useLanguages';
 
 export const logging = logger.getLogger(__filename);
 
@@ -384,7 +383,6 @@ export default function useBaseSearch({
           languagesList: labels.languages || [],
           channelsList: labels.channels || [],
         });
-        setLanguages(labels.languages || []);
       })
       .catch(err => logging.error('Failed to fetch search labels from remote', err))
       .then(() => {