Merge branch 'develop' into MoshiKoi/1025/remove-special-case-notifying-author-of-threads

Author: trichoplax

app/assets/javascripts/comments.js

@@ -339,4 +339,41 @@ $(() => {
       $tgt.find('.js-text').text('copy link');
     }, 1000);
   });
+
+  QPixel.DOM.addSelectorListener('click', '.js-follow-comments', async (ev) => {
+    ev.preventDefault();
+
+    const { target } = ev;
+
+    if (!QPixel.DOM.isHTMLElement(target)) {
+      return;
+    }
+
+    const { postId, action } = target.dataset;
+
+    if (!postId || !action) {
+      return;
+    }
+
+    const shouldFollow = action === 'follow';
+
+    const data = shouldFollow ?
+                  await QPixel.followComments(postId) :
+                  await QPixel.unfollowComments(postId);
+
+    QPixel.handleJSONResponse(data, () => {
+      target.dataset.action = shouldFollow ? 'unfollow' : 'follow';
+
+      const icon = document.createElement('i');
+      icon.classList.add('fas', 'fa-fw', shouldFollow ? 'fa-bell-slash' : 'fa-bell');
+      const text = document.createTextNode(` ${shouldFollow ? 'Unfollow' : 'Follow'} new`);
+      target.replaceChildren(icon, text);
+
+      const form = target.closest('form');
+
+      if (form) {
+        form.action = `/comments/post/${postId}/${shouldFollow ? 'unfollow' : 'follow'}`;
+      }
+    });
+  });
 });

app/assets/javascripts/qpixel_api.js

@@ -471,6 +471,16 @@ window.QPixel = {
     return data;
   },
 
