Convert component to TypeScript

ui/src/admin/components/chronograf/OrganizationsTableRow.tsx

@@ -1,42 +1,70 @@
 import React, {Component} from 'react'
-import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
-import {withRouter} from 'react-router'
+import {withRouter, InjectedRouter} from 'react-router'
 
-import ConfirmButton from 'shared/components/ConfirmButton'
-import Dropdown from 'shared/components/Dropdown'
-import InputClickToEdit from 'shared/components/InputClickToEdit'
+import ConfirmButton from 'src/shared/components/ConfirmButton'
+import Dropdown from 'src/shared/components/Dropdown'
+import InputClickToEdit from 'src/shared/components/InputClickToEdit'
 
-import {meChangeOrganizationAsync} from 'shared/actions/auth'
+import {meChangeOrganizationAsync} from 'src/shared/actions/auth'
 
 import {DEFAULT_ORG_ID} from 'src/admin/constants/chronografAdmin'
 import {USER_ROLES} from 'src/admin/constants/chronografAdmin'
+import {Organization} from 'src/types'
 
-class OrganizationsTableRow extends Component {
-  handleChangeCurrentOrganization = async () => {
+interface CurrentOrganization {
+  name: string
+  id: string
+}
+
+interface ExternalLink {
+  name: string
+  url: string
+}
+interface ExternalLinks {
+  custom: ExternalLink[]
+}
+interface Links {
+  me: string
+  external: ExternalLinks
+}
+
+interface Props {
+  organization: Organization
+  currentOrganization: CurrentOrganization
+  onDelete: (Organization) => void
+  onRename: (Organization, newName: string) => void
+  onChooseDefaultRole: (Organization, roleName: string) => void
+  meChangeOrganization: (me: string, id) => void
+  links: Links
+  router: InjectedRouter
+}
+
+class OrganizationsTableRow extends Component<Props, {}> {
+  public handleChangeCurrentOrganization = async () => {
     const {router, links, meChangeOrganization, organization} = this.props
 
     await meChangeOrganization(links.me, {organization: organization.id})
     router.push('')
   }
 
-  handleUpdateOrgName = newName => {
+  public handleUpdateOrgName = newName => {
     const {organization, onRename} = this.props
     onRename(organization, newName)
   }
 
-  handleDeleteOrg = () => {
+  public handleDeleteOrg = () => {
     const {onDelete, organization} = this.props
     onDelete(organization)
   }
 
-  handleChooseDefaultRole = role => {
+  public handleChooseDefaultRole = role => {
     const {organization, onChooseDefaultRole} = this.props
     onChooseDefaultRole(organization, role.name)
   }
 
-  render() {
+  public render() {
     const {organization, currentOrganization} = this.props
 
     const dropdownRolesItems = USER_ROLES.map(role => ({
@@ -86,38 +114,6 @@ class OrganizationsTableRow extends Component {
   }
 }
 
-const {arrayOf, func, shape, string} = PropTypes
-
-OrganizationsTableRow.propTypes = {
-  organization: shape({
-    id: string, // when optimistically created, organization will not have an id
-    name: string.isRequired,
-    defaultRole: string.isRequired,
-  }).isRequired,
-  onDelete: func.isRequired,
-  onRename: func.isRequired,
-  onChooseDefaultRole: func.isRequired,
-  currentOrganization: shape({
-    name: string.isRequired,
-    id: string.isRequired,
-  }),
-  router: shape({
-    push: func.isRequired,
-  }).isRequired,
-  links: shape({
-    me: string,
-    external: shape({
-      custom: arrayOf(
-        shape({
-          name: string.isRequired,
-          url: string.isRequired,
-        })
-      ),
-    }),
-  }),
-  meChangeOrganization: func.isRequired,
-}
-
 const mapDispatchToProps = dispatch => ({
   meChangeOrganization: bindActionCreators(meChangeOrganizationAsync, dispatch),
 })
@@ -126,6 +122,6 @@ const mapStateToProps = ({links}) => ({
   links,
 })
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  withRouter(OrganizationsTableRow)
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(OrganizationsTableRow)
 )