Github issue#1326, Load all active projects for customer card view

— Added infinite scroll to the customer’s view. It was necessary to load projects in paged manner because API does not support loading all project at once. API has hard limit of 20 for loading projects. As of Infinite scroll is causing two load calls when user scrolls to bottom, hence we might need to go with a simple load more button.

Author: Vikas Agarwal

npm-shrinkwrap.json

@@ -86,6 +86,7 @@
     "react-datetime": "2.7.1",
     "react-dom": "^15.6.1",
     "react-dotdotdot": "^1.0.4",
+    "react-infinite-scroller": "^1.1.1",
     "react-layout-pane": "^0.1.16",
     "react-modal": "^1.9.7",
     "react-redux": "^4.4.5",

package.json

@@ -10,7 +10,7 @@ import { loadMembers } from '../../actions/members'
 
 // ignore action
 /*eslint-disable no-unused-vars */
-const getProjectsWithMembers = (dispatch, getState, criteria, pageNum) => {
+const getProjectsWithMembers = (dispatch, getState, criteria, pageNum, keepPrevious) => {
   return new Promise((resolve, reject) => {
     dispatch({
       type: GET_PROJECTS_SEARCH_CRITERIA,
@@ -38,7 +38,10 @@ const getProjectsWithMembers = (dispatch, getState, criteria, pageNum) => {
     }
     return dispatch({
       type: GET_PROJECTS,
-      payload: getProjects(criteria, pageNum)
+      payload: getProjects(criteria, pageNum),
+      meta: {
+        keepPrevious : true
+      }
     })
     .then(({ value, action }) => {
       let userIds = []
@@ -59,11 +62,11 @@ const getProjectsWithMembers = (dispatch, getState, criteria, pageNum) => {
 }
 /*eslint-enable*/
 
-export function loadProjects(criteria, pageNum=1) {
+export function loadProjects(criteria, pageNum=1, keepPrevious=false) {
   return (dispatch, getState) => {
     return dispatch({
       type: PROJECT_SEARCH,
-      payload: getProjectsWithMembers(dispatch, getState, criteria, pageNum)
+      payload: getProjectsWithMembers(dispatch, getState, criteria, pageNum, keepPrevious)
     })
   }
 }

src/projects/actions/loadProjects.js

@@ -27,7 +27,9 @@ const errorHandler = showErrorMessageIfError(props => !props.error)
 const spinner = spinnerWhileLoading(props => !props.isLoading)
 const enhance = compose(errorHandler, spinner)
 const EnhancedGrid  = enhance(ProjectsGridView)
-const EnhancedCards = enhance(ProjectsCardView)
+// not using enhance here to avoid duplciate loading spinner, we are already using infinte scroll's loader
+// FIXME: this is preventing spinner icon in inital load though
+const EnhancedCards = errorHandler(ProjectsCardView)
 
 class Projects extends Component {
   constructor(props) {
@@ -37,15 +39,22 @@ class Projects extends Component {
     this.onPageChange = this.onPageChange.bind(this)
     this.applyFilters = this.applyFilters.bind(this)
     this.init = this.init.bind(this)
+    this.removeScrollPosition = this.removeScrollPosition.bind(this)
   }
 
   componentDidUpdate() {
     window.scrollTo(0, parseInt(window.sessionStorage.getItem('projectsPageScrollTop')))
   }
 
   componentWillUnmount(){
-    const scrollingElement = document.scrollingElement || document.documentElement
-    window.sessionStorage.setItem('projectsPageScrollTop', scrollingElement.scrollTop)
+    window.removeEventListener('beforeunload', this.removeScrollPosition)
+    // if grid view, store projects scroll top for next mount
+    if (this.props.gridView) {
+      const scrollingElement = document.scrollingElement || document.documentElement
+      window.sessionStorage.setItem('projectsPageScrollTop', scrollingElement.scrollTop)
+    } else { // for card view remove the scroll position
+      this.removeScrollPosition()
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -60,6 +69,11 @@ class Projects extends Component {
     this.init(this.props)
   }
 
+  componentDidMount() {
+    // sets window unload hook to show unsaved changes alert and persist incomplete project
+    window.addEventListener('beforeunload', this.removeScrollPosition)
+  }
+
   init(props) {
     document.title = 'Projects - Topcoder'
     // this.searchTermFromQuery = this.props.location.query.q || ''
@@ -81,8 +95,20 @@ class Projects extends Component {
     }
   }
 
-  onPageChange(pageNum) {
+  removeScrollPosition() {
+    // remove scroll position from local storage
     window.sessionStorage.removeItem('projectsPageScrollTop')
+  }
+
+  onPageChange(pageNum) {
+    // if grid view, remove scroll position on page change
+    if (this.props.gridView) {
+      window.sessionStorage.removeItem('projectsPageScrollTop')
+    } else {
+      // for card view update the scroll position in local storage
+      const scrollingElement = document.scrollingElement || document.documentElement
+      window.sessionStorage.setItem('projectsPageScrollTop', scrollingElement.scrollTop)
+    }
     this.routeWithParams(this.props.criteria, pageNum)
   }
 
@@ -129,6 +155,7 @@ class Projects extends Component {
           // onPageChange={this.onPageChange}
           // sortHandler={this.sortHandler}
           applyFilters={this.applyFilters}
+          onPageChange={this.onPageChange}
         />
       )
     return (
@@ -163,7 +190,8 @@ const mapStateToProps = ({ projectSearch, members, loadUser }) => {
     totalCount  : projectSearch.totalCount,
     pageNum     : projectSearch.pageNum,
     criteria    : projectSearch.criteria,
-    isPowerUser
+    isPowerUser,
+    gridView    : isPowerUser
   }
 }
 

src/projects/list/components/Projects/Projects.jsx

@@ -1,7 +1,9 @@
 import React, { PropTypes } from 'react'
 import _ from 'lodash'
+import InfiniteScroll from 'react-infinite-scroller';
 import ProjectCard from './ProjectCard'
 import NewProjectCard from './NewProjectCard'
+import LoadingIndicator from '../../../../components/LoadingIndicator/LoadingIndicator'
 
 import { setDuration } from '../../../../helpers/projectHelper'
 
@@ -11,7 +13,7 @@ require('./ProjectsGridView.scss')
 const ProjectsCardView = props => {
   //const { projects, members, totalCount, criteria, pageNum, applyFilters, sortHandler, onPageChange, error, isLoading, onNewProjectIntent } = props
   // TODO: use applyFilters and onNewProjectIntent. Temporary delete to avoid lint errors.
-  const { projects, members, currentUser} = props
+  const { projects, members, currentUser, onPageChange, pageNum, totalCount} = props
   // const currentSortField = _.get(criteria, 'sort', '')
 
   // annotate projects with member data
@@ -38,8 +40,16 @@ const ProjectsCardView = props => {
   }
   return (
     <div className="projects card-view">
-      { projects.map(renderProject)}
-      <div className="project-card"><NewProjectCard /></div>
+      <InfiniteScroll
+          initialLoad={false}
+          pageStart={pageNum}
+          loadMore={onPageChange}
+          hasMore={ ((pageNum - 1) * 20 + 20 < totalCount)}
+          loader={<LoadingIndicator />}
+      >
+        { projects.map(renderProject)}
+        <div className="project-card"><NewProjectCard /></div>
+      </InfiniteScroll>
     </div>
   )
 }
@@ -51,13 +61,13 @@ ProjectsCardView.propTypes = {
   totalCount: PropTypes.number.isRequired,
   members: PropTypes.object.isRequired,
   // isLoading: PropTypes.bool.isRequired,
-  error: PropTypes.bool.isRequired
+  error: PropTypes.bool.isRequired,
   // there are no pagination, no sorting feature or no filtering for card view
   // hence commented all next
   // onPageChange: PropTypes.func.isRequired,
   // sortHandler: PropTypes.func.isRequired,
   // applyFilters: PropTypes.func.isRequired,
-  // pageNum: PropTypes.number.isRequired,
+  pageNum: PropTypes.number.isRequired,
   // criteria: PropTypes.object.isRequired
 }
 

src/projects/list/components/Projects/ProjectsCardView.jsx

@@ -86,11 +86,13 @@
 }
 
 .card-view {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-  max-width: 1160px;// media query needed for smaller/bigger screens
-  margin: 20px auto;
+  > div {// InfiniteScroll's div
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    max-width: 1160px;// media query needed for smaller/bigger screens
+    margin: 20px auto;
+  }
 
   .project-card {
     margin-bottom: 4 * $base-unit;

src/projects/list/components/Projects/ProjectsGridView.scss

@@ -3,6 +3,7 @@ import {
   GET_PROJECTS_PENDING, GET_PROJECTS_SUCCESS, GET_PROJECTS_FAILURE,
   LOAD_MORE_PROJECTS, CLEAR_PROJECT_SEARCH, GET_PROJECTS_SEARCH_CRITERIA
 } from '../../config/constants'
+import update from 'react-addons-update'
 
 export const initialState = {
   isLoading: true,
@@ -44,10 +45,10 @@ export default function(state = initialState, action) {
       isLoading: false
     })
   case GET_PROJECTS_SUCCESS:
-    return Object.assign({}, state, {
-      projects: action.payload.projects,
-      totalCount: action.payload.totalCount
-    })
+    const updatedProjects = action.meta.keepPrevious
+      ? { projects : { $push : action.payload.projects }, totalCount: { $set : action.payload.totalCount} }
+      : { projects : { $set : action.payload.projects }, totalCount: { $set : action.payload.totalCount} }
+    return update(state, updatedProjects)
 
   case PROJECT_SEARCH_FAILURE:
   case GET_PROJECTS_FAILURE: