From d80f918efa1deb2cd544de7f3ef1e9942d1a457d Mon Sep 17 00:00:00 2001
From: Rafi <Rafi993@users.noreply.github.com>
Date: Thu, 5 Nov 2020 20:35:37 +0530
Subject: [PATCH] Fixing flag user modal (#11221)

---
 app/javascript/actionsPanel/actionsPanel.js   |  5 +++++
 .../modCenter/singleArticle/index.jsx         | 12 +----------
 app/javascript/packs/flagUserModal.jsx        | 20 ++++++++-----------
 3 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/app/javascript/actionsPanel/actionsPanel.js b/app/javascript/actionsPanel/actionsPanel.js
index a8c836874..fb6a2630b 100644
--- a/app/javascript/actionsPanel/actionsPanel.js
+++ b/app/javascript/actionsPanel/actionsPanel.js
@@ -1,3 +1,4 @@
+import { toggleFlagUserModal } from '../packs/flagUserModal';
 import { request } from '@utilities/http';
 
 export function addCloseListener() {
@@ -403,6 +404,10 @@ export function addBottomActionsListeners() {
       }
     });
   }
+
+  document
+    .getElementById('open-flag-user-modal')
+    .addEventListener('click', toggleFlagUserModal);
 }
 
 export function initializeActionsPanel() {
diff --git a/app/javascript/modCenter/singleArticle/index.jsx b/app/javascript/modCenter/singleArticle/index.jsx
index 3d09df564..6a3c0a04d 100644
--- a/app/javascript/modCenter/singleArticle/index.jsx
+++ b/app/javascript/modCenter/singleArticle/index.jsx
@@ -1,8 +1,7 @@
-
 import PropTypes from 'prop-types';
 import { h, Component, Fragment } from 'preact';
 import { createPortal } from 'preact/compat';
-import { toggleFlagUserModal, FlagUserModal } from '../../packs/flagUserModal';
+import { FlagUserModal } from '../../packs/flagUserModal';
 import { formatDate } from './util';
 
 export default class SingleArticle extends Component {
@@ -44,15 +43,6 @@ export default class SingleArticle extends Component {
       ? document.getElementById(`mod-iframe-${id}`)
       : document.getElementById('mod-container');
 
-    // Check whether context is ModCenter or Friday-Night-Mode
-    if (modContainer) {
-      modContainer.addEventListener('load', () => {
-        modContainer.contentWindow.document
-          .getElementById('open-flag-user-modal')
-          .addEventListener('click', toggleFlagUserModal);
-      });
-    }
-
     return (
       <Fragment>
         {modContainer &&
diff --git a/app/javascript/packs/flagUserModal.jsx b/app/javascript/packs/flagUserModal.jsx
index 590d79d3c..7e4eb8dce 100644
--- a/app/javascript/packs/flagUserModal.jsx
+++ b/app/javascript/packs/flagUserModal.jsx
@@ -50,16 +50,18 @@ async function confirmFlagUser({ reactableType, category, reactableId }) {
  * Shows or hides the flag user modal.
  */
 export function toggleFlagUserModal() {
-  const modalContainer = document.querySelector('.flag-user-modal-container');
+  const modalContainer = top.document.querySelector(
+    '.flag-user-modal-container',
+  );
   modalContainer.classList.toggle('hidden');
 
   if (!modalContainer.classList.contains('hidden')) {
-    window.scrollTo(0, 0);
-    document.body.style.height = '100vh';
-    document.body.style.overflowY = 'hidden';
+    top.window.scrollTo(0, 0);
+    top.document.body.style.height = '100vh';
+    top.document.body.style.overflowY = 'hidden';
   } else {
-    document.body.style.height = 'inherit';
-    document.body.style.overflowY = 'inherit';
+    top.document.body.style.height = 'inherit';
+    top.document.body.style.overflowY = 'inherit';
   }
 }
 
@@ -80,12 +82,6 @@ export function initializeFlagUserModal(authorId) {
     <FlagUserModal authorId={authorId} />,
     document.querySelector('.flag-user-modal-container'),
   );
-
-  modContainer.addEventListener('load', () => {
-    modContainer.contentWindow.document
-      .getElementById('open-flag-user-modal')
-      .addEventListener('click', toggleFlagUserModal);
-  });
 }
 
 /**