Merge "web: refactor tenants page to use a reducer"

web/src/actions/tenants.js

@@ -0,0 +1,58 @@
+// Copyright 2018 Red Hat, Inc
+//
+// Licensed under the Apache License, Version 2.0 (the "License"); you may
+// not use this file except in compliance with the License. You may obtain
+// a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations
+// under the License.
+
+import * as API from '../api'
+
+export const TENANTS_FETCH_REQUEST = 'TENANTS_FETCH_REQUEST'
+export const TENANTS_FETCH_SUCCESS = 'TENANTS_FETCH_SUCCESS'
+export const TENANTS_FETCH_FAIL = 'TENANTS_FETCH_FAIL'
+
+export const requestTenants = () => ({
+  type: TENANTS_FETCH_REQUEST
+})
+
+export const receiveTenants = json => ({
+  type: TENANTS_FETCH_SUCCESS,
+  tenants: json,
+  receivedAt: Date.now()
+})
+
+const failedTenants = error => ({
+  type: TENANTS_FETCH_FAIL,
+  error
+})
+
+const fetchTenants = () => dispatch => {
+  dispatch(requestTenants())
+  return API.fetchTenants()
+    .then(response => dispatch(receiveTenants(response.data)))
+    .catch(error => dispatch(failedTenants(error)))
+}
+
+const shouldFetchTenants = state => {
+  const tenants = state.tenants
+  if (tenants.tenants.length > 0) {
+    return false
+  }
+  if (tenants.isFetching) {
+    return false
+  }
+  return true
+}
+
+export const fetchTenantsIfNeeded = (force) => (dispatch, getState) => {
+  if (force || shouldFetchTenants(getState())) {
+    return dispatch(fetchTenants())
+  }
+}

web/src/pages/Tenants.jsx

@@ -13,32 +13,36 @@
 // under the License.
 
 import * as React from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
 import { Table } from 'patternfly-react'
 
-import { fetchTenants } from '../api'
+import Refreshable from '../containers/Refreshable'
+import { fetchTenantsIfNeeded } from '../actions/tenants'
 
-class TenantsPage extends React.Component {
-  constructor () {
-    super()
 
-    this.state = {
-      tenants: []
-    }
+class TenantsPage extends Refreshable {
+  static propTypes = {
+    remoteData: PropTypes.object,
+    dispatch: PropTypes.func
+  }
+
+  updateData = (force) => {
+    this.props.dispatch(fetchTenantsIfNeeded(force))
   }
 
   componentDidMount () {
     document.title = 'Zuul Tenants'
-    fetchTenants().then(response => {
-      this.setState({tenants: response.data})
-    })
+    this.updateData()
   }
 
+  // TODO: fix Refreshable class to work with tenant less page.
+  componentDidUpdate () { }
+
   render () {
-    const { tenants } = this.state
-    if (tenants.length === 0) {
-      return (<p>Loading...</p>)
-    }
+    const { remoteData } = this.props
+    const tenants = remoteData.tenants
     const headerFormat = value => <Table.Heading>{value}</Table.Heading>
     const cellFormat = (value) => (
       <Table.Cell>{value}</Table.Cell>)
@@ -61,19 +65,25 @@ class TenantsPage extends React.Component {
         <Link to={'/t/' + tenant.name + '/builds'}>Builds</Link>)
     })
     return (
-      <Table.PfProvider
-        striped
-        bordered
-        hover
-        columns={columns}
-      >
-        <Table.Header/>
-        <Table.Body
-          rows={tenants}
-          rowKey="name"
-        />
-      </Table.PfProvider>)
+      <React.Fragment>
+        <div style={{float: 'right'}}>
+          {this.renderSpinner()}
+        </div>
+        <Table.PfProvider
+          striped
+          bordered
+          hover
+          columns={columns}
+          >
+          <Table.Header/>
+          <Table.Body
+            rows={tenants}
+            rowKey="name"
+            />
+        </Table.PfProvider>
+      </React.Fragment>
+    )
   }
 }
 
-export default TenantsPage
+export default connect(state => ({remoteData: state.tenants}))(TenantsPage)

web/src/reducers/index.js

@@ -21,6 +21,7 @@ import job from './job'
 import jobs from './jobs'
 import status from './status'
 import tenant from './tenant'
+import tenants from './tenants'
 
 const reducers = {
   info,
@@ -30,6 +31,7 @@ const reducers = {
   errors,
   status,
   tenant,
+  tenants,
 }
 
 export default combineReducers(reducers)

web/src/reducers/tenants.js

@@ -0,0 +1,44 @@
+// Copyright 2018 Red Hat, Inc
+//
+// Licensed under the Apache License, Version 2.0 (the "License"); you may
+// not use this file except in compliance with the License. You may obtain
+// a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations
+// under the License.
+
+import {
+  TENANTS_FETCH_FAIL,
+  TENANTS_FETCH_REQUEST,
+  TENANTS_FETCH_SUCCESS
+} from '../actions/tenants'
+
+export default (state = {
+  isFetching: false,
+  tenants: []
+}, action) => {
+  switch (action.type) {
+    case TENANTS_FETCH_REQUEST:
+      return {
+        isFetching: true,
+        tenants: state.tenants
+      }
+    case TENANTS_FETCH_SUCCESS:
+      return {
+        isFetching: false,
+        tenants: action.tenants,
+      }
+    case TENANTS_FETCH_FAIL:
+      return {
+        isFetching: false,
+        tenants: state.tenants,
+      }
+    default:
+      return state
+  }
+}