<commit_before>import React, { useState } from 'react';
import { t } from 'ttag';
import { useQuery, gql } from '@apollo/client';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import { Box, Tab, Tabs, CircularProgress } from '@material-ui/core';
import { ThumbUpIcon, ThumbDownIcon } from 'components/icons';
import Feedback from './Feedback';

const useStyles = makeStyles(() => ({
  feedbacks: {
    marginTop: 16,
    maxHeight: 300,
    overflow: 'auto',
  },
}));

const CustomTab = withStyles({
  root: {
    position: 'relative',
    minHeight: 0,
  },
  wrapper: {
    '& > svg': {
      position: 'absolute',
      left: 0,
    },
  },
})(Tab);

const ReasonsDisplayData = gql`
  fragment ReasonsDisplayData on ArticleReply {
    articleId
    replyId
    reply {
      text
    }
    positiveFeedbackCount
    negativeFeedbackCount
  }
`;

const LOAD_FEEDBACKS = gql`
  query LoadFeadbacksForArticleReply($articleId: String!, $replyId: String!) {
    ListArticleReplyFeedbacks(
      filter: { articleId: $articleId, replyId: $replyId }
      first: 100
    ) {
      edges {
        node {
          id
          vote
          user {
            id
          }
          ...ReasonDisplayFeedbackData
        }
      }
    }
  }
  ${Feedback.fragments.ReasonDisplayFeedbackData}
`;

function ReasonsDisplay({ articleReply }) {
  const classes = useStyles();
  const [tab, setTab] = useState(0);
  const { data, loading } = useQuery(LOAD_FEEDBACKS, {
    variables: {
      articleId: articleReply.articleId,
      replyId: articleReply.replyId,
    },
    ssr: false,
  });

  const feedbacks =
    data?.ListArticleReplyFeedbacks.edges.map(({ node }) => node) || [];

  return (
    <>
      {articleReply.reply.text}
      <Tabs
        value={tab}
        onChange={(e, value) => setTab(value)}
        indicatorColor="primary"
        textColor="primary"
        variant="fullWidth"
      >
        <CustomTab
          icon={<ThumbUpIcon />}
          label={t`Helpful ${articleReply.positiveFeedbackCount}`}
        />
        <CustomTab
          icon={<ThumbDownIcon />}
          label={t`Not Helpful ${articleReply.negativeFeedbackCount}`}
        />
      </Tabs>
      {loading ? (
        <CircularProgress />
      ) : (
        <>
          <Box
            display={tab === 0 ? 'block' : 'none'}
            className={classes.feedbacks}
          >
            {feedbacks
              .filter(({ vote, user }) => vote === 'UPVOTE' && user)
              .map(feedback => (
                <Feedback key={feedback.id} feedback={feedback} />
              ))}
          </Box>
          <Box
            display={tab === 1 ? 'block' : 'none'}
            className={classes.feedbacks}
          >
            {feedbacks
              .filter(({ vote, user }) => vote === 'DOWNVOTE' && user)
              .map(feedback => (
                <Feedback key={feedback.id} feedback={feedback} />
              ))}
          </Box>
        </>
      )}<commit_msg>Load reply and handle loading state in ReasonsDisplay<commit_after>import React, { useState } from 'react';
import { t } from 'ttag';
import { useQuery, gql } from '@apollo/client';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import { Box, Tab, Tabs, CircularProgress } from '@material-ui/core';
import { ThumbUpIcon, ThumbDownIcon } from 'components/icons';
import Feedback from './Feedback';

const useStyles = makeStyles(() => ({
  feedbacks: {
    marginTop: 16,
    maxHeight: 300,
    overflow: 'auto',
  },
}));

const CustomTab = withStyles({
  root: {
    position: 'relative',
    minHeight: 0,
  },
  wrapper: {
    '& > svg': {
      position: 'absolute',
      left: 0,
    },
  },
})(Tab);

const ReasonsDisplayData = gql`
  fragment ReasonsDisplayData on ArticleReply {
    articleId
    replyId
    positiveFeedbackCount
    negativeFeedbackCount
  }
`;

const LOAD_FEEDBACKS = gql`
  query LoadFeadbacksForArticleReply($articleId: String!, $replyId: String!) {
    ListArticleReplyFeedbacks(
      filter: { articleId: $articleId, replyId: $replyId }
      first: 100
    ) {
      edges {
        node {
          id
          vote
          user {
            id
          }
          ...ReasonDisplayFeedbackData
        }
      }
    }
    GetReply(id: $replyId) {
      id
      text
    }
  }
  ${Feedback.fragments.ReasonDisplayFeedbackData}
`;

function ReasonsDisplay({ articleReply }) {
  const classes = useStyles();
  const [tab, setTab] = useState(0);
  const { data, loading } = useQuery(LOAD_FEEDBACKS, {
    variables: {
      articleId: articleReply.articleId,
      replyId: articleReply.replyId,
    },
    ssr: false,
  });

  const feedbacks =
    data?.ListArticleReplyFeedbacks.edges.map(({ node }) => node) || [];

  if (loading) {
    return (
      <Box textAlign="center">
        <CircularProgress />
      </Box>
    );
  }

  return (
    <>
      {data?.GetReply.text}
      <Tabs
        value={tab}
        onChange={(e, value) => setTab(value)}
        indicatorColor="primary"
        textColor="primary"
        variant="fullWidth"
      >
        <CustomTab
          icon={<ThumbUpIcon />}
          label={t`Helpful ${articleReply.positiveFeedbackCount}`}
        />
        <CustomTab
          icon={<ThumbDownIcon />}
          label={t`Not Helpful ${articleReply.negativeFeedbackCount}`}
        />
      </Tabs>
      <Box display={tab === 0 ? 'block' : 'none'} className={classes.feedbacks}>
        {feedbacks
          .filter(({ vote, user }) => vote === 'UPVOTE' && user)
          .map(feedback => (
            <Feedback key={feedback.id} feedback={feedback} />
          ))}
      </Box>
      <Box display={tab === 1 ? 'block' : 'none'} className={classes.feedbacks}>
        {feedbacks
          .filter(({ vote, user }) => vote === 'DOWNVOTE' && user)
          .map(feedback => (
            <Feedback key={feedback.id} feedback={feedback} />
          ))}
      </Box>
{'fraction_non_alphanumeric': 0.1421872383185396, 'fraction_numerical': 0.004354379500921119, 'mean_word_length': 2.1398527865404837, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1083822', 'n_tokens_mistral': 1872, 'n_tokens_neox': 1830, 'n_words': 376}