Upgrade to 16.8 and remove use-hooks

gui/src/components/AvatarMenu.js

@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { useRef, useState } from 'react'
 import { withStyles } from '@material-ui/core/styles'
-import { useHooks, useState, useRef } from 'use-react-hooks'
 import { Link } from 'react-router-dom'
 import Popper from '@material-ui/core/Popper'
 import Grow from '@material-ui/core/Grow'
@@ -43,7 +42,7 @@ const styles = theme => {
   }
 }
 
-const AvatarMenu = useHooks(({ classes }) => {
+const AvatarMenu = ({ classes }) => {
   const anchorEl = useRef(null)
   const [open, setOpenState] = useState(false)
   const handleToggle = () => setOpenState(!open)
@@ -99,6 +98,6 @@ const AvatarMenu = useHooks(({ classes }) => {
       </Popper>
     </React.Fragment>
   )
-})
+}
 
 export default withStyles(styles)(AvatarMenu)

gui/src/components/BridgeList.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import Link from 'components/Link'
 import PropTypes from 'prop-types'
 import Card from '@material-ui/core/Card'
@@ -10,7 +10,6 @@ import TableRow from '@material-ui/core/TableRow'
 import TablePagination from '@material-ui/core/TablePagination'
 import Typography from '@material-ui/core/Typography'
 import TableButtons, { FIRST_PAGE } from 'components/TableButtons'
-import { useHooks, useState, useEffect } from 'use-react-hooks'
 
 const renderFetching = () => (
   <TableRow>
@@ -57,7 +56,7 @@ const renderBody = (bridges, fetching, error) => {
   }
 }
 
-export const BridgeList = useHooks(props => {
+export const BridgeList = props => {
   const [page, setPage] = useState(FIRST_PAGE)
   useEffect(() => {
     const queryPage = (props.match && parseInt(props.match.params.bridgePage, 10)) || FIRST_PAGE
@@ -125,7 +124,6 @@ export const BridgeList = useHooks(props => {
     </Card>
   )
 }
-)
 
 BridgeList.propTypes = {
   bridges: PropTypes.array.isRequired,

gui/src/components/Jobs/List.js

@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-import { useHooks, useState, useEffect } from 'use-react-hooks'
 import Card from '@material-ui/core/Card'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
@@ -60,7 +59,7 @@ const renderBody = (jobs, error) => {
   )
 }
 
-export const List = useHooks(props => {
+export const List = props => {
   const [ page, setPage ] = useState(FIRST_PAGE)
   useEffect(() => {
     const queryPage = (props.match && parseInt(props.match.params.jobPage, 10)) || FIRST_PAGE
@@ -116,7 +115,6 @@ export const List = useHooks(props => {
     </Card>
   )
 }
-)
 
 List.propTypes = {
   jobs: PropTypes.array,

gui/src/containers/Bridges/Edit.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'react-static'
 import { connect } from 'react-redux'
@@ -18,13 +18,12 @@ import {
 import matchRouteAndMapDispatchToProps from 'utils/matchRouteAndMapDispatchToProps'
 import ReactStaticLinkComponent from 'components/ReactStaticLinkComponent'
 import Content from 'components/Content'
-import { useHooks, useEffect } from 'use-react-hooks'
 
 const SuccessNotification = ({ name }) => (<React.Fragment>
   Successfully updated <Link to={`/bridges/${name}`}>{name}</Link>
 </React.Fragment>)
 
-export const Edit = useHooks(props => {
+export const Edit = props => {
   useEffect(() => {
     const { fetchBridgeSpec, match } = props
     fetchBridgeSpec(match.params.bridgeId)
@@ -88,7 +87,6 @@ export const Edit = useHooks(props => {
     </Content>
   )
 }
-)
 
 Edit.propTypes = {
   bridge: PropTypes.object

gui/src/containers/Bridges/Show.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Typography from '@material-ui/core/Typography'
@@ -12,7 +12,6 @@ import { fetchBridgeSpec } from 'actions'
 import bridgeSelector from 'selectors/bridge'
 import Content from 'components/Content'
 import Button from 'components/Button'
-import { useHooks, useEffect } from 'use-react-hooks'
 
 const renderLoading = () => (
   <div>Loading...</div>
@@ -42,7 +41,7 @@ const renderLoaded = props => (
 
 const renderDetails = props => props.bridge ? renderLoaded(props) : renderLoading(props)
 
-export const Show = useHooks(props => {
+export const Show = props => {
   useEffect(() => { props.fetchBridgeSpec(props.match.params.bridgeId) }, [])
   return (
     <Content>
@@ -83,7 +82,6 @@ export const Show = useHooks(props => {
     </Content>
   )
 }
-)
 
 Show.propTypes = {
   bridge: PropTypes.object

gui/src/containers/Configuration.js

@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { useHooks, useEffect } from 'use-react-hooks'
 import { connect } from 'react-redux'
 import Grid from '@material-ui/core/Grid'
 import Typography from '@material-ui/core/Typography'
@@ -15,7 +14,7 @@ import matchRouteAndMapDispatchToProps from 'utils/matchRouteAndMapDispatchToPro
 
 const buildInfo = extractBuildInfo()
 
-export const Configuration = useHooks(props => {
+export const Configuration = props => {
   useEffect(() => { props.fetchConfiguration() }, [])
 
   return (
@@ -59,7 +58,7 @@ export const Configuration = useHooks(props => {
       </Grid>
     </Content>
   )
-})
+}
 
 Configuration.propTypes = {
   configs: PropTypes.array.isRequired,

gui/src/containers/Configuration/DeleteJobRuns.js

@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { withStyles } from '@material-ui/core/styles'
-import { useHooks, useState } from 'use-react-hooks'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import PaddedCard from 'components/PaddedCard'
@@ -25,7 +24,7 @@ const styles = theme => {
 
 const WEEK_MS = (1000 * 60 * 60 * 24 * 7)
 
-const DeleteJobRuns = useHooks(({ classes, deleteCompletedJobRuns, deleteErroredJobRuns }) => {
+const DeleteJobRuns = ({ classes, deleteCompletedJobRuns, deleteErroredJobRuns }) => {
   const updatedBefore = new Date(Date.now() - WEEK_MS).toISOString()
   const [showCompletedConfirm, setCompletedConfirm] = useState(false)
   const [showErroredConfirm, setErroredConfirm] = useState(false)
@@ -89,7 +88,7 @@ const DeleteJobRuns = useHooks(({ classes, deleteCompletedJobRuns, deleteErrored
       </Grid>
     </PaddedCard>
   )
-})
+}
 
 const mapStateToProps = state => ({})
 

gui/src/containers/Dashboards/Index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Grid from '@material-ui/core/Grid'
@@ -16,9 +16,8 @@ import {
 import accountBalanceSelector from 'selectors/accountBalance'
 import recentJobRunsSelector from 'selectors/recentJobRuns'
 import recentlyCreatedJobsSelector from 'selectors/recentlyCreatedJobs'
-import { useHooks, useEffect } from 'use-react-hooks'
 
-export const Index = useHooks(props => {
+export const Index = props => {
   useEffect(() => {
     props.fetchAccountBalance()
     props.fetchRecentJobRuns(props.recentJobRunsCount)
@@ -55,7 +54,6 @@ export const Index = useHooks(props => {
     </Content>
   )
 }
-)
 
 Index.propTypes = {
   accountBalance: PropTypes.object,

gui/src/containers/JobRuns/Index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { withStyles } from '@material-ui/core/styles'
@@ -14,7 +14,6 @@ import List from 'components/JobRuns/List'
 import TableButtons, { FIRST_PAGE } from 'components/TableButtons'
 import Title from 'components/Title'
 import Content from 'components/Content'
-import { useHooks, useEffect, useState } from 'use-react-hooks'
 
 const styles = theme => ({
   breadcrumb: {
@@ -63,7 +62,7 @@ const renderDetails = (props, state, handleChangePage) => {
   }
 }
 
-export const Index = useHooks((props) => {
+export const Index = (props) => {
   const [ page, setPage ] = useState(FIRST_PAGE)
   useEffect(() => {
     const queryPage = props.match ? parseInt(props.match.params.jobRunsPage, 10) || FIRST_PAGE : FIRST_PAGE
@@ -90,7 +89,6 @@ export const Index = useHooks((props) => {
     </Content>
   )
 }
-)
 
 Index.propTypes = {
   classes: PropTypes.object.isRequired,

gui/src/containers/JobRuns/Show.js

@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
-import { useHooks, useEffect } from 'use-react-hooks'
 import { withStyles } from '@material-ui/core/styles'
 import Grid from '@material-ui/core/Grid'
 import Card from '@material-ui/core/Card'
@@ -38,7 +37,7 @@ const renderDetails = ({ classes, fetching, jobRun }) => {
   )
 }
 
-export const Show = useHooks(props => {
+export const Show = props => {
   useEffect(() => { props.fetchJobRun(props.jobRunId) }, [])
 
   return (<div>
@@ -52,7 +51,7 @@ export const Show = useHooks(props => {
       {renderDetails(props)}
     </Content>
   </div>)
-})
+}
 
 const mapStateToProps = (state, ownProps) => {
   const { jobSpecId, jobRunId } = ownProps.match.params

gui/src/containers/JobRuns/ShowJson.js

@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
-import { useHooks, useEffect } from 'use-react-hooks'
 import { withStyles } from '@material-ui/core/styles'
 import Grid from '@material-ui/core/Grid'
 import PaddedCard from 'components/PaddedCard'
@@ -40,7 +39,7 @@ const renderDetails = ({ fetching, jobRun }) => {
   )
 }
 
-const Show = useHooks(props => {
+const Show = props => {
   useEffect(() => { props.fetchJobRun(props.jobRunId) }, [])
 
   return (
@@ -56,7 +55,7 @@ const Show = useHooks(props => {
       </Content>
     </div>
   )
-})
+}
 
 const mapStateToProps = (state, ownProps) => {
   const { jobSpecId, jobRunId } = ownProps.match.params

gui/src/containers/Jobs/Definition.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Grid from '@material-ui/core/Grid'
 import Card from '@material-ui/core/Card'
@@ -13,7 +13,6 @@ import { fetchJob, createJobRun } from 'actions'
 import jobSelector from 'selectors/job'
 import matchRouteAndMapDispatchToProps from 'utils/matchRouteAndMapDispatchToProps'
 import jobSpecDefinition from 'utils/jobSpecDefinition'
-import { useHooks, useEffect } from 'use-react-hooks'
 
 const styles = theme => ({
   definitionTitle: {
@@ -50,7 +49,7 @@ const renderDetails = ({ job, classes }) => {
   return <React.Fragment>Fetching ...</React.Fragment>
 }
 
-const Definition = useHooks((props) => {
+const Definition = (props) => {
   useEffect(() => { props.fetchJob(props.jobSpecId) }, [])
   const { jobSpecId, job } = props
 
@@ -65,7 +64,6 @@ const Definition = useHooks((props) => {
     </Content>
   </div>
 }
-)
 
 const mapStateToProps = (state, ownProps) => {
   const jobSpecId = ownProps.match.params.jobSpecId

gui/src/containers/Jobs/Show.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { withStyles } from '@material-ui/core/styles'
@@ -15,7 +15,6 @@ import jobSelector from 'selectors/job'
 import jobRunsByJobIdSelector from 'selectors/jobRunsByJobId'
 import { formatInitiators } from 'utils/jobSpecInitiators'
 import matchRouteAndMapDispatchToProps from 'utils/matchRouteAndMapDispatchToProps'
-import { useHooks, useEffect } from 'use-react-hooks'
 
 const styles = theme => ({
   lastRun: {
@@ -69,7 +68,7 @@ const renderDetails = props => {
   return <div>Fetching...</div>
 }
 
-export const Show = useHooks(props => {
+export const Show = props => {
   useEffect(() => { fetchJob(jobSpecId) }, [])
   const { jobSpecId, job, fetchJob } = props
   return (
@@ -81,7 +80,6 @@ export const Show = useHooks(props => {
     </div>
   )
 }
-)
 
 Show.propTypes = {
   classes: PropTypes.object.isRequired,

gui/src/containers/SignIn.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { connect } from 'react-redux'
 import { Redirect } from 'react-router-dom'
 import { withStyles } from '@material-ui/core/styles'
@@ -8,7 +8,6 @@ import CardContent from '@material-ui/core/CardContent'
 import Typography from '@material-ui/core/Typography'
 import TextField from '@material-ui/core/TextField'
 import { Grid } from '@material-ui/core'
-import { useHooks, useState } from 'use-react-hooks'
 import { hot } from 'react-hot-loader'
 import { submitSignIn } from 'actions'
 import HexagonLogo from 'components/Logos/Hexagon'
@@ -38,7 +37,7 @@ const styles = theme => ({
   }
 })
 
-export const SignIn = useHooks((props) => {
+export const SignIn = (props) => {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const handleChange = name => event => {
@@ -133,7 +132,7 @@ export const SignIn = useHooks((props) => {
       </Grid>
     </Grid>
   )
-})
+}
 
 const mapStateToProps = state => ({
   fetching: state.authentication.fetching,