comments

cms/version.py

@@ -1 +1 @@
-VERSION = "8.1.3"
+VERSION = "8.1.4"

frontend/src/static/js/components/comments/Comments.jsx

@@ -392,7 +392,7 @@ function displayCommentsRelatedAlert() {
   }
 }
 
-const CommentsListHeader = ({ commentsLength }) => {
+const CommentsListHeader = ({ commentsLength, ordering, onToggleOrdering }) => {
   return (
     <>
       {!MemberContext._currentValue.can.readComment || MediaPageStore.get('media-data').enable_comments ? null : (
@@ -409,12 +409,30 @@ const CommentsListHeader = ({ commentsLength }) => {
             : MediaPageStore.get('media-data').enable_comments
             ? translateString('No') + ' ' + commentsText.single + ' ' + translateString('yet')
             : ''}
+          {commentsLength > 0 && (
+            <button className="comments-order-toggle" onClick={onToggleOrdering}>
+              <span className="material-icons">swap_vert</span>
+              <span className="comments-order-label">
+                {ordering === 'newest' ? translateString('Newest first') : translateString('Oldest first')}
+              </span>
+            </button>
+          )}
         </h2>
       ) : null}
     </>
   );
 };
 
+function getSortedComments(comments, ordering) {
+  const sorted = [...comments];
+  sorted.sort((a, b) => {
+    const da = new Date(a.add_date);
+    const db = new Date(b.add_date);
+    return ordering === 'newest' ? db - da : da - db;
+  });
+  return sorted;
+}
+
 export default function CommentsList(props) {
   const [mediaId, setMediaId] = useState(MediaPageStore.get('media-id'));
 
@@ -424,6 +442,12 @@ export default function CommentsList(props) {
 
   const [displayComments, setDisplayComments] = useState(false);
 
+  const [ordering, setOrdering] = useState('newest');
+
+  function toggleOrdering() {
+    setOrdering((o) => (o === 'newest' ? 'oldest' : 'newest'));
+  }
+
   function onCommentsLoad() {
     const retrievedComments = [...MediaPageStore.get('media-comments')];
 
@@ -512,12 +536,12 @@ export default function CommentsList(props) {
   return (
     <div className="comments-list">
       <div className="comments-list-inner">
-        <CommentsListHeader commentsLength={comments.length} />
+        <CommentsListHeader commentsLength={comments.length} ordering={ordering} onToggleOrdering={toggleOrdering} />
 
         {MediaPageStore.get('media-data').enable_comments ? <CommentForm media_id={mediaId} /> : null}
 
         {displayComments
-          ? comments.map((c) => {
+          ? getSortedComments(comments, ordering).map((c) => {
               return (
                 <Comment
                   key={c.uid}

frontend/src/static/js/components/comments/Comments.scss

@@ -277,6 +277,39 @@
     margin: 0 2rem 1.5rem 0;
   }
 
+  .comments-order-toggle {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    gap: 2px;
+    background: none;
+    border: 0;
+    padding: 2px 8px;
+    margin-left: 8px;
+    cursor: pointer;
+    opacity: 0.6;
+    border-radius: 4px;
+    transition: opacity 0.15s, background-color 0.15s;
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+      background-color: rgba(128, 128, 128, 0.12);
+      outline: none;
+    }
+
+    .material-icons {
+      font-size: 18px;
+      line-height: 1;
+    }
+
+    .comments-order-label {
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 1;
+    }
+  }
+
   .disabled-comments-msg {
     display: block;
     text-align: center;

frontend/src/static/js/utils/stores/MediaPageStore.js

@@ -887,7 +887,7 @@ class MediaPageStore extends EventEmitter {
 
   submitCommentResponse(response) {
     if (response && 201 === response.status && response.data && Object.keys(response.data)) {
-      MediaPageStoreData[this.id].comments.push(response.data);
+      MediaPageStoreData[this.id].comments.unshift(response.data);
       this.emit('comment_submit', response.data.uid);
     }
     setTimeout(