Rehydrate the home page when syncing has completed to refresh missing…

… resources.
learningequality · Oct 23, 2023 · bd1b333 · bd1b333
1 parent ca33e27
commit bd1b333
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
@@ -2,7 +2,10 @@
 
   <LearnAppBarPage :appBarTitle="learnString('learnLabel')">
     <div v-if="!loading" id="main" role="main">
-      <ResourceSyncingUiAlert v-if="missingResources" />
+      <ResourceSyncingUiAlert
+        v-if="missingResources"
+        @syncComplete="hydrateHomePage"
+      />
       <YourClasses
         v-if="displayClasses"
         class="section"
@@ -206,6 +209,7 @@
         displayExploreChannels,
         displayClasses,
         missingResources,
+        hydrateHomePage,
       };
     },
     props: {

diff --git a/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
@@ -3,7 +3,7 @@
   <MissingResourceAlert
     :multiple="multiple"
   >
-    <template v-if="isLearnerOnlyImport && (isSyncing || syncDownloadsInProgress)" #syncAlert>
+    <template v-if="isLearnerOnlyImport && isSyncing" #syncAlert>
       {{ syncMessage }}
     </template>
   </MissingResourceAlert>
@@ -13,6 +13,8 @@
 
 <script>
 
+  import { get } from '@vueuse/core';
+  import { computed, watch } from 'kolibri.lib.vueCompositionApi';
   import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert.vue';
   import useUserSyncStatus from 'kolibri.coreVue.composables.useUserSyncStatus';
   import { SyncStatus } from 'kolibri.coreVue.vuex.constants';
@@ -35,13 +37,28 @@
     components: {
       MissingResourceAlert,
     },
-    setup() {
+    setup(props, { emit }) {
       const { status, syncDownloadsInProgress } = useUserSyncStatus();
       const { isLearnerOnlyImport } = useUser();
+      const isSyncing = computed(() => {
+        return (
+          get(status) === SyncStatus.QUEUED ||
+          get(status) === SyncStatus.SYNCING ||
+          get(syncDownloadsInProgress)
+        );
+      });
+
+      watch(isSyncing, (newVal, oldVal) => {
+        if (newVal === false && oldVal === true) {
+          emit('syncComplete');
+        }
+      });
+
       return {
         status,
         syncDownloadsInProgress,
         isLearnerOnlyImport,
+        isSyncing,
       };
     },
     props: {
@@ -51,9 +68,6 @@
       },
     },
     computed: {
-      isSyncing() {
-        return this.status == SyncStatus.QUEUED || this.status == SyncStatus.SYNCING;
-      },
       syncMessage() {
         /* eslint-disable kolibri/vue-no-undefined-string-uses */
         return this.status == SyncStatus.QUEUED