Add sorting option for comments

Add sorting and pagination support for comments, including new API query parameters for sort order and offset. Adjust comment fetching logic accordingly.

Closes isso-comments#4

CHANGES.rst

@@ -12,12 +12,14 @@ New Features
 - Add search for comments by URL in the admin interface (`#1000`_, pkvach)
 - Add CSS variables for better organization and flexibility (`#1001`_, pkvach)
 - Add support for comment search by Thread URL in admin interface (`#1020`_, pkvach)
+- Add sorting option for comments (`#1005`_, pkvach)
 
 .. _#966: https://github.com/posativ/isso/pull/966
 .. _#998: https://github.com/isso-comments/isso/pull/998
 .. _#1000: https://github.com/isso-comments/isso/pull/1000
 .. _#1001: https://github.com/isso-comments/isso/pull/1001
 .. _#1020: https://github.com/isso-comments/isso/pull/1020
+.. _#1005: https://github.com/isso-comments/isso/pull/1005
 
 Breaking Changes
 ^^^^^^^^^^^^^^^^

docs/docs/reference/client-config.rst

@@ -13,6 +13,7 @@ preferably in the script tag which embeds the JS:
             data-isso-max-comments-top="10"
             data-isso-max-comments-nested="5"
             data-isso-reveal-on-click="5"
+            data-isso-sorting="newest"
             data-isso-avatar="true"
             data-isso-avatar-bg="#f0f0f0"
             data-isso-avatar-fg="#9abf88 #5698c4 #e279a3 #9163b6 ..."
@@ -255,6 +256,21 @@ data-isso-reply-notifications-default-enabled
     .. versionadded:: 0.13
 
 
+.. _data-isso-sorting:
+
+data-isso-sorting
+    Sort thread comments by specified sorting method.
+
+    Possible sorting methods:
+
+    - ``newest``: Bring newest comments to the top
+    - ``oldest``: Bring oldest comments to the top
+    - ``upvotes``: Bring most liked comments to the top
+
+    Default sorting is ``oldest``.
+
+    .. versionadded:: 0.13.1
+
 Deprecated Client Settings
 --------------------------
 

isso/db/comments.py

@@ -238,11 +238,11 @@ def fetchall(self, mode=5, after=0, parent='any', order_by='id',
             yield dict(zip(fields_comments + fields_threads, item))
 
     def fetch(self, uri, mode=5, after=0, parent='any',
-              order_by='id', asc=1, limit=None):
+              order_by='id', asc=1, limit=None, offset=0):
         """
         Return comments for :param:`uri` with :param:`mode`.
         """
