changed from RFC to PureComponent

public/app/features/datasources/DataSourcesList.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { PureComponent } from 'react';
 import classNames from 'classnames/bind';
 import DataSourcesListItem from './DataSourcesListItem';
 import { DataSource } from 'app/types';
@@ -9,24 +9,26 @@ export interface Props {
   layoutMode: LayoutMode;
 }
 
-const DataSourcesList: SFC<Props> = props => {
-  const { dataSources, layoutMode } = props;
+export class DataSourcesList extends PureComponent<Props> {
+  render() {
+    const { dataSources, layoutMode } = this.props;
 
-  const listStyle = classNames({
-    'card-section': true,
-    'card-list-layout-grid': layoutMode === LayoutModes.Grid,
-    'card-list-layout-list': layoutMode === LayoutModes.List,
-  });
+    const listStyle = classNames({
+      'card-section': true,
+      'card-list-layout-grid': layoutMode === LayoutModes.Grid,
+      'card-list-layout-list': layoutMode === LayoutModes.List,
+    });
 
-  return (
-    <section className={listStyle}>
-      <ol className="card-list">
-        {dataSources.map((dataSource, index) => {
-          return <DataSourcesListItem dataSource={dataSource} key={`${dataSource.id}-${index}`} />;
-        })}
-      </ol>
-    </section>
-  );
-};
+    return (
+      <section className={listStyle}>
+        <ol className="card-list">
+          {dataSources.map((dataSource, index) => {
+            return <DataSourcesListItem dataSource={dataSource} key={`${dataSource.id}-${index}`} />;
+          })}
+        </ol>
+      </section>
+    );
+  }
+}
 
 export default DataSourcesList;

public/app/features/datasources/DataSourcesListItem.tsx

@@ -1,34 +1,35 @@
-import React, { SFC } from 'react';
+import React, { PureComponent } from 'react';
 import { DataSource } from 'app/types';
 
 export interface Props {
   dataSource: DataSource;
 }
 
-const DataSourcesListItem: SFC<Props> = props => {
-  const { dataSource } = props;
-
-  return (
-    <li className="card-item-wrapper">
-      <a className="card-item" href={`datasources/edit/${dataSource.id}`}>
-        <div className="card-item-header">
-          <div className="card-item-type">{dataSource.type}</div>
-        </div>
-        <div className="card-item-body">
-          <figure className="card-item-figure">
-            <img src={dataSource.typeLogoUrl} />
-          </figure>
-          <div className="card-item-details">
-            <div className="card-item-name">
-              {dataSource.name}
-              {dataSource.isDefault && <span className="btn btn-secondary btn-mini">default</span>}
+export class DataSourcesListItem extends PureComponent<Props> {
+  render() {
+    const { dataSource } = this.props;
+    return (
+      <li className="card-item-wrapper">
+        <a className="card-item" href={`datasources/edit/${dataSource.id}`}>
+          <div className="card-item-header">
+            <div className="card-item-type">{dataSource.type}</div>
+          </div>
+          <div className="card-item-body">
+            <figure className="card-item-figure">
+              <img src={dataSource.typeLogoUrl} />
+            </figure>
+            <div className="card-item-details">
+              <div className="card-item-name">
+                {dataSource.name}
+                {dataSource.isDefault && <span className="btn btn-secondary btn-mini">default</span>}
+              </div>
+              <div className="card-item-sub-name">{dataSource.url}</div>
             </div>
-            <div className="card-item-sub-name">{dataSource.url}</div>
           </div>
-        </div>
-      </a>
-    </li>
-  );
-};
+        </a>
+      </li>
+    );
+  }
+}
 
 export default DataSourcesListItem;