Merge pull request #556 from marcussfu/master

adjust 'New feedbacks are not shown in reason popup when there are too many feedbacks'

Author: MrOrz

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';
 
@@ -46,7 +47,7 @@ export const LOAD_FEEDBACKS = gql`
   ) {
     ListArticleReplyFeedbacks(
       filter: { articleId: $articleId, replyId: $replyId, statuses: $statuses }
-      first: 100
+      first: 1000
     ) {
       edges {
         node {
@@ -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,
@@ -125,6 +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;
+            return 0;
+          })
+          .slice(
+            0,
+            isLoadMoreUpvote ? feedbacks.length : Math.min(feedbacks.length, 10)
+          )
           .map(feedback => (
             <Feedback
               key={feedback.id}
@@ -133,10 +145,30 @@ 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 }) => 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}
@@ -145,6 +177,15 @@ function ReasonsDisplay({ articleReply, onSizeChange = () => {} }) {
               feedback={feedback}
             />
           ))}
+        {feedbacks.length > 10 && !isLoadMoreDownvote && (
+          <LoadMore
+            edges={feedbacks}
+            loading={loading}
+            onMoreRequest={() => {
+              setIsLoadMoreDownvote(true);
+            }}
+          />
+        )}
       </Box>
     </>
   );