console: Fix gateway api keys error handling

check for error only after the _REQUEST action

Author: Bogdans Afonins

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>

pkg/webui/console/views/gateway-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 {
   getGatewayApiKey,
@@ -61,12 +61,16 @@ import api from '../../api'
   }
 },
 dispatch => ({
-  async loadPageData (gtwId, apiKeyId) {
-    await dispatch(getGatewaysRightsList(gtwId))
+  loadData (gtwId, apiKeyId) {
+    dispatch(getGatewaysRightsList(gtwId))
     dispatch(getGatewayApiKey(gtwId, apiKeyId))
   },
   deleteSuccess: gtwId => dispatch(replace(`/console/gateways/${gtwId}/api-keys`)),
 }))
+@withRequest(
+  ({ gtwId, keyId, loadData }) => loadData(gtwId, keyId),
+  ({ fetching, apiKey }) => fetching || !Boolean(apiKey)
+)
 @withBreadcrumb('gtws.single.api-keys.edit', function (props) {
   const { gtwId, keyId } = props
 
@@ -92,28 +96,14 @@ export default class GatewayApiKeyEdit extends React.Component {
     )
   }
 
-  componentDidMount () {
-    const { loadPageData, gtwId, keyId } = this.props
-
-    loadPageData(gtwId, keyId)
-  }
-
   onDeleteSuccess () {
     const { gtwId, deleteSuccess } = this.props
 
     deleteSuccess(gtwId)
   }
 
   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>