ref(crons): Convert monitors/edit.tsx to FC (#45881)

Loading state looks the same as before:
<img width="1504" alt="image"
src="https://user-images.githubusercontent.com/9372512/225440118-9a63779f-f7f3-4496-983e-6db6e4d6ca61.png">

Error state:
<img width="1512" alt="image"
src="https://user-images.githubusercontent.com/9372512/225440171-a9613d70-fd73-42d2-9065-6185673a7836.png">

Author: David Wang

static/app/views/monitors/edit.tsx

@@ -1,65 +1,67 @@
-import {browserHistory, RouteComponentProps} from 'react-router';
+import {browserHistory} from 'react-router';
 
 import Breadcrumbs from 'sentry/components/breadcrumbs';
 import * as Layout from 'sentry/components/layouts/thirds';
+import LoadingError from 'sentry/components/loadingError';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
-import {Organization} from 'sentry/types';
+import {useQuery, useQueryClient} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
+import {useParams} from 'sentry/utils/useParams';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
-import withOrganization from 'sentry/utils/withOrganization';
-import AsyncView from 'sentry/views/asyncView';
 
 import MonitorForm from './components/monitorForm';
 import {Monitor} from './types';
 
-type Props = AsyncView['props'] &
-  RouteComponentProps<{monitorSlug: string}, {}> & {
-    organization: Organization;
-  };
+export default function EditMonitor() {
+  const {monitorSlug} = useParams();
+  const organization = useOrganization();
+  const queryClient = useQueryClient();
 
-type State = AsyncView['state'] & {
-  monitor: Monitor | null;
-};
+  const queryKeyUrl = `/organizations/${organization.slug}/monitors/${monitorSlug}/`;
 
-class EditMonitor extends AsyncView<Props, State> {
-  get orgSlug() {
-    return this.props.organization.slug;
-  }
-
-  getEndpoints(): ReturnType<AsyncView['getEndpoints']> {
-    const {params} = this.props;
-    return [
-      ['monitor', `/organizations/${this.orgSlug}/monitors/${params.monitorSlug}/`],
-    ];
-  }
+  const {
+    isLoading,
+    isError,
+    data: monitor,
+    refetch,
+  } = useQuery<Monitor>([queryKeyUrl], {
+    staleTime: 0,
+  });
 
-  onSubmitSuccess = (data: Monitor) =>
+  function onSubmitSuccess(data: Monitor) {
+    queryClient.setQueryData([queryKeyUrl], data);
     browserHistory.push(
-      normalizeUrl(`/organizations/${this.orgSlug}/crons/${data.slug}/`)
+      normalizeUrl(`/organizations/${organization.slug}/crons/${data.slug}/`)
     );
+  }
 
-  getTitle() {
-    if (this.state.monitor) {
-      return `${this.state.monitor.name} - Crons - ${this.orgSlug}`;
+  function getTitle() {
+    if (monitor) {
+      return `${monitor.name} - Crons - ${organization.slug}`;
     }
-    return `Crons - ${this.orgSlug}`;
+    return `Crons - ${organization.slug}`;
   }
 
-  renderBody() {
-    const {monitor} = this.state;
+  if (isLoading) {
+    return <LoadingIndicator />;
+  }
 
-    if (monitor === null) {
-      return null;
-    }
+  if (isError) {
+    return <LoadingError onRetry={refetch} message="Failed to load monitor." />;
+  }
 
-    return (
+  return (
+    <SentryDocumentTitle title={getTitle()}>
       <Layout.Page>
         <Layout.Header>
           <Layout.HeaderContent>
             <Breadcrumbs
               crumbs={[
                 {
                   label: t('Crons'),
-                  to: `/organizations/${this.orgSlug}/crons/`,
+                  to: `/organizations/${organization.slug}/crons/`,
                 },
                 {
                   label: t('Editing %s', monitor.name),
@@ -74,14 +76,12 @@ class EditMonitor extends AsyncView<Props, State> {
             <MonitorForm
               monitor={monitor}
               apiMethod="PUT"
-              apiEndpoint={`/organizations/${this.orgSlug}/monitors/${monitor.slug}/`}
-              onSubmitSuccess={this.onSubmitSuccess}
+              apiEndpoint={`/organizations/${organization.slug}/monitors/${monitor.slug}/`}
+              onSubmitSuccess={onSubmitSuccess}
             />
           </Layout.Main>
         </Layout.Body>
       </Layout.Page>
-    );
-  }
+    </SentryDocumentTitle>
+  );
 }
-
-export default withOrganization(EditMonitor);