improve react usage (#1936)

* remove React.createClass

* remove react-addons-shallow-compare

* convert to functional components

* replace Component with PureComponent

* remove react-router-redux

* declare function components consistently

* fix quality flaws

* fix typo

* declare children prop consistently

* pass location to ComponentNavMenu

12 files changed, 51 insertions, 63 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js
index c62d9e8c612..92ddc79dde0 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js
@@ -31,7 +31,7 @@ import PageSide from '../../../components/layout/PageSide';
 import PageFilters from '../../../components/layout/PageFilters';
 import '../styles.css';
 
-export default class AllProjects extends React.Component {
+export default class AllProjects extends React.PureComponent {
   static propTypes = {
     isFavorite: React.PropTypes.bool.isRequired,
     location: React.PropTypes.object.isRequired,
diff --git a/server/sonar-web/src/main/js/apps/projects/components/App.js b/server/sonar-web/src/main/js/apps/projects/components/App.js
index 69c18380bb3..8897f1e6f36 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/App.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/App.js
@@ -21,7 +21,7 @@ import React from 'react';
 import Helmet from 'react-helmet';
 import { translate } from '../../../helpers/l10n';
 
-export default class App extends React.Component {
+export default class App extends React.PureComponent {
   componentDidMount() {
     document.querySelector('html').classList.add('dashboard-page');
   }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.js b/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.js
index 8b4156532ab..1eb2241cfb1 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.js
@@ -20,12 +20,10 @@
 import React from 'react';
 import { translate } from '../../../helpers/l10n';
 
-export default class EmptyInstance extends React.Component {
-  render() {
-    return (
-      <div className="projects-empty-list">
-        <h3>{translate('projects.no_projects.empty_instance')}</h3>
-      </div>
-    );
-  }
+export default function EmptyInstance() {
+  return (
+    <div className="projects-empty-list">
+      <h3>{translate('projects.no_projects.empty_instance')}</h3>
+    </div>
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.js b/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.js
index 43709aecbe3..f69fbebc834 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.js
@@ -21,18 +21,16 @@ import React from 'react';
 import { Link } from 'react-router';
 import { translate } from '../../../helpers/l10n';
 
-export default class NoFavoriteProjects extends React.Component {
-  render() {
-    return (
-      <div className="projects-empty-list">
-        <h3>{translate('projects.no_favorite_projects')}</h3>
-        <p className="big-spacer-top">{translate('projects.no_favorite_projects.engagement')}</p>
-        <p className="big-spacer-top">
-          <Link to="/projects/all" className="button">
-            {translate('projects.explore_projects')}
-          </Link>
-        </p>
-      </div>
-    );
-  }
+export default function NoFavoriteProjects() {
+  return (
+    <div className="projects-empty-list">
+      <h3>{translate('projects.no_favorite_projects')}</h3>
+      <p className="big-spacer-top">{translate('projects.no_favorite_projects.engagement')}</p>
+      <p className="big-spacer-top">
+        <Link to="/projects/all" className="button">
+          {translate('projects.explore_projects')}
+        </Link>
+      </p>
+    </div>
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.js b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.js
index ee2cb6cf6d0..61a9bba24ab 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.js
@@ -22,30 +22,28 @@ import React from 'react';
 import ViewSelect from './ViewSelect';
 import { translate } from '../../../helpers/l10n';
 
-export default class PageHeader extends React.Component {
-  props: {
-    loading: boolean,
-    onViewChange: (string) => void,
-    total?: number,
-    view: string
-  };
+type Props = {
+  loading: boolean,
+  onViewChange: (string) => void,
+  total?: number,
+  view: string
+};
 
-  render() {
-    return (
-      <header className="page-header">
-        <ViewSelect onChange={this.props.onViewChange} view={this.props.view} />
+export default function PageHeader(props: Props) {
+  return (
+    <header className="page-header">
+      <ViewSelect onChange={props.onViewChange} view={props.view} />
 
-        <div className="page-actions projects-page-actions">
-          {!!this.props.loading && <i className="spinner spacer-right" />}
+      <div className="page-actions projects-page-actions">
+        {!!props.loading && <i className="spinner spacer-right" />}
 
-          {this.props.total != null &&
-            <span>
-              <strong id="projects-total">{this.props.total}</strong>
-              {' '}
-              {translate('projects._projects')}
-            </span>}
-        </div>
-      </header>
-    );
-  }
+        {props.total != null &&
+          <span>
+            <strong id="projects-total">{props.total}</strong>
+            {' '}
+            {translate('projects._projects')}
+          </span>}
+      </div>
+    </header>
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLanguages.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLanguages.js
index 172d228f0d8..e4d4c283521 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLanguages.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLanguages.js
@@ -24,7 +24,7 @@ import Tooltip from '../../../components/controls/Tooltip';
 import { getLanguages } from '../../../store/rootReducer';
 import { translate } from '../../../helpers/l10n';
 
-class ProjectCardLanguages extends React.Component {
+class ProjectCardLanguages extends React.PureComponent {
   getLanguageName(key) {
     if (key === '<null>') {
       return translate('unknown');
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsListFooter.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectsListFooter.js
index 745b6683372..3a1f5d4c1fe 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsListFooter.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsListFooter.js
@@ -20,7 +20,7 @@
 import React from 'react';
 import ListFooter from '../../../components/controls/ListFooter';
 
-export default class ProjectsListFooter extends React.Component {
+export default class ProjectsListFooter extends React.PureComponent {
   static propTypes = {
     total: React.PropTypes.number.isRequired
   };
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/FilterHeader.js b/server/sonar-web/src/main/js/apps/projects/filters/FilterHeader.js
index 7ac7113d587..11d9d790662 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/FilterHeader.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/FilterHeader.js
@@ -22,7 +22,7 @@ import React from 'react';
 
 type Props = {
   name: string,
-  children?: {}
+  children?: React.Element<*>
 };
 
 export default class FilterHeader extends React.PureComponent {
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/MaintainabilityFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/MaintainabilityFilter.js
index 2f8c422dac4..a02a5f70c57 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/MaintainabilityFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/MaintainabilityFilter.js
@@ -20,8 +20,6 @@
 import React from 'react';
 import IssuesFilter from './IssuesFilter';
 
-export default class MaintainabilityFilter extends React.Component {
-  render() {
-    return <IssuesFilter {...this.props} name="Maintainability" property="maintainability" />;
-  }
+export default function MaintainabilityFilter(props) {
+  return <IssuesFilter {...props} name="Maintainability" property="maintainability" />;
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/ReliabilityFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/ReliabilityFilter.js
index da1372a2a86..07852afe335 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/ReliabilityFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/ReliabilityFilter.js
@@ -20,8 +20,6 @@
 import React from 'react';
 import IssuesFilter from './IssuesFilter';
 
-export default class ReliabilityFilter extends React.Component {
-  render() {
-    return <IssuesFilter {...this.props} name="Reliability" property="reliability" />;
-  }
+export default function ReliabilityFilter(props) {
+  return <IssuesFilter {...props} name="Reliability" property="reliability" />;
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/SearchFilterContainer.js b/server/sonar-web/src/main/js/apps/projects/filters/SearchFilterContainer.js
index b70d403a499..ec6bad4c55d 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/SearchFilterContainer.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/SearchFilterContainer.js
@@ -31,7 +31,7 @@ type Props = {
   organization?: {}
 };
 
-class SearchFilterContainer extends React.Component {
+class SearchFilterContainer extends React.PureComponent {
   handleSearch: (userQuery?: string) => void;
   props: Props;
 
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/SecurityFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/SecurityFilter.js
index 22eac70799c..9f7fa7aa997 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/SecurityFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/SecurityFilter.js
@@ -20,8 +20,6 @@
 import React from 'react';
 import IssuesFilter from './IssuesFilter';
 
-export default class SecurityFilter extends React.Component {
-  render() {
-    return <IssuesFilter {...this.props} name="Security" property="security" />;
-  }
+export default function SecurityFilter(props) {
+  return <IssuesFilter {...props} name="Security" property="security" />;
 }