-        sql = ['SELECT comments.* FROM comments INNER JOIN threads ON',
+        sql = ['SELECT comments.*, likes - dislikes AS karma FROM comments INNER JOIN threads ON',
                '    threads.uri=? AND comments.tid=threads.id AND (? | comments.mode) = ?',
                '    AND comments.created>?']
 
@@ -256,14 +256,18 @@ def fetch(self, uri, mode=5, after=0, parent='any',
                 sql_args.append(parent)
 
         # custom sanitization
-        if order_by not in ['id', 'created', 'modified', 'likes', 'dislikes']:
+        if order_by not in ['id', 'created', 'modified', 'likes', 'dislikes', 'karma']:
             order_by = 'id'
         sql.append('ORDER BY ')
         sql.append(order_by)
         if not asc:
             sql.append(' DESC')
 
-        if limit:
+        if offset and limit:
+            sql.append('LIMIT ?,?')
+            sql_args.append(offset)
+            sql_args.append(limit)
+        elif limit:
             sql.append('LIMIT ?')
             sql_args.append(limit)
 
@@ -350,19 +354,18 @@ def vote(self, upvote, id, remote_addr):
             return {'likes': likes + 1, 'dislikes': dislikes}
         return {'likes': likes, 'dislikes': dislikes + 1}
 
-    def reply_count(self, url, mode=5, after=0):
+    def reply_count(self, url, mode=5):
         """
         Return comment count for main thread and all reply threads for one url.
         """
 
         sql = ['SELECT comments.parent,count(*)',
                'FROM comments INNER JOIN threads ON',
                '   threads.uri=? AND comments.tid=threads.id AND',
-               '   (? | comments.mode = ?) AND',
-               '   comments.created > ?',
+               '   (? | comments.mode = ?)',
                'GROUP BY comments.parent']
 
-        return dict(self.db.execute(sql, [url, mode, mode, after]).fetchall())
+        return dict(self.db.execute(sql, [url, mode, mode]).fetchall())
 
     def count(self, *urls):
         """

isso/js/app/api.js

@@ -138,17 +138,13 @@ var view = function(id, plain) {
     return deferred.promise;
 };
 
-var fetch = function(tid, limit, nested_limit, parent, lastcreated) {
-    if (typeof(limit) === 'undefined') { limit = "inf"; }
-    if (typeof(nested_limit) === 'undefined') { nested_limit = "inf"; }
-    if (typeof(parent) === 'undefined') { parent = null; }
+var fetch = function({ tid, limit = "inf", nested_limit = "inf", parent = null, sort = "", offset = 0 }) {
+    var query_dict = { uri: tid || location(), sort, parent, offset };
 
-    var query_dict = {uri: tid || location(), after: lastcreated, parent: parent};
-
-    if(limit !== "inf") {
+    if (limit !== "inf") {
         query_dict['limit'] = limit;
     }
-    if(nested_limit !== "inf"){
+    if (nested_limit !== "inf") {
         query_dict['nested_limit'] = nested_limit;
     }
 

isso/js/app/default_config.js

@@ -13,6 +13,7 @@ var default_config = {
     "max-comments-top": "inf",
     "max-comments-nested": 5,
     "reveal-on-click": 5,
+    "sorting": "oldest",
     "gravatar": false,
     "avatar": true,
     "avatar-bg": "#f0f0f0",

isso/js/app/isso.js

@@ -114,7 +114,7 @@ var Postbox = function(parent) {
             notification: $("[name=notification]", el).checked() ? 1 : 0,
         }).then(function(comment) {
             $(".isso-textarea", el).value = "";
-            insert(comment, true);
+            insert({ comment, scrollIntoView: true, offset: 0 });
 
             if (parent !== null) {
                 el.onsuccess();
@@ -125,7 +125,7 @@ var Postbox = function(parent) {
     return el;
 };
 
-var insert_loader = function(comment, lastcreated) {
+var insert_loader = function(comment, offset) {
     var entrypoint;
     if (comment.id === null) {
         entrypoint = $("#isso-root");
@@ -140,34 +140,37 @@ var insert_loader = function(comment, lastcreated) {
 
     $("a.isso-load-hidden", el).on("click", function() {
         el.remove();
-        api.fetch($("#isso-thread").getAttribute("data-isso-id"),
-            config["reveal-on-click"], config["max-comments-nested"],
-            comment.id,
-            lastcreated).then(
+
+        api.fetch({
+            tid: $("#isso-thread").getAttribute("data-isso-id"),
+            limit: config["reveal-on-click"],
+            nested_limit: config["max-comments-nested"],
+            parent: comment.id,
+            sort: config["sorting"],
+            offset: offset
+        }).then(
             function(rv) {
                 if (rv.total_replies === 0) {
                     return;
                 }
 
-                var lastcreated = 0;
                 rv.replies.forEach(function(commentObject) {
-                    insert(commentObject, false);
-                    if(commentObject.created > lastcreated) {
-                        lastcreated = commentObject.created;
-                    }
+                    insert({ comment: commentObject, scrollIntoView: false, offset: 0 });
+
                 });
 
                 if(rv.hidden_replies > 0) {
-                    insert_loader(rv, lastcreated);
+                    insert_loader(rv, offset + rv.replies.length);
                 }
             },
             function(err) {
                 console.log(err);
-            });
+            }
+        );
     });
 };
 
-var insert = function(comment, scrollIntoView) {
+var insert = function({ comment, scrollIntoView, offset }) {
     var el = $.htmlify(template.render("comment", {"comment": comment}));
 
     // update datetime every 60 seconds
@@ -381,19 +384,13 @@ var insert = function(comment, scrollIntoView) {
         show($("a.isso-reply", footer).detach());
     }
 
-    if(comment.hasOwnProperty('replies')) {
-        var lastcreated = 0;
-        comment.replies.forEach(function(replyObject) {
-            insert(replyObject, false);
-            if(replyObject.created > lastcreated) {
-                lastcreated = replyObject.created;
-            }
-
+    if (comment.hasOwnProperty('replies')) {
+        comment.replies.forEach(function (replyObject) {
+            insert({ comment: replyObject, scrollIntoView: false, offset: offset + 1 });
         });
-        if(comment.hidden_replies > 0) {
-            insert_loader(comment, lastcreated);
+        if (comment.hidden_replies > 0) {
+            insert_loader(comment, offset + comment.replies.length);
         }
-
     }
 
 };

isso/js/embed.js

@@ -122,28 +122,30 @@ function fetchComments() {
     }
     isso_root.textContent = '';
 
-    api.fetch(isso_thread.getAttribute("data-isso-id") || location.pathname,
-        config["max-comments-top"],
-        config["max-comments-nested"]).then(
+
+    api.fetch({
+        tid: isso_thread.getAttribute("data-isso-id") || location.pathname,
+        limit: config["max-comments-top"],
+        nested_limit: config["max-comments-nested"],
+        parent: null,
+        sort: config["sorting"],
+        offset: 0
+    }).then(
         function (rv) {
 
             if (rv.total_replies === 0) {
                 heading.textContent = i18n.translate("no-comments");
                 return;
             }
 
-            var lastcreated = 0;
             var count = rv.total_replies;
             rv.replies.forEach(function(comment) {
-                isso.insert(comment, false);
-                if (comment.created > lastcreated) {
-                    lastcreated = comment.created;
-                }
+                isso.insert({ comment: comment, scrollIntoView: false, offset: 0 });
             });
             heading.textContent = i18n.pluralize("num-comments", count);
 
             if (rv.hidden_replies > 0) {
-                isso.insert_loader(rv, lastcreated);
+                isso.insert_loader(rv, rv.replies.length);
             }
 
             if (window.location.hash.length > 0 &&

isso/js/tests/unit/comment.test.js

@@ -58,7 +58,7 @@ test('Rendered comment should match snapshot', () => {
   var isso_thread = $('#isso-thread');
   isso_thread.append('<div id="isso-root"></div>');
 
-  isso.insert(comment, false);
+  isso.insert({ comment, scrollIntoView: false, offset: 0 });
 
   // Will create a `.snap` file in `./__snapshots__/`.
   // Don't forget to check in those files when changing anything!