fixing comment form add button

2 files changed, 39 insertions, 10 deletions

diff --git a/public/assets/js/lib/views/details/commentform.js b/public/assets/js/lib/views/details/commentform.js
index abda1e4..dc2ac75 100644
--- a/public/assets/js/lib/views/details/commentform.js
+++ b/public/assets/js/lib/views/details/commentform.js
@@ -13,7 +13,6 @@ var CommentForm = FormView.extend({
     this.__super__.initialize.call(this, opt);
     this.template = this.$(".template").html();
     this.$comment = this.$("[name=comment]");
-    console.log("initialize");
   },
 
   show: function () {
diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js
index 311d84e..143dc92 100644
--- a/public/assets/js/lib/views/stream/hootstream.js
+++ b/public/assets/js/lib/views/stream/hootstream.js
@@ -71,7 +71,7 @@ var HootStream = View.extend({
     const thread = $(event.currentTarget)
       .closest(".threadTitle")
       .data("thread");
-    console.log(action, thread);
+    // console.log(action, thread);
     switch (action) {
       case "play":
         this.onPlay(event, thread);
@@ -126,16 +126,24 @@ var HootStream = View.extend({
   },
 
   onShowCommentForm: function (event, thread) {
-    if (this.forms[thread]) {
-      this.forms[thread].destroy();
-      this.forms[thread] = null;
+    const isOpen = !!this.forms[thread];
+    // console.log("comment", thread, !!isOpen);
+    if (isOpen) {
+      this.onHideCommentForm(event, thread);
       return;
     }
-    const $threadTitle = $(event.target).closest(".threadTitle");
+    $(event.target)
+      .closest(".actions")
+      .find(".addIcon")
+      .replaceWith($(ICONS.remove));
+    const $threadTitle = $(event.currentTarget)
+      .closest(".thread")
+      .find(".threadTitle");
     const $form = $(this.commentFormTemplate);
     $form.data("thread", thread);
     $form.insertAfter($threadTitle);
     $form.find("textarea").focus();
+    console.log($threadTitle);
     const commentForm = new CommentForm({ parent: this });
     commentForm.action = `/api/thread/${thread}/comment`;
     commentForm.setElement($form);
@@ -147,8 +155,22 @@ var HootStream = View.extend({
     this.forms[thread] = commentForm;
   },
 
+  onHideCommentForm: function (event, thread) {
+    this.forms[thread].destroy();
+    this.forms[thread] = null;
+    $(event.target)
+      .closest(".actions")
+      .find(".removeIcon")
+      .replaceWith($(ICONS.add));
+  },
+
   onSubmitComment: function (data, form) {
     const { thread } = form.opt;
+    form.$el
+      .closest(".thread")
+      .find(".actions")
+      .find(".removeIcon")
+      .replaceWith($(ICONS.add));
     form.destroy();
     this.forms[thread] = null;
     const current = this.state.threadLookup[thread];
@@ -435,19 +457,27 @@ var HootStream = View.extend({
     const sortedFiles = this.sortFiles(files, thread.settings?.sort);
 
     const actions = [
-      hasAudio && { action: "play", label: "play music", icon: "play" },
-      { action: "post", label: "post", icon: "add" },
+      hasAudio && {
+        action: "play",
+        label: "play music",
+        icon: ICONS.play,
+      },
+      {
+        action: "post",
+        label: "post",
+        icon: ICONS.add,
+      },
       !isViewingThread &&
         !isCompleteThread && {
           action: "expand",
           label: "expand",
-          icon: "expand",
+          icon: ICONS.expand,
         },
     ]
       .filter((action) => !!action)
       .map(
         ({ action, icon, label }) =>
-          `<div class="action" data-action="${action}" title="${label}">${ICONS[icon]}</div>`
+          `<div class="action" data-action="${action}" title="${label}">${icon}</div>`
       )
       .join("");