Hide response form

[ogurec-ogurec]

Please tell me how I can hide the response form after the user has clicked "Submit" in the form. A similar logic occurs when you click on the "Reply" button. I would like to make the form disappear after the user clicks the "Send" button.

I would be grateful for any help

[danirus]

The solution is to change the code of the ReactJS plugin so that when the comment form has been submitted without issues the form disappears.

[mckinly]

I can take a stab at this, @danirus

[danirus]

One detail that comes to my mind about this is that when submitting the form there might be errors. We have to be sure that the form gets hidden only after the submission has happened and there's nothing else to tell to the user. When the person posting the comment is not an authenticated user the form displays an info alert div to tell the user that a confirmation email has been sent. We still need to inform the user in that case.

[ogurec-ogurec]

@mckinly please tell me, are you working on this improvement?)

[mckinly]

No, not any longer.

…

On Sat, Dec 19, 2020, 07:24 ogurec-ogurec ***@***.***> wrote: @mckinly <https://github.com/mckinly> please tell me, are you working on this improvement?) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#204 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABXWDOXAI3OGH2STBMITM7TSVSSR5ANCNFSM4QDTJ66A> .

[ogurec-ogurec]

@danirus in this case, one of the options, can try to leave {{mesage}} and hide the form?
@mckinly I'm not good at JavaScript. Could you tell me where to make changes?

[danirus]

Sorry for the late reply, @ogurec-ogurec. The code is in static/django_comments_xtd/js/src/comment.jsx.
Look for reply_form. It's an object with the form component and a boolean is_visible. The problem is that the info alert indicating that a comment confirmation has been sent is part of the component. So if you set is_visible to false to hide the form, you will also hide that info alert.

[ogurec-ogurec]

Hello, Danirus. @danirus

I am trying now to make the form hide after the response is submitted. Please tell me how I can do this. Tried changing is_visible = false but doesn't work :(

[danirus]

I would apply the following changes:

diff --git a/django_comments_xtd/static/django_comments_xtd/js/src/comment.jsx b/django_comments_xtd/static/django_comments_xtd/js/src/comment.jsx
index 5a0d64b..534d85a 100644
--- a/django_comments_xtd/static/django_comments_xtd/js/src/comment.jsx
+++ b/django_comments_xtd/static/django_comments_xtd/js/src/comment.jsx
@@ -207,7 +207,14 @@ export class Comment extends React.Component {
       return null;
   }

-  make_form_invisible(submit_status) {
+  make_form_invisible() {
+    this.setState({
+      ...this.state,
+      reply_form: {
+        ...this.state.reply_form,
+        is_visible: !this.state.reply_form.is_visible
+      }
+    });
     this.props.on_comment_created();
   }

But remember that the code doesn't check whether there were issues in the form. If you hide it and there were form errors, the user doesn't have a way to know it. You would have to keep the form open to allow the user to see the message with the errors. Maybe you could call the make_form_invisible only if the comment has been created (HTTP code 2xx). That happens in commentform.jsx, function handle_submit_response.

[ogurec-ogurec]

@danirus big thanks.

[ogurec-ogurec]

hello, the first option turned out (comment.jsx), thanks. Trying to implement the second option (commentform.jsx) the handle_submit_response function:

make_form_invisible() {
   this.setState({
     ...this.state,
     reply_form: {
       ...this.state.reply_form,
      is_visible: !this.state.reply_form.is_visible
      }
  });
 }


  handle_submit_response(status) {
    let css_class = "";
    const
      msg_202 = django.gettext("Your comment will be reviewed. Thank your for your patience."),
	    msg_204 = django.gettext("Thank you, a comment confirmation request has been sent by mail."),
	    msg_403 = django.gettext("Sorry, your comment has been rejected.");

    const message = {
      202: msg_202,
		  204: msg_204,
		  403: msg_403
    };
	  const cssc = "alert alert-";

    if(status == 403)
      css_class = cssc + "danger";
    else css_class = cssc + "info";

    this.setState({alert: {message: message[status], cssc: css_class},
                   previewing: false});
    this.reset_form();
    this.props.on_comment_created();
    this.make_form_invisible();
  }

But somehow it doesn't work out. @danirus