Merge pull request #176 from suppermancool/issue-171

#171 Fix service calls on root page

Author: jmgasper

package-lock.json

@@ -16,6 +16,7 @@
     "babel-plugin-named-asset-import": "^0.3.0",
     "babel-preset-react-app": "^7.0.0",
     "bfj": "6.1.1",
+    "bootstrap": "^4.4.1",
     "case-sensitive-paths-webpack-plugin": "2.1.2",
     "chalk": "2.4.1",
     "classnames": "^2.2.6",
@@ -71,6 +72,7 @@
     "react-dropzone": "^10.1.5",
     "react-google-charts": "^3.0.13",
     "react-helmet": "^5.2.0",
+    "react-js-pagination": "^3.0.3",
     "react-redux": "^6.0.0",
     "react-redux-toastr": "^7.5.1",
     "react-router-dom": "^4.3.1",

package.json

@@ -28,15 +28,59 @@ import {
   LOAD_CHALLENGE_RESOURCES_SUCCESS,
   LOAD_CHALLENGE_RESOURCES_FAILURE,
   REMOVE_ATTACHMENT,
-  PAGE_SIZE,
-  SET_FILTER_CHALLENGE_VALUE
+  PAGE_SIZE
 } from '../config/constants'
 import { fetchProjectById } from '../services/projects'
 
 /**
  * Member challenges related redux actions
  */
 
+/**
+ * Loads active challenges of project by page
+ */
+export function loadChallengesByPage (page, projectId, status, filterChallengeName = null) {
+  return (dispatch, getState) => {
+    dispatch({
+      type: LOAD_CHALLENGES_PENDING,
+      challenges: [],
+      projectId: projectId ? `${projectId}` : '',
+      status,
+      filterChallengeName,
+      perPage: PAGE_SIZE,
+      page
+    })
+
+    const filters = {}
+    if (!_.isEmpty(filterChallengeName)) {
+      filters['name'] = filterChallengeName
+    }
+    if (_.isInteger(projectId) && projectId > 0) {
+      filters['projectId'] = projectId
+    }
+    if (!_.isEmpty(status)) {
+      filters['status'] = status === '' ? undefined : _.startCase(status.toLowerCase())
+    } else if (!(_.isInteger(projectId) && projectId > 0)) {
+      filters['status'] = 'Active'
+    }
+
+    return fetchChallenges(filters, {
+      page,
+      perPage: PAGE_SIZE,
+      memberId: getState().auth.user ? getState().auth.user.userId : null
+    }).then((res) => {
+      dispatch({
+        type: LOAD_CHALLENGES_SUCCESS,
+        challenges: res.data,
+        totalChallenges: parseInt(_.get(res, 'headers.x-total', '0'))
+      })
+    }).catch(() => dispatch({
+      type: LOAD_CHALLENGES_FAILURE,
+      challenges: []
+    }))
+  }
+}
+
 /**
  * Loads active challenges of project
  */
@@ -234,19 +278,6 @@ export function removeAttachment (attachmentId) {
   }
 }
 
-/**
- * Set filter challenge value
- * @param value
- */
-export function setFilterChallengeValue (value) {
-  return (dispatch) => {
-    dispatch({
-      type: SET_FILTER_CHALLENGE_VALUE,
-      value
-    })
-  }
-}
-
 export function loadChallengeTerms () {
   return async (dispatch) => {
     const challengeTerms = await fetchChallengeTerms()

src/actions/challenges.js

@@ -106,3 +106,9 @@
     text-decoration: none;
   }
 }
+
+.paginationContainer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 30px;
+}

src/components/ChallengesComponent/ChallengeList/ChallengeList.module.scss

@@ -6,23 +6,28 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { DebounceInput } from 'react-debounce-input'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
+import Pagination from 'react-js-pagination'
 
 import 'react-tabs/style/react-tabs.css'
 import styles from './ChallengeList.module.scss'
 import NoChallenge from '../NoChallenge'
 import ChallengeCard from '../ChallengeCard'
 import Message from '../Message'
+
 import {
   CHALLENGE_STATUS
 } from '../../../config/constants'
 
+require('bootstrap/scss/bootstrap.scss')
+
 class ChallengeList extends Component {
   constructor (props) {
     super(props)
     this.state = {
       searchText: this.props.filterChallengeName
     }
     this.directUpdateSearchParam = this.updateSearchParam.bind(this) // update search param without debounce
+    this.handlePageChange = this.handlePageChange.bind(this) // update search param without debounce
     this.updateSearchParam = debounce(this.updateSearchParam.bind(this), 1000)
   }
 
@@ -32,17 +37,36 @@ class ChallengeList extends Component {
    * @param {String} projectStatus project status
    */
   updateSearchParam (searchText, projectStatus) {
-    this.setState({ searchText })
-    const { setFilterChallengeValue } = this.props
-    setFilterChallengeValue({
-      name: searchText,
-      status: projectStatus
+    const { status, filterChallengeName, loadChallengesByPage, activeProjectId } = this.props
+    this.setState({ searchText }, () => {
+      if (status !== projectStatus || searchText !== filterChallengeName) {
+        loadChallengesByPage(1, activeProjectId, projectStatus, searchText)
+      }
     })
   }
 
+  /**
+   * Update filter for getting project by pagination
+   * @param {Number} pageNumber page numer
+   */
+  handlePageChange (pageNumber) {
+    const { searchText } = this.state
+    const { page, loadChallengesByPage, activeProjectId, status } = this.props
+    if (page !== pageNumber) {
+      loadChallengesByPage(pageNumber, activeProjectId, status, searchText)
+    }
+  }
+
   render () {
     const { searchText } = this.state
-    const { activeProject, warnMessage, challenges, status } = this.props
+    const {
+      activeProject,
+      warnMessage,
+      challenges,
+      status,
+      page,
+      perPage,
+      totalChallenges } = this.props
     if (warnMessage) {
       return <Message warnMessage={warnMessage} />
     }
@@ -123,6 +147,17 @@ class ChallengeList extends Component {
             </ul>
           )
         }
+        <div className={styles.paginationContainer}>
+          <Pagination
+            activePage={page}
+            itemsCountPerPage={perPage}
+            totalItemsCount={totalChallenges}
+            pageRangeDisplayed={5}
+            onChange={this.handlePageChange}
+            itemClass='page-item'
+            linkClass='page-link'
+          />
+        </div>
       </div>
     )
   }
@@ -138,9 +173,13 @@ ChallengeList.propTypes = {
     name: PropTypes.string
   }),
   warnMessage: PropTypes.string,
-  setFilterChallengeValue: PropTypes.func,
   filterChallengeName: PropTypes.string,
-  status: PropTypes.string
+  status: PropTypes.string,
+  activeProjectId: PropTypes.number,
+  loadChallengesByPage: PropTypes.func.isRequired,
+  page: PropTypes.number.isRequired,
+  perPage: PropTypes.number.isRequired,
+  totalChallenges: PropTypes.number.isRequired
 }
 
 export default ChallengeList

