From 338b3a87a0d4030c68d9378ccfbe190f0400d227 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 24 Aug 2023 14:42:19 -0400
Subject: [PATCH 01/26] Download page displays in sidenav only when download
 permissions permitted

---
 .../src/my_downloads/views/MyDownloadsSideNavEntry.js     | 5 ++++-
 kolibri/plugins/learn/kolibri_plugin.py                   | 8 ++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloadsSideNavEntry.js b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloadsSideNavEntry.js
index 0f2b3bd97ab..8c4e2cc9420 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloadsSideNavEntry.js
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloadsSideNavEntry.js
@@ -2,6 +2,7 @@ import { UserKinds, NavComponentSections } from 'kolibri.coreVue.vuex.constants'
 import navComponents from 'kolibri.utils.navComponents';
 import coreStrings from 'kolibri.utils.coreStrings';
 import urls from 'kolibri.urls';
+import plugin_data from 'plugin_data';
 
 const component = {
   name: 'MyDownloadsSideNavEntry',
@@ -17,6 +18,8 @@ const component = {
   section: NavComponentSections.ACCOUNT,
 };
 
-navComponents.register(component);
+if (plugin_data.allowLearnerDownloads) {
+  navComponents.register(component);
+}
 
 export default component;
diff --git a/kolibri/plugins/learn/kolibri_plugin.py b/kolibri/plugins/learn/kolibri_plugin.py
index 38f2227bfd3..041da845b05 100644
--- a/kolibri/plugins/learn/kolibri_plugin.py
+++ b/kolibri/plugins/learn/kolibri_plugin.py
@@ -172,3 +172,11 @@ def on_renew(self, instance, network_locations):
 @register_hook
 class MyDownloadsNavAction(NavigationHook):
     bundle_id = "my_downloads_side_nav"
+
+    @property
+    def plugin_data(self):
+        return {
+            "allowLearnerDownloads": get_device_setting(
+                "allow_learner_download_resources"
+            ),
+        }

From c14586a828f8c3e107ea7be32c0b695f8895ee3a Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Tue, 29 Aug 2023 09:48:49 -0400
Subject: [PATCH 02/26] Add download progress polling, remove download before
 complete, disable download button after download initiated cleanup

---
 .../views/DownloadsList/index.vue             | 44 ++++++++++---------
 .../src/my_downloads/views/MyDownloads.vue    | 40 ++++++++++++++++-
 .../HybridLearningFooter.vue                  | 10 ++++-
 3 files changed, 72 insertions(+), 22 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index 1211e6274a8..2e607ee889c 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -75,7 +75,6 @@
                 <KButton
                   :text="coreString('removeAction')"
                   appearance="flat-button"
-                  :disabled="nonCompleteStatus(download)"
                   @click="removeResource(download)"
                 />
               </td>
@@ -111,8 +110,8 @@
   import CoreTable from 'kolibri.coreVue.components.CoreTable';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import PaginatedListContainerWithBackend from 'kolibri-common/components/PaginatedListContainerWithBackend';
-  import { computed, getCurrentInstance, watch, ref } from 'kolibri.lib.vueCompositionApi';
-  import { get, set } from '@vueuse/core';
+  import { computed, getCurrentInstance } from 'kolibri.lib.vueCompositionApi';
+  import { get } from '@vueuse/core';
   import useContentLink from '../../../composables/useContentLink';
   import useLearningActivities from '../../../composables/useLearningActivities';
   import useDownloadRequests from '../../../composables/useDownloadRequests';
@@ -132,14 +131,12 @@
       const { genExternalContentURLBackLinkCurrentPage } = useContentLink();
       const { getLearningActivityIcon } = useLearningActivities();
       const { downloadRequestMap, availableSpace } = useDownloadRequests();
-      const totalPageNumber = ref(0);
       const store = getCurrentInstance().proxy.$store;
       const query = computed(() => get(route).query);
       const route = computed(() => store.state.route);
       const sort = computed(() => query.value.sort);
       const pageSizeNumber = computed(() => Number(query.value.page_size || 25));
       const activityType = computed(() => query.value.activity || 'all');
-      const downloads = ref([]);
       const sortedFilteredDownloads = () => {
         let downloadsToDisplay = [];
         if (downloadRequestMap) {
@@ -148,7 +145,7 @@
           }
           if (activityType) {
             if (activityType.value !== 'all') {
-              downloadsToDisplay = downloadsToDisplay.filter(download =>
+              downloadsToDisplay = this.downloadsToDisplay.filter(download =>
                 download.metadata.learning_activities.includes(activityType.value)
               );
             }
@@ -177,19 +174,13 @@
             }
           }
         }
-        set(totalPageNumber, Math.ceil(downloadsToDisplay.length / pageSizeNumber.value));
-        set(downloads, downloadsToDisplay);
       };
       sortedFilteredDownloads();
-      watch(route, () => {
-        sortedFilteredDownloads();
-      });
       return {
         downloadRequestMap,
-        downloads,
+        pageSizeNumber,
         getLearningActivityIcon,
         sortedFilteredDownloads,
-        totalPageNumber,
         availableSpace,
         genExternalContentURLBackLinkCurrentPage,
       };
@@ -239,18 +230,28 @@
         },
       },
       paginatedDownloads() {
-        const startIndex = (this.currentPage - 1) * this.itemsPerPage;
-        const endIndex = startIndex + this.itemsPerPage;
-        return this.downloads.slice(startIndex, endIndex);
+        if (this.downloads && this.downloads.length > 0) {
+          const startIndex = (this.currentPage - 1) * this.itemsPerPage;
+          const endIndex = startIndex + this.itemsPerPage;
+          return this.downloads.slice(startIndex, endIndex);
+        } else {
+          return [];
+        }
+      },
+      downloads() {
+        return this.sortedFilteredDownloads;
+      },
+      totalPageNumber() {
+        if (this.downloadsToDisplay && this.downloadsToDisplay.length) {
+          return Math.ceil(this.downloadsToDisplay.length / this.pageSizeNumber.value);
+        }
+        return 1;
       },
       areAllSelected() {
         return Object.keys(this.downloads).every(id => this.selectedDownloads.includes(id));
       },
       areAnyAvailable() {
-        if (this.downloads && this.downloads.length > 0) {
-          return this.downloads.filter(download => download.status === 'COMPLETED').length > 0;
-        }
-        return false;
+        return this.downloads && this.downloads.length > 0;
       },
     },
     watch: {
@@ -332,7 +333,10 @@
             message = this.$formatRelative(download.requested_at, { now: this.now });
             break;
           case 'FAILED':
+            // if (check source id is on the network) {
             message = this.coreString('downloadFailedWillRetry');
+            // }
+            message = this.coreString('downloadedFailedCanNotRetry');
             break;
           default:
             // If no valid sort option provided, return unsorted array
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
index 7309f228022..241598e5f8d 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
@@ -100,13 +100,13 @@
           activityType: activityType.value,
         });
       };
-      fetchDownloads();
       fetchAvailableFreespace();
       watch(route, fetchDownloads);
 
       return {
         downloadRequestMap,
         loading,
+        fetchDownloads,
         availableSpace,
         totalPageNumber,
         fetchAvailableFreespace,
@@ -122,6 +122,12 @@
         );
       },
     },
+    created() {
+      this.startPolling();
+    },
+    beforeDestroy() {
+      clearInterval(this.pollingInterval);
+    },
     methods: {
       formattedSize(size) {
         if (size > 0) {
@@ -139,6 +145,38 @@
           });
         }
       },
+      startPolling() {
+        this.pollingInterval = setInterval(async () => {
+          await this.fetchDownloads();
+          this.fetchDevices().then(devices => (this.networkDevices = devices));
+          this.calculatePollingInterval();
+        }, 1000); // Initial interval of 1 second
+      },
+      calculatePollingInterval() {
+        let pollingInterval = 30000; // Default interval of 30 seconds
+
+        for (const download in this.downloadRequestMap) {
+          const status = this.downloadRequestMap[download].status;
+
+          if (status === 'PENDING' || status === 'FAILED') {
+            pollingInterval = 5000; // Poll every 5 seconds
+            break;
+          } else if (status === 'IN_PROGRESS') {
+            pollingInterval = 1000; // Poll every 1 second
+            break;
+          }
+        }
+
+        if (pollingInterval !== this.pollingInterval) {
+          clearInterval(this.pollingInterval);
+          this.pollingInterval = setInterval(async () => {
+            this.fetchDownloads();
+            this.fetchDevices().then(devices => (this.networkDevices = devices));
+            console.log(this.networkDevices);
+            this.calculatePollingInterval();
+          }, pollingInterval);
+        }
+      },
     },
   };
 
