comment form working

2 files changed, 66 insertions, 14 deletions

diff --git a/public/assets/js/lib/views/details/commentform.js b/public/assets/js/lib/views/details/commentform.js
index 708657d..66add7d 100644
--- a/public/assets/js/lib/views/details/commentform.js
+++ b/public/assets/js/lib/views/details/commentform.js
@@ -33,11 +33,14 @@ var CommentForm = FormView.extend({
   },
 
   keydown: function (e) {
-    if ((e.ctrlKey || e.metaKey || e.altKey) && e.keyCode == 83) {
-      // "s" key
-      e.preventDefault();
-      e.stopPropagation();
-      this.save();
+    console.log(e.keyCode);
+    if (e.ctrlKey || e.metaKey || e.altKey) {
+      if (e.keyCode === 83 || e.keyCode === 13) {
+        // "s" or "enter" key
+        e.preventDefault();
+        e.stopPropagation();
+        this.save();
+      }
     }
   },
 
@@ -66,7 +69,13 @@ var CommentForm = FormView.extend({
     // console.log(this.parent);
     console.log(data);
     if (this.opt.onSubmit) {
-      this.opt.onSubmit(data);
+      this.opt.onSubmit(data, this);
     }
   },
+
+  destroy: function () {
+    this.hide();
+    this.undelegateEvents();
+    this.$el.remove();
+  },
 });
diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js
index 4a846d7..a12ea39 100644
--- a/public/assets/js/lib/views/stream/hootstream.js
+++ b/public/assets/js/lib/views/stream/hootstream.js
@@ -100,7 +100,7 @@ var HootStream = View.extend({
     $.get(`/api/stream?thread=${thread}`).then(
       function (response) {
         console.log(response);
-        const $thread = this.renderThread({
+        const expandedThread = {
           query: response.query,
           thread: response.threads,
           images: response.files.filter((file) =>
@@ -110,17 +110,17 @@ var HootStream = View.extend({
             (file) => !file.filename.match(IMAGE_REGEXP)
           ),
           comments: response.comments,
-        });
-        console.log($thread);
+        };
+        const $thread = this.renderThread(expandedThread);
         $(event.target).closest(".thread").replaceWith($thread);
+        this.state.threadLookup[thread] = expandedThread;
       }.bind(this)
     );
   },
 
   onShowCommentForm: function (event, thread) {
     if (this.forms[thread]) {
-      this.forms[thread].hide();
-      this.forms[thread].$el.remove();
+      this.forms[thread].destroy();
       this.forms[thread] = null;
       return;
     }
@@ -135,14 +135,56 @@ var HootStream = View.extend({
     commentForm.initialize({
       parent: this,
       onSubmit: this.onSubmitComment.bind(this),
+      thread,
     });
     this.forms[thread] = commentForm;
   },
 
-  onSubmitComment: function (event) {
-    event.preventDefault();
-    console.log("onsubmit");
+  onSubmitComment: function (data, form) {
+    const { thread } = form.opt;
+    form.destroy();
     this.forms[thread] = null;
+    const current = this.state.threadLookup[thread];
+    let files, images;
+    if (data.files) {
+      const fileIndex = data.files.map((file) => [
+        IMAGE_REGEXP.test(file.filename),
+        file,
+      ]);
+      const images = fileIndex.filter((pair) => pair[0]).map((pair) => pair[1]);
+      const non_images = fileIndex
+        .filter((pair) => !pair[0])
+        .map((pair) => pair[1]);
+      files = [non_images, ...current.files];
+      images = [images, ...current.images];
+    } else {
+      files = current.files;
+      images = current.images;
+    }
+
+    const comments = data.comment
+      ? [data.comment, ...current.comments]
+      : current.comments;
+
+    this.state.threadLookup = {
+      ...this.state.threadLookup,
+      [thread]: {
+        ...current,
+        thread: [
+          {
+            ...current.thread,
+            file_count:
+              current.file_count + (data.files ? data.files.length : 0),
+            comment_count: current.comment_count + (data.comment ? 1 : 0),
+            lastmodified: Date.now() / 1000,
+          },
+        ],
+        comments,
+        images,
+        files,
+      },
+    };
+    this.build(this.state.filters);
   },
 
   load: function (data, filters) {
@@ -155,6 +197,7 @@ var HootStream = View.extend({
   },
 
   build: function (filters) {
+    this.state.filters = filters;
     const { data, order, threadLookup } = this.state;
     const threads = Object.values(threadLookup);