Follow up to remote content browsing ui polish

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

@@ -126,11 +126,35 @@ export default function useContentLink(store) {
     return `${base}${path}${query}`;
   }
 
+  function genLibraryPageBackLink(deviceId, isExploreLibraries = false) {
+    if (!route) {
+      return null;
+    }
+
+    const oldQuery = get(route).query || {};
+    const query = {
+      prevName: get(route).name,
+    };
+    if (!isEmpty(oldQuery)) {
+      query.prevQuery = encodeURI(JSON.stringify(oldQuery));
+    }
+    const params = get(route).params;
+    if (!isEmpty(params)) {
+      query.prevParams = encodeURI(JSON.stringify(params));
+    }
+    return {
+      name: isExploreLibraries ? PageNames.EXPLORE_LIBRARIES : PageNames.LIBRARY,
+      params: pick({ deviceId: deviceId || params.deviceId }, ['deviceId']),
+      query,
+    };
+  }
+
   return {
     genContentLinkBackLinkCurrentPage,
     genContentLinkKeepCurrentBackLink,
     genExternalContentURLBackLinkCurrentPage,
     genExternalBackURL,
+    genLibraryPageBackLink,
     back,
   };
 }

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

@@ -111,7 +111,6 @@ export default [
     props: route => {
       return {
         deviceId: route.params.deviceId,
-        goBackRoute: route.params.goBackRoute,
       };
     },
   },

kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue

@@ -48,7 +48,7 @@
         <KRouterLink
           appearance="raised-button"
           :text="coreString('explore')"
-          :to="libraryPageRoute"
+          :to="genLibraryPageBackLink(deviceId, false)"
         />
       </KGridItem>
     </div>
@@ -80,7 +80,6 @@
   import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
   import useContentLink from '../../composables/useContentLink';
   import ChannelCard from '../ChannelCard';
-  import { PageNames } from '../../constants';
 
   export default {
     name: 'LibraryItem',
@@ -89,11 +88,12 @@
     },
     mixins: [commonCoreStrings],
     setup() {
-      const { genContentLinkBackLinkCurrentPage } = useContentLink();
+      const { genContentLinkBackLinkCurrentPage, genLibraryPageBackLink } = useContentLink();
       const { windowIsSmall } = useKResponsiveWindow();
 
       return {
         genContentLinkBackLinkCurrentPage,
+        genLibraryPageBackLink,
         windowIsSmall,
       };
     },
@@ -140,22 +140,6 @@
         default: false,
       },
     },
