From 6f87a74715379bc49e2a8fb52906f7688fc30f35 Mon Sep 17 00:00:00 2001
From: Kshitij Sobti <kshitij@sobti.in>
Date: Fri, 1 Apr 2022 17:30:37 +0530
Subject: [PATCH] feat: handle navigation and resize events from discussions
 MFE

The discussions MFE sends resize and navigation events via the postMessage API, we can use these events to resize the iframe and make sure that the iframe loads the correct page on refresh.

Co-authored-by: Hamza Khchine <hamza.Khchine@opencraft.com>
---
 .../discussion/discussion_mfe_embed.html      | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/lms/djangoapps/discussion/templates/discussion/discussion_mfe_embed.html b/lms/djangoapps/discussion/templates/discussion/discussion_mfe_embed.html
index 54159e75c14d..69dcc6077442 100644
--- a/lms/djangoapps/discussion/templates/discussion/discussion_mfe_embed.html
+++ b/lms/djangoapps/discussion/templates/discussion/discussion_mfe_embed.html
@@ -7,10 +7,33 @@
 <%!
 import json
 from django.utils.translation import ugettext as _
+from openedx.core.djangolib.js_utils import js_escaped_string
 %>
 
+<%block name="js_extra">
+<script>
+    window.addEventListener("load", function () {
+        const mfeUrl = (new URL("${discussions_mfe_url  | n, js_escaped_string}"));
+        const iframe = document.querySelector('#discussions-mfe-tab-embed');
+        iframe.src = mfeUrl.href + window.location.hash.slice(1);
+        window.addEventListener("message", (event) => {
+            const payload = event.data.payload;
+            if (event.origin !== mfeUrl.origin) {
+                return;
+            }
+            if (event.data.type === "discussions.navigate" && payload.path){
+                window.history.pushState(null, "", "#" + payload.path);
+            }
+            if (event.data.type === "plugin.resize") {
+                iframe.height = payload.height;
+            }
+        });
+    });
+</script>
+</%block>
+
 <section class="discussion discussion-board page-content-container" id="discussion-container"
-         data-course-id="${course_key}" >
+         data-course-id="${course_key}">
     <%include file="_switch_experience_fragment.html" />
-    <iframe id='discussions-mfe-tab-embed' src='${discussions_mfe_url}'></iframe>
+    <iframe id='discussions-mfe-tab-embed' src=''></iframe>
 </section>