Convert DashboadsPage to typescript

ui/src/dashboards/containers/DashboardsPage.tsx

@@ -1,8 +1,6 @@
-import React, {Component} from 'react'
+import React, {PureComponent} from 'react'
-import PropTypes from 'prop-types'
+import {withRouter, InjectedRouter} from 'react-router'
-import {withRouter} from 'react-router'
 import {connect} from 'react-redux'
-import {bindActionCreators} from 'redux'
 import download from 'src/external/download'
 
 import DashboardsHeader from 'src/dashboards/components/DashboardsHeader'
@@ -18,60 +16,30 @@ import {
 import {NEW_DASHBOARD} from 'src/dashboards/constants'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+import {Source, Dashboard} from 'src/types'
+
+interface Props {
+  source: Source
+  router: InjectedRouter
+  handleGetDashboards: () => void
+  handleGetChronografVersion: () => void
+  handleDeleteDashboard: (dashboard: Dashboard) => void
+  dashboards: Dashboard[]
+}
+
 @ErrorHandling
-class DashboardsPage extends Component {
+class DashboardsPage extends PureComponent<Props> {
-  componentDidMount() {
+  public componentDidMount() {
     this.props.handleGetDashboards()
   }
 
-  handleCreateDashboard = async () => {
+  public render() {
-    const {
-      source: {id},
-      router: {push},
-    } = this.props
-    const {data} = await createDashboard(NEW_DASHBOARD)
-    push(`/sources/${id}/dashboards/${data.id}`)
-  }
-
-  handleCloneDashboard = dashboard => async () => {
-    const {
-      source: {id},
-      router: {push},
-    } = this.props
-    const {data} = await createDashboard({
-      ...dashboard,
-      name: `${dashboard.name} (clone)`,
-    })
-    push(`/sources/${id}/dashboards/${data.id}`)
-  }
-
-  handleDeleteDashboard = dashboard => () => {
-    this.props.handleDeleteDashboard(dashboard)
-  }
-
-  handleExportDashboard = dashboard => async () => {
-    const dashboardForDownload = await this.modifyDashboardForDownload(
-      dashboard
-    )
-    download(
-      JSON.stringify(dashboardForDownload),
-      `${dashboard.name}.json`,
-      'text/plain'
-    )
-  }
-
-  modifyDashboardForDownload = async dashboard => {
-    const version = await this.props.handleGetChronografVersion()
-    return {chronografVersion: version, dashboard}
-  }
-
-  render() {
     const {dashboards} = this.props
     const dashboardLink = `/sources/${this.props.source.id}`
 
     return (
       <div className="page">
-        <DashboardsHeader sourceName={this.props.source.name} />
+        <DashboardsHeader />
         <DashboardsContents
           dashboardLink={dashboardLink}
           dashboards={dashboards}
@@ -83,27 +51,51 @@ class DashboardsPage extends Component {
       </div>
     )
   }
-}
 
-const {arrayOf, func, string, shape} = PropTypes
+  private handleCreateDashboard = async (): Promise<void> => {
+    const {
+      source: {id},
+      router: {push},
+    } = this.props
+    const {data} = await createDashboard(NEW_DASHBOARD)
+    push(`/sources/${id}/dashboards/${data.id}`)
+  }
 
-DashboardsPage.propTypes = {
+  private handleCloneDashboard = (dashboard: Dashboard) => async (): Promise<
-  source: shape({
+    void
-    id: string.isRequired,
+  > => {
-    name: string.isRequired,
+    const {
-    type: string,
+      source: {id},
-    links: shape({
+      router: {push},
-      proxy: string.isRequired,
+    } = this.props
-    }).isRequired,
+    const {data} = await createDashboard({
-    telegraf: string.isRequired,
+      ...dashboard,
-  }),
+      name: `${dashboard.name} (clone)`,
-  router: shape({
+    })
-    push: func.isRequired,
+    push(`/sources/${id}/dashboards/${data.id}`)
-  }).isRequired,
+  }
-  handleGetDashboards: func.isRequired,
+
-  handleGetChronografVersion: func.isRequired,
+  private handleDeleteDashboard = (dashboard: Dashboard) => (): void => {
-  handleDeleteDashboard: func.isRequired,
+    this.props.handleDeleteDashboard(dashboard)
-  dashboards: arrayOf(shape()),
+  }
+
+  private handleExportDashboard = (dashboard: Dashboard) => async (): Promise<
+    void
+  > => {
+    const dashboardForDownload = await this.modifyDashboardForDownload(
+      dashboard
+    )
+    download(
+      JSON.stringify(dashboardForDownload),
+      `${dashboard.name}.json`,
+      'text/plain'
+    )
+  }
+
+  private modifyDashboardForDownload = async (dashboard: Dashboard) => {
+    const version = await this.props.handleGetChronografVersion()
+    return {chronografVersion: version, dashboard}
+  }
 }
 
 const mapStateToProps = ({dashboardUI: {dashboards, dashboard}}) => ({
@@ -111,15 +103,12 @@ const mapStateToProps = ({dashboardUI: {dashboards, dashboard}}) => ({
   dashboard,
 })
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = {
-  handleGetDashboards: bindActionCreators(getDashboardsAsync, dispatch),
+  handleGetDashboards: getDashboardsAsync,
-  handleDeleteDashboard: bindActionCreators(deleteDashboardAsync, dispatch),
+  handleDeleteDashboard: deleteDashboardAsync,
-  handleGetChronografVersion: bindActionCreators(
+  handleGetChronografVersion: getChronografVersion,
-    getChronografVersion,
+}
-    dispatch
-  ),
-})
 
-export default connect(mapStateToProps, mapDispatchToProps)(
+export default withRouter(
-  withRouter(DashboardsPage)
+  connect(mapStateToProps, mapDispatchToProps)(DashboardsPage)
 )