fix: sort comments

Author: pacexy

src/App.tsx

@@ -63,48 +63,50 @@ const CommentTree: React.FC<CommentProps> = ({ comments, sub = false }) => {
   if (!comments) return null
   return (
     <ul>
-      {comments.map((comment) => (
-        <li
-          key={comment.rpid}
-          className='comment-item'
-          style={{
-            marginTop: sub ? '10px' : '20px',
-          }}
-        >
-          <img
-            src={comment.member.avatar}
-            className='comment-item-avatar'
-            style={{
-              width: sub ? '28px' : '40px',
-              height: sub ? '28px' : '40px',
-            }}
-          />
-          <div
-            className='comment-item-content'
+      {comments
+        .sort((c1, c2) => c1.ctime - c2.ctime)
+        .map((comment) => (
+          <li
+            key={comment.rpid}
+            className='comment-item'
             style={{
-              ...(!sub && {
-                display: 'flex',
-                flexDirection: 'column',
-              }),
+              marginTop: sub ? '10px' : '20px',
             }}
           >
-            <span className='comment-item-username'>
-              {comment.member.uname}
-            </span>
-            <Highlighter
-              className='comment-item-message'
-              highlightClassName='comment-item-highlight'
-              searchWords={[keyword]}
-              autoEscape={true}
-              textToHighlight={comment.content.message}
+            <img
+              src={comment.member.avatar}
+              className='comment-item-avatar'
+              style={{
+                width: sub ? '28px' : '40px',
+                height: sub ? '28px' : '40px',
+              }}
             />
-            <div className='comment-item-time'>
-              {formatDateTime(comment.ctime)}
+            <div
+              className='comment-item-content'
+              style={{
+                ...(!sub && {
+                  display: 'flex',
+                  flexDirection: 'column',
+                }),
+              }}
+            >
+              <span className='comment-item-username'>
+                {comment.member.uname}
+              </span>
+              <Highlighter
+                className='comment-item-message'
+                highlightClassName='comment-item-highlight'
+                searchWords={[keyword]}
+                autoEscape={true}
+                textToHighlight={comment.content.message}
+              />
+              <div className='comment-item-time'>
+                {formatDateTime(comment.ctime)}
+              </div>
+              <CommentTree comments={comment.replies} sub />
             </div>
-            <CommentTree comments={comment.replies} sub />
-          </div>
-        </li>
-      ))}
+          </li>
+        ))}
     </ul>
   )
 }