src/components/ChallengesComponent/ChallengeList/index.js

@@ -14,23 +14,69 @@ import styles from './ChallengesComponent.module.scss'
 import Loader from '../Loader'
 import xss from 'xss'
 
-const ChallengesComponent = ({ challenges, isLoading, warnMessage, setFilterChallengeValue, filterChallengeName, activeProject, status }) => {
+const ChallengesComponent = ({
+  challenges,
+  isLoading,
+  warnMessage,
+  filterChallengeName,
+  activeProject,
+  status,
+  loadChallengesByPage,
+  activeProjectId,
+  page,
+  perPage,
+  totalChallenges
+}) => {
   return (
     <Sticky top={10} bottomBoundary='#SidebarContainer'>
       <div>
         <Helmet title={activeProject ? activeProject.name : ''} />
         <div className={styles.titleContainer}>
-          {(activeProject && activeProject.id) ? (<a className={styles.buttonLaunchNew} href={`${CONNECT_APP_URL}/projects/${activeProject.id}`} target={'_blank'}>
-            <PrimaryButton text={'View Project in Connect'} type={'info'} />
-          </a>) : (<span />)}
-          <div className={styles.title} dangerouslySetInnerHTML={{ __html: xss(activeProject ? activeProject.name : '') }} />
-          {(activeProject && activeProject.id) ? (<Link className={styles.buttonLaunchNew} to={`/projects/${activeProject.id}/challenges/new`}>
-            <PrimaryButton text={'Launch New'} type={'info'} />
-          </Link>) : (<span />)}
+          {(activeProject && activeProject.id) ? (
+            <a
+              className={styles.buttonLaunchNew}
+              href={`${CONNECT_APP_URL}/projects/${activeProject.id}`}
+              target={'_blank'}
+            >
+              <PrimaryButton text={'View Project in Connect'} type={'info'} />
+            </a>
+          ) : (
+            <span />
+          )}
+          <div
+            className={styles.title}
+            dangerouslySetInnerHTML={{
+              __html: xss(activeProject ? activeProject.name : '')
+            }}
+          />
+          {(activeProject && activeProject.id) ? (
+            <Link
+              className={styles.buttonLaunchNew}
+              to={`/projects/${activeProject.id}/challenges/new`}
+            >
+              <PrimaryButton text={'Launch New'} type={'info'} />
+            </Link>
+          ) : (
+            <span />
+          )}
         </div>
         <div className={styles.challenges}>
-          {isLoading && challenges.length === 0 ? <Loader /> : <ChallengeList challenges={challenges} warnMessage={warnMessage} activeProject={activeProject} setFilterChallengeValue={setFilterChallengeValue} filterChallengeName={filterChallengeName} status={status} />}
-          {isLoading && challenges.length > 0 && <Loader />}
+          {isLoading ? (
+            <Loader />
+          ) : (
+            <ChallengeList
+              challenges={challenges}
+              warnMessage={warnMessage}
+              activeProject={activeProject}
+              filterChallengeName={filterChallengeName}
+              status={status}
+              loadChallengesByPage={loadChallengesByPage}
+              activeProjectId={activeProjectId}
+              page={page}
+              perPage={perPage}
+              totalChallenges={totalChallenges}
+            />
+          )}
         </div>
       </div>
     </Sticky>
@@ -45,9 +91,13 @@ ChallengesComponent.propTypes = {
   }),
   isLoading: PropTypes.bool,
   warnMessage: PropTypes.string,
-  setFilterChallengeValue: PropTypes.func,
   filterChallengeName: PropTypes.string,
-  status: PropTypes.string
+  status: PropTypes.string,
+  activeProjectId: PropTypes.number,
+  loadChallengesByPage: PropTypes.func.isRequired,
+  page: PropTypes.number.isRequired,
+  perPage: PropTypes.number.isRequired,
+  totalChallenges: PropTypes.number.isRequired
 }
 
 ChallengesComponent.defaultProps = {

src/components/ChallengesComponent/index.js

@@ -13,7 +13,6 @@ import {
   loadChallengeDetails,
   createAttachment,
   removeAttachment,
-  setFilterChallengeValue,
   loadResources,
   loadResourceRoles
 } from '../../actions/challenges'
@@ -137,7 +136,6 @@ const mapDispatchToProps = {
   createAttachment,
   removeAttachment,
   loadChallengeTerms,
-  setFilterChallengeValue,
   loadResources,
   loadResourceRoles
 }