From 1f38a00c3ceeff59a3ef4d3bd8374b8b1dd8f125 Mon Sep 17 00:00:00 2001
From: Ismael Bejarano <ibejarano@manas.tech>
Date: Tue, 19 Nov 2024 17:51:46 -0300
Subject: [PATCH] Fix loading active surveys was triggered on component
 creation and not before modal display

---
 .../js/components/channels/ChannelIndex.jsx   |  58 +++++++-
 .../js/components/channels/ProviderModal.jsx  | 125 +++++++-----------
 locales/template/translation.json             |   1 +
 3 files changed, 103 insertions(+), 81 deletions(-)

diff --git a/assets/js/components/channels/ChannelIndex.jsx b/assets/js/components/channels/ChannelIndex.jsx
index ef9008614..6ea8597bf 100644
--- a/assets/js/components/channels/ChannelIndex.jsx
+++ b/assets/js/components/channels/ChannelIndex.jsx
@@ -22,8 +22,28 @@ import { Preloader } from "react-materialize"
 import { config } from "../../config"
 import { translate } from "react-i18next"
 import ProviderModal from "./ProviderModal"
+import * as api from "../../api"
+
+type State = {
+  modalLoading: boolean,
+  modalSurveys: Array<Object>,
+  modalProvider: ?string,
+  modalIndex: ?number,
+}
+
+class ChannelIndex extends Component<any, State> {
+  state : State
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      modalLoading: false,
+      modalSurveys: [],
+      modalProvider: null,
+      modalIndex: null,
+    }
+  }
 
