SONAR-19613 ProjectInformationApp - functional component

diff --git a/server/sonar-web/src/main/js/apps/projectInformation/ProjectInformationApp.tsx b/server/sonar-web/src/main/js/apps/projectInformation/ProjectInformationApp.tsx
index 6498c2f743acb1e35a4f7af5936437d55b42d470..191de33ff204b8c952f3519a4ecbb5b3a8d9963a 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectInformation/ProjectInformationApp.tsx
+++ b/server/sonar-web/src/main/js/apps/projectInformation/ProjectInformationApp.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import { Card, LargeCenteredLayout, PageContentFontWrapper, Title } from 'design-system';
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import { getMeasures } from '../../api/measures';
 import withAvailableFeatures, {
   WithAvailableFeaturesProps,
@@ -46,91 +46,71 @@ interface Props extends WithAvailableFeaturesProps {
   metrics: Dict<Metric>;
 }
 
-interface State {
-  measures?: Measure[];
-}
-
-class ProjectInformationApp extends React.PureComponent<Props, State> {
-  mounted = false;
-  state: State = {};
-
-  componentDidMount() {
-    this.mounted = true;
-    this.loadMeasures();
-  }
+function ProjectInformationApp(props: Props) {
+  const [measures, setMeasures] = useState<Measure[] | undefined>(undefined);
 
-  componentWillUnmount() {
-    this.mounted = false;
-  }
+  const { branchLike, component, currentUser, metrics } = props;
 
-  loadMeasures = () => {
-    const {
-      component: { key },
-    } = this.props;
+  useEffect(() => {
+    const { key } = component;
 
-    return getMeasures({
+    getMeasures({
       component: key,
       metricKeys: [MetricKey.ncloc, MetricKey.projects].join(),
-    }).then((measures) => {
-      if (this.mounted) {
-        this.setState({ measures });
-      }
-    });
-  };
+    })
+      .then((measures) => {
+        setMeasures(measures);
+      })
+      .catch(() => {});
+  }, [component]);
 
-  render() {
-    const { branchLike, component, currentUser, metrics } = this.props;
-    const { measures } = this.state;
+  const canConfigureNotifications = isLoggedIn(currentUser) && isProject(component.qualifier);
+  const canUseBadges =
+    metrics !== undefined && (isApplication(component.qualifier) || isProject(component.qualifier));
+  const regulatoryReportFeatureEnabled = props.hasFeature(Feature.RegulatoryReport);
+  const isApp = isApplication(component.qualifier);
 
-    const canConfigureNotifications = isLoggedIn(currentUser) && isProject(component.qualifier);
-    const canUseBadges =
-      metrics !== undefined &&
-      (isApplication(component.qualifier) || isProject(component.qualifier));
-    const regulatoryReportFeatureEnabled = this.props.hasFeature(Feature.RegulatoryReport);
-    const isApp = isApplication(component.qualifier);
-
-    return (
-      <main>
-        <LargeCenteredLayout>
-          <PageContentFontWrapper>
-            <div className="overview sw-my-6 sw-body-sm">
-              <Title className="sw-mb-12">
-                {translate(isApp ? 'application' : 'project', 'info.title')}
-              </Title>
-              <div className="sw-grid sw-grid-cols-[488px_minmax(0,_2fr)] sw-gap-x-12 sw-gap-y-3 sw-auto-rows-min">
-                <div className="sw-row-span-3">
-                  <Card>
-                    <AboutProject
-                      component={component}
-                      measures={measures}
-                      onComponentChange={this.props.onComponentChange}
-                    />
-                  </Card>
-                </div>
+  return (
+    <main>
+      <LargeCenteredLayout>
+        <PageContentFontWrapper>
+          <div className="overview sw-my-6 sw-body-sm">
+            <Title className="sw-mb-12">
+              {translate(isApp ? 'application' : 'project', 'info.title')}
+            </Title>
+            <div className="sw-grid sw-grid-cols-[488px_minmax(0,_2fr)] sw-gap-x-12 sw-gap-y-3 sw-auto-rows-min">
+              <div className="sw-row-span-3">
+                <Card>
+                  <AboutProject
+                    component={component}
+                    measures={measures}
+                    onComponentChange={props.onComponentChange}
+                  />
+                </Card>
+              </div>
 
-                {canConfigureNotifications && (
+              {canConfigureNotifications && (
+                <Card>
+                  <ProjectNotifications component={component} />
+                </Card>
+              )}
+              {canUseBadges && (
+                <Card>
+                  <ProjectBadges branchLike={branchLike} component={component} />
+                </Card>
+              )}
+              {component.qualifier === ComponentQualifier.Project &&
+                regulatoryReportFeatureEnabled && (
                   <Card>
-                    <ProjectNotifications component={component} />
+                    <RegulatoryReport component={component} branchLike={branchLike} />
                   </Card>
                 )}
-                {canUseBadges && (
-                  <Card>
-                    <ProjectBadges branchLike={branchLike} component={component} />
-                  </Card>
-                )}
-                {component.qualifier === ComponentQualifier.Project &&
-                  regulatoryReportFeatureEnabled && (
-                    <Card>
-                      <RegulatoryReport component={component} branchLike={branchLike} />
-                    </Card>
-                  )}
-              </div>
             </div>
-          </PageContentFontWrapper>
-        </LargeCenteredLayout>
-      </main>
-    );
-  }
+          </div>
+        </PageContentFontWrapper>
+      </LargeCenteredLayout>
+    </main>
+  );
 }
 
 export default withComponentContext(