Browse Source

ref(tsc): convert adminWarnings to FC (#72548)

ref https://github.com/getsentry/frontend-tsc/issues/2

converts this file into FC and use `useApiQuery` instead of
`DeprecatedAsync`
Michelle Zhang 9 months ago
parent
commit
1f8b81d52d
1 changed files with 41 additions and 42 deletions
  1. 41 42
      static/app/views/admin/adminWarnings.tsx

+ 41 - 42
static/app/views/admin/adminWarnings.tsx

@@ -1,58 +1,57 @@
 import {Fragment} from 'react';
 
+import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {t} from 'sentry/locale';
-import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
+import {useApiQuery} from 'sentry/utils/queryClient';
 
 type Data = {
   groups: [groupName: string, grouppedWarnings: string[]][];
   warnings: string[];
 };
 
-type State = DeprecatedAsyncView['state'] & {data: Data | null};
+function AdminWarnings() {
+  const {data, isLoading, isError} = useApiQuery<Data>(['/internal/warnings/'], {
+    staleTime: 0,
+  });
 
-class AdminWarnings extends DeprecatedAsyncView<{}, State> {
-  getEndpoints(): ReturnType<DeprecatedAsyncView['getEndpoints']> {
-    return [['data', '/internal/warnings/']];
+  if (isLoading) {
+    return <LoadingIndicator />;
   }
 
-  renderBody() {
-    const {data} = this.state;
-
-    if (data === null) {
-      return null;
-    }
-
-    const {groups, warnings} = data;
-
-    return (
-      <div>
-        <h3>{t('System Warnings')}</h3>
-        {!warnings && !groups && t('There are no warnings at this time')}
-
-        {groups.map(([groupName, groupedWarnings]) => (
-          <Fragment key={groupName}>
-            <h4>{groupName}</h4>
-            <ul>
-              {groupedWarnings.map((warning, i) => (
-                <li key={i}>{warning}</li>
-              ))}
-            </ul>
-          </Fragment>
-        ))}
-
-        {warnings.length > 0 && (
-          <Fragment>
-            <h4>Miscellaneous</h4>
-            <ul>
-              {warnings.map((warning, i) => (
-                <li key={i}>{warning}</li>
-              ))}
-            </ul>
-          </Fragment>
-        )}
-      </div>
-    );
+  if (!data || isError) {
+    return null;
   }
+
+  const {groups, warnings} = data;
+
+  return (
+    <div>
+      <h3>{t('System Warnings')}</h3>
+      {!warnings && !groups && t('There are no warnings at this time')}
+
+      {groups.map(([groupName, groupedWarnings]) => (
+        <Fragment key={groupName}>
+          <h4>{groupName}</h4>
+          <ul>
+            {groupedWarnings.map((warning, i) => (
+              <li key={i}>{warning}</li>
+            ))}
+          </ul>
+        </Fragment>
+      ))}
+
+      {warnings.length > 0 && (
+        <Fragment>
+          <h4>{t('Miscellaneous')}</h4>
+          <ul>
+            {warnings.map((warning, i) => (
+              <li key={i}>{warning}</li>
+            ))}
+          </ul>
+        </Fragment>
+      )}
+    </div>
+  );
 }
 
 export default AdminWarnings;