From b4065f151cba0b07aa0c6bfd8458dba9c73d5002 Mon Sep 17 00:00:00 2001
From: Julian Dehm <j.dehm@liqd.net>
Date: Wed, 7 Aug 2024 14:46:31 +0200
Subject: [PATCH] comments: fix child comment success alert shown again when
 hiding and then showing replies.

fixes #1523
---
 .../static/comments_async/comment.jsx           | 17 ++++++++---------
 .../static/comments_async/comment_box.jsx       |  6 ++++++
 .../static/comments_async/comment_list.jsx      |  1 +
 changelog/1523.md                               |  4 ++++
 4 files changed, 19 insertions(+), 9 deletions(-)
 create mode 100644 changelog/1523.md

diff --git a/adhocracy4/comments_async/static/comments_async/comment.jsx b/adhocracy4/comments_async/static/comments_async/comment.jsx
index 281973024..7407fdec9 100644
--- a/adhocracy4/comments_async/static/comments_async/comment.jsx
+++ b/adhocracy4/comments_async/static/comments_async/comment.jsx
@@ -61,20 +61,18 @@ export default class Comment extends React.Component {
     this.state = {
       edit: false,
       showChildComments: false,
-      displayNotification: this.props.displayNotification,
       shorten: true,
       anchored: false,
       showModStatement: true,
       moderatorFeedback: this.props.moderatorFeedback
     }
 
-    setTimeout(
-      function () {
-        this.setState({ displayNotification: false })
-      }
-        .bind(this),
-      2000
-    )
+    if (this.props.displayNotification) {
+      setTimeout(
+        () => {
+          props.hideNotification(this.props.index, this.props.parentIndex)
+        }, 2000)
+    }
   }
 
   componentDidMount () {
@@ -311,7 +309,7 @@ export default class Comment extends React.Component {
 
     return (
       <li>
-        {this.state.displayNotification &&
+        {this.props.displayNotification &&
           <div className="alert alert--success a4-comments__success-notification"><i className="fas fa-check" /> {translated.successMessage}</div>}
         <div className={(this.props.is_users_own_comment ? 'a4-comments__comment a4-comments__comment-owner' : 'a4-comments__comment')}>
           <a className="a4-comments__anchor" id={'comment_' + this.props.id} href={'./?comment=' + this.props.id}>{'Comment ' + this.props.id}</a>
@@ -436,6 +434,7 @@ export default class Comment extends React.Component {
                       orgTermsUrl={this.props.orgTermsUrl}
                       setCommentError={this.props.setCommentError}
                       setCommentEditError={this.props.setCommentEditError}
+                      hideNotification={this.props.hideNotification}
                     />
                   </div>
                 </div>
diff --git a/adhocracy4/comments_async/static/comments_async/comment_box.jsx b/adhocracy4/comments_async/static/comments_async/comment_box.jsx
index e579d0f12..0704d3d19 100644
--- a/adhocracy4/comments_async/static/comments_async/comment_box.jsx
+++ b/adhocracy4/comments_async/static/comments_async/comment_box.jsx
@@ -266,6 +266,10 @@ export const CommentBox = (props) => {
     setEditError(parentIndex, index, undefined)
   }
 
+  function handleHideNotification (index, parentIndex) {
+    updateStateComment(parentIndex, index, { displayNotification: false })
+  }
+
   function handleToggleFilters (e) {
     e.preventDefault()
     setShowFilters(!showFilters)
@@ -459,6 +463,7 @@ export const CommentBox = (props) => {
           agreedTermsOfUse={agreedTermsOfUse}
           orgTermsUrl={orgTermsUrl}
           setCommentError={setMainError}
+          hideNotification={handleHideNotification}
         />
       </div>
       <div>
@@ -512,6 +517,7 @@ export const CommentBox = (props) => {
         orgTermsUrl={orgTermsUrl}
         setCommentError={setMainError}
         setCommentEditError={setEditError}
+        hideNotification={handleHideNotification}
       />
       <div className={loading ? 'u-spinner__container' : 'd-none'}>
         <i className="fa fa-spinner fa-pulse" aria-hidden="true" />
diff --git a/adhocracy4/comments_async/static/comments_async/comment_list.jsx b/adhocracy4/comments_async/static/comments_async/comment_list.jsx
index 1f76c3650..bf8064704 100644
--- a/adhocracy4/comments_async/static/comments_async/comment_list.jsx
+++ b/adhocracy4/comments_async/static/comments_async/comment_list.jsx
@@ -66,6 +66,7 @@ const CommentList = (props) => {
               orgTermsUrl={props.orgTermsUrl}
               setCommentError={props.setCommentError}
               setCommentEditError={props.setCommentEditError}
+              hideNotification={props.hideNotification}
             >{comment.comment}
             </Comment>
           )
diff --git a/changelog/1523.md b/changelog/1523.md
new file mode 100644
index 000000000..d8c7c5a9c
--- /dev/null
+++ b/changelog/1523.md
@@ -0,0 +1,4 @@
+### Fixed
+
+- fix child comment success alert shown again after hiding and then showing the
+  replies again. (#1532)