Refactor DashboardPage to use js class

ui/src/dashboards/containers/DashboardPage.js

@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react'
+import React, {PropTypes, Component} from 'react'
 import {Link} from 'react-router'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
@@ -13,73 +13,32 @@ import * as dashboardActionCreators from 'src/dashboards/actions'
 import {setAutoRefresh} from 'shared/actions/app'
 import {presentationButtonDispatcher} from 'shared/dispatchers'
 
-const {
+class DashboardPage extends Component {
-  arrayOf,
+  constructor(props) {
-  bool,
+    super(props)
-  func,
-  number,
-  shape,
-  string,
-} = PropTypes
 
-const DashboardPage = React.createClass({
+    this.state = {
-  propTypes: {
-    source: shape({
-      links: shape({
-        proxy: string,
-        self: string,
-      }),
-    }),
-    params: shape({
-      sourceID: string.isRequired,
-      dashboardID: string.isRequired,
-    }).isRequired,
-    location: shape({
-      pathname: string.isRequired,
-    }).isRequired,
-    dashboardActions: shape({
-      putDashboard: func.isRequired,
-      getDashboardsAsync: func.isRequired,
-      setTimeRange: func.isRequired,
-      addDashboardCellAsync: func.isRequired,
-      editDashboardCell: func.isRequired,
-      renameDashboardCell: func.isRequired,
-    }).isRequired,
-    dashboards: arrayOf(shape({
-      id: number.isRequired,
-      cells: arrayOf(shape({})).isRequired,
-    })),
-    handleChooseAutoRefresh: func.isRequired,
-    autoRefresh: number.isRequired,
-    timeRange: shape({}).isRequired,
-    inPresentationMode: bool.isRequired,
-    handleClickPresentationButton: func,
-    cellQueryStatus: shape({
-      queryID: string,
-      status: shape(),
-    }).isRequired,
-  },
-
-  childContextTypes: {
-    source: shape({
-      links: shape({
-        proxy: string.isRequired,
-        self: string.isRequired,
-      }).isRequired,
-    }).isRequired,
-  },
-
-  getChildContext() {
-    return {source: this.props.source}
-  },
-
-  getInitialState() {
-    return {
       selectedCell: null,
       isEditMode: false,
       isTemplating: false,
     }
-  },
+
+    this.handleAddCell = ::this.handleAddCell
+    this.handleEditDashboard = ::this.handleEditDashboard
+    this.handleSaveEditedCell = ::this.handleSaveEditedCell
+    this.handleDismissOverlay = ::this.handleDismissOverlay
+    this.handleUpdatePosition = ::this.handleUpdatePosition
+    this.handleChooseTimeRange = ::this.handleChooseTimeRange
+    this.handleRenameDashboard = ::this.handleRenameDashboard
+    this.handleEditDashboardCell = ::this.handleEditDashboardCell
+    this.handleCancelEditDashboard = ::this.handleCancelEditDashboard
+    this.handleDeleteDashboardCell = ::this.handleDeleteDashboardCell
+    this.handleOpenTemplateManager = ::this.handleOpenTemplateManager
+    this.handleRenameDashboardCell = ::this.handleRenameDashboardCell
+    this.handleUpdateDashboardCell = ::this.handleUpdateDashboardCell
+    this.handleCloseTemplateManager = ::this.handleCloseTemplateManager
+    this.handleSummonOverlayTechnologies = ::this.handleSummonOverlayTechnologies
+  }
 
   componentDidMount() {
     const {
@@ -88,86 +47,86 @@ const DashboardPage = React.createClass({
     } = this.props
 
     getDashboardsAsync(dashboardID)
-  },
+  }
 
   handleOpenTemplateManager() {
     this.setState({isTemplating: true})
-  },
+  }
 
   handleCloseTemplateManager() {
     this.setState({isTemplating: false})
-  },
+  }
 
   handleDismissOverlay() {
     this.setState({selectedCell: null})
-  },
+  }
 
   handleSaveEditedCell(newCell) {
     this.props.dashboardActions.updateDashboardCell(this.getActiveDashboard(), newCell)
     .then(this.handleDismissOverlay)
-  },
+  }
 
   handleSummonOverlayTechnologies(cell) {
     this.setState({selectedCell: cell})
-  },
+  }
 
   handleChooseTimeRange({lower}) {
     this.props.dashboardActions.setTimeRange({lower, upper: null})
-  },
+  }
 
   handleUpdatePosition(cells) {
     const newDashboard = {...this.getActiveDashboard(), cells}
     this.props.dashboardActions.updateDashboard(newDashboard)
     this.props.dashboardActions.putDashboard(newDashboard)
-  },
+  }
 
   handleAddCell() {
     this.props.dashboardActions.addDashboardCellAsync(this.getActiveDashboard())
-  },
+  }
 
   handleEditDashboard() {
     this.setState({isEditMode: true})
-  },
+  }
 
   handleCancelEditDashboard() {
     this.setState({isEditMode: false})
-  },
+  }
 
   handleRenameDashboard(name) {
     this.setState({isEditMode: false})
     const newDashboard = {...this.getActiveDashboard(), name}
     this.props.dashboardActions.updateDashboard(newDashboard)
     this.props.dashboardActions.putDashboard(newDashboard)
-  },
+  }
 
   // Places cell into editing mode.
   handleEditDashboardCell(x, y, isEditing) {
     return () => {
       this.props.dashboardActions.editDashboardCell(this.getActiveDashboard(), x, y, !isEditing) /* eslint-disable no-negated-condition */
     }
-  },
+  }
 
   handleRenameDashboardCell(x, y) {
     return (evt) => {
       this.props.dashboardActions.renameDashboardCell(this.getActiveDashboard(), x, y, evt.target.value)
     }
-  },
+  }
 
   handleUpdateDashboardCell(newCell) {
     return () => {
       this.props.dashboardActions.editDashboardCell(this.getActiveDashboard(), newCell.x, newCell.y, false)
       this.props.dashboardActions.putDashboard(this.getActiveDashboard())
     }
-  },
+  }
 
   handleDeleteDashboardCell(cell) {
     this.props.dashboardActions.deleteDashboardCellAsync(cell)
-  },
+  }
 
   getActiveDashboard() {
     const {params: {dashboardID}, dashboards} = this.props
     return dashboards.find(d => d.id === +dashboardID)
-  },
+  }
 
   render() {
     const {
@@ -217,12 +176,12 @@ const DashboardPage = React.createClass({
             <CellEditorOverlay
               source={source}
               cell={selectedCell}
-              autoRefresh={autoRefresh}
               timeRange={timeRange}
-              onCancel={this.handleDismissOverlay}
+              autoRefresh={autoRefresh}
-              onSave={this.handleSaveEditedCell}
-              editQueryStatus={dashboardActions.editCellQueryStatus}
               queryStatus={cellQueryStatus}
+              onSave={this.handleSaveEditedCell}
+              onCancel={this.handleDismissOverlay}
+              editQueryStatus={dashboardActions.editCellQueryStatus}
             /> :
             null
         }
@@ -283,8 +242,54 @@ const DashboardPage = React.createClass({
         }
       </div>
     )
-  },
+  }
-})
+}
+
+const {
+  arrayOf,
+  bool,
+  func,
+  number,
+  shape,
+  string,
+} = PropTypes
+
+DashboardPage.propTypes = {
+  source: shape({
+    links: shape({
+      proxy: string,
+      self: string,
+    }),
+  }).isRequired,
+  params: shape({
+    sourceID: string.isRequired,
+    dashboardID: string.isRequired,
+  }).isRequired,
+  location: shape({
+    pathname: string.isRequired,
+  }).isRequired,
+  dashboardActions: shape({
+    putDashboard: func.isRequired,
+    getDashboardsAsync: func.isRequired,
+    setTimeRange: func.isRequired,
+    addDashboardCellAsync: func.isRequired,
+    editDashboardCell: func.isRequired,
+    renameDashboardCell: func.isRequired,
+  }).isRequired,
+  dashboards: arrayOf(shape({
+    id: number.isRequired,
+    cells: arrayOf(shape({})).isRequired,
+  })),
+  handleChooseAutoRefresh: func.isRequired,
+  autoRefresh: number.isRequired,
+  timeRange: shape({}).isRequired,
+  inPresentationMode: bool.isRequired,
+  handleClickPresentationButton: func,
+  cellQueryStatus: shape({
+    queryID: string,
+    status: shape(),
+  }).isRequired,
+}
 
 const mapStateToProps = (state) => {
   const {