import {Component} from 'react'; import type {RouteComponentProps} from 'react-router'; import styled from '@emotion/styled'; import isEqual from 'lodash/isEqual'; import {EventUserFeedback} from 'sentry/components/events/userFeedback'; import * as Layout from 'sentry/components/layouts/thirds'; import LoadingError from 'sentry/components/loadingError'; import LoadingIndicator from 'sentry/components/loadingIndicator'; import Pagination from 'sentry/components/pagination'; import {space} from 'sentry/styles/space'; import type {Group, Organization, Project, UserReport} from 'sentry/types'; import withOrganization from 'sentry/utils/withOrganization'; import {UserFeedbackEmpty} from 'sentry/views/userFeedback/userFeedbackEmpty'; import {fetchGroupUserReports} from './utils'; type RouteParams = { groupId: string; orgId: string; }; type Props = RouteComponentProps & { environments: string[]; group: Group; organization: Organization; project: Project; }; type State = { error: boolean; loading: boolean; reportList: UserReport[]; pageLinks?: string | null; }; class GroupUserFeedback extends Component { state: State = { loading: true, error: false, reportList: [], pageLinks: '', }; componentDidMount() { this.fetchData(); } componentDidUpdate(prevProps: Props) { if ( !isEqual(prevProps.params, this.props.params) || prevProps.location.pathname !== this.props.location.pathname || prevProps.location.search !== this.props.location.search ) { this.fetchData(); } } fetchData = () => { const {group, location, organization, params} = this.props; this.setState({ loading: true, error: false, }); fetchGroupUserReports(organization.slug, group.id, { ...params, cursor: location.query.cursor || '', }) .then(([data, _, resp]) => { this.setState({ error: false, loading: false, reportList: data, pageLinks: resp?.getResponseHeader('Link'), }); }) .catch(() => { this.setState({ error: true, loading: false, }); }); }; render() { const {reportList, loading, error} = this.state; const {organization, group} = this.props; if (loading) { return ; } if (error) { return ; } if (reportList.length) { return ( {reportList.map((item, idx) => ( ))} ); } return ( ); } } const StyledEventUserFeedback = styled(EventUserFeedback)` margin-bottom: ${space(2)}; `; export default withOrganization(GroupUserFeedback);