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

web/src/actions/projects.js

@@ -0,0 +1,62 @@
+/* global Promise */
+// 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 PROJECTS_FETCH_REQUEST = 'PROJECTS_FETCH_REQUEST'
+export const PROJECTS_FETCH_SUCCESS = 'PROJECTS_FETCH_SUCCESS'
+export const PROJECTS_FETCH_FAIL = 'PROJECTS_FETCH_FAIL'
+
+export const requestProjects = () => ({
+  type: PROJECTS_FETCH_REQUEST
+})
+
+export const receiveProjects = (tenant, json) => ({
+  type: PROJECTS_FETCH_SUCCESS,
+  tenant: tenant,
+  projects: json,
+  receivedAt: Date.now()
+})
+
+const failedProjects = error => ({
+  type: PROJECTS_FETCH_FAIL,
+  error
+})
+
+const fetchProjects = (tenant) => dispatch => {
+  dispatch(requestProjects())
+  return API.fetchProjects(tenant.apiPrefix)
+    .then(response => dispatch(receiveProjects(tenant.name, response.data)))
+    .catch(error => dispatch(failedProjects(error)))
+}
+
+const shouldFetchProjects = (tenant, state) => {
+  const projects = state.projects.projects[tenant.name]
+  if (!projects || projects.length === 0) {
+    return true
+  }
+  if (projects.isFetching) {
+    return false
+  }
+  return false
+}
+
+export const fetchProjectsIfNeeded = (tenant, force) => (
+  dispatch, getState) => {
+    if (force || shouldFetchProjects(tenant, getState())) {
+      return dispatch(fetchProjects(tenant))
+    }
+    return Promise.resolve()
+}

web/src/pages/Projects.jsx

@@ -18,39 +18,30 @@ import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { Table } from 'patternfly-react'
 
-import { fetchProjects } from '../api'
+import { fetchProjectsIfNeeded } from '../actions/projects'
+import Refreshable from '../containers/Refreshable'
 
 
-class ProjectsPage extends React.Component {
+class ProjectsPage extends Refreshable {
   static propTypes = {
-    tenant: PropTypes.object
+    tenant: PropTypes.object,
+    remoteData: PropTypes.object,
+    dispatch: PropTypes.func
   }
 
-  state = {
+  updateData (force) {
-    projects: null
+    this.props.dispatch(fetchProjectsIfNeeded(this.props.tenant, force))
-  }
-
-  updateData () {
-    fetchProjects(this.props.tenant.apiPrefix).then(response => {
-      this.setState({projects: response.data})
-    })
   }
 
   componentDidMount () {
     document.title = 'Zuul Projects'
-    if (this.props.tenant.name) {
+    super.componentDidMount()
-      this.updateData()
-    }
-  }
-
-  componentDidUpdate (prevProps) {
-    if (this.props.tenant.name !== prevProps.tenant.name) {
-      this.updateData()
-    }
   }
 
   render () {
-    const { projects } = this.state
+    const { remoteData } = this.props
+    const projects = remoteData.projects[this.props.tenant.name]
+
     if (!projects) {
       return (<p>Loading...</p>)
     }
@@ -91,19 +82,28 @@ class ProjectsPage extends React.Component {
       })
     })
     return (
-      <Table.PfProvider
+      <React.Fragment>
-        striped
+        <div style={{float: 'right'}}>
-        bordered
+          {this.renderSpinner()}
-        hover
+        </div>
-        columns={columns}
+        <Table.PfProvider
-      >
+          striped
-        <Table.Header/>
+          bordered
-        <Table.Body
+          hover
-          rows={projects}
+          columns={columns}
-          rowKey="name"
+        >
-        />
+          <Table.Header/>
-      </Table.PfProvider>)
+          <Table.Body
+            rows={projects}
+            rowKey="name"
+          />
+        </Table.PfProvider>
+      </React.Fragment>
+    )
   }
 }
 
-export default connect(state => ({tenant: state.tenant}))(ProjectsPage)
+export default connect(state => ({
+  tenant: state.tenant,
+  remoteData: state.projects,
+}))(ProjectsPage)

web/src/reducers/index.js

@@ -20,6 +20,7 @@ import errors from './errors'
 import info from './info'
 import job from './job'
 import jobs from './jobs'
+import projects from './projects'
 import status from './status'
 import tenant from './tenant'
 import tenants from './tenants'
@@ -29,6 +30,7 @@ const reducers = {
   info,
   job,
   jobs,
+  projects,
   configErrors,
   errors,
   status,

web/src/reducers/projects.js

@@ -0,0 +1,47 @@
+// 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 {
+  PROJECTS_FETCH_FAIL,
+  PROJECTS_FETCH_REQUEST,
+  PROJECTS_FETCH_SUCCESS
+} from '../actions/projects'
+
+import update from 'immutability-helper'
+
+export default (state = {
+  isFetching: false,
+  projects: {},
+}, action) => {
+  switch (action.type) {
+    case PROJECTS_FETCH_REQUEST:
+      return {
+        isFetching: true,
+        projects: state.projects,
+      }
+    case PROJECTS_FETCH_SUCCESS:
+      return {
+        isFetching: false,
+        projects: update(
+          state.projects, {$merge: {[action.tenant]: action.projects}}),
+      }
+    case PROJECTS_FETCH_FAIL:
+      return {
+        isFetching: false,
+        projects: state.projects,
+      }
+    default:
+      return state
+  }
+}