Merge pull request #17630 from code-dot-org/react-no-createclass-netsim

React: Remove uses of React.createClass in netsim
code-dot-org · Sep 8, 2017 · 7480308 · 7480308
2 parents cb08e42 + 0705e1c
commit 7480308
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 74 deletions.
diff --git a/apps/src/netsim/NetSimLogBrowser.jsx b/apps/src/netsim/NetSimLogBrowser.jsx
@@ -14,8 +14,9 @@ const style = {
   }
 };
 
-const NetSimLogBrowser = React.createClass({
-  propTypes: Object.assign({}, Dialog.propTypes, {
+export default class NetSimLogBrowser extends React.Component {
+  static propTypes = {
+    ...Dialog.propTypes,
     i18n: PropTypes.objectOf(PropTypes.func).isRequired,
     canSetRouterLogMode: PropTypes.bool,
     isAllRouterLogMode: PropTypes.bool,
@@ -28,14 +29,12 @@ const NetSimLogBrowser = React.createClass({
     senderNames: PropTypes.arrayOf(PropTypes.string).isRequired,
     renderedRowLimit: PropTypes.number,
     teacherView: PropTypes.bool
-  }),
+  };
 
-  getDefaultProps() {
-    return {
-      isAllRouterLogMode: true,
-      currentTrafficFilter: 'none'
-    };
-  },
+  static defaultProps = {
+    isAllRouterLogMode: true,
+    currentTrafficFilter: 'none'
+  };
 
   dialogTitle() {
     const {i18n, teacherView, isAllRouterLogMode, currentTrafficFilter} = this.props;
@@ -63,17 +62,11 @@ const NetSimLogBrowser = React.createClass({
       }
     }
     return header;
-  },
+  }
 
-  getInitialState() {
-    return {
-      currentSentByFilter: 'none'
-    };
-  },
+  state = {currentSentByFilter: 'none'};
 
-  setSentByFilter(newFilter) {
-    this.setState({ currentSentByFilter: newFilter});
-  },
+  setSentByFilter = (currentSentByFilter) => this.setState({currentSentByFilter});
 
   render() {
     return (
@@ -107,5 +100,4 @@ const NetSimLogBrowser = React.createClass({
       </Dialog>
     );
   }
-});
-export default NetSimLogBrowser;
+}
diff --git a/apps/src/netsim/NetSimLogBrowserFilters.jsx b/apps/src/netsim/NetSimLogBrowserFilters.jsx
@@ -21,8 +21,8 @@ const style = {
 /**
  * Filter controls for Log Browser Modal
  */
-const NetSimLogBrowserFilters = React.createClass({
-  propTypes: {
+export default class NetSimLogBrowserFilters extends React.Component {
+  static propTypes = {
     i18n: PropTypes.objectOf(PropTypes.func).isRequired,
     canSetRouterLogMode: PropTypes.bool,
     isAllRouterLogMode: PropTypes.bool,
@@ -34,7 +34,7 @@ const NetSimLogBrowserFilters = React.createClass({
     setSentByFilter: PropTypes.func.isRequired,
     teacherView: PropTypes.bool,
     senderNames: PropTypes.arrayOf(PropTypes.string).isRequired
-  },
+  };
 
   render() {
     return (
@@ -63,19 +63,16 @@ const NetSimLogBrowserFilters = React.createClass({
       </div>
     );
   }
-});
-export default NetSimLogBrowserFilters;
+}
 
-const RouterLogModeDropdown = React.createClass({
-  propTypes: {
+class RouterLogModeDropdown extends React.Component {
+  static propTypes = {
     i18n: PropTypes.objectOf(PropTypes.func).isRequired,
     isAllRouterLogMode: PropTypes.bool,
     setRouterLogMode: PropTypes.func.isRequired
-  },
+  };
 
-  onChange(event) {
-    this.props.setRouterLogMode(event.target.value);
-  },
+  onChange = (event) => this.props.setRouterLogMode(event.target.value);
 
   render() {
     return (
@@ -95,19 +92,17 @@ const RouterLogModeDropdown = React.createClass({
       </select>
     );
   }
-});
+}
 
-const TrafficFilterDropdown = React.createClass({
-  propTypes: {
+class TrafficFilterDropdown extends React.Component {
+  static propTypes = {
     i18n: PropTypes.objectOf(PropTypes.func).isRequired,
     localAddress: PropTypes.string,
     currentTrafficFilter: PropTypes.string.isRequired,
     setTrafficFilter: PropTypes.func.isRequired
-  },
+  };
 
-  onChange(event) {
-    this.props.setTrafficFilter(event.target.value);
-  },
+  onChange = (event) => this.props.setTrafficFilter(event.target.value);
 
   render() {
     return (
@@ -133,19 +128,17 @@ const TrafficFilterDropdown = React.createClass({
       </select>
     );
   }
-});
+}
 
-export const SentByDropdown = React.createClass({
-  propTypes: {
+export class SentByDropdown extends React.Component {
+  static propTypes = {
     i18n: PropTypes.objectOf(PropTypes.func).isRequired,
     currentSentByFilter: PropTypes.string.isRequired,
     setSentByFilter: PropTypes.func.isRequired,
     senderNames: PropTypes.arrayOf(PropTypes.string).isRequired
-  },
+  };
 
-  onChange(event) {
-    this.props.setSentByFilter(event.target.value);
-  },
+  onChange = (event) => this.props.setSentByFilter(event.target.value);
 
   render() {
     return (
@@ -168,4 +161,4 @@ export const SentByDropdown = React.createClass({
       </select>
     );
   }
-});
+}
diff --git a/apps/src/netsim/NetSimLogBrowserTable.jsx b/apps/src/netsim/NetSimLogBrowserTable.jsx
@@ -32,29 +32,25 @@ style.prewrapTd = Object.assign({}, style.td, style.prewrap);
  * Wraps configuration and sorting behavior around a Reactabular table.
  * @see http://reactabular.js.org
  */
-const NetSimLogBrowserTable = React.createClass({
-  propTypes: {
+export default class NetSimLogBrowserTable extends React.Component {
+  static propTypes = {
     logRows: PropTypes.arrayOf(PropTypes.object).isRequired,
     headerFields: PropTypes.arrayOf(PropTypes.string).isRequired,
     renderedRowLimit: PropTypes.number,
     teacherView: PropTypes.bool,
     currentSentByFilter: PropTypes.string.isRequired
-  },
+  };
 
-  getInitialState() {
-    return {
-      sortingColumns: {
-        0: {direction: 'desc', position: 0}
-      }
-    };
-  },
+  state = {
+    sortingColumns: {
+      0: {direction: 'desc', position: 0}
+    }
+  };
 
-  getSortingColumns() {
-    return this.state.sortingColumns || {};
-  },
+  getSortingColumns = () => this.state.sortingColumns || {};
 
   // The user requested sorting, adjust the sorting state accordingly.
-  onSort(selectedColumn) {
+  onSort = (selectedColumn) => {
     this.setState({
       sortingColumns: sort.byColumn({
         sortingColumns: this.state.sortingColumns,
@@ -67,7 +63,7 @@ const NetSimLogBrowserTable = React.createClass({
         selectedColumn
       })
     });
-  },
+  };
 
   render() {
     const headerFields = this.props.headerFields;
@@ -210,8 +206,7 @@ const NetSimLogBrowserTable = React.createClass({
       </Table.Provider>
     );
   }
-});
-export default NetSimLogBrowserTable;
+}
 
 function timeFormatter(timestamp) {
   return moment(timestamp).format('h:mm:ss.SSS A');

diff --git a/apps/src/netsim/NetSimView.jsx b/apps/src/netsim/NetSimView.jsx
@@ -1,27 +1,25 @@
-
 import React, {PropTypes} from 'react';
-var ProtectedStatefulDiv = require('../templates/ProtectedStatefulDiv');
-var StudioAppWrapper = require('../templates/StudioAppWrapper');
+import ProtectedStatefulDiv from '../templates/ProtectedStatefulDiv';
+import StudioAppWrapper from '../templates/StudioAppWrapper';
 
 /**
  * Top-level React wrapper for our NetSim app.
  */
-var NetSimView = React.createClass({
-  propTypes: {
+export default class NetSimView extends React.Component {
+  static propTypes = {
     generateCodeAppHtml: PropTypes.func.isRequired,
     onMount: PropTypes.func.isRequired
-  },
+  };
 
-  componentDidMount: function () {
+  componentDidMount() {
     this.props.onMount();
-  },
+  }
 
-  render: function () {
+  render() {
     return (
       <StudioAppWrapper>
         <ProtectedStatefulDiv contentFunction={this.props.generateCodeAppHtml} />
       </StudioAppWrapper>
     );
   }
-});
-module.exports = NetSimView;
+}