diff --git a/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/HybridLearningFooter.vue b/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/HybridLearningFooter.vue
index c27bb89db76..d9a13fe0411 100644
--- a/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/HybridLearningFooter.vue
+++ b/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/HybridLearningFooter.vue
@@ -149,7 +149,15 @@
         return !this.isTopic && this.allowDownloads;
       },
       downloadedByLearner() {
-        return this.downloadEnabled && Boolean(this.downloadRequestMap[this.contentNode.id]);
+        let downloaded = null;
+        for (const key in this.downloadRequestMap) {
+          const item = this.downloadRequestMap[key];
+          if (item.contentnode_id === this.contentNode.id) {
+            downloaded = item;
+            break;
+          }
+        }
+        return this.downloadEnabled && Boolean(downloaded);
       },
       downloadableByLearner() {
         return (

From 7164551201379afe63e843a1cae5d13be36910c3 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Tue, 29 Aug 2023 09:50:55 -0400
Subject: [PATCH 03/26] Fixing prop warning topics page

---
 .../learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue    | 3 +++
 .../learn/assets/src/views/TopicsPage/TopicsPanelModal.vue    | 4 ++--
 kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue   | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue
index c97e1b89934..226f5dccb00 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue
@@ -60,6 +60,9 @@
     props: {
       topic: {
         type: Object,
+        default() {
+          return {};
+        },
         required: true,
       },
       topics: {
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsPanelModal.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsPanelModal.vue
index d14699e9175..f70e7e490d7 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsPanelModal.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsPanelModal.vue
@@ -64,8 +64,8 @@
     },
     props: {
       topicMore: {
-        type: Object,
-        default: null,
+        type: Boolean,
+        default: false,
       },
       topics: {
         type: Array,
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
index f3d5c9a048b..23d33b13b98 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
@@ -38,7 +38,7 @@
         >
           <template #sticky-sidebar>
             <ToggleHeaderTabs
-              v-if="!!windowIsLarge"
+              v-if="!!windowIsLarge && topic"
               :topic="topic"
               :topics="topics"
               :width="sidePanelWidth"

From 145a142bdce68079b7c7c17b2096b0ffcacd6dd6 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Wed, 30 Aug 2023 16:03:19 -0400
Subject: [PATCH 04/26] conditionalize failure errors based on source device
 network availability

---
 .../views/DownloadsList/index.vue             | 19 +++++++++++----
 .../src/my_downloads/views/MyDownloads.vue    | 24 +++++++++++++++----
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index 2e607ee889c..6d075d54486 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -190,6 +190,13 @@
         type: Boolean,
         required: false,
       },
+      networkDevices: {
+        type: Array,
+        required: false,
+        default() {
+          return [];
+        },
+      },
     },
     data() {
       return {
@@ -302,6 +309,9 @@
       getIcon(activities) {
         return this.getLearningActivityIcon(activities);
       },
+      sourceDeviceIsAvailable(download) {
+        return this.networkDevices.filter(device => device.id == download.source_id).length > 0;
+      },
       downloadStatusIcon(download) {
         let icon;
         switch (download.status) {
@@ -333,10 +343,11 @@
             message = this.$formatRelative(download.requested_at, { now: this.now });
             break;
           case 'FAILED':
-            // if (check source id is on the network) {
-            message = this.coreString('downloadFailedWillRetry');
-            // }
-            message = this.coreString('downloadedFailedCanNotRetry');
+            if (this.sourceDeviceIsAvailable(download)) {
+              message = this.coreString('downloadFailedWillRetry');
+            } else {
+              message = this.coreString('downloadedFailedCanNotRetry');
+            }
             break;
           default:
             // If no valid sort option provided, return unsorted array
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
index 241598e5f8d..fa82675cc69 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
@@ -41,6 +41,7 @@
 
       <DownloadsList
         v-else
+        :networkDevices="networkDevices"
         :loading="false"
         @removeResources="removeResources"
       />
@@ -59,6 +60,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import useDownloadRequests from '../../composables/useDownloadRequests';
+  import useDevices from '../../composables/useDevices';
   import DownloadsList from './DownloadsList';
   import ActivityFilter from './Filters/ActivityFilter.vue';
   import SortFilter from './Filters/SortFilter.vue';
@@ -81,6 +83,7 @@
         availableSpace,
         removeDownloadRequest,
       } = useDownloadRequests();
+      const { fetchDevices } = useDevices();
 
       const store = getCurrentInstance().proxy.$store;
       const route = computed(() => store.state.route);
@@ -110,10 +113,16 @@
         availableSpace,
         totalPageNumber,
         fetchAvailableFreespace,
+        fetchDevices,
         sort,
         removeDownloadRequest,
       };
     },
+    data() {
+      return {
+        networkDevices: [],
+      };
+    },
     computed: {
       sizeOfMyDownloads() {
         return Object.values(this.downloadRequestMap).reduce(
@@ -148,7 +157,11 @@
       startPolling() {
         this.pollingInterval = setInterval(async () => {
           await this.fetchDownloads();
-          this.fetchDevices().then(devices => (this.networkDevices = devices));
+          this.fetchDevices().then(devices => {
+            for (const device of devices) {
+              this.networkDevices.push(Object.assign(device));
+            }
+          });
           this.calculatePollingInterval();
         }, 1000); // Initial interval of 1 second
       },
@@ -170,9 +183,12 @@
         if (pollingInterval !== this.pollingInterval) {
           clearInterval(this.pollingInterval);
           this.pollingInterval = setInterval(async () => {
-            this.fetchDownloads();
-            this.fetchDevices().then(devices => (this.networkDevices = devices));
-            console.log(this.networkDevices);
+            await this.fetchDownloads();
+            this.fetchDevices().then(devices => {
+              for (const device of devices) {
+                this.networkDevices.push(Object.assign(device));
+              }
+            });
             this.calculatePollingInterval();
           }, pollingInterval);
         }

From 817324b86e57465dc5ba6abccde288fe04569a5f Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Fri, 15 Sep 2023 14:16:28 -0400
Subject: [PATCH 05/26] PR feedback implementation

---
 .../src/composables/useDownloadRequests.js    | 45 ++++++++++++++++++-
 .../views/DownloadsList/index.vue             | 26 +++++++----
 2 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
index 03924ed5b93..402423bb0d0 100644
--- a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
+++ b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
@@ -2,7 +2,7 @@
  * A composable function containing logic related to download requests
  */
 
-import { getCurrentInstance, reactive, ref } from 'kolibri.lib.vueCompositionApi';
+import { computed, getCurrentInstance, reactive, ref } from 'kolibri.lib.vueCompositionApi';
 import { ContentRequestResource } from 'kolibri.resources';
 import { createTranslator } from 'kolibri.utils.i18n';
 import { get, set } from '@vueuse/core';
@@ -107,6 +107,45 @@ export default function useDownloadRequests(store) {
     return Promise.resolve();
   }
 
+  function sortedFilteredDownloads() {
+    const query = computed(() => get(route).query);
+    const route = computed(() => store.state.route);
+    const sort = computed(() => query.value.sort);
+    const activityType = computed(() => query.value.activity || 'all');
+    let downloadsToDisplay = [];
+    if (downloadRequestMap) {
+      for (const [, value] of Object.entries(downloadRequestMap)) {
+        downloadsToDisplay.push(value);
+      }
+      if (activityType) {
+        if (activityType.value !== 'all') {
+          downloadsToDisplay = downloadsToDisplay.filter(download =>
+            download.metadata.learning_activities.includes(activityType.value)
+          );
+        }
+      }
+      if (sort) {
+        switch (sort.value) {
+          case 'newest':
+            downloadsToDisplay.sort((a, b) => new Date(b.requested_at) - new Date(a.requested_at));
+            break;
+          case 'oldest':
+            downloadsToDisplay.sort((a, b) => new Date(a.requested_at) - new Date(b.requested_at));
+            break;
+          case 'smallest':
+            downloadsToDisplay.sort((a, b) => a.metadata.file_size - b.metadata.file_size);
+            break;
+          case 'largest':
+            downloadsToDisplay.sort((a, b) => b.metadata.file_size - a.metadata.file_size);
+            break;
+          default:
+            // If no valid sort option provided, return unsorted array
+            break;
+        }
+      }
+    }
+  }
+
   function isDownloadingByLearner(content) {
     if (!content || !content.id) {
       return false;
@@ -123,6 +162,8 @@ export default function useDownloadRequests(store) {
     return Boolean(downloadRequest && downloadRequest.status === 'COMPLETED');
   }
 
+  const downloads = computed(() => this.sortedFilteredDownloads());
+
   return {
     fetchUserDownloadRequests,
     fetchAvailableFreespace,
@@ -130,6 +171,8 @@ export default function useDownloadRequests(store) {
     downloadRequestMap,
     addDownloadRequest,
     loading,
+    downloads,
+    sortedFilteredDownloads,
     removeDownloadRequest,
     downloadRequestsTranslator,
     isDownloadingByLearner,
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index 6d075d54486..d8b4637e2dc 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -3,10 +3,11 @@
   <form>
 
     <PaginatedListContainerWithBackend
+      v-if="downloadRequestMap"
       v-model="currentPage"
       :itemsPerPage="itemsPerPage"
       :totalPageNumber="totalPageNumber"
-      :numFilteredItems="downloads.length"
+      :numFilteredItems="Object.keys(downloadRequestMap).length"
     >
       <CoreTable>
         <template #headers>
@@ -145,7 +146,7 @@
           }
           if (activityType) {
             if (activityType.value !== 'all') {
-              downloadsToDisplay = this.downloadsToDisplay.filter(download =>
+              downloadsToDisplay = downloadsToDisplay.filter(download =>
                 download.metadata.learning_activities.includes(activityType.value)
               );
             }
@@ -174,12 +175,15 @@
             }
           }
         }
+        return downloadsToDisplay;
       };
       sortedFilteredDownloads();
+      const downloads = computed(() => sortedFilteredDownloads());
       return {
         downloadRequestMap,
         pageSizeNumber,
         getLearningActivityIcon,
+        downloads,
         sortedFilteredDownloads,
         availableSpace,
         genExternalContentURLBackLinkCurrentPage,
@@ -245,17 +249,21 @@
           return [];
         }
       },
-      downloads() {
-        return this.sortedFilteredDownloads;
-      },
       totalPageNumber() {
-        if (this.downloadsToDisplay && this.downloadsToDisplay.length) {
+        if (
+          this.downloadsToDisplay &&
+          this.downloadsToDisplay.length &&
+          this.pageSizeNumber.value
+        ) {
           return Math.ceil(this.downloadsToDisplay.length / this.pageSizeNumber.value);
         }
         return 1;
       },
       areAllSelected() {
-        return Object.keys(this.downloads).every(id => this.selectedDownloads.includes(id));
+        return (
+          this.downloads &&
+          this.downloads.filter(id => this.selectedDownloads.includes(id)).length > 0
+        );
       },
       areAnyAvailable() {
         return this.downloads && this.downloads.length > 0;
@@ -310,7 +318,9 @@
         return this.getLearningActivityIcon(activities);
       },
       sourceDeviceIsAvailable(download) {
-        return this.networkDevices.filter(device => device.id == download.source_id).length > 0;
+        return (
+          this.networkDevices.filter(device => device.instance_id == download.source_id).length > 0
+        );
       },
       downloadStatusIcon(download) {
         let icon;

From 42470696c517a1e266398615a8e9605afec5b2fb Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Fri, 15 Sep 2023 15:26:36 -0400
Subject: [PATCH 06/26] Update useDevices composable to contain a
 networkDevices object which polls for the currently available devices and can
 be shared across components and files

---
 .../assets/src/composables/useDevices.js      | 20 +++++++-
 .../views/DownloadsList/index.vue             |  7 ---
 .../src/my_downloads/views/MyDownloads.vue    | 20 +-------
 .../src/views/ExploreLibrariesPage/index.vue  | 47 +++++++++----------
 4 files changed, 41 insertions(+), 53 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/useDevices.js b/kolibri/plugins/learn/assets/src/composables/useDevices.js
index 39d15747b73..17a1793e558 100644
--- a/kolibri/plugins/learn/assets/src/composables/useDevices.js
+++ b/kolibri/plugins/learn/assets/src/composables/useDevices.js
@@ -2,9 +2,9 @@
  * A composable function containing logic related to channels
  */
 
-import { computed, getCurrentInstance, ref } from 'kolibri.lib.vueCompositionApi';
+import { computed, getCurrentInstance, ref, onBeforeUnmount } from 'kolibri.lib.vueCompositionApi';
 import { NetworkLocationResource, RemoteChannelResource } from 'kolibri.resources';
-import { get, set } from '@vueuse/core';
+import { get, set, useTimeoutPoll } from '@vueuse/core';
 import useMinimumKolibriVersion from 'kolibri.coreVue.composables.useMinimumKolibriVersion';
 import useUser from 'kolibri.coreVue.composables.useUser';
 import plugin_data from 'plugin_data';
@@ -16,6 +16,7 @@ import { learnStrings } from '../views/commonLearnStrings';
  * @type {Ref<NetworkLocation|null>}
  */
 const currentDevice = ref(null);
+const networkDevices = ref({});
 
 const KolibriStudioDeviceData = {
   ...plugin_data.studioDevice,
@@ -51,10 +52,24 @@ function fetchDevices() {
         ];
       }
     }
+
+    // Update networkDevices with the new data
+    devices.forEach(obj => {
+      networkDevices.value[obj.instance_id] = obj;
+    });
+
     return devices;
   });
 }
 
+// Start polling
+const fetch = useTimeoutPoll(fetchDevices, 5000, { immediate: true });
+
+// Stop polling
+onBeforeUnmount(() => {
+  fetch.pause();
+});
+
 export const StudioNotAllowedError = 'Cannot access Kolibri Studio';
 
 export function setCurrentDevice(id) {
@@ -104,5 +119,6 @@ export default function useDevices(store) {
     instanceId,
     baseurl,
     deviceName,
+    networkDevices,
   };
 }
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index d8b4637e2dc..478fa611d3d 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -194,13 +194,6 @@
         type: Boolean,
         required: false,
       },
-      networkDevices: {
-        type: Array,
-        required: false,
-        default() {
-          return [];
-        },
-      },
     },
     data() {
       return {
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
index fa82675cc69..096bec4c66f 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
@@ -41,7 +41,6 @@
 
       <DownloadsList
         v-else
-        :networkDevices="networkDevices"
         :loading="false"
         @removeResources="removeResources"
       />
@@ -56,7 +55,7 @@
   import { get } from '@vueuse/core';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
-  import { computed, getCurrentInstance, watch, ref } from 'kolibri.lib.vueCompositionApi';
+  import { computed, getCurrentInstance, watch } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import useDownloadRequests from '../../composables/useDownloadRequests';
@@ -93,7 +92,6 @@
       const pageSizeNumber = computed(() => Number(query.value.page_size || 25));
       const activityType = computed(() => query.value.activity || 'all');
       const sort = computed(() => query.value.sort);
-      const totalPageNumber = ref(0);
 
       const fetchDownloads = () => {
         fetchUserDownloadRequests({
@@ -111,18 +109,12 @@
         loading,
         fetchDownloads,
         availableSpace,
-        totalPageNumber,
         fetchAvailableFreespace,
         fetchDevices,
         sort,
         removeDownloadRequest,
       };
     },
-    data() {
-      return {
-        networkDevices: [],
-      };
-    },
     computed: {
       sizeOfMyDownloads() {
         return Object.values(this.downloadRequestMap).reduce(
@@ -157,11 +149,6 @@
       startPolling() {
         this.pollingInterval = setInterval(async () => {
           await this.fetchDownloads();
-          this.fetchDevices().then(devices => {
-            for (const device of devices) {
-              this.networkDevices.push(Object.assign(device));
-            }
-          });
           this.calculatePollingInterval();
         }, 1000); // Initial interval of 1 second
       },
@@ -184,11 +171,6 @@
           clearInterval(this.pollingInterval);
           this.pollingInterval = setInterval(async () => {
             await this.fetchDownloads();
-            this.fetchDevices().then(devices => {
-              for (const device of devices) {
-                this.networkDevices.push(Object.assign(device));
-              }
-            });
             this.calculatePollingInterval();
           }, pollingInterval);
         }
diff --git a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
index a1370db1ae7..17ee011cd4f 100644
--- a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
@@ -94,7 +94,7 @@
     setup() {
       const { fetchChannels } = useChannels();
       const { back } = useContentLink();
-      const { fetchDevices } = useDevices();
+      const { networkDevices } = useDevices();
       const { createPinForUser, deletePinForUser, fetchPinsForUser } = usePinnedDevices();
 
       return {
@@ -102,14 +102,13 @@
         createPinForUser,
         fetchPinsForUser,
         fetchChannels,
-        fetchDevices,
+        networkDevices,
         back,
       };
     },
     data() {
       return {
         loading: false,
-        networkDevices: {},
         moreDevices: 0,
         usersPins: [],
       };
@@ -125,6 +124,7 @@
         return this.moreDevices < this.unpinnedDevices?.length;
       },
       networkDevicesWithChannels() {
+        console.log('network devices', Object.values(this.networkDevices));
         return Object.values(this.networkDevices)
           .filter(device => device.channels?.length > 0)
           .sort((a, b) => {
@@ -195,20 +195,19 @@
         }
       });
 
-      this.fetchDevices().then(devices => {
+      let currentDevice;
+      Object.keys(this.networkDevices).forEach(key => {
         const promises = [];
-        for (const device of devices) {
-          const baseurl = device.base_url;
-          const promise = this.fetchChannels({ baseurl })
-            .then(channels => {
-              this.addNetworkDevice(device, channels);
-              // Set loading to false once we have successfully fetched channels
-              // for any device.
-              this.loading = false;
-            })
-            .catch(() => {
-              this.addNetworkDevice(device, []);
-            });
+        currentDevice = this.networkDevices[key];
+        // does the device id already have channel data associated with it?
+        if (!currentDevice.channels) {
+          const baseurl = currentDevice.base_url;
+          const promise = this.fetchChannels({ baseurl }).then(channels => {
+            this.updateDeviceChannels(currentDevice, channels);
+            // Set loading to false once we have successfully fetched channels
+            // for any device.
+            this.loading = false;
+          });
           promises.push(promise);
         }
         Promise.all(promises).then(() => {
@@ -219,15 +218,13 @@
       });
     },
     methods: {
-      addNetworkDevice(device, channels) {
-        this.$set(
-          this.networkDevices,
-          device.instance_id,
-          Object.assign(device, {
-            channels: channels.slice(0, 4),
-            total_count: channels.length,
-          })
-        );
+      updateDeviceChannels(device, channels) {
+        const updatedDevice = {
+          ...device,
+          channels: channels.slice(0, 4),
+          total_count: channels.length,
+        };
+        this.$set(this.networkDevices, device.instance_id, updatedDevice);
       },
       createPin(instance_id) {
         return this.createPinForUser(instance_id).then(response => {

From a92e54e3a9f117c7f820663b454e0973e47975f6 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Fri, 15 Sep 2023 15:38:53 -0400
Subject: [PATCH 07/26] Misc. cleanup of downloads related files

---
 .../learn/assets/src/composables/useDownloadRequests.js       | 4 ++--
 kolibri/plugins/learn/assets/test/views/topic-content.spec.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
index 402423bb0d0..3860fe5a24d 100644
--- a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
+++ b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
@@ -150,7 +150,7 @@ export default function useDownloadRequests(store) {
     if (!content || !content.id) {
       return false;
     }
-    const downloadRequest = downloadRequestMap[this.content.id];
+    const downloadRequest = downloadRequestMap[content.id];
     return Boolean(downloadRequest && !downloadRequest.status === 'COMPLETED');
   }
 
@@ -158,7 +158,7 @@ export default function useDownloadRequests(store) {
     if (!content || !content.id) {
       return false;
     }
-    const downloadRequest = downloadRequestMap[this.content.id];
+    const downloadRequest = downloadRequestMap[content.id];
     return Boolean(downloadRequest && downloadRequest.status === 'COMPLETED');
   }
 
diff --git a/kolibri/plugins/learn/assets/test/views/topic-content.spec.js b/kolibri/plugins/learn/assets/test/views/topic-content.spec.js
index 141ccb20c4f..24d86780dd0 100644
--- a/kolibri/plugins/learn/assets/test/views/topic-content.spec.js
+++ b/kolibri/plugins/learn/assets/test/views/topic-content.spec.js
@@ -246,7 +246,7 @@ describe('TopicsContentPage', () => {
           const addDownloadRequest = jest.fn();
           useDownloadRequests.mockImplementation(() =>
             useDownloadRequestsMock({
-              downloadRequestMap: { downloads: {} },
+              downloadRequestMap: {},
               addDownloadRequest,
             })
           );

From 69d1c1004371d0a9705f4f868dc05da47cb4671a Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Tue, 19 Sep 2023 08:55:45 -0400
Subject: [PATCH 08/26] refactor fetchDevices polling and networkDevices ref
 per feedback, to reduce potential async conflicts, overwriting, and errors

---
 .../assets/src/composables/useDevices.js      | 33 ++++++++++---------
 .../src/views/ExploreLibrariesPage/index.vue  |  8 ++---
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/useDevices.js b/kolibri/plugins/learn/assets/src/composables/useDevices.js
index 17a1793e558..eade87a9846 100644
--- a/kolibri/plugins/learn/assets/src/composables/useDevices.js
+++ b/kolibri/plugins/learn/assets/src/composables/useDevices.js
@@ -16,7 +16,7 @@ import { learnStrings } from '../views/commonLearnStrings';
  * @type {Ref<NetworkLocation|null>}
  */
 const currentDevice = ref(null);
-const networkDevices = ref({});
+let networkDevices = ref({});
 
 const KolibriStudioDeviceData = {
   ...plugin_data.studioDevice,
@@ -52,24 +52,10 @@ function fetchDevices() {
         ];
       }
     }
-
-    // Update networkDevices with the new data
-    devices.forEach(obj => {
-      networkDevices.value[obj.instance_id] = obj;
-    });
-
     return devices;
   });
 }
 
-// Start polling
-const fetch = useTimeoutPoll(fetchDevices, 5000, { immediate: true });
-
-// Stop polling
-onBeforeUnmount(() => {
-  fetch.pause();
-});
-
 export const StudioNotAllowedError = 'Cannot access Kolibri Studio';
 
 export function setCurrentDevice(id) {
@@ -113,6 +99,23 @@ export default function useDevices(store) {
   const baseurl = computedDevice(routingDeviceId, device => device.base_url);
   const deviceName = computedDevice(routingDeviceId, device => device.device_name);
 
+  async function setNetworkDevices() {
+    const newNetworkDevices = {};
+    const devices = await fetchDevices();
+    for (const device of devices) {
+      newNetworkDevices[device.instance_id] = device;
+    }
+    networkDevices = newNetworkDevices;
+  }
+
+  // Start polling
+  const fetch = useTimeoutPoll(setNetworkDevices, 5000, { immediate: true });
+
+  // Stop polling
+  onBeforeUnmount(() => {
+    fetch.pause();
+  });
+
   return {
     fetchDevices,
     setCurrentDevice,
diff --git a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
index 17ee011cd4f..e73c600dbb0 100644
--- a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
@@ -110,6 +110,7 @@
       return {
         loading: false,
         moreDevices: 0,
+        deviceChannelsMap: {},
         usersPins: [],
       };
     },
@@ -124,8 +125,7 @@
         return this.moreDevices < this.unpinnedDevices?.length;
       },
       networkDevicesWithChannels() {
-        console.log('network devices', Object.values(this.networkDevices));
-        return Object.values(this.networkDevices)
+        return Object.values(this.deviceChannelsMap)
           .filter(device => device.channels?.length > 0)
           .sort((a, b) => {
             if (a.instance_id === this.studioId) {
@@ -200,7 +200,7 @@
         const promises = [];
         currentDevice = this.networkDevices[key];
         // does the device id already have channel data associated with it?
-        if (!currentDevice.channels) {
+        if (!this.deviceChannelsMap[currentDevice.instance_id]) {
           const baseurl = currentDevice.base_url;
           const promise = this.fetchChannels({ baseurl }).then(channels => {
             this.updateDeviceChannels(currentDevice, channels);
@@ -224,7 +224,7 @@
           channels: channels.slice(0, 4),
           total_count: channels.length,
         };
-        this.$set(this.networkDevices, device.instance_id, updatedDevice);
+        this.deviceChannelsMap[device.instance_id] = updatedDevice;
       },
       createPin(instance_id) {
         return this.createPinForUser(instance_id).then(response => {

From 52b18fb4d87d84e6c14b02a71617b0f2ab09f9f2 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Mon, 25 Sep 2023 16:26:48 -0400
Subject: [PATCH 09/26] Refactor useDevices, and update ExploreLIbrariesPage to
 use the new networkDevices ref from the useDevices composable

---
 .../assets/src/composables/useDevices.js      | 20 ++++-
 .../src/views/ExploreLibrariesPage/index.vue  | 85 +++++++++----------
 2 files changed, 55 insertions(+), 50 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/useDevices.js b/kolibri/plugins/learn/assets/src/composables/useDevices.js
index eade87a9846..68c450155f9 100644
--- a/kolibri/plugins/learn/assets/src/composables/useDevices.js
+++ b/kolibri/plugins/learn/assets/src/composables/useDevices.js
@@ -16,7 +16,6 @@ import { learnStrings } from '../views/commonLearnStrings';
  * @type {Ref<NetworkLocation|null>}
  */
 const currentDevice = ref(null);
-let networkDevices = ref({});
 
 const KolibriStudioDeviceData = {
   ...plugin_data.studioDevice,
@@ -87,7 +86,7 @@ function computedDevice(routingDeviceId, callback) {
   });
 }
 
-export default function useDevices(store) {
+export function currentDeviceData(store) {
   store = store || getCurrentInstance().proxy.$store;
   const route = computed(() => store && store.state.route);
   const routingDeviceId = computed(() => {
@@ -99,13 +98,27 @@ export default function useDevices(store) {
   const baseurl = computedDevice(routingDeviceId, device => device.base_url);
   const deviceName = computedDevice(routingDeviceId, device => device.device_name);
 
+  return {
+    instanceId,
+    baseurl,
+    deviceName,
+  };
+}
+
+export default function useDevices(store) {
+  const networkDevices = ref({});
+  const isLoading = ref(false);
+  const { instanceId, baseurl, deviceName } = currentDeviceData(store);
+
   async function setNetworkDevices() {
+    isLoading.value = true;
     const newNetworkDevices = {};
     const devices = await fetchDevices();
     for (const device of devices) {
       newNetworkDevices[device.instance_id] = device;
     }
-    networkDevices = newNetworkDevices;
+    networkDevices.value = newNetworkDevices;
+    isLoading.value = false;
   }
 
   // Start polling
@@ -118,6 +131,7 @@ export default function useDevices(store) {
 
   return {
     fetchDevices,
+    isLoading,
     setCurrentDevice,
     instanceId,
     baseurl,
diff --git a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
index e73c600dbb0..b619e686429 100644
--- a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
@@ -4,7 +4,7 @@
     :appBarTitle="learnString('exploreLibraries')"
     :route="back"
     :primary="false"
-    :loading="loading"
+    :loading="loading.value"
   >
     <div
       class="page-header"
@@ -74,6 +74,7 @@
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { crossComponentTranslator, localeCompare } from 'kolibri.utils.i18n';
+  import { ref, reactive, watch, set } from 'kolibri.lib.vueCompositionApi';
   import commonLearnStrings from '../commonLearnStrings';
   import useChannels from '../../composables/useChannels';
   import useContentLink from '../../composables/useContentLink';
@@ -92,15 +93,49 @@
     },
     mixins: [commonCoreStrings, commonLearnStrings],
     setup() {
-      const { fetchChannels } = useChannels();
-      const { back } = useContentLink();
       const { networkDevices } = useDevices();
+      const { fetchChannels } = useChannels();
       const { createPinForUser, deletePinForUser, fetchPinsForUser } = usePinnedDevices();
+      const { back } = useContentLink();
+      const deviceChannelsMap = reactive({});
+      const loading = ref(false);
+
+      function _updateDeviceChannels(device, channels) {
+        const updatedDevice = {
+          ...device,
+          channels: channels.slice(0, 4),
+          total_count: channels.length,
+        };
+        set(deviceChannelsMap, device.instance_id, updatedDevice);
+      }
+
+      function loadDeviceChannels() {
+        let currentDevice;
+        Object.keys(networkDevices.value).forEach(key => {
+          const promises = [];
+          currentDevice = networkDevices.value[key];
+          if (!deviceChannelsMap[currentDevice.instance_id]) {
+            const baseurl = currentDevice.base_url;
+            const promise = fetchChannels({ baseurl }).then(channels => {
+              _updateDeviceChannels(currentDevice, channels);
+              loading.value = false;
+            });
+            promises.push(promise);
+          }
+          Promise.all(promises).then(() => {
+            // In case we don't successfully fetch any channels, don't do a perpetual loading state.
+            loading.value = false;
+          });
+        });
+      }
+      loadDeviceChannels();
+      watch(networkDevices, loadDeviceChannels);
 
       return {
         deletePinForUser,
         createPinForUser,
         fetchPinsForUser,
+        deviceChannelsMap,
         fetchChannels,
         networkDevices,
         back,
@@ -110,7 +145,6 @@
       return {
         loading: false,
         moreDevices: 0,
-        deviceChannelsMap: {},
         usersPins: [],
       };
     },
@@ -182,50 +216,7 @@
         immediate: false,
       },
     },
-    created() {
-      this.loading = true;
-      // Fetch user's pins
-      this.fetchPinsForUser().then(resp => {
-        this.usersPins = resp.map(pin => {
-          const instance_id = pin.instance_id.replace(/-/g, '');
-          return { ...pin, instance_id };
-        });
-        if (this.usersPins.length === 0) {
-          this.loadMoreDevices();
-        }
-      });
-
-      let currentDevice;
-      Object.keys(this.networkDevices).forEach(key => {
-        const promises = [];
-        currentDevice = this.networkDevices[key];
-        // does the device id already have channel data associated with it?
-        if (!this.deviceChannelsMap[currentDevice.instance_id]) {
-          const baseurl = currentDevice.base_url;
-          const promise = this.fetchChannels({ baseurl }).then(channels => {
-            this.updateDeviceChannels(currentDevice, channels);
-            // Set loading to false once we have successfully fetched channels
-            // for any device.
-            this.loading = false;
-          });
-          promises.push(promise);
-        }
-        Promise.all(promises).then(() => {
-          // In case we don't successfully fetch any channels, don't do a perpetual loading
-          // state.
-          this.loading = false;
-        });
-      });
-    },
     methods: {
-      updateDeviceChannels(device, channels) {
-        const updatedDevice = {
-          ...device,
-          channels: channels.slice(0, 4),
-          total_count: channels.length,
-        };
-        this.deviceChannelsMap[device.instance_id] = updatedDevice;
-      },
       createPin(instance_id) {
         return this.createPinForUser(instance_id).then(response => {
           const id = response.id;

From ed7b7f038b9dc57441685fea7f35ee67bc329b19 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Mon, 25 Sep 2023 16:28:48 -0400
Subject: [PATCH 10/26] Update references to baseurl, instanceId, and
 deviceName based on changes to useDevices composable, so that they continue
 to be imported correctly

---
 .../learn/assets/src/composables/useDownloadRequests.js   | 4 ++--
 kolibri/plugins/learn/assets/src/composables/useSearch.js | 4 ++--
 .../learn/assets/src/views/CompletionModal/index.vue      | 4 ++--
 .../plugins/learn/assets/src/views/LibraryPage/index.vue  | 5 +++--
 .../plugins/learn/assets/src/views/TopicsContentPage.vue  | 8 ++++++--
 5 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
index 3860fe5a24d..f1e3b4db98c 100644
--- a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
+++ b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
@@ -10,7 +10,7 @@ import redirectBrowser from 'kolibri.utils.redirectBrowser';
 import urls from 'kolibri.urls';
 import client from 'kolibri.client';
 import Vue from 'kolibri.lib.vue';
-import useDevices from './useDevices';
+import { currentDeviceData } from '../composables/useDevices';
 
 const downloadRequestsTranslator = createTranslator('DownloadRequests', {
   downloadStartedLabel: {
@@ -35,7 +35,7 @@ const availableSpace = ref(0);
 export default function useDownloadRequests(store) {
   store = store || getCurrentInstance().proxy.$store;
 
-  const { instanceId } = useDevices(store);
+  const { instanceId } = currentDeviceData(store);
 
   function fetchUserDownloadRequests(params) {
     return ContentRequestResource.list(params)
diff --git a/kolibri/plugins/learn/assets/src/composables/useSearch.js b/kolibri/plugins/learn/assets/src/composables/useSearch.js
index 1453f4b8156..34d5b7443d2 100644
--- a/kolibri/plugins/learn/assets/src/composables/useSearch.js
+++ b/kolibri/plugins/learn/assets/src/composables/useSearch.js
@@ -21,8 +21,8 @@ import {
   ResourcesNeededTypes,
 } from 'kolibri.coreVue.vuex.constants';
 import { deduplicateResources } from '../utils/contentNode';
+import { currentDeviceData } from '../composables/useDevices';
 import useContentNodeProgress from './useContentNodeProgress';
-import useDevices from './useDevices';
 import { setLanguages } from './useLanguages';
 
 export const logging = logger.getLogger(__filename);
@@ -158,7 +158,7 @@ export default function useSearch(descendant, store, router) {
   const more = ref(null);
   const labels = ref(null);
 
-  const { baseurl } = useDevices(store);
+  const { baseurl } = currentDeviceData(store);
 
   const searchTerms = computed({
     get() {
diff --git a/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue b/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
index 086e8555683..8463e634caa 100644
--- a/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
@@ -151,7 +151,7 @@
   import PointsIcon from 'kolibri.coreVue.components.PointsIcon';
   import { ContentNodeResource } from 'kolibri.resources';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import useDevices from '../../composables/useDevices';
+  import { currentDeviceData } from '../../composables/useDevices';
   import useDeviceSettings from '../../composables/useDeviceSettings';
   import useLearnerResources from '../../composables/useLearnerResources';
   import useContentLink from '../../composables/useContentLink';
@@ -183,7 +183,7 @@
       const { canAccessUnassignedContent } = useDeviceSettings();
       const { fetchLesson } = useLearnerResources();
       const { genContentLinkKeepCurrentBackLink } = useContentLink();
-      const { baseurl } = useDevices();
+      const { baseurl } = currentDeviceData();
       return {
         baseurl,
         canAccessUnassignedContent,
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index 0b1ff594e7d..18509d9a09a 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -262,7 +262,8 @@
   import useCardViewStyle from '../../composables/useCardViewStyle';
   import useContentLink from '../../composables/useContentLink';
   import useCoreLearn from '../../composables/useCoreLearn';
-  import useDevices, {
+  import {
+    currentDeviceData,
     setCurrentDevice,
     StudioNotAllowedError,
   } from '../../composables/useDevices';
@@ -336,7 +337,7 @@
       const { canAddDownloads, canDownloadExternally } = useCoreLearn();
       const { currentCardViewStyle } = useCardViewStyle();
       const { back } = useContentLink();
-      const { baseurl, deviceName, fetchDevices } = useDevices();
+      const { baseurl, deviceName, fetchDevices } = currentDeviceData();
       const { fetchChannels } = useChannels();
       const { fetchPinsForUser } = usePinnedDevices();
 
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue b/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
index 46c7fcff04d..8626c856860 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
@@ -178,7 +178,11 @@
   import useContentLink from '../composables/useContentLink';
   import useCoreLearn from '../composables/useCoreLearn';
   import useContentNodeProgress from '../composables/useContentNodeProgress';
-  import useDevices, { setCurrentDevice, StudioNotAllowedError } from '../composables/useDevices';
+  import {
+    currentDeviceData,
+    setCurrentDevice,
+    StudioNotAllowedError,
+  } from '../composables/useDevices';
   import useLearnerResources from '../composables/useLearnerResources';
   import useDownloadRequests from '../composables/useDownloadRequests';
   import commonLearnStrings from './commonLearnStrings';
@@ -234,7 +238,7 @@
       const { channelsMap, fetchChannels } = useChannels();
       const { fetchLesson } = useLearnerResources();
       const { back, genExternalBackURL } = useContentLink();
-      const { baseurl, deviceName } = useDevices();
+      const { baseurl, deviceName } = currentDeviceData();
       const {
         addDownloadRequest,
         isDownloadedByLearner,

From 25cd51a90248668676f7d5e9d6fdd4d40ef66808 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Mon, 25 Sep 2023 16:31:16 -0400
Subject: [PATCH 11/26] Ensure networkDevices is correctly imported into
 DownloadsList, where it is used to conditionally set errors displayed to the
 user

---
 .../assets/src/my_downloads/views/DownloadsList/index.vue      | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index 478fa611d3d..58619a128d6 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -114,6 +114,7 @@
   import { computed, getCurrentInstance } from 'kolibri.lib.vueCompositionApi';
   import { get } from '@vueuse/core';
   import useContentLink from '../../../composables/useContentLink';
+  import useDevices from '../../../composables/useDevices';
   import useLearningActivities from '../../../composables/useLearningActivities';
   import useDownloadRequests from '../../../composables/useDownloadRequests';
   import SelectionBottomBar from './SelectionBottomBar.vue';
@@ -132,6 +133,7 @@
       const { genExternalContentURLBackLinkCurrentPage } = useContentLink();
       const { getLearningActivityIcon } = useLearningActivities();
       const { downloadRequestMap, availableSpace } = useDownloadRequests();
+      const { networkDevices } = useDevices();
       const store = getCurrentInstance().proxy.$store;
       const query = computed(() => get(route).query);
       const route = computed(() => store.state.route);
@@ -184,6 +186,7 @@
         pageSizeNumber,
         getLearningActivityIcon,
         downloads,
+        networkDevices,
         sortedFilteredDownloads,
         availableSpace,
         genExternalContentURLBackLinkCurrentPage,

From 3387d794751f388f9db855198c2ea2dc79158b0e Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Tue, 26 Sep 2023 14:28:20 -0400
Subject: [PATCH 12/26] Address review feedback

---
 .../learn/assets/src/composables/useSearch.js |  2 +-
 .../views/DownloadsList/index.vue             | 20 +++++++++----------
 .../src/views/ExploreLibrariesPage/index.vue  | 15 +++++---------
 .../HybridLearningFooter.vue                  | 10 +---------
 4 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/useSearch.js b/kolibri/plugins/learn/assets/src/composables/useSearch.js
index 34d5b7443d2..6e9f441b24a 100644
--- a/kolibri/plugins/learn/assets/src/composables/useSearch.js
+++ b/kolibri/plugins/learn/assets/src/composables/useSearch.js
@@ -21,7 +21,7 @@ import {
   ResourcesNeededTypes,
 } from 'kolibri.coreVue.vuex.constants';
 import { deduplicateResources } from '../utils/contentNode';
-import { currentDeviceData } from '../composables/useDevices';
+import { currentDeviceData } from './useDevices';
 import useContentNodeProgress from './useContentNodeProgress';
 import { setLanguages } from './useLanguages';
 
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index 58619a128d6..e5d68637e37 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -3,11 +3,11 @@
   <form>
 
     <PaginatedListContainerWithBackend
-      v-if="downloadRequestMap"
+      v-if="downloadItemsListLength > 0"
       v-model="currentPage"
       :itemsPerPage="itemsPerPage"
       :totalPageNumber="totalPageNumber"
-      :numFilteredItems="Object.keys(downloadRequestMap).length"
+      :numFilteredItems="downloadItemsListLength"
     >
       <CoreTable>
         <template #headers>
@@ -83,7 +83,7 @@
           </tbody>
         </template>
       </CoreTable>
-      <p v-if="!loading && (!downloadRequestMap || !Object.keys(downloadRequestMap).length)">
+      <p v-if="!loading && (!downloadRequestMap || !downloadItemsListLength)">
         {{ coreString('noResourcesDownloaded') }}
       </p>
     </PaginatedListContainerWithBackend>
@@ -140,7 +140,7 @@
       const sort = computed(() => query.value.sort);
       const pageSizeNumber = computed(() => Number(query.value.page_size || 25));
       const activityType = computed(() => query.value.activity || 'all');
-      const sortedFilteredDownloads = () => {
+      const downloads = computed(() => {
         let downloadsToDisplay = [];
         if (downloadRequestMap) {
           for (const [, value] of Object.entries(downloadRequestMap)) {
@@ -178,16 +178,13 @@
           }
         }
         return downloadsToDisplay;
-      };
-      sortedFilteredDownloads();
-      const downloads = computed(() => sortedFilteredDownloads());
+      });
       return {
         downloadRequestMap,
         pageSizeNumber,
         getLearningActivityIcon,
         downloads,
         networkDevices,
-        sortedFilteredDownloads,
         availableSpace,
         genExternalContentURLBackLinkCurrentPage,
       };
@@ -237,7 +234,7 @@
         },
       },
       paginatedDownloads() {
-        if (this.downloads && this.downloads.length > 0) {
+        if (this.downloads.length > 0) {
           const startIndex = (this.currentPage - 1) * this.itemsPerPage;
           const endIndex = startIndex + this.itemsPerPage;
           return this.downloads.slice(startIndex, endIndex);
@@ -245,6 +242,9 @@
           return [];
         }
       },
+      downloadItemsListLength() {
+        return Object.keys(this.downloadRequestMap).length;
+      },
       totalPageNumber() {
         if (
           this.downloadsToDisplay &&
@@ -303,12 +303,10 @@
       },
       removeResource(download) {
         this.$emit('removeResources', [download]);
-        this.sortedFilteredDownloads();
       },
       removeResources() {
         this.$emit('removeResources', this.resourcesToDelete);
         this.resourcesToDelete = [];
-        this.sortedFilteredDownloads();
       },
       getIcon(activities) {
         return this.getLearningActivityIcon(activities);
diff --git a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
index b619e686429..9ad14b070ce 100644
--- a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
@@ -4,7 +4,7 @@
     :appBarTitle="learnString('exploreLibraries')"
     :route="back"
     :primary="false"
-    :loading="loading.value"
+    :loading="loading"
   >
     <div
       class="page-header"
@@ -98,15 +98,10 @@
       const { createPinForUser, deletePinForUser, fetchPinsForUser } = usePinnedDevices();
       const { back } = useContentLink();
       const deviceChannelsMap = reactive({});
-      const loading = ref(false);
+      const loading = ref(true);
 
       function _updateDeviceChannels(device, channels) {
-        const updatedDevice = {
-          ...device,
-          channels: channels.slice(0, 4),
-          total_count: channels.length,
-        };
-        set(deviceChannelsMap, device.instance_id, updatedDevice);
+        set(deviceChannelsMap, device.instance_id, channels);
       }
 
       function loadDeviceChannels() {
@@ -159,8 +154,8 @@
         return this.moreDevices < this.unpinnedDevices?.length;
       },
       networkDevicesWithChannels() {
-        return Object.values(this.deviceChannelsMap)
-          .filter(device => device.channels?.length > 0)
+        return Object.values(this.networkDevices)
+          .filter(device => this.deviceChannelsMap[device.instance_id]?.length > 0)
           .sort((a, b) => {
             if (a.instance_id === this.studioId) {
               return 1;
diff --git a/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/HybridLearningFooter.vue b/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/HybridLearningFooter.vue
index d9a13fe0411..c27bb89db76 100644
--- a/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/HybridLearningFooter.vue
+++ b/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/HybridLearningFooter.vue
@@ -149,15 +149,7 @@
         return !this.isTopic && this.allowDownloads;
       },
       downloadedByLearner() {
-        let downloaded = null;
-        for (const key in this.downloadRequestMap) {
-          const item = this.downloadRequestMap[key];
-          if (item.contentnode_id === this.contentNode.id) {
-            downloaded = item;
-            break;
-          }
-        }
-        return this.downloadEnabled && Boolean(downloaded);
+        return this.downloadEnabled && Boolean(this.downloadRequestMap[this.contentNode.id]);
       },
       downloadableByLearner() {
         return (

From c348541472a9b066f1eb9a9c603a88ea7e1e50a1 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Wed, 27 Sep 2023 17:52:46 -0400
Subject: [PATCH 13/26] Address PR feedback, fix downloads page reactivity
 problems

---
 .../src/composables/useDownloadRequests.js    |  66 ++----------
 .../views/DownloadsList/index.vue             | 100 ++++++++----------
 .../src/views/ExploreLibrariesPage/index.vue  |   4 +-
 .../assets/src/views/LibraryPage/index.vue    |   5 +-
 4 files changed, 61 insertions(+), 114 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
index f1e3b4db98c..0b1571bb91d 100644
--- a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
+++ b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
@@ -2,7 +2,7 @@
  * A composable function containing logic related to download requests
  */
 
-import { computed, getCurrentInstance, reactive, ref } from 'kolibri.lib.vueCompositionApi';
+import { getCurrentInstance, reactive, ref } from 'kolibri.lib.vueCompositionApi';
 import { ContentRequestResource } from 'kolibri.resources';
 import { createTranslator } from 'kolibri.utils.i18n';
 import { get, set } from '@vueuse/core';
@@ -41,7 +41,7 @@ export default function useDownloadRequests(store) {
     return ContentRequestResource.list(params)
       .then(downloadRequests => {
         for (const obj of downloadRequests) {
-          set(downloadRequestMap, obj.id, obj);
+          set(downloadRequestMap, obj.contentnode_id, obj);
         }
         set(loading, false);
       })
@@ -67,14 +67,14 @@ export default function useDownloadRequests(store) {
     redirectBrowser(urls['kolibri:kolibri.plugins.learn:my_downloads']());
   }
 
-  function addDownloadRequest(content) {
+  function addDownloadRequest(contentNode) {
     const metadata = {
-      title: content.title,
-      file_size: content.files.reduce((size, f) => size + f.file_size, 0),
-      learning_activities: content.learning_activities,
+      title: contentNode.title,
+      file_size: contentNode.files.reduce((size, f) => size + f.file_size, 0),
+      learning_activities: contentNode.learning_activities,
     };
     const data = {
-      contentnode_id: content.id,
+      contentnode_id: contentNode.id,
       metadata,
       source_id: store.getters.currentUserId,
       source_instance_id: get(instanceId),
@@ -84,7 +84,7 @@ export default function useDownloadRequests(store) {
       date_added: new Date(),
     };
     ContentRequestResource.create(data).then(downloadRequest => {
-      set(downloadRequestMap, downloadRequest.node_id, downloadRequest);
+      set(downloadRequestMap, downloadRequest.contentnode_id, downloadRequest);
     });
 
     store.commit('CORE_CREATE_SNACKBAR', {
@@ -98,54 +98,14 @@ export default function useDownloadRequests(store) {
     return Promise.resolve();
   }
 
-  function removeDownloadRequest(content) {
+  function removeDownloadRequest(contentRequest) {
     ContentRequestResource.deleteModel({
-      id: content.id,
-      contentnode_id: content.contentnode_id,
+      id: contentRequest.id,
     });
-    Vue.delete(downloadRequestMap, content.id);
+    Vue.delete(downloadRequestMap, contentRequest.contentnode_id);
     return Promise.resolve();
   }
 
-  function sortedFilteredDownloads() {
-    const query = computed(() => get(route).query);
-    const route = computed(() => store.state.route);
-    const sort = computed(() => query.value.sort);
-    const activityType = computed(() => query.value.activity || 'all');
-    let downloadsToDisplay = [];
-    if (downloadRequestMap) {
-      for (const [, value] of Object.entries(downloadRequestMap)) {
-        downloadsToDisplay.push(value);
-      }
-      if (activityType) {
-        if (activityType.value !== 'all') {
-          downloadsToDisplay = downloadsToDisplay.filter(download =>
-            download.metadata.learning_activities.includes(activityType.value)
-          );
-        }
-      }
-      if (sort) {
-        switch (sort.value) {
-          case 'newest':
-            downloadsToDisplay.sort((a, b) => new Date(b.requested_at) - new Date(a.requested_at));
-            break;
-          case 'oldest':
-            downloadsToDisplay.sort((a, b) => new Date(a.requested_at) - new Date(b.requested_at));
-            break;
-          case 'smallest':
-            downloadsToDisplay.sort((a, b) => a.metadata.file_size - b.metadata.file_size);
-            break;
-          case 'largest':
-            downloadsToDisplay.sort((a, b) => b.metadata.file_size - a.metadata.file_size);
-            break;
-          default:
-            // If no valid sort option provided, return unsorted array
-            break;
-        }
-      }
-    }
-  }
-
   function isDownloadingByLearner(content) {
     if (!content || !content.id) {
       return false;
@@ -162,8 +122,6 @@ export default function useDownloadRequests(store) {
     return Boolean(downloadRequest && downloadRequest.status === 'COMPLETED');
   }
 
-  const downloads = computed(() => this.sortedFilteredDownloads());
-
   return {
     fetchUserDownloadRequests,
     fetchAvailableFreespace,
@@ -171,8 +129,6 @@ export default function useDownloadRequests(store) {
     downloadRequestMap,
     addDownloadRequest,
     loading,
-    downloads,
-    sortedFilteredDownloads,
     removeDownloadRequest,
     downloadRequestsTranslator,
     isDownloadingByLearner,
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index e5d68637e37..921847913ab 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -3,11 +3,10 @@
   <form>
 
     <PaginatedListContainerWithBackend
-      v-if="downloadItemsListLength > 0"
       v-model="currentPage"
       :itemsPerPage="itemsPerPage"
       :totalPageNumber="totalPageNumber"
-      :numFilteredItems="downloadItemsListLength"
+      :numFilteredItems="downloadItemListLength"
     >
       <CoreTable>
         <template #headers>
@@ -26,7 +25,7 @@
           <th> {{ coreString('dateAdded') }} </th>
         </template>
         <template #tbody>
-          <tbody v-if="!loading && downloadRequestMap">
+          <tbody v-if="!loading">
             <tr
               v-for="download in paginatedDownloads"
               :key="download.contentnode_id"
@@ -83,7 +82,7 @@
           </tbody>
         </template>
       </CoreTable>
-      <p v-if="!loading && (!downloadRequestMap || !downloadItemsListLength)">
+      <p v-if="!loading && !downloadItemListLength">
         {{ coreString('noResourcesDownloaded') }}
       </p>
     </PaginatedListContainerWithBackend>
@@ -137,53 +136,11 @@
       const store = getCurrentInstance().proxy.$store;
       const query = computed(() => get(route).query);
       const route = computed(() => store.state.route);
-      const sort = computed(() => query.value.sort);
       const pageSizeNumber = computed(() => Number(query.value.page_size || 25));
-      const activityType = computed(() => query.value.activity || 'all');
-      const downloads = computed(() => {
-        let downloadsToDisplay = [];
-        if (downloadRequestMap) {
-          for (const [, value] of Object.entries(downloadRequestMap)) {
-            downloadsToDisplay.push(value);
-          }
-          if (activityType) {
-            if (activityType.value !== 'all') {
-              downloadsToDisplay = downloadsToDisplay.filter(download =>
-                download.metadata.learning_activities.includes(activityType.value)
-              );
-            }
-          }
-          if (sort) {
-            switch (sort.value) {
-              case 'newest':
-                downloadsToDisplay.sort(
-                  (a, b) => new Date(b.requested_at) - new Date(a.requested_at)
-                );
-                break;
-              case 'oldest':
-                downloadsToDisplay.sort(
-                  (a, b) => new Date(a.requested_at) - new Date(b.requested_at)
-                );
-                break;
-              case 'smallest':
-                downloadsToDisplay.sort((a, b) => a.metadata.file_size - b.metadata.file_size);
-                break;
-              case 'largest':
-                downloadsToDisplay.sort((a, b) => b.metadata.file_size - a.metadata.file_size);
-                break;
-              default:
-                // If no valid sort option provided, return unsorted array
-                break;
-            }
-          }
-        }
-        return downloadsToDisplay;
-      });
       return {
         downloadRequestMap,
         pageSizeNumber,
         getLearningActivityIcon,
-        downloads,
         networkDevices,
         availableSpace,
         genExternalContentURLBackLinkCurrentPage,
@@ -233,8 +190,45 @@
           });
         },
       },
+      downloads() {
+        const sort = this.$route.query.sort;
+        const activityType = this.$route.query.activity;
+        console.log(Object.values(this.downloadRequestMap));
+        const downloadsToDisplay = Object.values(this.downloadRequestMap).filter(download => {
+          if (activityType && activityType !== 'all') {
+            return download.metadata.learning_activities.includes(activityType);
+          }
+          return true;
+        });
+
+        if (sort) {
+          switch (sort) {
+            case 'newest':
+              downloadsToDisplay.sort(
+                (a, b) => new Date(b.requested_at) - new Date(a.requested_at)
+              );
+              break;
+            case 'oldest':
+              downloadsToDisplay.sort(
+                (a, b) => new Date(a.requested_at) - new Date(b.requested_at)
+              );
+              break;
+            case 'smallest':
+              downloadsToDisplay.sort((a, b) => a.metadata.file_size - b.metadata.file_size);
+              break;
+            case 'largest':
+              downloadsToDisplay.sort((a, b) => b.metadata.file_size - a.metadata.file_size);
+              break;
+            default:
+              // If no valid sort option provided, return unsorted array
+              break;
+          }
+        }
+        return downloadsToDisplay;
+      },
       paginatedDownloads() {
-        if (this.downloads.length > 0) {
+        console.log([...this.downloads]);
+        if (this.downloads && this.downloads.length > 0) {
           const startIndex = (this.currentPage - 1) * this.itemsPerPage;
           const endIndex = startIndex + this.itemsPerPage;
           return this.downloads.slice(startIndex, endIndex);
@@ -242,16 +236,12 @@
           return [];
         }
       },
-      downloadItemsListLength() {
-        return Object.keys(this.downloadRequestMap).length;
+      downloadItemListLength() {
+        return this.downloads ? this.downloads.length : 0;
       },
       totalPageNumber() {
-        if (
-          this.downloadsToDisplay &&
-          this.downloadsToDisplay.length &&
-          this.pageSizeNumber.value
-        ) {
-          return Math.ceil(this.downloadsToDisplay.length / this.pageSizeNumber.value);
+        if (this.downloads && this.downloads.length && this.pageSizeNumber) {
+          return Math.ceil(this.downloads.length / this.pageSizeNumber);
         }
         return 1;
       },
diff --git a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
index 9ad14b070ce..631b3314e7c 100644
--- a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
@@ -24,7 +24,7 @@
       :deviceId="device['instance_id']"
       :deviceName="device['device_name']"
       :deviceIcon="getDeviceIcon(device)"
-      :channels="device.channels"
+      :channels="deviceChannelsMap[device['instance_id']]"
       :totalChannels="device['total_count']"
       :pinIcon="getPinIcon(true)"
       :showDescription="device['instance_id'] === studioId"
@@ -51,7 +51,7 @@
         :deviceId="device['instance_id']"
         :deviceName="device['device_name']"
         :deviceIcon="getDeviceIcon(device)"
-        :channels="device.channels"
+        :channels="deviceChannelsMap[device['instance_id']]"
         :totalChannels="device['total_count']"
         :pinIcon="getPinIcon(false)"
         @togglePin="handlePinToggle"
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index 18509d9a09a..2f34b93e548 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -262,7 +262,7 @@
   import useCardViewStyle from '../../composables/useCardViewStyle';
   import useContentLink from '../../composables/useContentLink';
   import useCoreLearn from '../../composables/useCoreLearn';
-  import {
+  import useDevices, {
     currentDeviceData,
     setCurrentDevice,
     StudioNotAllowedError,
@@ -337,7 +337,8 @@
       const { canAddDownloads, canDownloadExternally } = useCoreLearn();
       const { currentCardViewStyle } = useCardViewStyle();
       const { back } = useContentLink();
-      const { baseurl, deviceName, fetchDevices } = currentDeviceData();
+      const { baseurl, deviceName } = currentDeviceData();
+      const { fetchDevices } = useDevices();
       const { fetchChannels } = useChannels();
       const { fetchPinsForUser } = usePinnedDevices();
 

From 355bbe26f7c37c4d7bd78846ea72ce7b67b231c0 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 28 Sep 2023 16:02:41 -0400
Subject: [PATCH 14/26] Update useDevices mock in accordance with composable
 updates

---
 .../assets/src/composables/__mocks__/useDevices.js    | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/kolibri/plugins/learn/assets/src/composables/__mocks__/useDevices.js b/kolibri/plugins/learn/assets/src/composables/__mocks__/useDevices.js
index a8fdb132d50..aaadc15de4d 100644
--- a/kolibri/plugins/learn/assets/src/composables/__mocks__/useDevices.js
+++ b/kolibri/plugins/learn/assets/src/composables/__mocks__/useDevices.js
@@ -31,9 +31,12 @@
  * ```
  */
 
+import { ref } from 'kolibri.lib.vueCompositionApi';
+
 const MOCK_DEFAULTS = {
   fetchDevices: jest.fn(() => Promise.resolve([])),
   baseurl: null,
+  networkDevices: ref({}),
 };
 
 export function useDevicesMock(overrides = {}) {
@@ -43,6 +46,14 @@ export function useDevicesMock(overrides = {}) {
   };
 }
 
+const DEVICE_DATA_DEFAULTS = {
+  baseurl: 'http://test-device',
+  deviceName: 'test-device',
+  instanceId: '1234',
+};
+
+export const currentDeviceData = jest.fn(() => DEVICE_DATA_DEFAULTS);
+
 export default jest.fn(() => useDevicesMock());
 
 export const setCurrentDevice = jest.fn(id =>

From b6da8b3fd81582f852c7d6432a7e24088d67dc02 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 28 Sep 2023 18:24:42 -0400
Subject: [PATCH 15/26] Fix error with topicsMore by setting as Boolean()

---
 kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
index 23d33b13b98..ae6b7690e77 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
@@ -57,7 +57,7 @@
               ref="sidePanel"
               class="side-panel"
               :topics="topics"
-              :topicMore="topicMore"
+              :topicMore="Boolean(topicMore)"
               :topicsLoading="topicMoreLoading"
               :width="`${sidePanelWidth}px`"
               :style="sidePanelStyleOverrides"
@@ -187,7 +187,7 @@
             ref="embeddedPanel"
             class="full-screen-side-panel"
             :topics="topics"
-            :topicMore="topicMore"
+            :topicMore="Boolean(topicMore)"
             :topicsLoading="topicMoreLoading"
             :style="sidePanelStyleOverrides"
             @loadMoreTopics="handleLoadMoreInTopic"

From b8ba2aaee6af71e3b0198a666ab840b511c6a0e6 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 28 Sep 2023 18:26:13 -0400
Subject: [PATCH 16/26] Improve loading state on ExploreLibraries page by
 updating loading set in handler, and adding a circular loader for page data

---
 .../plugins/learn/assets/src/routes/index.js  |  2 +
 .../src/views/ExploreLibrariesPage/index.vue  | 79 ++++++++++---------
 2 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/routes/index.js b/kolibri/plugins/learn/assets/src/routes/index.js
index 58d8ea80d5e..7d469694791 100644
--- a/kolibri/plugins/learn/assets/src/routes/index.js
+++ b/kolibri/plugins/learn/assets/src/routes/index.js
@@ -165,6 +165,8 @@ export default [
       if (!unassignedContentGuard(next)) {
         return;
       }
+      store.commit('SET_PAGE_NAME', PageNames.EXPLORE_LIBRARIES);
+      store.commit('CORE_SET_PAGE_LOADING', false);
       if (!get(isUserLoggedIn)) {
         next({ name: PageNames.LIBRARY, replace: true });
         return;
diff --git a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
index 631b3314e7c..a8ba7480a87 100644
--- a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
@@ -18,51 +18,56 @@
         {{ $tr('showingLibraries') }}
       </p>
     </div>
-    <LibraryItem
-      v-for="device in pinnedDevices"
-      :key="device['instance_id']"
-      :deviceId="device['instance_id']"
-      :deviceName="device['device_name']"
-      :deviceIcon="getDeviceIcon(device)"
-      :channels="deviceChannelsMap[device['instance_id']]"
-      :totalChannels="device['total_count']"
-      :pinIcon="getPinIcon(true)"
-      :showDescription="device['instance_id'] === studioId"
-      :disablePinDevice="device['instance_id'] === studioId"
-      @togglePin="handlePinToggle"
-    />
-    <div v-if="areMoreDevicesAvailable">
-      <div
-        v-if="pinnedDevicesExist"
-        data-test="more-libraries"
-      >
-        <h2>{{ learnString('moreLibraries') }}</h2>
-        <KButton
-          v-if="displayShowButton"
-          data-test="show-button"
-          :text="coreString('showAction')"
-          :primary="false"
-          @click="loadMoreDevices"
-        />
-      </div>
+    <div v-if="loading">
+      <KCircularLoader />
+    </div>
+    <div v-else>
       <LibraryItem
-        v-for="(device, index) in unpinnedDevices.slice(0, moreDevices)"
-        :key="index"
+        v-for="device in pinnedDevices"
+        :key="device['instance_id']"
         :deviceId="device['instance_id']"
         :deviceName="device['device_name']"
         :deviceIcon="getDeviceIcon(device)"
         :channels="deviceChannelsMap[device['instance_id']]"
         :totalChannels="device['total_count']"
-        :pinIcon="getPinIcon(false)"
+        :pinIcon="getPinIcon(true)"
+        :showDescription="device['instance_id'] === studioId"
+        :disablePinDevice="device['instance_id'] === studioId"
         @togglePin="handlePinToggle"
       />
-      <KButton
-        v-if="displayShowMoreButton"
-        data-test="show-more-button"
-        :text="coreString('showMoreAction')"
-        :primary="false"
-        @click="loadMoreDevices"
-      />
+      <div v-if="areMoreDevicesAvailable">
+        <div
+          v-if="pinnedDevicesExist"
+          data-test="more-libraries"
+        >
+          <h2>{{ learnString('moreLibraries') }}</h2>
+          <KButton
+            v-if="displayShowButton"
+            data-test="show-button"
+            :text="coreString('showAction')"
+            :primary="false"
+            @click="loadMoreDevices"
+          />
+        </div>
+        <LibraryItem
+          v-for="(device, index) in unpinnedDevices.slice(0, moreDevices)"
+          :key="index"
+          :deviceId="device['instance_id']"
+          :deviceName="device['device_name']"
+          :deviceIcon="getDeviceIcon(device)"
+          :channels="deviceChannelsMap[device['instance_id']]"
+          :totalChannels="device['total_count']"
+          :pinIcon="getPinIcon(false)"
+          @togglePin="handlePinToggle"
+        />
+        <KButton
+          v-if="displayShowMoreButton"
+          data-test="show-more-button"
+          :text="coreString('showMoreAction')"
+          :primary="false"
+          @click="loadMoreDevices"
+        />
+      </div>
     </div>
   </ImmersivePage>
 

From 781a58ca5320d275b346d810d2c5c77c3b4be94e Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 28 Sep 2023 18:30:09 -0400
Subject: [PATCH 17/26] Update MyDownloads page to fetch before waiting for
 polling, and add status column that displays On your device for successfully
 downloaded items

---
 .../views/DownloadsList/index.vue             | 24 ++++++++++++++-----
 .../src/my_downloads/views/MyDownloads.vue    |  2 +-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index 921847913ab..0d048898e9d 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -23,6 +23,7 @@
           </th>
           <th> {{ coreString('fileSize') }} </th>
           <th> {{ coreString('dateAdded') }} </th>
+          <th> {{ coreString('statusLabel') }} </th>
         </template>
         <template #tbody>
           <tbody v-if="!loading">
@@ -48,6 +49,9 @@
               <td>
                 {{ formattedResourceSize(download) }}
               </td>
+              <td>
+                {{ formatDownloadRequestedDate(download) }}
+              </td>
               <td>
                 <KIcon
                   v-if="downloadStatusIcon(download)"
@@ -112,6 +116,7 @@
   import PaginatedListContainerWithBackend from 'kolibri-common/components/PaginatedListContainerWithBackend';
   import { computed, getCurrentInstance } from 'kolibri.lib.vueCompositionApi';
   import { get } from '@vueuse/core';
+  import { createTranslator } from 'kolibri.utils.i18n';
   import useContentLink from '../../../composables/useContentLink';
   import useDevices from '../../../composables/useDevices';
   import useLearningActivities from '../../../composables/useLearningActivities';
@@ -119,6 +124,13 @@
   import SelectionBottomBar from './SelectionBottomBar.vue';
   import ConfirmationDeleteModal from './ConfirmationDeleteModal.vue';
 
+  const ChannelContentsSummaryStrings = createTranslator('ChannelContentsSummary', {
+    onDeviceRow: {
+      message: 'On your device',
+      context: "Indicates resources that are on the user's device.",
+    },
+  });
+
   export default {
     name: 'DownloadsList',
     components: {
@@ -193,7 +205,6 @@
       downloads() {
         const sort = this.$route.query.sort;
         const activityType = this.$route.query.activity;
-        console.log(Object.values(this.downloadRequestMap));
         const downloadsToDisplay = Object.values(this.downloadRequestMap).filter(download => {
           if (activityType && activityType !== 'all') {
             return download.metadata.learning_activities.includes(activityType);
@@ -227,7 +238,6 @@
         return downloadsToDisplay;
       },
       paginatedDownloads() {
-        console.log([...this.downloads]);
         if (this.downloads && this.downloads.length > 0) {
           const startIndex = (this.currentPage - 1) * this.itemsPerPage;
           const endIndex = startIndex + this.itemsPerPage;
@@ -321,6 +331,9 @@
         }
         return icon;
       },
+      formatDownloadRequestedDate(download) {
+        return this.$formatRelative(download.requested_at, { now: this.now });
+      },
       formattedDownloadStatus(download) {
         let message = '';
         switch (download.status) {
@@ -330,11 +343,10 @@
           case 'IN_PROGRESS':
             message = this.coreString('inProgressLabel');
             break;
-          case 'COMPLETED' && this.now - download.requested_at < 10000:
-            message = this.coreString('justNow');
-            break;
           case 'COMPLETED':
-            message = this.$formatRelative(download.requested_at, { now: this.now });
+            /* eslint-disable kolibri/vue-no-undefined-string-uses */
+            message = ChannelContentsSummaryStrings.$tr('onDeviceRow');
+            /* eslint-enable */
             break;
           case 'FAILED':
             if (this.sourceDeviceIsAvailable(download)) {
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
index 096bec4c66f..bc9eebffca9 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
@@ -124,7 +124,7 @@
       },
     },
     created() {
-      this.startPolling();
+      this.fetchDownloads().then(this.startPolling);
     },
     beforeDestroy() {
       clearInterval(this.pollingInterval);

From 234e6cd717a5c6a704e4b56497bc452bb38f559b Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 28 Sep 2023 19:22:00 -0400
Subject: [PATCH 18/26] add icon for on device

---
 .../src/my_downloads/views/DownloadsList/index.vue     | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index 0d048898e9d..7cec521fc34 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -54,7 +54,6 @@
               </td>
               <td>
                 <KIcon
-                  v-if="downloadStatusIcon(download)"
                   :icon="downloadStatusIcon(download)"
                   :color="download.status === 'PENDING' ? $themeTokens.annotation : null"
                   class="icon"
@@ -319,6 +318,9 @@
       downloadStatusIcon(download) {
         let icon;
         switch (download.status) {
+          case 'COMPLETED':
+            icon = 'correct';
+            break;
           case 'PENDING':
             icon = 'timer';
             break;
@@ -398,14 +400,8 @@
     text-align: right;
   }
 
-  .icon {
-    width: 24px !important;
-    height: 24px !important;
-  }
-
   .status-text {
     position: relative;
-    top: -4px;
     padding: 8px;
   }
 

From c1686c10dca576967af2e00a4942bd958c8394d5 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Fri, 29 Sep 2023 09:04:37 -0400
Subject: [PATCH 19/26] Move setting page name and loading to after the logged
 in guard

---
 kolibri/plugins/learn/assets/src/routes/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/routes/index.js b/kolibri/plugins/learn/assets/src/routes/index.js
index 7d469694791..77bb75c1acb 100644
--- a/kolibri/plugins/learn/assets/src/routes/index.js
+++ b/kolibri/plugins/learn/assets/src/routes/index.js
@@ -165,9 +165,9 @@ export default [
       if (!unassignedContentGuard(next)) {
         return;
       }
-      store.commit('SET_PAGE_NAME', PageNames.EXPLORE_LIBRARIES);
-      store.commit('CORE_SET_PAGE_LOADING', false);
       if (!get(isUserLoggedIn)) {
+        store.commit('SET_PAGE_NAME', PageNames.EXPLORE_LIBRARIES);
+        store.commit('CORE_SET_PAGE_LOADING', false);
         next({ name: PageNames.LIBRARY, replace: true });
         return;
       }

From 8f45a20a7ff28b5a222b0c443abbd8c245a146e3 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 5 Oct 2023 12:24:19 -0400
Subject: [PATCH 20/26] Update Library page (which was not updated with new
 composable changes in useDevices; PR feedback and fixes

---
 .../views/DownloadsList/index.vue             | 102 ++++++++++++++++-
 .../src/my_downloads/views/MyDownloads.vue    |   7 +-
 .../assets/src/views/LibraryPage/index.vue    | 103 +++++++++++-------
 3 files changed, 164 insertions(+), 48 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index 7cec521fc34..55fa0661295 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -8,7 +8,7 @@
       :totalPageNumber="totalPageNumber"
       :numFilteredItems="downloadItemListLength"
     >
-      <CoreTable>
+      <CoreTable v-if="windowIsLarge">
         <template #headers>
           <th>
             <KCheckbox
@@ -54,10 +54,15 @@
               </td>
               <td>
                 <KIcon
+                  v-if="download.status !== 'IN_PROGRESS'"
                   :icon="downloadStatusIcon(download)"
                   :color="download.status === 'PENDING' ? $themeTokens.annotation : null"
                   class="icon"
                 />
+                <KCircularLoader
+                  v-if="download.status === 'IN_PROGRESS'"
+                  class="icon"
+                />
                 <span class="status-text">{{ formattedDownloadStatus(download) }} </span>
               </td>
               <td class="resource-action">
@@ -85,6 +90,83 @@
           </tbody>
         </template>
       </CoreTable>
+      <!-- for small and medium screens, reorganize the table -->
+      <CoreTable v-else>
+        <template #headers>
+          <th>
+            <KCheckbox
+              showLabel
+              class="select-all"
+              :label="coreString('nameLabel')"
+              :checked="areAllSelected"
+              :disabled="!areAnyAvailable"
+              :style="{ color: $themeTokens.annotation }"
+              @change="selectAll($event)"
+            />
+          </th>
+        </template>
+        <template #tbody>
+          <tbody v-if="!loading">
+            <tr
+              v-for="download in paginatedDownloads"
+              :key="download.contentnode_id"
+              :style="download.status !== 'COMPLETED' ? { color: $themeTokens.annotation } : {}"
+            >
+              <td class="small-resource-details">
+                <KCheckbox
+                  :checked="resourceIsSelected(download)"
+                  class="download-checkbox"
+                  @change="handleCheckResource(download, $event)"
+                >
+                  <KLabeledIcon
+                    v-if="download.metadata"
+                    :icon="getIcon(download.metadata.learning_activities)"
+                    :label="download.metadata.title"
+                    :style="nonCompleteStatus(download) ? { color: $themeTokens.annotation } : {}"
+                  />
+                </KCheckbox>
+                <div class="small-screen-status">
+                  <p>
+                    {{ formattedResourceSize(download) }} |
+                    {{ formatDownloadRequestedDate(download) }}
+                  </p>
+                  <KIcon
+                    v-if="download.status !== 'IN_PROGRESS'"
+                    :icon="downloadStatusIcon(download)"
+                    :color="download.status === 'PENDING' ? $themeTokens.annotation : null"
+                    class="icon"
+                  />
+                  <KCircularLoader
+                    v-if="download.status === 'IN_PROGRESS'"
+                    class="icon"
+                  />
+                  <span class="status-text">{{ formattedDownloadStatus(download) }} </span>
+                </div>
+
+              </td>
+              <td class="resource-action">
+                <KButton
+                  v-if="nonCompleteStatus(download)"
+                  :text="coreString('viewAction')"
+                  appearance="flat-button"
+                  :disabled="true"
+                />
+                <KExternalLink
+                  v-else
+                  :text="coreString('viewAction')"
+                  appearance="flat-button"
+                  :href="genExternalContentURLBackLinkCurrentPage(download.contentnode_id)"
+                />
+                <KButton
+                  :text="coreString('removeAction')"
+                  appearance="flat-button"
+                  @click="removeResource(download)"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </template>
+      </CoreTable>
       <p v-if="!loading && !downloadItemListLength">
         {{ coreString('noResourcesDownloaded') }}
       </p>
@@ -116,6 +198,7 @@
   import { computed, getCurrentInstance } from 'kolibri.lib.vueCompositionApi';
   import { get } from '@vueuse/core';
   import { createTranslator } from 'kolibri.utils.i18n';
+  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
   import useContentLink from '../../../composables/useContentLink';
   import useDevices from '../../../composables/useDevices';
   import useLearningActivities from '../../../composables/useLearningActivities';
@@ -144,6 +227,7 @@
       const { getLearningActivityIcon } = useLearningActivities();
       const { downloadRequestMap, availableSpace } = useDownloadRequests();
       const { networkDevices } = useDevices();
+      const { windowIsLarge } = useKResponsiveWindow();
       const store = getCurrentInstance().proxy.$store;
       const query = computed(() => get(route).query);
       const route = computed(() => store.state.route);
@@ -154,6 +238,7 @@
         getLearningActivityIcon,
         networkDevices,
         availableSpace,
+        windowIsLarge,
         genExternalContentURLBackLinkCurrentPage,
       };
     },
@@ -230,9 +315,11 @@
               downloadsToDisplay.sort((a, b) => b.metadata.file_size - a.metadata.file_size);
               break;
             default:
-              // If no valid sort option provided, return unsorted array
               break;
           }
+        } else {
+          // if no sort value, default to newest downloads shown first in the UI
+          downloadsToDisplay.sort((a, b) => new Date(b.requested_at) - new Date(a.requested_at));
         }
         return downloadsToDisplay;
       },
@@ -301,7 +388,7 @@
         return this.selectedDownloads.indexOf(id) !== -1;
       },
       removeResource(download) {
-        this.$emit('removeResources', [download]);
+        this.resourcesToDelete.push(download);
       },
       removeResources() {
         this.$emit('removeResources', this.resourcesToDelete);
@@ -327,6 +414,9 @@
           case 'FAILED':
             icon = 'error';
             break;
+          case 'IN_PROGRESS':
+            icon = 'error';
+            break;
           default:
             // If no valid sort option provided, return unsorted array
             break;
@@ -396,7 +486,6 @@
   }
 
   .resource-action {
-    max-width: 70px !important;
     text-align: right;
   }
 
@@ -405,4 +494,9 @@
     padding: 8px;
   }
 
+  .small-screen-status {
+    margin: 0 48px;
+    font-size: 12px;
+  }
+
 </style>
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
index bc9eebffca9..4e147aa489e 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
@@ -123,8 +123,8 @@
         );
       },
     },
-    created() {
-      this.fetchDownloads().then(this.startPolling);
+    mounted() {
+      this.startPolling();
     },
     beforeDestroy() {
       clearInterval(this.pollingInterval);
@@ -142,11 +142,12 @@
           this.removeDownloadRequest(resources[0]);
         } else {
           resources.forEach(resource => {
-            this.removeDownloadRequest({ id: resource.id });
+            this.removeDownloadRequest(resource);
           });
         }
       },
       startPolling() {
+        this.fetchDownloads();
         this.pollingInterval = setInterval(async () => {
           await this.fetchDownloads();
           this.calculatePollingInterval();
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index 2f34b93e548..c4afbcba92c 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -247,13 +247,17 @@
 <script>
 
   import { get, set } from '@vueuse/core';
-  import cloneDeep from 'lodash/cloneDeep';
 
-  import { onMounted, getCurrentInstance, ref, watch } from 'kolibri.lib.vueCompositionApi';
+  import {
+    onMounted,
+    getCurrentInstance,
+    ref,
+    reactive,
+    watch,
+  } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
   import useUser from 'kolibri.coreVue.composables.useUser';
-  import { currentLanguage } from 'kolibri.utils.i18n';
   import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
   import { ContentNodeResource } from 'kolibri.resources';
   import SidePanelModal from '../SidePanelModal';
@@ -338,9 +342,10 @@
       const { currentCardViewStyle } = useCardViewStyle();
       const { back } = useContentLink();
       const { baseurl, deviceName } = currentDeviceData();
-      const { fetchDevices } = useDevices();
+      const { fetchDevices, networkDevices } = useDevices();
       const { fetchChannels } = useChannels();
       const { fetchPinsForUser } = usePinnedDevices();
+      const deviceChannelsMap = reactive({});
 
       onMounted(() => {
         const keywords = currentRoute().query.keywords;
@@ -446,6 +451,34 @@
         return _showLibrary();
       }
 
+      const loading = ref(true);
+
+      function _updateDeviceChannels(device, channels) {
+        set(deviceChannelsMap, device.instance_id, channels);
+      }
+
+      function loadDeviceChannels() {
+        let currentDevice;
+        Object.keys(networkDevices.value).forEach(key => {
+          const promises = [];
+          currentDevice = networkDevices.value[key];
+          if (!deviceChannelsMap[currentDevice.instance_id]) {
+            const baseurl = currentDevice.base_url;
+            const promise = fetchChannels({ baseurl }).then(channels => {
+              _updateDeviceChannels(currentDevice, channels);
+              loading.value = false;
+            });
+            promises.push(promise);
+          }
+          Promise.all(promises).then(() => {
+            // In case we don't successfully fetch any channels, don't do a perpetual loading state.
+            loading.value = false;
+          });
+        });
+      }
+      loadDeviceChannels();
+      watch(networkDevices, loadDeviceChannels);
+
       watch(() => props.deviceId, showLibrary);
 
       showLibrary();
@@ -473,7 +506,9 @@
         windowIsSmall,
         currentCardViewStyle,
         baseurl,
+        networkDevices,
         fetchDevices,
+        deviceChannelsMap,
         deviceName,
         fetchChannels,
         fetchPinsForUser,
@@ -517,15 +552,15 @@
           return this.coreString('yourLibrary');
         }
       },
-      channelsToDisplay() {
-        return this.windowIsSmall ? 3 : 5;
-      },
       devicesWithChannels() {
-        //display Kolibri studio for superusers only
-        return cloneDeep(this.devices).filter(device => {
-          device['channels'] = device.channels?.slice(0, this.channelsToDisplay);
-          return device.channels?.length > 0;
-        });
+        const localDeviceChannels = Object.values(this.networkDevices).filter(
+          device => this.deviceChannelsMap[device.instance_id]?.length > 0
+        );
+        for (const idx in localDeviceChannels) {
+          const device = localDeviceChannels[idx];
+          device.total_count = this.deviceChannelsMap[device.id].length;
+        }
+        return localDeviceChannels;
       },
       devicesWithChannelsExist() {
         return this.devicesWithChannels.length > 0;
@@ -562,12 +597,15 @@
         return span;
       },
       pinnedDevices() {
-        return this.devicesWithChannels.filter(device => {
-          return (
-            this.usersPinsDeviceIds.includes(device.instance_id) ||
-            device.instance_id === this.studioId
-          );
-        });
+        if (Object.values(this.deviceChannelsMap).length > 0) {
+          return Object.values(this.deviceChannelsMap).filter(device => {
+            return (
+              this.usersPinsDeviceIds.includes(device.instance_id) ||
+              device.instance_id === this.studioId
+            );
+          });
+        }
+        return [];
       },
       pinnedDevicesExist() {
         return this.pinnedDevices.length > 0;
@@ -639,17 +677,6 @@
       }
     },
     methods: {
-      addDevice(device, channels) {
-        this.devices.push(
-          Object.assign(device, {
-            channels: channels.sort(this.currentLanguageChannelsFirst),
-            total_count: channels.length,
-          })
-        );
-      },
-      currentLanguageChannelsFirst(a, b) {
-        return b['lang_code'].indexOf(currentLanguage) - a['lang_code'].indexOf(currentLanguage);
-      },
       findFirstEl() {
         this.$refs.resourcePanel.focusFirstEl();
       },
@@ -663,19 +690,13 @@
           });
         });
 
-        this.fetchDevices().then(devices => {
+        if (Object.values(this.networkDevices).length > 0) {
           this.searching = false;
-          for (const device of devices) {
-            const baseurl = device.base_url;
-            this.fetchChannels({ baseurl })
-              .then(channels => {
-                this.addDevice(device, channels);
-              })
-              .catch(() => {
-                this.addDevice(device, []);
-              });
-          }
-        });
+          return Object.values(this.networkDevices).filter(
+            device => this.deviceChannelsMap[device.instance_id]?.length > 0
+          );
+        }
+        this.searching = false;
       },
       toggleSidePanelVisibility() {
         this.mobileSidePanelIsOpen = !this.mobileSidePanelIsOpen;

From c112a375a9b03d70a5809b3a82aabd495a7a9f3a Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 5 Oct 2023 15:42:30 -0400
Subject: [PATCH 21/26] rename functions for clarity about responsibilities and
 purposes

---
 .../src/my_downloads/views/DownloadsList/index.vue  | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index 55fa0661295..b655bf59cd2 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -83,7 +83,7 @@
                 <KButton
                   :text="coreString('removeAction')"
                   appearance="flat-button"
-                  @click="removeResource(download)"
+                  @click="markSingleResourceForRemoval(download)"
                 />
               </td>
             </tr>
@@ -160,7 +160,7 @@
                 <KButton
                   :text="coreString('removeAction')"
                   appearance="flat-button"
-                  @click="removeResource(download)"
+                  @click="markSingleResourceForRemoval(download)"
                 />
               </td>
             </tr>
@@ -180,7 +180,7 @@
       v-if="resourcesToDelete.length"
       :resourcesToDelete="resourcesToDelete"
       @cancel="resourcesToDelete = []"
-      @success="removeResources"
+      @success="emitCurrentlySelectedResourcesForRemoval"
     />
   </form>
 
@@ -387,12 +387,15 @@
       resourceIsSelected(id) {
         return this.selectedDownloads.indexOf(id) !== -1;
       },
-      removeResource(download) {
+      markSingleResourceForRemoval(download) {
         this.resourcesToDelete.push(download);
       },
-      removeResources() {
+      emitCurrentlySelectedResourcesForRemoval() {
         this.$emit('removeResources', this.resourcesToDelete);
         this.resourcesToDelete = [];
+        this.$nextTick.then(() => {
+          this.selectedDownloads = [];
+        });
       },
       getIcon(activities) {
         return this.getLearningActivityIcon(activities);

From de98a18e09f9b20e63671cdf69247fd48888995a Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Fri, 6 Oct 2023 12:45:01 -0400
Subject: [PATCH 22/26] fix nextTick error

---
 .../learn/assets/src/my_downloads/views/DownloadsList/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index b655bf59cd2..73820965680 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -393,7 +393,7 @@
       emitCurrentlySelectedResourcesForRemoval() {
         this.$emit('removeResources', this.resourcesToDelete);
         this.resourcesToDelete = [];
-        this.$nextTick.then(() => {
+        this.$nextTick(() => {
           this.selectedDownloads = [];
         });
       },

From d54cb3d8794acf2b50422242a9451a006b921564 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Fri, 6 Oct 2023 15:06:25 -0400
Subject: [PATCH 23/26] Fix download pagination with re-fetch, to appropriately
 reset the pagination state on resource removal

---
 .../learn/assets/src/my_downloads/views/MyDownloads.vue  | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
index 4e147aa489e..f4cc6e4054e 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
@@ -138,13 +138,10 @@
         }
       },
       removeResources(resources) {
-        if (resources.length === 1) {
-          this.removeDownloadRequest(resources[0]);
-        } else {
-          resources.forEach(resource => {
-            this.removeDownloadRequest(resource);
-          });
+        for (const resource of resources) {
+          this.removeDownloadRequest(resource);
         }
+        this.fetchDownloads();
       },
       startPolling() {
         this.fetchDownloads();

From 4f5c4889f8f8c57834c1edce88d6df4f9c327a69 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Fri, 6 Oct 2023 17:32:11 -0400
Subject: [PATCH 24/26] Fix pagination redirect when no items left in the page

---
 .../src/composables/useDownloadRequests.js      |  9 ++++++++-
 .../my_downloads/views/DownloadsList/index.vue  |  4 ++++
 .../src/my_downloads/views/MyDownloads.vue      | 17 ++---------------
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
index 0b1571bb91d..658aa27afff 100644
--- a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
+++ b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
@@ -40,12 +40,19 @@ export default function useDownloadRequests(store) {
   function fetchUserDownloadRequests(params) {
     return ContentRequestResource.list(params)
       .then(downloadRequests => {
+        if (downloadRequests.results) {
+          downloadRequests = downloadRequests.results;
+        }
         for (const obj of downloadRequests) {
           set(downloadRequestMap, obj.contentnode_id, obj);
         }
         set(loading, false);
+        return downloadRequests;
       })
-      .then(store.dispatch('notLoading'));
+      .then(downloadRequests => {
+        store.dispatch('notLoading');
+        return downloadRequests;
+      });
   }
 
   function fetchAvailableFreespace() {
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index 73820965680..2bc7968ea8f 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -395,6 +395,10 @@
         this.resourcesToDelete = [];
         this.$nextTick(() => {
           this.selectedDownloads = [];
+          if (this.paginatedDownloads.length == 0 && this.$route.query.page) {
+            const prevPage = this.currentPage - 1;
+            this.currentPage = prevPage;
+          }
         });
       },
       getIcon(activities) {
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
index f4cc6e4054e..08588542399 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
@@ -55,7 +55,7 @@
   import { get } from '@vueuse/core';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
-  import { computed, getCurrentInstance, watch } from 'kolibri.lib.vueCompositionApi';
+  import { computed, getCurrentInstance } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import useDownloadRequests from '../../composables/useDownloadRequests';
@@ -88,26 +88,14 @@
       const route = computed(() => store.state.route);
       const query = computed(() => get(route).query);
 
-      const pageNumber = computed(() => Number(query.value.page || 1));
-      const pageSizeNumber = computed(() => Number(query.value.page_size || 25));
-      const activityType = computed(() => query.value.activity || 'all');
       const sort = computed(() => query.value.sort);
 
-      const fetchDownloads = () => {
-        fetchUserDownloadRequests({
-          sort: sort.value,
-          page: pageNumber.value,
-          pageSize: pageSizeNumber.value,
-          activityType: activityType.value,
-        });
-      };
       fetchAvailableFreespace();
-      watch(route, fetchDownloads);
 
       return {
         downloadRequestMap,
         loading,
-        fetchDownloads,
+        fetchDownloads: fetchUserDownloadRequests,
         availableSpace,
         fetchAvailableFreespace,
         fetchDevices,
@@ -141,7 +129,6 @@
         for (const resource of resources) {
           this.removeDownloadRequest(resource);
         }
-        this.fetchDownloads();
       },
       startPolling() {
         this.fetchDownloads();

From 31a08cc5aacb5a87a709751a3f130b2aac089685 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Fri, 6 Oct 2023 17:33:12 -0400
Subject: [PATCH 25/26] Ensure learner cannot download resource from content
 page when downloading is disabled

---
 .../plugins/learn/assets/src/views/TopicsContentPage.vue  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue b/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
index 8626c856860..353cd221c3c 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
@@ -229,7 +229,7 @@
       const currentInstance = getCurrentInstance().proxy;
       const store = currentInstance.$store;
       const router = currentInstance.$router;
-      const { canDownloadExternally } = useCoreLearn();
+      const { canDownloadExternally, canAddDownloads } = useCoreLearn();
       const {
         fetchContentNodeProgress,
         fetchContentNodeTreeProgress,
@@ -322,6 +322,7 @@
         fetchContentNodeProgress,
         fetchContentNodeTreeProgress,
         fetchLesson,
+        canAddDownloads,
         back,
         genExternalBackURL,
         addDownloadRequest,
@@ -453,7 +454,10 @@
         return this.content.admin_imported || this.isDownloadedByLearner(this.content);
       },
       allowRemoteDownload() {
-        return this.isUserLoggedIn && this.isRemoteContent && !this.isDownloaded;
+        console.log(this.canAddDownloads);
+        return (
+          this.isUserLoggedIn && this.isRemoteContent && !this.isDownloaded && this.canAddDownloads
+        );
       },
       allowBookmark() {
         return this.isUserLoggedIn && (!this.isRemoteContent || this.isDownloaded);

From a2d6ab7c4f6da8495cb8e9e95c12aebbd20d1771 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Tue, 10 Oct 2023 17:25:25 -0400
Subject: [PATCH 26/26] Update tests for download button display conditions,
 which were updated to correctly reflect device settings

---
 .../plugins/learn/assets/src/views/TopicsContentPage.vue   | 1 -
 .../plugins/learn/assets/test/views/topic-content.spec.js  | 7 +++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue b/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
index 353cd221c3c..af983ae5e28 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
@@ -454,7 +454,6 @@
         return this.content.admin_imported || this.isDownloadedByLearner(this.content);
       },
       allowRemoteDownload() {
-        console.log(this.canAddDownloads);
         return (
           this.isUserLoggedIn && this.isRemoteContent && !this.isDownloaded && this.canAddDownloads
         );
diff --git a/kolibri/plugins/learn/assets/test/views/topic-content.spec.js b/kolibri/plugins/learn/assets/test/views/topic-content.spec.js
index 24d86780dd0..74f1dddcf78 100644
--- a/kolibri/plugins/learn/assets/test/views/topic-content.spec.js
+++ b/kolibri/plugins/learn/assets/test/views/topic-content.spec.js
@@ -8,6 +8,7 @@ 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');
@@ -15,6 +16,7 @@ jest.mock('kolibri.client');
 jest.mock('kolibri.resources');
 jest.mock('../../src/composables/useDownloadRequests');
 jest.mock('../../src/composables/useChannels');
+jest.mock('../../src/composables/useCoreLearn');
 jest.mock('../../src/composables/useDevices');
 
 const CONTENT_ID = 'content-id';
@@ -213,6 +215,11 @@ describe('TopicsContentPage', () => {
               isDownloadingByLearner: () => true,
             })
           );
+          useCoreLearn.mockImplementation(() =>
+            useCoreLearnMock({
+              canAddDownloads: () => true,
+            })
+          );
           wrapper = await makeAuthWrapperWithRemoteContent();
         });