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

— Removed InfiniteScroll for time being as it is having issue of double page load. Added standard load more button instead to load more pages.

Author: Vikas Agarwal

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

@@ -13,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, onPageChange, pageNum, totalCount} = props
+  const { projects, members, currentUser, onPageChange, pageNum, totalCount, inifinite } = props
   // const currentSortField = _.get(criteria, 'sort', '')
 
   // annotate projects with member data
@@ -38,18 +38,30 @@ const ProjectsCardView = props => {
       />
     </div>)
   }
+  const handleLoadMore = () => {
+    onPageChange(pageNum + 1)
+  }
   return (
     <div className="projects card-view">
-      <InfiniteScroll
+      { !!inifinite && 
+        <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>
+        >
+          { projects.map(renderProject)}
+          <div className="project-card"><NewProjectCard /></div>
+        </InfiniteScroll>
+      }
+      { !inifinite &&
+        <div>
+          { projects.map(renderProject)}
+          <div className="project-card"><NewProjectCard /></div>
+        </div>
+      }
+      { !inifinite && <button type="button" className="tc-btn tc-btn-primary" onClick={handleLoadMore}>Load more</button> }
     </div>
   )
 }
@@ -71,4 +83,9 @@ ProjectsCardView.propTypes = {
   // criteria: PropTypes.object.isRequired
 }
 
+
+ProjectsCardView.defaultProps = {
+  inifinite : false
+}
+
 export default ProjectsCardView

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

@@ -86,6 +86,10 @@
 }
 
 .card-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  
   > div {// InfiniteScroll's div
     display: flex;
     flex-flow: row wrap;