ref(js): Translate IssueListContainer to a React.FC (#30340)

static/app/views/issueList/container.tsx

@@ -1,55 +1,42 @@
-import {Component, Fragment} from 'react';
-import DocumentTitle from 'react-document-title';
+import {Fragment, useEffect, useState} from 'react';
 
 import NoProjectMessage from 'sentry/components/noProjectMessage';
 import GlobalSelectionHeader from 'sentry/components/organizations/globalSelectionHeader';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
+import {t} from 'sentry/locale';
 import GroupStore from 'sentry/stores/groupStore';
 import {Organization, Project} from 'sentry/types';
-import {callIfFunction} from 'sentry/utils/callIfFunction';
 import withOrganization from 'sentry/utils/withOrganization';
 import SampleEventAlert from 'sentry/views/organizationGroupDetails/sampleEventAlert';
 
 type Props = {
   organization: Organization;
   projects: Project[];
+  children: React.ReactChildren;
 };
 
-type State = {
-  showSampleEventBanner: boolean;
-};
-class IssueListContainer extends Component<Props, State> {
-  state: State = {
-    showSampleEventBanner: false,
-  };
+function IssueListContainer({organization, children}: Props) {
+  const [showSampleEventBanner, setShowSampleEventBanner] = useState(false);
 
-  listener = GroupStore.listen(() => this.onGroupChange(), undefined);
-  render() {
-    const {organization, children} = this.props;
-    return (
-      <DocumentTitle title={this.getTitle()}>
-        <Fragment>
-          {this.state.showSampleEventBanner && <SampleEventAlert />}
-          <GlobalSelectionHeader>
-            <NoProjectMessage organization={organization}>{children}</NoProjectMessage>
-          </GlobalSelectionHeader>
-        </Fragment>
-      </DocumentTitle>
+  useEffect(() => {
+    const unlistener = GroupStore.listen(
+      () => setShowSampleEventBanner(GroupStore.getAllItemIds().length === 1),
+      undefined
     );
-  }
-
-  onGroupChange() {
-    this.setState({
-      showSampleEventBanner: GroupStore.getAllItemIds().length === 1,
-    });
-  }
 
-  componentWillUnmount() {
-    callIfFunction(this.listener);
-  }
+    return () => unlistener();
+  }, []);
 
-  getTitle() {
-    return `Issues - ${this.props.organization.slug} - Sentry`;
-  }
+  return (
+    <SentryDocumentTitle title={t('Issues')} orgSlug={organization.slug}>
+      <Fragment>
+        {showSampleEventBanner && <SampleEventAlert />}
+        <GlobalSelectionHeader>
+          <NoProjectMessage organization={organization}>{children}</NoProjectMessage>
+        </GlobalSelectionHeader>
+      </Fragment>
+    </SentryDocumentTitle>
+  );
 }
+
 export default withOrganization(IssueListContainer);
-export {IssueListContainer};