Merge pull request #556 from marcussfu/master

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

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>
  </>
  );