Update route objects and fix reactivity

learningequality · Jun 8, 2021 · 76a043a · 76a043a
1 parent 1e244d7
commit 76a043a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 23 deletions.
diff --git a/kolibri/plugins/html5_viewer/assets/src/views/Html5AppRendererIndex.vue b/kolibri/plugins/html5_viewer/assets/src/views/Html5AppRendererIndex.vue
@@ -123,8 +123,8 @@
       this.hashi.onStateUpdate(data => {
         this.$emit('updateContentState', data);
       });
-      this.hashi.on('navigateto', message => {
-        this.$emit('navigateToRegularContext', message);
+      this.hashi.on('navigateTo', message => {
+        this.$emit('navigateTo', message);
       });
       this.hashi.initialize(
         (this.extraFields && this.extraFields.contentState) || {},

diff --git a/kolibri/plugins/learn/assets/src/views/ChannelRenderer/CustomContentRenderer.vue b/kolibri/plugins/learn/assets/src/views/ChannelRenderer/CustomContentRenderer.vue
@@ -16,6 +16,7 @@
       </iframe>
       <ContentModal
         v-if="overlayIsOpen"
+        :key="currentContent.id"
         :contentNode="currentContent"
         :channelTheme="channelTheme"
         @close="overlayIsOpen = false"
@@ -36,6 +37,7 @@
   import router from 'kolibri.coreVue.router';
   import { events, MessageStatuses } from 'hashi/src/hashiBase';
   import { validateTheme } from '../../utils/themes';
+  import { PageNames } from '../../constants';
   import ContentModal from './ContentModal';
 
   function createReturnMsg({ message, data, err }) {
@@ -188,11 +190,8 @@
         let context = {};
         return ContentNodeResource.fetchModel({ id })
           .then(contentNode => {
-            let routeBase, path;
             if (contentNode && contentNode.kind === 'topic') {
-              routeBase = '/topics/t';
-              path = `${routeBase}/${id}`;
-              router.push({ path: path }).catch(() => {});
+              router.push(this.genContentLink(contentNode.id, contentNode.is_leaf));
             } else if (contentNode && this.overlayIsOpen == false) {
               // in a custom context, launch overlay
               this.currentContent = contentNode;
@@ -204,11 +203,10 @@
             } else if (contentNode && this.overlayIsOpen == true) {
               // in a custom context, within an overlay, switch the overlay
               // content to the new content
-              this.overlayIsOpen = false;
               this.currentContent = contentNode;
-              this.overlayIsOpen = true;
               context.node_id = contentNode.id;
               context.customChannel = true;
+              this.$forceUpdate();
               const encodedContext = encodeURI(JSON.stringify(context));
               router.replace({ query: { context: encodedContext } }).catch(() => {});
             }
@@ -221,6 +219,12 @@
             this.hashi.mediator.sendLocalMessage(newMsg);
           });
       },
+      genContentLink(id, isLeaf) {
+        return {
+          name: isLeaf ? PageNames.TOPICS_CONTENT : PageNames.TOPICS_TOPIC,
+          params: { id },
+        };
+      },
       getOrUpdateContext(message) {
         // to update context with the incoming context
         if (message.context) {

diff --git a/kolibri/plugins/learn/assets/src/views/ContentPage.vue b/kolibri/plugins/learn/assets/src/views/ContentPage.vue
@@ -34,7 +34,7 @@
         @updateProgress="updateProgress"
         @addProgress="addProgress"
         @updateContentState="updateContentState"
-        @navigateToRegularContext="navigateToRegularContext"
+        @navigateTo="navigateTo"
       />
 
       <AssessmentWrapper
@@ -337,23 +337,14 @@
       updateContentState(contentState, forceSave = true) {
         this.updateContentNodeState({ contentState, forceSave });
       },
-      navigateToRegularContext(message) {
+      navigateTo(message) {
         let id = message.nodeId;
         return ContentNodeResource.fetchModel({ id })
           .then(contentNode => {
-            let routeBase, path;
-            if (contentNode && contentNode.kind !== 'topic') {
-              routeBase = '/topics/c';
-              path = `${routeBase}/${id}`;
-              router.push({ path: path }).catch(() => {});
-            } else if (contentNode && contentNode.kind === 'topic') {
-              routeBase = '/topics/t';
-              path = `${routeBase}/${id}`;
-              router.push({ path: path }).catch(() => {});
-            }
+            router.push(this.genContentLink(contentNode.id, contentNode.is_leaf));
           })
-          .catch(err => {
-            console.log(err);
+          .catch(error => {
+            this.$store.dispatch('handleApiError', error);
           });
       },
       markAsComplete() {

diff --git a/packages/hashi/src/hashiBase.js b/packages/hashi/src/hashiBase.js
@@ -10,7 +10,7 @@ export const events = {
   SEARCHRESULTREQUESTED: 'searchresultrequested',
   DATARETURNED: 'datareturned',
   KOLIBRIDATARETURNED: 'kolibridatareturned',
-  NAVIGATETO: 'navigateto',
+  NAVIGATETO: 'navigateTo',
   CONTEXT: 'context',
   THEMECHANGED: 'themechanged',
   KOLIBRIVERSIONREQUESTED: 'kolibriversionrequested',