+  followComments: async (postId) => {
+    const resp = await QPixel.fetchJSON(`/comments/post/${postId}/follow`, {}, {
+      headers: { 'Accept': 'application/json' }
+    });
+
+    const data = await resp.json();
+
+    return data;
+  },
+
   undeleteComment: async (id) => {
     const resp = await QPixel.fetchJSON(`/comments/${id}/delete`, {}, {
       headers: { 'Accept': 'application/json' },
@@ -482,6 +492,16 @@ window.QPixel = {
     return data;
   },
 
+  unfollowComments: async (postId) => {
+    const resp = await QPixel.fetchJSON(`/comments/post/${postId}/unfollow`, {}, {
+      headers: { 'Accept': 'application/json' }
+    });
+
+    const data = await resp.json();
+
+    return data;
+  },
+
   lockThread: async (id) => {
     const resp = await QPixel.fetchJSON(`/comments/thread/${id}/restrict`, {
       type: 'lock'

app/assets/javascripts/qpixel_dom.js

@@ -4,13 +4,6 @@ QPixel.DOM = {
   _delegatedListeners: [],
   _eventListeners: {},
 
-  /**
-   * Add a delegated event listener. Use when an event listener is required that will fire for elements added to the
-   * DOM dynamically after the delegated listener is added.
-   * @param {string} event An event name to listen for.
-   * @param {string} selector A CSS selector representing elements on which to apply the listener.
-   * @param {EventCallback} callback A callback function to pass to the event listener.
-   */
   addDelegatedListener: (event, selector, callback) => {
     if (!QPixel.DOM._eventListeners[event]) {
       const listener = (ev) => {
@@ -26,23 +19,12 @@ QPixel.DOM = {
     QPixel.DOM._delegatedListeners.push({ event, selector, callback });
   },
 
-  /**
-   * Convenience method. Add an event listener to _all_ elements that currently match a selector.
-   * @param {string} event An event name to listen for.
-   * @param {string} selector A CSS selector representing elements on which to apply the listener.
-   * @param {EventCallback} callback A callback function to pass to the event listener.
-   */
   addSelectorListener: (event, selector, callback) => {
     document.querySelectorAll(selector).forEach((el) => {
       el.addEventListener(event, callback);
     });
   },
 
-  /**
-   * Smoothly fade an element out of view, then remove it.
-   * @param {HTMLElement} element The element to fade out.
-   * @param {number} duration A duration for the effect in milliseconds.
-   */
   fadeOut: (element, duration) => {
     element.style.transition = `${duration}ms`;
     element.style.opacity = '0';
@@ -51,12 +33,10 @@ QPixel.DOM = {
     }, duration);
   },
 
-  /**
-   * Helper to set the visibility of an element or array of elements. Uses display: none so should work with screen
-   * readers.
-   * @param {HTMLElement|HTMLElement[]} elements An element or array of elements to set visibility for.
-   * @param {boolean} visible Whether or not the elements should be visible.
-   */
+  isHTMLElement: (node) => {
+    return node instanceof HTMLElement;
+  },
+
   setVisible: (elements, visible) => {
     if (!Array.isArray(elements)) {
       elements = [elements];

app/controllers/comments_controller.rb

@@ -3,7 +3,7 @@ class CommentsController < ApplicationController
   before_action :authenticate_user!, except: [:post, :show, :thread, :thread_content]
 
   before_action :set_comment, only: [:update, :destroy, :undelete, :show]
-  before_action :set_post, only: [:create_thread]
+  before_action :set_post, only: [:create_thread, :post_follow, :post_unfollow]
   before_action :set_thread,
                 only: [:create, :thread, :thread_content, :thread_rename, :thread_restrict, :thread_unrestrict,
                        :thread_followers]
@@ -259,29 +259,33 @@ def thread_unrestrict
 
   def post
     @post = Post.find(params[:post_id])
-    @comment_threads = if current_user&.at_least_moderator? || current_user&.post_privilege?('flag_curate', @post)
-                         CommentThread
-                       else
-                         CommentThread.undeleted
-                       end.where(post: @post).order(deleted: :asc, archived: :asc, reply_count: :desc)
+    @comment_threads = CommentThread.accessible_to(current_user, @post)
+                                    .where(post: @post)
+                                    .order(deleted: :asc, archived: :asc, reply_count: :desc)
     respond_to do |format|
       format.html { render layout: false }
       format.json { render json: @comment_threads }
     end
   end
 
   def post_follow
-    @post = Post.find(params[:post_id])
     if ThreadFollower.where(post: @post, user: current_user).none?
       ThreadFollower.create(post: @post, user: current_user)
     end
-    redirect_to post_path(@post)
+
+    respond_to do |format|
+      format.html { redirect_to post_path(@post) }
+      format.json { render json: { status: 'success' } }
+    end
   end
 
   def post_unfollow
-    @post = Post.find(params[:post_id])
     ThreadFollower.where(post: @post, user: current_user).destroy_all
-    redirect_to post_path(@post)
+
+    respond_to do |format|
+      format.html { redirect_to post_path(@post) }
+      format.json { render json: { status: 'success' } }
+    end
   end
 
   def pingable
@@ -297,7 +301,7 @@ def comment_params
   end
 
   def set_comment
-    @comment = Comment.unscoped.find params[:id]
+    @comment = Comment.unscoped.find(params[:id])
   end
 
   def set_post

app/controllers/notifications_controller.rb

@@ -11,8 +11,9 @@ def index
       format.html { render :index, layout: 'without_sidebar' }
       format.json do
         render json: (@notifications.to_a.map do |notif|
-          notif.as_json.merge(content: helpers.render_pings_text(notif.content))
-        end), methods: :community_name
+          notif.as_json.merge(content: helpers.render_pings_text(notif.content),
+                              community_name: notif.community_name)
+        end)
       end
     end
   end

app/models/comment_thread.rb

@@ -14,6 +14,18 @@ class CommentThread < ApplicationRecord
   validate :maximum_title_length
   validates :title, presence: { message: I18n.t('comments.errors.title_presence') }
 
+  # Gets threads appropriately scoped for a given user & post
+  # @param user [User, nil] user to check
+  # @para post [Post] post to check
+  # @return [ActiveRecord::Relation<CommentThread>]
+  def self.accessible_to(user, post)
+    if user&.at_least_moderator? || user&.post_privilege?('flag_curate', post)
+      CommentThread
+    else
+      CommentThread.undeleted
+    end
+  end
+
   # Is the thread read-only (can't be edited)?
   # @return [Boolean] check result
   def read_only?

app/views/comments/_new_thread.html.erb

@@ -1,11 +1,11 @@
 <%#
-  Renders new comment thread button & modal
+   "Renders new comment thread button & modal
 
-  Variables:
-    post : post to create a new thread for
-    text : text to display on the button
-    user : user that will create a new thread
-%>
+    Variables:
+      post : post to create a new thread for
+      text : text to display on the button
+      user : user that will create a new thread
+"%>
 
 <%
   can_comment = user.can_comment_on?(post)

app/views/comments/_new_thread_modal.html.erb

@@ -43,11 +43,10 @@
                          class: 'form-element js-thread-title-field',
                          data: { post: post.id,
                                  thread: '-1',
-                                 character_count: '.js-character-count-thread-title',
+                                 character_count: ".js-character-count-thread-title-#{post.id}",
                                  markdown: 'strip' } %>
       <%= render 'shared/char_count',
-                 type: 'thread-title',
-                 min: 1,
+                 type: "thread-title-#{post.id}",
                  max: maximum_thread_title_length %>
 
       <%= submit_tag 'Create thread',

app/views/comments/_rename_thread_modal.html.erb

@@ -1,8 +1,8 @@
 <%#
    "Helper for rendering comment thread rename action modal
 
-  Variables:
-    thread : Comment thread to create the modal for
+    Variables:
+      thread : Comment thread to create the modal for
 "%>
 
 <div class="modal is-with-backdrop is-small js--rename-thread-<%= thread.id %>">

app/views/comments/_reply_to_thread.html.erb

@@ -1,13 +1,13 @@
 <%#
-  Renders reply to comment thread button & input
+   "Renders reply to comment thread button & input
 
-  Variables:
-    inline : whether the reply is done via inline thread view
-    post : post the thread is for
-    text : text to display on the button
-    thread : thread to create a reply for
-    user : user that will create a reply to the thread
-%>
+    Variables:
+      inline : whether the reply is done via inline thread view
+      post : post the thread is for
+      text : text to display on the button
+      thread : thread to create a reply for
+      user : user that will create a reply to the thread
+"%>
 
 <%
   # TODO: make configurable