add comments behavior

assets/js/comment.js

@@ -58,8 +58,7 @@ function loadParentPost(event) {
     // If the regex matched, get the image and comment ID
     const [ , imageId, commentId ] = commentMatches;
 
-    // Use .html because the default response is JSON
-    fetchHtml(`/images/${imageId}/comments/${commentId}.html`)
+    fetchHtml(`/images/${imageId}/comments/${commentId}`)
       .then(handleError)
       .then(data => {
         clearParentPost(clickedLink, fullComment);

lib/philomena/users/ability.ex

@@ -1,5 +1,6 @@
 defimpl Canada.Can, for: [Atom, Philomena.Users.User] do
   alias Philomena.Users.User
+  alias Philomena.Comments.Comment
   alias Philomena.Images.Image
   alias Philomena.Forums.Forum
   alias Philomena.Topics.Topic
@@ -18,6 +19,9 @@ defimpl Canada.Can, for: [Atom, Philomena.Users.User] do
   # View images
   def can?(%User{role: "moderator"}, :show, %Image{}), do: true
 
+  # View comments
+  def can?(%User{role: "moderator"}, :show, %Comment{}), do: true
+
   # View forums
   def can?(%User{role: "moderator"}, :show, %Forum{access_level: level})
     when level in ["normal", "assistant", "staff"], do: true
@@ -48,7 +52,12 @@ defimpl Canada.Can, for: [Atom, Philomena.Users.User] do
       when action in [:new, :create, :index],
       do: true
 
-  def can?(_user, :show, %Image{hidden_from_users: false}), do: true
+  def can?(_user, action, %Image{hidden_from_users: false})
+      when action in [:show, :index],
+      do: true
+
+  # View non-deleted comments
+  def can?(_user, :show, %Comment{hidden_from_users: false}), do: true
 
   # View forums
   def can?(_user, :show, %Forum{access_level: "normal"}), do: true

lib/philomena_web/controllers/image/comment_controller.ex

@@ -0,0 +1,33 @@
+defmodule PhilomenaWeb.Image.CommentController do
+  use PhilomenaWeb, :controller
+
+  alias Philomena.{Images.Image, Comments.Comment, Textile.Renderer}
+  alias Philomena.Repo
+  import Ecto.Query
+
+  plug :load_and_authorize_resource, model: Image, id_name: "image_id", persisted: true
+  plug :load_and_authorize_resource, model: Comment, only: [:show], preload: [:image, :user]
+
+  def index(conn, _params) do
+    comments =
+      Comment
+      |> where(image_id: ^conn.assigns.image.id)
+      |> order_by(desc: :created_at)
+      |> preload([:image, :user])
+      |> Repo.paginate(conn.assigns.scrivener)
+
+    rendered =
+      comments.entries
+      |> Renderer.render_collection()
+
+    comments =
+      %{comments | entries: Enum.zip(comments.entries, rendered)}
+
+    render(conn, "index.html", layout: false, image: conn.assigns.image, comments: comments)
+  end
+
+  def show(conn, _params) do
+    rendered = Renderer.render_one(conn.assigns.comment)
+    render(conn, "show.html", layout: false, image: conn.assigns.image, comment: conn.assigns.comment, body: rendered)
+  end
+end

lib/philomena_web/controllers/image_controller.ex

@@ -30,14 +30,14 @@ defmodule PhilomenaWeb.ImageController do
       |> preload([:user, :image])
       |> order_by(desc: :created_at)
       |> limit(25)
-      |> Repo.all()
+      |> Repo.paginate(conn.assigns.scrivener)
 
     rendered =
-      comments
+      comments.entries
       |> Renderer.render_collection()
 
     comments =
-      Enum.zip(comments, rendered)
+      %{comments | entries: Enum.zip(comments.entries, rendered)}
 
     description =
       %{body: conn.assigns.image.description}

lib/philomena_web/router.ex

@@ -28,7 +28,9 @@ defmodule PhilomenaWeb.Router do
     get "/", ActivityController, :index
 
     resources "/activity", ActivityController, only: [:index]
-    resources "/images", ImageController, only: [:index, :show]
+    resources "/images", ImageController, only: [:index, :show] do
+      resources "/comments", Image.CommentController, only: [:index, :show]
+    end
     resources "/tags", TagController, only: [:index, :show]
     resources "/search", SearchController, only: [:index]
     resources "/forums", ForumController, only: [:index, :show] do

lib/philomena_web/templates/image/comment/index.html.slime

@@ -0,0 +1,20 @@
+elixir:
+  route = fn p -> Routes.image_comment_path(@conn, :index, @image, p) end
+  pagination = render PhilomenaWeb.PaginationView, "_pagination.html", page: @comments, route: route
+
+.block
+  .block__header
+    =<> pagination
+    span.block__header__title
+      =<> @image.comments_count
+      => pluralize("comment", "comments", @image.comments_count)
+      ' posted
+    button.button#js-refresh-comments title="Refresh" data-disable-with="..."
+      span.hide-mobile<> Refresh
+
+= for {comment, body} <- @comments do
+  = render PhilomenaWeb.CommentView, "_comment.html", comment: comment, body: body, conn: @conn
+
+.block
+  .block__header.block__header--light
+    = pagination

lib/philomena_web/templates/image/comment/show.html.slime

@@ -0,0 +1 @@
+= render PhilomenaWeb.CommentView, "_comment.html", comment: @comment, body: @body, conn: @conn

lib/philomena_web/templates/image/show.html.slime

@@ -19,6 +19,5 @@
         em> no source provided yet
 
   h4 Comments
-  #comments data-current-url="" data-loaded="true"
-    = for {comment, body} <- @comments do
-      = render PhilomenaWeb.CommentView, "_comment.html", comment: comment, body: body, conn: @conn
+  #comments data-current-url=Routes.image_comment_path(@conn, :index, @image, page: 1) data-loaded="true"
+    = render PhilomenaWeb.Image.CommentView, "index.html", image: @image, comments: @comments, conn: @conn

lib/philomena_web/views/image/comment_view.ex

@@ -0,0 +1,3 @@
+defmodule PhilomenaWeb.Image.CommentView do
+  use PhilomenaWeb, :view
+end