repair componentDidUpdate infinite re-rendering in client-admin (#1933

)
compdemocracy · Feb 20, 2025 · 33c9868 · 33c9868
1 parent 71360fc
commit 33c9868
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 17 deletions.
diff --git a/client-admin/src/components/conversation-admin/index.js b/client-admin/src/components/conversation-admin/index.js
@@ -37,8 +37,10 @@ class ConversationAdminContainer extends React.Component {
     this.resetMetadata()
   }
 
-  componentDidUpdate() {
-    this.loadZidMetadata()
+  componentDidUpdate(prevProps) {
+    if (prevProps.match.params.conversation_id !== this.props.match.params.conversation_id) {
+      this.loadZidMetadata()
+    }
   }
 
   render() {

diff --git a/client-admin/src/components/conversation-admin/report/reports-list.js b/client-admin/src/components/conversation-admin/report/reports-list.js
@@ -32,11 +32,10 @@ class ReportsList extends React.Component {
       })
     })
   }
-  
+
   componentDidMount() {
     const { zid_metadata } = this.props
-
-    // eslint-disable-next-line react/prop-types
+
     this.props.dispatch(
       populateZidMetadataStore(this.props.match.params.conversation_id)
     )
@@ -47,9 +46,13 @@ class ReportsList extends React.Component {
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
+    // Only call getData() if is_mod changed from false/undefined to true
     const { zid_metadata } = this.props
-    if (zid_metadata?.is_mod) {
+    const prevIsMod = prevProps.zid_metadata?.is_mod
+    const currentIsMod = zid_metadata?.is_mod
+
+    if (!prevIsMod && currentIsMod) {
       this.getData()
     }
   }
@@ -105,6 +108,7 @@ class ReportsList extends React.Component {
 }
 
 ReportsList.propTypes = {
+  dispatch: PropTypes.func,
   match: PropTypes.shape({
     params: PropTypes.shape({
       conversation_id: PropTypes.string

diff --git a/client-admin/src/components/conversation-admin/stats/index.js b/client-admin/src/components/conversation-admin/stats/index.js
@@ -58,27 +58,41 @@ class ConversationStats extends React.Component {
       populateZidMetadataStore(match.params.conversation_id)
     )
 
-    if (zid_metadata.is_mod) {
-      this.loadStats()
-      this.getStatsRepeatedly = setInterval(() => {
-        this.loadStats()
-      }, 10000)
+    if (zid_metadata?.is_mod) {
+      this.startPolling()
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     const { zid_metadata } = this.props
-    if (zid_metadata?.is_mod) {
-      this.loadStats()
+    const prevIsMod = prevProps.zid_metadata?.is_mod
+    const currentIsMod = zid_metadata?.is_mod
+
+    // Start polling only when is_mod changes from false to true
+    if (!prevIsMod && currentIsMod) {
+      this.startPolling()
     }
   }
 
   componentWillUnmount() {
-    const { zid_metadata } = this.props
+    if (this.getStatsRepeatedly) {
+      clearInterval(this.getStatsRepeatedly)
+    }
+  }
 
-    if (zid_metadata.is_mod) {
+  startPolling() {
+    // Clear any existing interval
+    if (this.getStatsRepeatedly) {
       clearInterval(this.getStatsRepeatedly)
     }
+
+    // Initial load
+    this.loadStats()
+
+    // Start polling
+    this.getStatsRepeatedly = setInterval(() => {
+      this.loadStats()
+    }, 10000)
   }
 
   render() {