Merge pull request #1031 from TheThingsNetwork/fix/1021-persistent-er…

…rors

Fix component throw persistent error

pkg/webui/console/views/application-api-key-add/index.js

@@ -18,13 +18,13 @@ import bind from 'autobind-decorator'
 import { connect } from 'react-redux'
 import { replace } from 'connected-react-router'
 
-import Spinner from '../../../components/spinner'
 import Breadcrumb from '../../../components/breadcrumbs/breadcrumb'
 import { withBreadcrumb } from '../../../components/breadcrumbs/context'
 import sharedMessages from '../../../lib/shared-messages'
 import Message from '../../../lib/components/message'
 import IntlHelmet from '../../../lib/components/intl-helmet'
 import { ApiKeyCreateForm } from '../../components/api-key-form'
+import withRequest from '../../../lib/components/with-request'
 
 import { getApplicationsRightsList } from '../../store/actions/applications'
 import {
@@ -43,7 +43,15 @@ import api from '../../api'
   error: selectApplicationRightsError(state),
   rights: selectApplicationRights(state),
   universalRights: selectApplicationUniversalRights(state),
+}),
+dispatch => ({
+  getApplicationsRightsList: appId => dispatch(getApplicationsRightsList(appId)),
+  navigateToList: appId => dispatch(replace(`/console/applications/${appId}/api-keys`)),
 }))