-class ChannelIndex extends Component<any> {
   componentDidMount() {
     this.props.actions.fetchChannels()
   }
@@ -37,6 +57,31 @@ class ChannelIndex extends Component<any> {
   toggleProvider(provider, index, checked) {
     if (checked) {
       $(`#${provider}Modal-${index}`).modal("open")
+      this.setState({
+        modalLoading: true,
+        modalSurveys: [],
+        modalProvider: provider,
+        modalIndex: index,
+      })
+      const { baseUrl } = config[provider][index]
+      api.fetchActiveSurveys(provider, baseUrl)
+      .then((response) => {
+        const surveys = response || []
+        this.setState({
+          modalLoading: false,
+          modalSurveys: surveys,
+          modalProvider: provider,
+          modalIndex: index,
+        })
+      })
+      .catch(() => {
+        this.setState({
+          modalLoading: false,
+          modalSurveys: [],
+          modalProvider: provider,
+          modalIndex: index,
+        })
+      })
     } else {
       this.props.authActions.toggleAuthorization(provider, index)
     }
@@ -88,6 +133,13 @@ class ChannelIndex extends Component<any> {
       router,
     } = this.props
 
+    const {
+      modalLoading,
+      modalSurveys,
+      modalProvider,
+      modalIndex,
+    } = this.state;
+
     if (!channels) {
       return (
         <div>
@@ -124,6 +176,8 @@ class ChannelIndex extends Component<any> {
     }
 
     const providerModal = (provider, index, friendlyName, multiple) => {
+      const loading = provider === modalProvider && index === modalIndex ? modalLoading : false
+      const surveys = provider === modalProvider && index === modalIndex ? modalSurveys : []
       return (
         <ProviderModal
           key={`${provider}-${index}`}
@@ -132,6 +186,8 @@ class ChannelIndex extends Component<any> {
           friendlyName={friendlyName}
           multiple={multiple}
           onConfirm={() => this.deleteProvider(provider, index)}
+          loading={loading}
+          surveys={surveys}
         />
       )
     }
diff --git a/assets/js/components/channels/ProviderModal.jsx b/assets/js/components/channels/ProviderModal.jsx
index 4390687f6..4190fa9d9 100644
--- a/assets/js/components/channels/ProviderModal.jsx
+++ b/assets/js/components/channels/ProviderModal.jsx
@@ -1,95 +1,60 @@
-import React, { Component, PropTypes } from "react"
+import React, { PropTypes } from "react"
 import { translate } from "react-i18next"
-import * as api from "../../api"
 import { ConfirmationModal } from "../ui"
-import { config } from "../../config"
 
-export class ProviderModal extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      loading: false,
-      surveys: [],
-    }
-  }
-
-  componentDidMount() {
-    const { provider, index } = this.props
-    const { baseUrl } = config[provider][index]
-    this.setState({
-      loading: true,
-      surveys: [],
-    })
-    api.fetchActiveSurveys(provider, baseUrl)
-    .then((response) => {
-      const surveys = response || []
-      this.setState({
-        loading: false,
-        surveys,
-      })
-    })
-    .catch(() => {
-      this.setState({
-        loading: false,
-        surveys: [],
-      })
-    })
-  }
-
-  render() {
-    const {
-      t,
-      provider,
-      index,
-      friendlyName,
-      multiple,
-      onConfirm,
-    } = this.props
-
-    const { loading, surveys } = this.state
-
-    let name = `${provider[0].toUpperCase()}${provider.slice(1)}`
-    if (multiple) name = `${name} (${friendlyName})`
-
-    return (
-      <ConfirmationModal
-        modalId={`${provider}Modal-${index}`}
-        header={t("Turn off {{name}}", { name })}
-        confirmationText={t("Yes")}
-        onConfirm={onConfirm}
-        style={{ maxWidth: "600px" }}
-        showCancel
-      >
-        <div>
-          <p>{t("Do you want to delete the channels provided by {{name}}?", { name })}</p>
-
-          <div className="provider-surveys">
-            {loading ? <span>{t("Loading surveys...")}</span> :
-              surveys.length == 0 ? <span>{t("No active surveys")}</span> :
-                <div>
-                  <span>{t("Active surveys")}</span>
-                  <ul>
-                    {surveys.map((survey) => (
-                      <li key={`survey-${survey.id}`}>
-                        <span>{survey.name}</span>
-                      </li>
-                    ))}
-                  </ul>
-                </div>}
-          </div>
+export const ProviderModal = ({
+  t,
+  provider,
+  index,
+  friendlyName,
+  multiple,
+  onConfirm,
+  loading,
+  surveys,
+}) => {
+  let name = `${provider[0].toUpperCase()}${provider.slice(1)}`
+  if (multiple) name = `${name} (${friendlyName})`
+
+  return (
+    <ConfirmationModal
+      modalId={`${provider}Modal-${index}`}
+      header={t("Turn off {{name}}", { name })}
+      confirmationText={t("Yes")}
+      onConfirm={onConfirm}
+      style={{ maxWidth: "600px" }}
+      showCancel
+    >
+      <div>
+        <p>{t("Do you want to delete the channels provided by {{name}}?", { name })}</p>
+
+        <div className="provider-surveys">
+          {loading ? <span>{t("Searching active surveys...")}</span> :
+            surveys.length == 0 ? <span>{t("No active surveys")}</span> :
+              <div>
+                <span>{t("Active surveys")}</span>
+                <ul>
+                  {surveys.map((survey) => (
+                    <li key={`survey-${survey.id}`}>
+                      <span>{survey.name}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>}
         </div>
-      </ConfirmationModal>
-    )
-  }
+      </div>
+    </ConfirmationModal>
+  )
 }
 
 ProviderModal.propTypes = {
   t: PropTypes.func,
-  provider: PropTypes.any,
+  provider: PropTypes.string,
   index: PropTypes.number,
   friendlyName: PropTypes.string,
   multiple: PropTypes.bool,
   onConfirm: PropTypes.func,
+  loading: PropTypes.bool,
+  surveys: PropTypes.any
 }
 
 export default translate()(ProviderModal)
diff --git a/locales/template/translation.json b/locales/template/translation.json
index aadb4bdb1..4cff033d8 100644
--- a/locales/template/translation.json
+++ b/locales/template/translation.json
@@ -419,6 +419,7 @@
   "Sat": "",
   "Saving...": "",
   "Scheduled for {{dateString}}": "",
+  "Searching active surveys...": "",
   "Secondary color": "",
   "Section <i>{{oldSectionTitle}}</i> of <i>{{questionnaireName}}</i> renamed to <i>{{newSectionTitle}}</i>": "",
   "Select a channel...": "",