Assorted fixes for errors

app/assets/javascripts/comments.js

@@ -19,17 +19,13 @@ $(() => {
     return $tgt.closest('.js-comment-thread-wrapper')[0] ?? null;
   };
 
-  $(document).on('click', '.post--comments-thread.is-inline a', async (evt) => {
-    if (evt.ctrlKey) { return; }
-
-    evt.preventDefault();
-
-    const $tgt = $(evt.target);
-    const $threadId = $tgt.data('thread');
-    const wrapper = getCommentThreadWrapper($tgt);
-
-    openThread(wrapper, $threadId);
-  });
+  /**
+   * @param {HTMLElement} wrapper
+   * @returns {boolean}
+   */
+  const isInlineCommentThread = (wrapper) => {
+    return !!wrapper.querySelector('[data-inline=true]');
+  };
 
   /**
    * @param {HTMLElement} wrapper
@@ -45,8 +41,24 @@ $(() => {
     window.hljs && hljs.highlightAll();
   }
 
+  $(document).on('click', '.post--comments-thread.is-inline a', async (evt) => {
+    if (evt.ctrlKey) {
+      return; // TODO: do we need this early exit?
+    }
+
+    evt.preventDefault();
+
+    const $tgt = $(evt.target);
+    const $threadId = $tgt.data('thread');
+    const wrapper = getCommentThreadWrapper($tgt);
+
+    openThread(wrapper, $threadId);
+  });
+
   $(document).on('click', '.js-show-deleted-comments', (ev) => {
-    if (ev.ctrlKey) { return; } // do we really need it?
+    if (ev.ctrlKey) {
+      return;
+    } // do we really need it?
 
     ev.preventDefault();
 
@@ -80,7 +92,9 @@ $(() => {
     }
 
     if (isDeleted) {
-      $container.append(`<i class="fas fa-trash h-c-red-600 fa-fw" title="Deleted thread" aria-label="Deleted thread"></i>`);
+      $container.append(
+        `<i class="fas fa-trash h-c-red-600 fa-fw" title="Deleted thread" aria-label="Deleted thread"></i>`
+      );
       $container.addClass('is-deleted');
     }
 
@@ -171,8 +185,7 @@ $(() => {
       if (isDelete) {
         $comment.addClass('deleted-content');
         $tgt.removeClass('js-comment-delete').addClass('js-comment-undelete').val('undelete');
-      }
-      else {
+      } else {
         $comment.removeClass('deleted-content');
         $tgt.removeClass('js-comment-undelete').addClass('js-comment-delete').val('delete');
       }
@@ -189,36 +202,90 @@ $(() => {
     const $modal = $($tgt.data('modal'));
 
     const resp = await QPixel.fetch(`/comments/thread/${threadId}/followers`, {
-      headers: { 'Accept': 'text/html' }
+      headers: { Accept: 'text/html' }
     });
 
     const data = await resp.text();
 
     $modal.find('.js-follower-display').html(data);
   });
 
-  $(document).on('click', '[class*=js--lock-thread] form', async (evt) => {
-    evt.preventDefault();
+  $(document).on('click', '.js-archive-thread', async (ev) => {
+    ev.preventDefault();
 
-    const $tgt = $(evt.target);
-    const threadID = $tgt.data("thread");
+    const $tgt = $(ev.target);
+    const threadID = $tgt.data('thread');
 
-    const data = await QPixel.lockThread(threadID);
+    const data = await QPixel.archiveThread(threadID);
 
     QPixel.handleJSONResponse(data, () => {
-      window.location.reload();
+      const wrapper = getCommentThreadWrapper($tgt);
+      const inline = isInlineCommentThread(wrapper);
+      openThread(wrapper, threadID, { inline });
     });
   });
 
-  $(document).on('click', '.js--restrict-thread, .js--unrestrict-thread', async (evt) => {
+  $(document).on('click', '.js-delete-thread', async (ev) => {
+    ev.preventDefault();
+
+    const $tgt = $(ev.target);
+    const threadID = $tgt.data('thread');
+
+    const data = await QPixel.deleteThread(threadID);
+
+    QPixel.handleJSONResponse(data, () => {
+      const wrapper = getCommentThreadWrapper($tgt);
+      const inline = isInlineCommentThread(wrapper);
+      openThread(wrapper, threadID, { inline });
+    });
+  });
+
+  $(document).on('click', '.js-follow-thread', async (ev) => {
+    ev.preventDefault();
+
+    const $tgt = $(ev.target);
+    const threadID = $tgt.data('thread');
+
+    const data = await QPixel.followThread(threadID);
+
+    QPixel.handleJSONResponse(data, () => {
+      const wrapper = getCommentThreadWrapper($tgt);
+      const inline = isInlineCommentThread(wrapper);
+      openThread(wrapper, threadID, { inline });
+    });
+  });
+
+  $(document).on('click', '.js-lock-thread', async (ev) => {
+    ev.preventDefault();
+
+    const $tgt = $(ev.target);
+    const threadID = $tgt.data('thread');
+    const form = $tgt.closest(`form[data-thread=${threadID}]`).get(0);
+
+    if (form instanceof HTMLFormElement) {
+      const { value: duration } = form.elements['duration'] ?? {};
+
+      const data = await QPixel.lockThread(threadID, duration ? Math.round(+duration) : void 0);
+
+      QPixel.handleJSONResponse(data, () => {
+        const wrapper = getCommentThreadWrapper($tgt);
+        const inline = isInlineCommentThread(wrapper);
+        openThread(wrapper, threadID, { inline });
+      });
+    } else {
+      QPixel.createNotification('danger', 'Failed to find thread to lock');
+    }
+  });
+
+  // TODO: split into individual handlers once unrestrict_thread is split
+  $(document).on('click', '.js--unrestrict-thread', async (evt) => {
     evt.preventDefault();
 
     const $tgt = $(evt.target);
-    const threadID = $tgt.data("thread");
-    const action = $tgt.data("action");
-    const route = $tgt.hasClass("js--restrict-thread") ? 'restrict' : 'unrestrict';
+    const threadID = $tgt.data('thread');
+    const action = $tgt.data('action');
 
-    const resp = await QPixel.fetchJSON(`/comments/thread/${threadID}/${route}`, { type: action });
+    const resp = await QPixel.fetchJSON(`/comments/thread/${threadID}/unrestrict`, { type: action });
 
     const data = await resp.json();
 
@@ -261,7 +328,7 @@ $(() => {
       const $item = $(ev.target).hasClass('item') ? $(ev.target) : $(ev.target).parents('.item');
       const id = $item.data('user-id');
       $tgt[0].selectionStart = caretPos - posInWord;
-      $tgt[0].selectionEnd = (caretPos - posInWord) + currentWord.length;
+      $tgt[0].selectionEnd = caretPos - posInWord + currentWord.length;
       QPixel.replaceSelection($tgt, `@#${id}`);
       popup.destroy();
       $tgt.focus();
@@ -282,17 +349,20 @@ $(() => {
         pingable[`${threadId}-${postId}`] = await resp.json();
       }
 
-      const items = Object.entries(pingable[`${threadId}-${postId}`]).filter((e) => {
-        return e[0].toLowerCase().startsWith(currentWord.substr(1).toLowerCase());
-      }).map((e) => {
-        const username = e[0].replace(/</g, '&#x3C;').replace(/>/g, '&#x3E;');
-        const id = e[1];
-        return itemTemplate.clone().html(`${username} <span class="has-color-tertiary-600">#${id}</span>`)
-          .attr('data-user-id', id);
-      });
+      const items = Object.entries(pingable[`${threadId}-${postId}`])
+        .filter((e) => {
+          return e[0].toLowerCase().startsWith(currentWord.substr(1).toLowerCase());
+        })
+        .map((e) => {
+          const username = e[0].replace(/</g, '&#x3C;').replace(/>/g, '&#x3E;');
+          const id = e[1];
+          return itemTemplate
+            .clone()
+            .html(`${username} <span class="has-color-tertiary-600">#${id}</span>`)
+            .attr('data-user-id', id);
+        });
       QPixel.Popup.getPopup(items, $tgt[0], callback);
-    }
-    else {
+    } else {
       QPixel.Popup.destroyAll();
     }
   }
@@ -306,8 +376,7 @@ $(() => {
     if ($thread.is(':hidden')) {
       $thread.show();
       $thread.find('.js-comment-field').trigger('focus');
-    }
-    else {
+    } else {
       $thread.hide();
     }
   });
@@ -322,8 +391,7 @@ $(() => {
     if ($reply.is(':hidden')) {
       $reply.show();
       $reply.find('.js-comment-field').trigger('focus');
-    }
-    else {
+    } else {
       $reply.hide();
     }
   });
@@ -358,9 +426,7 @@ $(() => {
 
     const shouldFollow = action === 'follow';
 
-    const data = shouldFollow ?
-                  await QPixel.followComments(postId) :
-                  await QPixel.unfollowComments(postId);
+    const data = shouldFollow ? await QPixel.followComments(postId) : await QPixel.unfollowComments(postId);
 
     QPixel.handleJSONResponse(data, () => {
       target.dataset.action = shouldFollow ? 'unfollow' : 'follow';

app/assets/javascripts/qpixel_api.js

@@ -451,6 +451,38 @@ window.QPixel = {
     return QPixel.parseJSONResponse(resp, 'Failed to vote');
   },
 
+  archiveThread: async (id) => {
+    const resp = await QPixel.fetchJSON(`/comments/thread/${id}/archive`, {}, {
+      headers: { 'Accept': 'application/json' },
+    });
+
+    return QPixel.parseJSONResponse(resp, 'Failed to archive thread');
+  },
+
+  deleteThread: async (id) => {
+    const resp = await QPixel.fetchJSON(`/comments/thread/${id}/delete`, {}, {
+      headers: { 'Accept': 'application/json' },
+    });
+
+    return QPixel.parseJSONResponse(resp, 'Failed to delete thread');
+  },
+
+  followThread: async (id) => {
+    const resp = await QPixel.fetchJSON(`/comments/thread/${id}/follow`, {}, {
+      headers: { 'Accept': 'application/json' },
+    });
+
+    return QPixel.parseJSONResponse(resp, 'Failed to follow thread');
+  },
+
+  lockThread: async (id, duration) => {
+    const resp = await QPixel.fetchJSON(`/comments/thread/${id}/lock`, {
+      duration,
+    });
+
+    return QPixel.parseJSONResponse(resp, 'Failed to lock thread');
+  },
+
   deleteComment: async (id) => {
     const resp = await QPixel.fetchJSON(`/comments/${id}/delete`, {}, {
       headers: { 'Accept': 'application/json' },
@@ -495,14 +527,6 @@ window.QPixel = {
     return QPixel.parseJSONResponse(resp, 'Failed to unfollow post comments');
   },
 
-  lockThread: async (id) => {
-    const resp = await QPixel.fetchJSON(`/comments/thread/${id}/restrict`, {
-      type: 'lock'
-    });
-
-    return QPixel.parseJSONResponse(resp, 'Failed to lock thread');
-  },
-
   renameTag: async (categoryId, tagId, name) => {
     const resp = await QPixel.fetchJSON(`/categories/${categoryId}/tags/${tagId}/rename`, { name }, {
       headers: { 'Accept': 'application/json' }