+@withRequest(
+  ({ appId, getApplicationsRightsList }) => getApplicationsRightsList(appId),
+  ({ fetching, rights }) => fetching || !Boolean(rights.length)
+)
 @withBreadcrumb('apps.single.api-keys.add', function (props) {
   const appId = props.appId
   return (
@@ -63,28 +71,14 @@ export default class ApplicationApiKeyAdd extends React.Component {
     this.createApplicationKey = key => api.application.apiKeys.create(props.appId, key)
   }
 
-  componentDidMount () {
-    const { dispatch, appId } = this.props
-
-    dispatch(getApplicationsRightsList(appId))
-  }
-
   handleApprove () {
-    const { dispatch, appId } = this.props
+    const { navigateToList, appId } = this.props
 
-    dispatch(replace(`/console/applications/${appId}/api-keys`))
+    navigateToList(appId)
   }
 
   render () {
-    const { rights, fetching, error, universalRights } = this.props
-
-    if (error) {
-      throw error
-    }
-
-    if (fetching || !rights.length) {
-      return <Spinner center />
-    }
+    const { rights, universalRights } = this.props
 
     return (
       <Container>

pkg/webui/console/views/application-api-key-edit/index.js

@@ -21,10 +21,10 @@ import { replace } from 'connected-react-router'
 import { withBreadcrumb } from '../../../components/breadcrumbs/context'
 import Breadcrumb from '../../../components/breadcrumbs/breadcrumb'
 import sharedMessages from '../../../lib/shared-messages'
-import Spinner from '../../../components/spinner'
 import Message from '../../../lib/components/message'
 import IntlHelmet from '../../../lib/components/intl-helmet'
 import { ApiKeyEditForm } from '../../components/api-key-form'
+import withRequest from '../../../lib/components/with-request'
 
 import {
   getApplicationApiKey,
@@ -62,12 +62,16 @@ import api from '../../api'
   }
 },
 dispatch => ({
-  async loadPageData (appId, apiKeyId) {
-    await dispatch(getApplicationsRightsList(appId))
+  loadData (appId, apiKeyId) {
+    dispatch(getApplicationsRightsList(appId))
     dispatch(getApplicationApiKey(appId, apiKeyId))
   },
   deleteSuccess: appId => dispatch(replace(`/console/applications/${appId}/api-keys`)),
 }))
+@withRequest(
+  ({ loadData, appId, keyId }) => loadData(appId, keyId),
+  ({ fetching, apiKey }) => fetching || !Boolean(apiKey)
+)
 @withBreadcrumb('apps.single.api-keys.edit', function (props) {
   const { appId, keyId } = props
 
@@ -93,28 +97,14 @@ export default class ApplicationApiKeyEdit extends React.Component {
     )
   }
 
-  componentDidMount () {
-    const { loadPageData, appId, keyId } = this.props
-
-    loadPageData(appId, keyId)
-  }
-
   onDeleteSuccess () {
     const { appId, deleteSuccess } = this.props
 
     deleteSuccess(appId)
   }
 
   render () {
-    const { apiKey, rights, fetching, error, universalRights } = this.props
-
-    if (error) {
-      throw error
-    }
-
-    if (fetching || !apiKey) {
-      return <Spinner center />
-    }
+    const { apiKey, rights, universalRights } = this.props
 
     return (
       <Container>

pkg/webui/console/views/application-collaborator-add/index.js

@@ -18,13 +18,13 @@ import bind from 'autobind-decorator'
 import { connect } from 'react-redux'
 import { push } from 'connected-react-router'
 
-import Spinner from '../../../components/spinner'
 import Breadcrumb from '../../../components/breadcrumbs/breadcrumb'
 import { withBreadcrumb } from '../../../components/breadcrumbs/context'
 import sharedMessages from '../../../lib/shared-messages'
 import CollaboratorForm from '../../components/collaborator-form'
 import Message from '../../../lib/components/message'
 import IntlHelmet from '../../../lib/components/intl-helmet'
+import withRequest from '../../../lib/components/with-request'
 
 import { getApplicationsRightsList } from '../../store/actions/applications'
 import {
@@ -54,6 +54,10 @@ import api from '../../api'
   redirectToList: () => dispatchProps.redirectToList(stateProps.appId),
   getApplicationsRightsList: () => dispatchProps.getApplicationsRightsList(stateProps.appId),
 }))
+@withRequest(
+  ({ getApplicationsRightsList }) => getApplicationsRightsList(),
+  ({ fetching, rights }) => fetching || !Boolean(rights.length)
+)
 @withBreadcrumb('apps.single.collaborators.add', function (props) {
   const appId = props.appId
   return (
@@ -71,39 +75,19 @@ export default class ApplicationCollaboratorAdd extends React.Component {
     error: '',
   }
 
-  componentDidMount () {
-    const { getApplicationsRightsList } = this.props
-
-    getApplicationsRightsList()
-  }
-
-  componentDidUpdate (prevProps) {
-    const { error } = this.props
-
-    if (Boolean(error) && prevProps.error !== error) {
-      throw error
-    }
-  }
-
   async handleSubmit (collaborator) {
     const { appId } = this.props
 
     await api.application.collaborators.add(appId, collaborator)
-
   }
 
   render () {
     const {
       rights,
-      fetching,
       universalRights,
       redirectToList,
     } = this.props
 
-    if (fetching && !rights.length) {
-      return <Spinner center />
-    }
-
     return (
       <Container>
         <Row>

pkg/webui/console/views/application-collaborator-edit/index.js

@@ -22,10 +22,10 @@ import { withBreadcrumb } from '../../../components/breadcrumbs/context'
 import Breadcrumb from '../../../components/breadcrumbs/breadcrumb'
 import sharedMessages from '../../../lib/shared-messages'
 import CollaboratorForm from '../../components/collaborator-form'
-import Spinner from '../../../components/spinner'
 import Message from '../../../lib/components/message'
 import IntlHelmet from '../../../lib/components/intl-helmet'
 import toast from '../../../components/toast'
+import withRequest from '../../../lib/components/with-request'
 
 import {
   getApplicationCollaborator,
@@ -84,6 +84,10 @@ import api from '../../api'
   redirectToList: () => dispatchProps.redirectToList(stateProps.appId),
 })
 )
+@withRequest(
+  ({ loadData }) => loadData(),
+  ({ fetching, collaborator }) => fetching || !Boolean(collaborator)
+)
 @withBreadcrumb('apps.single.collaborators.edit', function (props) {
   const { appId, collaboratorId, collaboratorType } = props
 
@@ -102,20 +106,6 @@ export default class ApplicationCollaboratorEdit extends React.Component {
     error: '',
   }
 
-  componentDidMount () {
-    const { loadData } = this.props
-
-    loadData()
-  }
-
-  componentDidUpdate (prevProps) {
-    const { error } = this.props
-
-    if (Boolean(error) && prevProps.error !== error) {
-      throw error
-    }
-  }
-
   async handleSubmit (updatedCollaborator) {
     const { appId } = this.props
 
@@ -158,15 +148,10 @@ export default class ApplicationCollaboratorEdit extends React.Component {
     const {
       collaborator,
       rights,
-      fetching,
       universalRights,
       redirectToList,
     } = this.props
 
-    if (fetching || !collaborator) {
-      return <Spinner center />
-    }
-
     return (
       <Container>
         <Row>

pkg/webui/console/views/application-integration-edit/index.js

@@ -25,9 +25,9 @@ import IntlHelmet from '../../../lib/components/intl-helmet'
 import Message from '../../../lib/components/message'
 import WebhookForm from '../../components/webhook-form'
 import toast from '../../../components/toast'
-import Spinner from '../../../components/spinner'
 import diff from '../../../lib/diff'
 import sharedMessages from '../../../lib/shared-messages'
+import withRequest from '../../../lib/components/with-request'
 
 import {
   selectSelectedWebhook,
@@ -70,6 +70,10 @@ const webhookEntitySelector = [
     navigateToList: () => dispatch(replace(`/console/applications/${appId}/integrations`)),
   }
 })
+@withRequest(
+  ({ getWebhook }) => getWebhook(),
+  ({ fetching, webhook }) => fetching || !Boolean(webhook)
+)
 @withBreadcrumb('apps.single.integrations.edit', function (props) {
   const { appId, match: { params: { webhookId }}} = props
   return (
@@ -82,11 +86,6 @@ const webhookEntitySelector = [
 })
 @bind
 export default class ApplicationIntegrationEdit extends Component {
-  componentDidMount () {
-    const { getWebhook } = this.props
-
-    getWebhook()
-  }
 
   async handleSubmit (webhook) {
     const { appId, match: { params: { webhookId }}, webhook: originalWebhook } = this.props
@@ -120,15 +119,7 @@ export default class ApplicationIntegrationEdit extends Component {
   }
 
   render () {
-    const { webhook, fetching, error } = this.props
-
-    if (fetching || !webhook) {
-      return <Spinner center />
-    }
-
-    if (error) {
-      throw error
-    }
+    const { webhook } = this.props
 
     return (
       <Container>

pkg/webui/console/views/gateway-api-key-add/index.js

@@ -18,13 +18,13 @@ import bind from 'autobind-decorator'
 import { connect } from 'react-redux'
 import { replace } from 'connected-react-router'
 
-import Spinner from '../../../components/spinner'
 import Breadcrumb from '../../../components/breadcrumbs/breadcrumb'
 import { withBreadcrumb } from '../../../components/breadcrumbs/context'
 import sharedMessages from '../../../lib/shared-messages'
 import Message from '../../../lib/components/message'
 import IntlHelmet from '../../../lib/components/intl-helmet'
 import { ApiKeyCreateForm } from '../../components/api-key-form'
+import withRequest from '../../../lib/components/with-request'
 
 import { getGatewaysRightsList } from '../../store/actions/gateways'
 import {
@@ -43,7 +43,15 @@ import api from '../../api'
   error: selectGatewayRightsError(state),
   rights: selectGatewayRights(state),
   universalRights: selectGatewayUniversalRights(state),
+}),
+dispatch => ({
+  getGatewaysRightsList: gtwId => dispatch(getGatewaysRightsList(gtwId)),
+  navigateToList: gtwId => dispatch(replace(`/console/gateways/${gtwId}/api-keys`)),
 }))
+@withRequest(
+  ({ gtwId, getGatewaysRightsList }) => getGatewaysRightsList(gtwId),
+  ({ fetching, rights }) => fetching || !Boolean(rights.length)
+)
 @withBreadcrumb('gtws.single.api-keys.add', function (props) {
   const gtwId = props.gtwId
 
@@ -64,28 +72,14 @@ export default class GatewayApiKeyAdd extends React.Component {
     this.createGatewayKey = key => api.gateway.apiKeys.create(props.gtwId, key)
   }
 
-  componentDidMount () {
-    const { dispatch, gtwId } = this.props
-
-    dispatch(getGatewaysRightsList(gtwId))
-  }
-
   handleApprove () {
-    const { dispatch, gtwId } = this.props
+    const { navigateToList, gtwId } = this.props
 
-    dispatch(replace(`/console/gateways/${gtwId}/api-keys`))
+    navigateToList(gtwId)
   }
 
   render () {
-    const { rights, fetching, error, universalRights } = this.props
-
-    if (error) {
-      throw error
-    }
-
-    if (fetching || !rights.length) {
-      return <Spinner center />
-    }
+    const { rights, universalRights } = this.props
 
     return (
       <Container>