Consolidate pin handling logic into pinned devices composable.

learningequality · Oct 20, 2023 · c667cbf · c667cbf
1 parent d86f0d9
commit c667cbf
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 35 deletions.
diff --git a/kolibri/plugins/learn/assets/src/composables/__mocks__/usePinnedDevices.js b/kolibri/plugins/learn/assets/src/composables/__mocks__/usePinnedDevices.js
@@ -32,13 +32,12 @@
  */
 
 const MOCK_DEFAULTS = {
-  createPinForUser: jest.fn(() => Promise.resolve({})),
-  deletePinForUser: jest.fn(() => Promise.resolve({})),
   fetchPinsForUser: jest.fn(() => Promise.resolve([])),
   pinnedDevices: [],
   pinnedDevicesExist: false,
   unpinnedDevices: [],
   unpinnedDevicesExist: false,
+  handlePinToggle: jest.fn(() => Promise.resolve({})),
 };
 
 export function usePinnedDevicesMock(overrides = {}) {

diff --git a/kolibri/plugins/learn/assets/src/composables/usePinnedDevices.js b/kolibri/plugins/learn/assets/src/composables/usePinnedDevices.js
@@ -3,11 +3,16 @@
  */
 
 import { get, set } from '@vueuse/core';
-import { computed, ref } from 'kolibri.lib.vueCompositionApi';
+import { computed, getCurrentInstance, ref } from 'kolibri.lib.vueCompositionApi';
 import { PinnedDeviceResource } from 'kolibri.resources';
+import { crossComponentTranslator } from 'kolibri.utils.i18n';
 import { KolibriStudioId } from '../constants';
+import LibraryItem from '../views/ExploreLibrariesPage/LibraryItem';
 
-export default function usePinnedDevices(networkDevicesWithChannels) {
+const PinStrings = crossComponentTranslator(LibraryItem);
+
+export default function usePinnedDevices(networkDevicesWithChannels, store) {
+  store = store || getCurrentInstance().proxy.$store;
   const userPinsMap = ref({});
 
   const devicesWithChannels = computed(() => {
@@ -29,6 +34,7 @@ export default function usePinnedDevices(networkDevicesWithChannels) {
       ...get(userPinsMap),
       [instance_id]: { instance_id },
     });
+    store.dispatch('createSnackbar', PinStrings.$tr('pinnedTo'));
     return PinnedDeviceResource.create({ instance_id }).then(pin => {
       set(userPinsMap, {
         ...get(userPinsMap),
@@ -43,6 +49,7 @@ export default function usePinnedDevices(networkDevicesWithChannels) {
     const newMap = { ...map };
     delete newMap[instance_id];
     set(userPinsMap, newMap);
+    store.dispatch('createSnackbar', PinStrings.$tr('pinRemoved'));
     return PinnedDeviceResource.deleteModel({ id });
   }
 
@@ -63,9 +70,15 @@ export default function usePinnedDevices(networkDevicesWithChannels) {
     return get(unpinnedDevices).length > 0;
   });
 
+  function handlePinToggle(instance_id) {
+    if (get(userPinsMap)[instance_id]) {
+      return deletePinForUser(instance_id);
+    }
+    return createPinForUser(instance_id);
+  }
+
   return {
-    createPinForUser,
-    deletePinForUser,
+    handlePinToggle,
     fetchPinsForUser,
     userPinsMap,
     pinnedDevices,

diff --git a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
@@ -80,16 +80,13 @@
   import { ref, watch } from 'kolibri.lib.vueCompositionApi';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import { crossComponentTranslator } from 'kolibri.utils.i18n';
   import commonLearnStrings from '../commonLearnStrings';
   import FadeInTransitionGroup from '../FadeInTransitionGroup';
   import useContentLink from '../../composables/useContentLink';
   import useDevices from '../../composables/useDevices';
   import usePinnedDevices from '../../composables/usePinnedDevices';
-  import { KolibriStudioId } from '../../constants';
   import LibraryItem from './LibraryItem';
 
-  const PinStrings = crossComponentTranslator(LibraryItem);
   const moreDevicesIncrement = 4;
 
   export default {
@@ -108,8 +105,7 @@
         isLoadingChannels,
       } = useDevices();
       const {
-        createPinForUser,
-        deletePinForUser,
+        handlePinToggle,
         fetchPinsForUser,
         userPinsMap,
         pinnedDevices,
@@ -134,8 +130,7 @@
       });
 
       return {
-        deletePinForUser,
-        createPinForUser,
+        handlePinToggle,
         pinnedDevices,
         unpinnedDevices,
         pinnedDevicesExist,
@@ -163,30 +158,8 @@
           color: this.$themeTokens.text,
         };
       },
-      studioId() {
-        return KolibriStudioId;
-      },
     },
     methods: {
-      createPin(instance_id) {
-        return this.createPinForUser(instance_id).then(() => {
-          // eslint-disable-next-line
-          this.$store.dispatch('createSnackbar', PinStrings.$tr('pinnedTo'));
-        });
-      },
-      deletePin(instance_id) {
-        return this.deletePinForUser(instance_id).then(() => {
-          // eslint-disable-next-line
-          this.$store.dispatch('createSnackbar', PinStrings.$tr('pinRemoved'));
-        });
-      },
-      handlePinToggle(instance_id) {
-        if (this.userPinsMap[instance_id]) {
-          this.deletePin(instance_id);
-        } else {
-          this.createPin(instance_id);
-        }
-      },
       getDeviceIcon(device) {
         if (device['operating_system'] === 'Android') {
           return 'device';