PM-902 - load more projects on dropdown scroll

Author: vas3a

src/actions/sidebar.js

@@ -67,6 +67,18 @@ export function loadProjects (filterProjectName = '', paramFilters = {}) {
   }
 }
 
+// Load next page of projects
+export function loadNextProjects () {
+  return (dispatch, getState) => {
+    const { projectFilters, projectsPage } = getState().sidebar
+
+    loadProjects('', _.assign({}, projectFilters, {
+      perPage: PROJECTS_PAGE_SIZE,
+      page: projectsPage + 1
+    }))(dispatch, getState)
+  }
+}
+
 /**
  * Unloads projects of the authenticated user
  */

src/components/ChallengesComponent/ChallengeList/index.js

@@ -401,7 +401,8 @@ class ChallengeList extends Component {
       isBillingAccountLoading,
       selfService,
       challengeTypes,
-      loginUserRoleInProject
+      loginUserRoleInProject,
+      fetchNextProjects
     } = this.props
     const isReadOnly = checkReadOnlyRoles(this.props.auth.token) || loginUserRoleInProject === PROJECT_ROLES.READ
     const isAdmin = checkAdmin(this.props.auth.token)
@@ -506,6 +507,9 @@ class ChallengeList extends Component {
                 <Select
                   name='project'
                   options={projectOptions}
+                  cacheOptions
+                  captureMenuScroll
+                  onMenuScrollBottom={fetchNextProjects}
                   placeholder='All Projects'
                   value={projectOption}
                   onChange={e =>
@@ -853,6 +857,7 @@ ChallengeList.defaultProps = {
 
 ChallengeList.propTypes = {
   challenges: PropTypes.arrayOf(PropTypes.object),
+  fetchNextProjects: PropTypes.func.isRequired,
   projects: PropTypes.arrayOf(PropTypes.object),
   activeProject: PropTypes.shape({
     id: PropTypes.number,

src/components/ChallengesComponent/index.js

@@ -46,7 +46,8 @@ const ChallengesComponent = ({
   isBillingAccountLoading,
   selfService,
   auth,
-  challengeTypes
+  challengeTypes,
+  fetchNextProjects
 }) => {
   const [loginUserRoleInProject, setLoginUserRoleInProject] = useState('')
   const isReadOnly = checkReadOnlyRoles(auth.token) || loginUserRoleInProject === PROJECT_ROLES.READ
@@ -118,6 +119,7 @@ const ChallengesComponent = ({
       <div className={styles.challenges}>
         <ChallengeList
           challenges={challenges}
+          fetchNextProjects={fetchNextProjects}
           projects={projects}
           warnMessage={warnMessage}
           isLoading={isLoading}
@@ -160,6 +162,7 @@ const ChallengesComponent = ({
 ChallengesComponent.propTypes = {
   challenges: PropTypes.arrayOf(PropTypes.object),
   projects: PropTypes.arrayOf(PropTypes.object),
+  fetchNextProjects: PropTypes.func.isRequired,
   activeProject: PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string

src/components/Select/index.js

@@ -1,13 +1,40 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import _ from 'lodash'
-import ReactSelect from 'react-select'
+import ReactSelect, { components } from 'react-select'
 import CreatableSelect from 'react-select/creatable'
 import AsyncSelect from 'react-select/async'
 import PT from 'prop-types'
 import styles from './styles'
 
+const menuList = ({ onMenuScrollBottom }) => {
+  let menuListRef = null
+
+  const handleOnScroll = (ev) => {
+    ev.preventDefault()
+    const el = ev.target
+    if (el.scrollTop + el.offsetHeight >= el.scrollHeight - 10) {
+      onMenuScrollBottom()
+    }
+  }
+
+  const setMenuListRef = (ref) => {
+    if (!menuListRef) {
+      ref.addEventListener('scroll', handleOnScroll, false)
+    }
+    menuListRef = ref
+  }
+  return (props) => (
+    <components.MenuList key='projects-select--menu-list' {...props} innerRef={onMenuScrollBottom ? (ref) => { setMenuListRef(ref); props.innerRef(ref) } : props.innerRef} />
+  )
+}
+
 export default function Select (props) {
   const { selectRef, isCreatable, isAsync } = props
+  const [components, setComponents] = useState({})
+
+  useEffect(() => {
+    setComponents((prev) => ({ ...prev, MenuList: menuList(props) }))
+  }, [props.onMenuScrollBottom])
 
   if (isAsync) {
     return (<AsyncSelect
@@ -32,6 +59,7 @@ export default function Select (props) {
       {...props}
       autosize={false}
       styles={styles}
+      components={components}
     />
   )
 }
@@ -45,5 +73,6 @@ Select.defaultProps = {
 Select.propTypes = {
   selectRef: PT.func,
   isCreatable: PT.bool,
-  isAsync: PT.bool
+  isAsync: PT.bool,
+  onMenuScrollBottom: PT.func
 }

src/containers/Challenges/index.js

@@ -16,7 +16,7 @@ import {
 } from '../../actions/challenges'
 import { loadProject, updateProject } from '../../actions/projects'
 import {
-  loadProjects,
+  loadNextProjects,
   setActiveProject,
   resetSidebarActiveParams
 } from '../../actions/sidebar'
@@ -136,7 +136,8 @@ class Challenges extends Component {
       dashboard,
       selfService,
       auth,
-      metadata
+      metadata,
+      fetchNextProjects
     } = this.props
     const { challengeTypes = [] } = metadata
     return (
@@ -148,6 +149,7 @@ class Challenges extends Component {
                 ? reduxProjectInfo
                 : {})
             }}
+            fetchNextProjects={fetchNextProjects}
             warnMessage={warnMessage}
             setActiveProject={setActiveProject}
             dashboard={dashboard}
@@ -229,6 +231,7 @@ Challenges.propTypes = {
   dashboard: PropTypes.bool,
   auth: PropTypes.object.isRequired,
   loadChallengeTypes: PropTypes.func,
+  fetchNextProjects: PropTypes.func.isRequired,
   metadata: PropTypes.shape({
     challengeTypes: PropTypes.array
   })
@@ -257,7 +260,7 @@ const mapDispatchToProps = {
   loadChallengesByPage,
   resetSidebarActiveParams,
   loadProject,
-  loadProjects,
+  fetchNextProjects: loadNextProjects,
   updateProject,
   loadChallengeTypes,
   setActiveProject,

src/reducers/sidebar.js

@@ -15,9 +15,10 @@ import { toastFailure } from '../util/toaster'
 const initialState = {
   activeProjectId: -1,
   isLoading: false,
+  projectFilters: {},
   projects: [],
-  total: 0,
-  page: 0,
+  projectsTotal: 0,
+  projectsPage: 0,
   isLoadProjectsSuccess: false
 }
 
@@ -29,14 +30,14 @@ export default function (state = initialState, action) {
       return {
         ...state,
         projects: action.projects,
-        total: action.total,
-        page: action.page,
+        projectsTotal: action.total,
+        projectsPage: action.page,
         isLoading: false,
         isLoggedIn: true,
         isLoadProjectsSuccess: true
       }
     case UNLOAD_PROJECTS_SUCCESS:
-      return { ...state, total: 0, page: 0, projects: [], isLoading: false, isLoggedIn: true, isLoadProjectsSuccess: false }
+      return { ...state, projectsTotal: 0, projectsPage: 0, projects: [], isLoading: false, isLoggedIn: true, isLoadProjectsSuccess: false }
     case LOAD_PROJECTS_PENDING:
       return { ...state, isLoading: true }
     case LOAD_PROJECTS_FAILURE: {