groupUserFeedback.tsx 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. import {Component} from 'react';
  2. import type {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import isEqual from 'lodash/isEqual';
  5. import {EventUserFeedback} from 'sentry/components/events/userFeedback';
  6. import * as Layout from 'sentry/components/layouts/thirds';
  7. import LoadingError from 'sentry/components/loadingError';
  8. import LoadingIndicator from 'sentry/components/loadingIndicator';
  9. import Pagination from 'sentry/components/pagination';
  10. import {space} from 'sentry/styles/space';
  11. import type {Group, Organization, Project, UserReport} from 'sentry/types';
  12. import withOrganization from 'sentry/utils/withOrganization';
  13. import {UserFeedbackEmpty} from 'sentry/views/userFeedback/userFeedbackEmpty';
  14. import {fetchGroupUserReports} from './utils';
  15. type RouteParams = {
  16. groupId: string;
  17. orgId: string;
  18. };
  19. type Props = RouteComponentProps<RouteParams, {}> & {
  20. environments: string[];
  21. group: Group;
  22. organization: Organization;
  23. project: Project;
  24. };
  25. type State = {
  26. error: boolean;
  27. loading: boolean;
  28. reportList: UserReport[];
  29. pageLinks?: string | null;
  30. };
  31. class GroupUserFeedback extends Component<Props, State> {
  32. state: State = {
  33. loading: true,
  34. error: false,
  35. reportList: [],
  36. pageLinks: '',
  37. };
  38. componentDidMount() {
  39. this.fetchData();
  40. }
  41. componentDidUpdate(prevProps: Props) {
  42. if (
  43. !isEqual(prevProps.params, this.props.params) ||
  44. prevProps.location.pathname !== this.props.location.pathname ||
  45. prevProps.location.search !== this.props.location.search
  46. ) {
  47. this.fetchData();
  48. }
  49. }
  50. fetchData = () => {
  51. const {group, location, organization, params} = this.props;
  52. this.setState({
  53. loading: true,
  54. error: false,
  55. });
  56. fetchGroupUserReports(organization.slug, group.id, {
  57. ...params,
  58. cursor: location.query.cursor || '',
  59. })
  60. .then(([data, _, resp]) => {
  61. this.setState({
  62. error: false,
  63. loading: false,
  64. reportList: data,
  65. pageLinks: resp?.getResponseHeader('Link'),
  66. });
  67. })
  68. .catch(() => {
  69. this.setState({
  70. error: true,
  71. loading: false,
  72. });
  73. });
  74. };
  75. render() {
  76. const {reportList, loading, error} = this.state;
  77. const {organization, group} = this.props;
  78. if (loading) {
  79. return <LoadingIndicator />;
  80. }
  81. if (error) {
  82. return <LoadingError onRetry={this.fetchData} />;
  83. }
  84. if (reportList.length) {
  85. return (
  86. <Layout.Body>
  87. <Layout.Main>
  88. {reportList.map((item, idx) => (
  89. <StyledEventUserFeedback
  90. key={idx}
  91. report={item}
  92. orgSlug={organization.slug}
  93. issueId={group.id}
  94. />
  95. ))}
  96. <Pagination pageLinks={this.state.pageLinks} {...this.props} />
  97. </Layout.Main>
  98. </Layout.Body>
  99. );
  100. }
  101. return (
  102. <Layout.Body>
  103. <Layout.Main fullWidth>
  104. <UserFeedbackEmpty projectIds={[group.project.id]} />
  105. </Layout.Main>
  106. </Layout.Body>
  107. );
  108. }
  109. }
  110. const StyledEventUserFeedback = styled(EventUserFeedback)`
  111. margin-bottom: ${space(2)};
  112. `;
  113. export default withOrganization(GroupUserFeedback);