-    computed: {
-      goBackRoute() {
-        return {
-          name: PageNames.EXPLORE_LIBRARIES,
-        };
-      },
-      libraryPageRoute() {
-        return {
-          name: PageNames.LIBRARY,
-          params: {
-            deviceId: this.deviceId,
-            goBackRoute: this.goBackRoute,
-          },
-        };
-      },
-    },
     $trs: {
       channels: {
         message:

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

@@ -2,8 +2,9 @@
 
   <ImmersivePage
     :appBarTitle="learnString('exploreLibraries')"
-    :route="backRoute"
+    :route="back"
     :primary="false"
+    :loading="loading"
   >
     <div
       class="page-header"
@@ -39,8 +40,8 @@
         />
       </div>
       <LibraryItem
-        v-for="device in moreDevices"
-        :key="device['instance_id']"
+        v-for="(device, index) in moreDevices"
+        :key="index"
         :deviceId="device['instance_id']"
         :deviceName="device['device_name']"
         :deviceIcon="getDeviceIcon(device)"
@@ -64,14 +65,16 @@
 <script>
 
   import { mapGetters } from 'vuex';
+
   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 useChannels from '../../composables/useChannels';
+  import useContentLink from '../../composables/useContentLink';
   import useDevices from '../../composables/useDevices';
   import usePinnedDevices from '../../composables/usePinnedDevices';
-  import { PageNames, KolibriStudioId } from '../../constants';
+  import { KolibriStudioId } from '../../constants';
   import LibraryItem from './LibraryItem';
 
   const PinStrings = crossComponentTranslator(LibraryItem);
@@ -85,6 +88,7 @@
     mixins: [commonCoreStrings, commonLearnStrings],
     setup() {
       const { fetchChannels } = useChannels();
+      const { back } = useContentLink();
       const { fetchDevices } = useDevices();
       const { createPinForUser, deletePinForUser, fetchPinsForUser } = usePinnedDevices();
 
@@ -94,10 +98,12 @@
         fetchPinsForUser,
         fetchChannels,
         fetchDevices,
+        back,
       };
     },
     data() {
       return {
+        loading: false,
         networkDevices: [],
         moreDevices: [],
         usersPins: [],
@@ -108,9 +114,6 @@
       areMoreDevicesAvailable() {
         return this.unpinnedDevices?.length > 0;
       },
-      backRoute() {
-        return { name: PageNames.LIBRARY };
-      },
       displayShowButton() {
         return this.moreDevices.length === 0;
       },
@@ -173,6 +176,7 @@
       },
     },
     created() {
+      this.loading = true;
       // Fetch user's pins
       this.fetchPinsForUser().then(resp => {
         this.usersPins = resp.map(pin => {
@@ -182,23 +186,28 @@
       });
 
       this.fetchDevices().then(devices => {
-        const fetchDevicesChannels = devices.reduce((accumulator, device) => {
+        this.loading = false;
+        for (const device of devices) {
           const baseurl = device.base_url;
-          accumulator.push(this.fetchChannels({ baseurl }));
-          return accumulator;
-        }, []);
-
-        Promise.allSettled(fetchDevicesChannels).then(devicesChannels => {
-          this.networkDevices = devices.map((device, index) => {
-            const deviceChannels = devicesChannels[index]?.value || [];
-            device['channels'] = deviceChannels.slice(0, 4);
-            device['total_count'] = deviceChannels.length;
-            return device;
-          });
-        });
+          this.fetchChannels({ baseurl })
+            .then(channels => {
+              this.addNetworkDevice(device, channels);
+            })
+            .catch(() => {
+              this.addNetworkDevice(device, []);
+            });
+        }
       });
     },
     methods: {
+      addNetworkDevice(device, channels) {
+        this.networkDevices.push(
+          Object.assign(device, {
+            channels: channels.slice(0, 4),
+            total_count: channels.length,
+          })
+        );
+      },
       createPin(instance_id) {
         return this.createPinForUser(instance_id).then(response => {
           const id = response.id;
@@ -222,13 +231,9 @@
       handlePinToggle(instance_id) {
         if (this.usersPinsDeviceIds.includes(instance_id)) {
           const pinId = this.usersPins.find(pin => pin.instance_id === instance_id);
-          this.deletePin(instance_id, pinId).catch(e => {
-            console.error(e);
-          });
+          this.deletePin(instance_id, pinId);
         } else {
-          this.createPin(instance_id).catch(e => {
-            console.error(e);
-          });
+          this.createPin(instance_id);
         }
       },
       getDeviceIcon(device) {

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

@@ -9,7 +9,10 @@
         :layout8="{ span: 4 }"
         :layout4="{ span: 4 }"
       >
-        <UnPinnedDevices :device="device" />
+        <UnPinnedDevices
+          :device="device"
+          :routeTo="genLibraryPageBackLink(device.id, false)"
+        />
       </KGridItem>
       <KGridItem
         v-if="devices.length"
@@ -21,7 +24,7 @@
         <UnPinnedDevices
           :device="{}"
           :viewAll="true"
-          :routeTo="viewAllRoute"
+          :routeTo="genLibraryPageBackLink(null, true)"
         />
       </KGridItem>
     </KGrid>
@@ -33,7 +36,7 @@
 <script>
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import { PageNames } from '../../constants';
+  import useContentLink from '../../composables/useContentLink';
   import UnPinnedDevices from './UnPinnedDevices';
 
   export default {
@@ -42,17 +45,18 @@
       UnPinnedDevices,
     },
     mixins: [commonCoreStrings],
+    setup() {
+      const { genLibraryPageBackLink } = useContentLink();
+      return {
+        genLibraryPageBackLink,
+      };
+    },
     props: {
       devices: {
         type: Array,
         required: true,
       },
     },
-    computed: {
-      viewAllRoute() {
-        return { name: PageNames.EXPLORE_LIBRARIES };
-      },
-    },
   };
 
 </script>

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

@@ -28,7 +28,7 @@
             :key="exploreString.toLowerCase()"
             :isMobile="windowIsSmall"
             :title="exploreString"
-            :link="libraryPageRoute(device.id)"
+            :link="genLibraryPageBackLink(device.id, false)"
             :explore="true"
           />
         </KGridItem>
@@ -45,7 +45,7 @@
   import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import { PageNames } from '../../constants';
+  import useContentLink from '../../composables/useContentLink';
   import ChannelCard from '../ChannelCard';
   import ChannelCardGroupGrid from './../ChannelCardGroupGrid';
 
@@ -57,8 +57,10 @@
     },
     mixins: [responsiveWindowMixin, commonCoreStrings],
     setup() {
+      const { genLibraryPageBackLink } = useContentLink();
       const { windowGutter } = useKResponsiveWindow();
       return {
+        genLibraryPageBackLink,
         windowGutter,
       };
     },
@@ -75,11 +77,6 @@
       exploreString() {
         return this.coreString('explore');
       },
-      goBackRoute() {
-        return {
-          name: PageNames.LIBRARY,
-        };
-      },
     },
     methods: {
       getDeviceIcon(device) {
@@ -91,12 +88,6 @@
           return 'laptop';
         }
       },
-      libraryPageRoute(deviceId) {
-        return this.$router.getRoute(PageNames.LIBRARY, {
-          deviceId,
-          goBackRoute: this.goBackRoute,
-        });
-      },
     },
   };
 

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

@@ -53,7 +53,6 @@
   import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import { PageNames } from '../../constants';
 
   export default {
     name: 'UnPinnedDevices',
@@ -74,15 +73,7 @@
       },
       routeTo: {
         type: Object,
-        required: false,
-        default() {
-          return {
-            name: PageNames.LIBRARY,
-            params: {
-              deviceId: this.device.id,
-            },
-          };
-        },
+        required: true,
       },
       viewAll: {
         type: Boolean,