ref(alerts): Switch projectProvider to useProjects (#30514)

static/app/views/alerts/builder/projectProvider.tsx

@@ -1,13 +1,13 @@
-import {cloneElement, Fragment, isValidElement} from 'react';
+import {cloneElement, isValidElement, useEffect} from 'react';
 import {RouteComponentProps} from 'react-router';
 
 import {fetchOrgMembers} from 'sentry/actionCreators/members';
 import Alert from 'sentry/components/alert';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {t} from 'sentry/locale';
-import {Organization, Project} from 'sentry/types';
-import Projects from 'sentry/utils/projects';
+import {Organization} from 'sentry/types';
 import useApi from 'sentry/utils/useApi';
+import useProjects from 'sentry/utils/useProjects';
 import useScrollToTop from 'sentry/utils/useScrollToTop';
 
 type Props = RouteComponentProps<RouteParams, {}> & {
@@ -26,44 +26,39 @@ function AlertBuilderProjectProvider(props: Props) {
 
   const {children, params, organization, ...other} = props;
   const {projectId} = params;
+  const {projects, initiallyLoaded, fetching, fetchError} = useProjects({
+    slugs: [projectId],
+  });
+  const project = projects.find(({slug}) => slug === projectId);
 
-  return (
-    <Projects orgId={organization.slug} allProjects>
-      {({projects, initiallyLoaded, isIncomplete}) => {
-        if (!initiallyLoaded) {
-          return <LoadingIndicator />;
-        }
+  useEffect(() => {
+    if (!project) {
+      return;
+    }
 
-        const project = (projects as Project[]).find(({slug}) => slug === projectId);
+    // fetch members list for mail action fields
+    fetchOrgMembers(api, organization.slug, [project.id]);
+  }, [project]);
 
-        // if loaded, but project fetching states incomplete or project can't
-        // be found, project doesn't exist
-        if (isIncomplete || !project) {
-          return (
-            <Alert type="warning">
-              {t('The project you were looking for was not found.')}
-            </Alert>
-          );
-        }
+  if (!initiallyLoaded || fetching) {
+    return <LoadingIndicator />;
+  }
 
-        // fetch members list for mail action fields
-        fetchOrgMembers(api, organization.slug, [project.id]);
+  // if loaded, but project fetching states incomplete or project can't be found, project doesn't exist
+  if (!project || fetchError) {
+    return (
+      <Alert type="warning">{t('The project you were looking for was not found.')}</Alert>
+    );
+  }
 
-        return (
-          <Fragment>
-            {children && isValidElement(children)
-              ? cloneElement(children, {
-                  ...other,
-                  ...children.props,
-                  project,
-                  organization,
-                })
-              : children}
-          </Fragment>
-        );
-      }}
-    </Projects>
-  );
+  return children && isValidElement(children)
+    ? cloneElement(children, {
+        ...other,
+        ...children.props,
+        project,
+        organization,
+      })
+    : children;
 }
 
 export default AlertBuilderProjectProvider;