rewrite OwnersList with hooks

src/routes/load/components/OwnerList/index.jsx

@@ -1,11 +1,11 @@
 // @flow
-import * as React from 'react'
-import Block from '~/components/layout/Block'
+import React, { useState, useEffect } from 'react'
 import { withStyles } from '@material-ui/core/styles'
+import OpenInNew from '@material-ui/icons/OpenInNew'
+import Block from '~/components/layout/Block'
 import Field from '~/components/forms/Field'
 import { required } from '~/components/forms/validator'
 import TextField from '~/components/forms/TextField'
-import OpenInNew from '@material-ui/icons/OpenInNew'
 import Identicon from '~/components/Identicon'
 import OpenPaper from '~/components/Stepper/OpenPaper'
 import Col from '~/components/layout/Col'
@@ -78,10 +78,6 @@ type Props = LayoutProps & {
   updateInitialProps: (initialValues: Object) => void,
 }
 
-type State = {
-  owners: Array<string>,
-}
-
 const calculateSafeValues = (owners: Array<string>, threshold: Number, values: Object) => {
   const initialValues = { ...values }
   for (let i = 0; i < owners.length; i += 1) {
@@ -91,42 +87,35 @@ const calculateSafeValues = (owners: Array<string>, threshold: Number, values: O
   return initialValues
 }
 
-class OwnerListComponent extends React.PureComponent<Props, State> {
-  static whyDidYouRender = true
+const OwnerListComponent = (props: Props) => {
+  const [owners, setOwners] = useState<Array<string>>([])
+  const {
+    values, updateInitialProps, network, classes,
+  } = props
 
-  state = {
-    owners: [],
-  }
+  useEffect(() => {
+    let isCurrent = true
 
-  mounted = false
-
-  componentDidMount = async () => {
-    this.mounted = true
-    const { values, updateInitialProps } = this.props
+    const fetchSafe = async () => {
       const safeAddress = values[FIELD_LOAD_ADDRESS]
-
       const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
-    const owners = await gnosisSafe.getOwners()
+      const safeOwners = await gnosisSafe.getOwners()
       const threshold = await gnosisSafe.getThreshold()
 
-    if (!owners) {
-      return
-    }
-
-    if (this.mounted) {
-      const initialValues = calculateSafeValues(owners.sort(), threshold, values)
+      if (isCurrent && owners) {
+        const sortedOwners = safeOwners.sort()
+        const initialValues = calculateSafeValues(sortedOwners, threshold, values)
         updateInitialProps(initialValues)
-      this.setState(() => ({ owners: owners.sort() }))
+        setOwners(sortedOwners)
       }
     }
 
-  componentWillUnmount() {
-    this.mounted = false
-  }
+    fetchSafe()
 
-  render() {
-    const { network, classes } = this.props
-    const { owners } = this.state
+    return () => {
+      isCurrent = false
+    }
+  }, [])
 
   return (
     <React.Fragment>
@@ -172,7 +161,6 @@ class OwnerListComponent extends React.PureComponent<Props, State> {
       </Block>
     </React.Fragment>
   )
-  }
 }
 
 const OwnerListPage = withStyles(styles)(OwnerListComponent)
@@ -185,6 +173,4 @@ const OwnerList = ({ updateInitialProps }: Object, network: string) => (controls
   </React.Fragment>
 )
 
-OwnerList.whyDidYouRender = true
-
 export default OwnerList