From 9ac65ea69ad6965570d7a7fc60215f8bb376e8c9 Mon Sep 17 00:00:00 2001
From: marcusfu <marcussfu@gmail.com>
Date: Sat, 6 Jan 2024 16:00:34 +0800
Subject: [PATCH 1/3] adjust 'New feedbacks are not shown in reason popup when
 there are too many feedbacks'

---
 .../ArticleReplyFeedbackControl/ReasonsDisplay.js      | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/ArticleReplyFeedbackControl/ReasonsDisplay.js b/components/ArticleReplyFeedbackControl/ReasonsDisplay.js
index 60dcafd7..044d3cd3 100644
--- a/components/ArticleReplyFeedbackControl/ReasonsDisplay.js
+++ b/components/ArticleReplyFeedbackControl/ReasonsDisplay.js
@@ -46,7 +46,7 @@ export const LOAD_FEEDBACKS = gql`
   ) {
     ListArticleReplyFeedbacks(
       filter: { articleId: $articleId, replyId: $replyId, statuses: $statuses }
-      first: 100
+      first: 1000
     ) {
       edges {
         node {
@@ -124,7 +124,9 @@ function ReasonsDisplay({ articleReply, onSizeChange = () => {} }) {
       </Tabs>
       <Box display={tab === 0 ? 'block' : 'none'} className={classes.feedbacks}>
         {feedbacks
-          .filter(({ vote }) => vote === 'UPVOTE')
+          .filter(
+            ({ vote, comment }) => vote === 'UPVOTE' && (comment || '').trim()
+          )
           .map(feedback => (
             <Feedback
               key={feedback.id}
@@ -136,7 +138,9 @@ function ReasonsDisplay({ articleReply, onSizeChange = () => {} }) {
       </Box>
       <Box display={tab === 1 ? 'block' : 'none'} className={classes.feedbacks}>
         {feedbacks
-          .filter(({ vote }) => vote === 'DOWNVOTE')
+          .filter(
+            ({ vote, comment }) => vote === 'DOWNVOTE' && (comment || '').trim()
+          )
           .map(feedback => (
             <Feedback
               key={feedback.id}

From e6ba4f3ed194f13ac9856fc72087841d18295e2d Mon Sep 17 00:00:00 2001
From: marcusfu <marcussfu@gmail.com>
Date: Thu, 29 Feb 2024 04:01:16 +0800
Subject: [PATCH 2/3] adjust 'New feedbacks are not shown in reason popup when
 there are too many feedbacks' new feedback

---
 .../ReasonsDisplay.js                         | 45 ++++++++++++++++---
 1 file changed, 39 insertions(+), 6 deletions(-)

diff --git a/components/ArticleReplyFeedbackControl/ReasonsDisplay.js b/components/ArticleReplyFeedbackControl/ReasonsDisplay.js
index 044d3cd3..7f753582 100644
--- a/components/ArticleReplyFeedbackControl/ReasonsDisplay.js
+++ b/components/ArticleReplyFeedbackControl/ReasonsDisplay.js
@@ -5,6 +5,7 @@ import { useQuery } from '@apollo/react-hooks';
 import { withStyles, makeStyles } from '@material-ui/core/styles';
 import { Box, Tab, Tabs, CircularProgress } from '@material-ui/core';
 import { ThumbUpIcon, ThumbDownIcon } from 'components/icons';
+import { LoadMore } from 'components/ListPageControls';
 import { useIsUserBlocked } from 'lib/isUserBlocked';
 import Feedback from './Feedback';
 
@@ -71,6 +72,8 @@ function ReasonsDisplay({ articleReply, onSizeChange = () => {} }) {
   const classes = useStyles();
   const isUserBlocked = useIsUserBlocked();
   const [tab, setTab] = useState(0);
+  const [isLoadMoreUpvote, setIsLoadMoreUpvote] = useState(false);
+  const [isLoadMoreDownvote, setIsLoadMoreDownvote] = useState(false);
   const { data, loading } = useQuery(LOAD_FEEDBACKS, {
     variables: {
       articleId: articleReply.articleId,
@@ -124,9 +127,15 @@ function ReasonsDisplay({ articleReply, onSizeChange = () => {} }) {
       </Tabs>
       <Box display={tab === 0 ? 'block' : 'none'} className={classes.feedbacks}>
         {feedbacks
-          .filter(
-            ({ vote, comment }) => vote === 'UPVOTE' && (comment || '').trim()
-          )
+          .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 => (
             <Feedback
               key={feedback.id}
@@ -135,12 +144,27 @@ function ReasonsDisplay({ articleReply, onSizeChange = () => {} }) {
               feedback={feedback}
             />
           ))}
+          {feedbacks.length > 10 && !isLoadMoreUpvote &&
+            <LoadMore
+              edges={feedbacks}
+              loading={loading}
+              onMoreRequest={() => {
+                setIsLoadMoreUpvote(true);
+              }}
+            />
+          }
       </Box>
       <Box display={tab === 1 ? 'block' : 'none'} className={classes.feedbacks}>
         {feedbacks
-          .filter(
-            ({ vote, comment }) => vote === 'DOWNVOTE' && (comment || '').trim()
-          )
+          .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 => (
             <Feedback
               key={feedback.id}
@@ -149,6 +173,15 @@ function ReasonsDisplay({ articleReply, onSizeChange = () => {} }) {
               feedback={feedback}
             />
           ))}
+          {feedbacks.length > 10 && !isLoadMoreDownvote &&
+            <LoadMore
+              edges={feedbacks}
+              loading={loading}
+              onMoreRequest={() => {
+                setIsLoadMoreDownvote(true);
+              }}
+            />
+          }
       </Box>
     </>
   );

From 941b1eda84f4d599885aa10cc03f6d64e072522a Mon Sep 17 00:00:00 2001
From: marcusfu <marcussfu@gmail.com>
Date: Thu, 29 Feb 2024 04:07:50 +0800
Subject: [PATCH 3/3] adjust for lint

---
 .../ReasonsDisplay.js                         | 64 ++++++++++---------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/components/ArticleReplyFeedbackControl/ReasonsDisplay.js b/components/ArticleReplyFeedbackControl/ReasonsDisplay.js
index 7f753582..b7d7d695 100644
--- a/components/ArticleReplyFeedbackControl/ReasonsDisplay.js
+++ b/components/ArticleReplyFeedbackControl/ReasonsDisplay.js
@@ -128,14 +128,15 @@ function ReasonsDisplay({ articleReply, onSizeChange = () => {} }) {
       <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;
+          .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))
+          .slice(
+            0,
+            isLoadMoreUpvote ? feedbacks.length : Math.min(feedbacks.length, 10)
+          )
           .map(feedback => (
             <Feedback
               key={feedback.id}
@@ -144,27 +145,30 @@ function ReasonsDisplay({ articleReply, onSizeChange = () => {} }) {
               feedback={feedback}
             />
           ))}
-          {feedbacks.length > 10 && !isLoadMoreUpvote &&
-            <LoadMore
-              edges={feedbacks}
-              loading={loading}
-              onMoreRequest={() => {
-                setIsLoadMoreUpvote(true);
-              }}
-            />
-          }
+        {feedbacks.length > 10 && !isLoadMoreUpvote && (
+          <LoadMore
+            edges={feedbacks}
+            loading={loading}
+            onMoreRequest={() => {
+              setIsLoadMoreUpvote(true);
+            }}
+          />
+        )}
       </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;
+          .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))
+          .slice(
+            0,
+            isLoadMoreDownvote
+              ? feedbacks.length
+              : Math.min(feedbacks.length, 10)
+          )
           .map(feedback => (
             <Feedback
               key={feedback.id}
@@ -173,15 +177,15 @@ function ReasonsDisplay({ articleReply, onSizeChange = () => {} }) {
               feedback={feedback}
             />
           ))}
-          {feedbacks.length > 10 && !isLoadMoreDownvote &&
-            <LoadMore
-              edges={feedbacks}
-              loading={loading}
-              onMoreRequest={() => {
-                setIsLoadMoreDownvote(true);
-              }}
-            />
-          }
+        {feedbacks.length > 10 && !isLoadMoreDownvote && (
+          <LoadMore
+            edges={feedbacks}
+            loading={loading}
+            onMoreRequest={() => {
+              setIsLoadMoreDownvote(true);
+            }}
+          />
+        )}
       </Box>
     </>
   );