From 680c0858c0e61b0a578a8d023d86356ba03998e9 Mon Sep 17 00:00:00 2001
From: belong112 <b05901159@ntu.edu.tw>
Date: Sat, 23 Nov 2024 15:13:31 +0800
Subject: [PATCH 1/2] fix: adjust empty comment judgment method & extract
 shared function

---
 .../ReasonsDisplay.js                         | 48 ++++++++-----------
 1 file changed, 20 insertions(+), 28 deletions(-)

diff --git a/components/ArticleReplyFeedbackControl/ReasonsDisplay.js b/components/ArticleReplyFeedbackControl/ReasonsDisplay.js
index b7d7d695..4ba4b88a 100644
--- a/components/ArticleReplyFeedbackControl/ReasonsDisplay.js
+++ b/components/ArticleReplyFeedbackControl/ReasonsDisplay.js
@@ -95,9 +95,21 @@ function ReasonsDisplay({ articleReply, onSizeChange = () => {} }) {
     if (onSizeChange) return onSizeChange();
   }, [tab, onSizeChange]);
 
+  const IsEmptyComment = comment => comment === '' || comment === null;
+
   const feedbacks =
     data?.ListArticleReplyFeedbacks?.edges.map(({ node }) => node) || [];
 
+  const processedFeedbacks = (feedbacks, voteType, isLoadMore) =>
+    feedbacks
+      .filter(({ vote }) => vote === voteType)
+      .sort((a, b) => {
+        if (IsEmptyComment(a.comment)) return 1;
+        else if (IsEmptyComment(b.comment)) return -1;
+        return 0;
+      })
+      .slice(0, isLoadMore ? feedbacks.length : Math.min(feedbacks.length, 10));
+
   if (loading) {
     return (
       <Box textAlign="center">
@@ -126,25 +138,16 @@ function ReasonsDisplay({ articleReply, onSizeChange = () => {} }) {
         />
       </Tabs>
       <Box display={tab === 0 ? 'block' : 'none'} className={classes.feedbacks}>
-        {feedbacks
-          .filter(({ vote }) => vote === 'UPVOTE')
-          .sort((a, b) => {
-            if (a.comment === '') return 1;
-            else if (b.comment === '') return -1;
-            return 0;
-          })
-          .slice(
-            0,
-            isLoadMoreUpvote ? feedbacks.length : Math.min(feedbacks.length, 10)
-          )
-          .map(feedback => (
+        {processedFeedbacks(feedbacks, 'UPVOTE', isLoadMoreUpvote).map(
+          feedback => (
             <Feedback
               key={feedback.id}
               articleId={articleReply.articleId}
               replyId={articleReply.replyId}
               feedback={feedback}
             />
-          ))}
+          )
+        )}
         {feedbacks.length > 10 && !isLoadMoreUpvote && (
           <LoadMore
             edges={feedbacks}
@@ -156,27 +159,16 @@ function ReasonsDisplay({ articleReply, onSizeChange = () => {} }) {
         )}
       </Box>
       <Box display={tab === 1 ? 'block' : 'none'} className={classes.feedbacks}>
-        {feedbacks
-          .filter(({ vote }) => vote === 'DOWNVOTE')
-          .sort((a, b) => {
-            if (a.comment === '') return 1;
-            else if (b.comment === '') return -1;
-            return 0;
-          })
-          .slice(
-            0,
-            isLoadMoreDownvote
-              ? feedbacks.length
-              : Math.min(feedbacks.length, 10)
-          )
-          .map(feedback => (
+        {processedFeedbacks(feedbacks, 'DOWNVOTE', isLoadMoreDownvote).map(
+          feedback => (
             <Feedback
               key={feedback.id}
               articleId={articleReply.articleId}
               replyId={articleReply.replyId}
               feedback={feedback}
             />
-          ))}
+          )
+        )}
         {feedbacks.length > 10 && !isLoadMoreDownvote && (
           <LoadMore
             edges={feedbacks}

From 3ab9495664742226b1e920add6adb2f14072eed5 Mon Sep 17 00:00:00 2001
From: belong112 <b05901159@ntu.edu.tw>
Date: Sun, 24 Nov 2024 00:01:19 +0800
Subject: [PATCH 2/2] fix: move processor function outside of the component &
 sort feedbacks using create time

---
 .../ReasonsDisplay.js                         | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/components/ArticleReplyFeedbackControl/ReasonsDisplay.js b/components/ArticleReplyFeedbackControl/ReasonsDisplay.js
index 4ba4b88a..5cdd5b2f 100644
--- a/components/ArticleReplyFeedbackControl/ReasonsDisplay.js
+++ b/components/ArticleReplyFeedbackControl/ReasonsDisplay.js
@@ -53,6 +53,7 @@ export const LOAD_FEEDBACKS = gql`
         node {
           id
           vote
+          createdAt
           user {
             id
           }
@@ -68,6 +69,21 @@ export const LOAD_FEEDBACKS = gql`
   ${Feedback.fragments.ReasonDisplayFeedbackData}
 `;
 
+function isEmptyComment(comment) {
+  return comment === '' || comment === null;
+}
+
+function processedFeedbacks(feedbacks, voteType, isLoadMore) {
+  return feedbacks
+    .filter(({ vote }) => vote === voteType)
+    .sort(
+      (a, b) =>
+        isEmptyComment(b.comment) - isEmptyComment(a.comment) ||
+        b.createdAt.localeCompare(a.createdAt)
+    )
+    .slice(0, isLoadMore ? feedbacks.length : Math.min(feedbacks.length, 10));
+}
+
 function ReasonsDisplay({ articleReply, onSizeChange = () => {} }) {
   const classes = useStyles();
   const isUserBlocked = useIsUserBlocked();
@@ -95,21 +111,9 @@ function ReasonsDisplay({ articleReply, onSizeChange = () => {} }) {
     if (onSizeChange) return onSizeChange();
   }, [tab, onSizeChange]);
 
-  const IsEmptyComment = comment => comment === '' || comment === null;
-
   const feedbacks =
     data?.ListArticleReplyFeedbacks?.edges.map(({ node }) => node) || [];
 
-  const processedFeedbacks = (feedbacks, voteType, isLoadMore) =>
-    feedbacks
-      .filter(({ vote }) => vote === voteType)
-      .sort((a, b) => {
-        if (IsEmptyComment(a.comment)) return 1;
-        else if (IsEmptyComment(b.comment)) return -1;
-        return 0;
-      })
-      .slice(0, isLoadMore ? feedbacks.length : Math.min(feedbacks.length, 10));
-
   if (loading) {
     return (
       <Box textAlign="center">