* add constants file with table row values

rdmo/projects/assets/js/components/helper/Table.js

@@ -2,24 +2,26 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { get, isEmpty } from 'lodash'
 
+import { INITIAL_TABLE_ROWS, ROWS_TO_LOAD } from '../../constants'
+
 const Table = ({
   cellFormatters,
   columnWidths,
   config,
   configActions,
   data,
   headerFormatters,
-  initialRows = '20',
   projectsActions,
-  rowsToLoad = '10',
+  rowsToLoad = ROWS_TO_LOAD,
+  showTopButton = false,
   scrollToTop,
   sortableColumns,
   /* order of elements in 'visibleColumns' corresponds to order of columns in table */
   visibleColumns,
 }) => {
   const displayedRows = get(config, 'tableRows', '')
   if (isEmpty(displayedRows) || displayedRows === null || displayedRows === undefined || displayedRows === 0) {
-    configActions.updateConfig('tableRows', initialRows)
+    configActions.updateConfig('tableRows', INITIAL_TABLE_ROWS)
   }
 
   const extractSortingParams = (params) => {
@@ -50,7 +52,7 @@ const Table = ({
     return (
         displayedRows && (
           <div className="icon-container ml-auto">
-            {data.length > 0 &&
+            {data.length > 0 && showTopButton &&
               <button className="btn" onClick={scrollToTop} title={gettext('Scroll to top')}>
                 <i className="fa fa-arrow-up" aria-hidden="true"></i>
               </button>
@@ -143,7 +145,7 @@ const Table = ({
         {renderHeaders()}
         {renderRows()}
       </table>
-      {renderLoadButtons('bottom')}
+      {renderLoadButtons()}
     </div>
   )
 }
@@ -155,9 +157,9 @@ Table.propTypes = {
   configActions: PropTypes.object,
   data: PropTypes.arrayOf(PropTypes.object).isRequired,
   headerFormatters: PropTypes.object,
-  initialRows: PropTypes.string,
   projectsActions: PropTypes.object,
   rowsToLoad: PropTypes.string,
+  showTopButton: PropTypes.bool,
   scrollToTop: PropTypes.func,
   sortableColumns: PropTypes.arrayOf(PropTypes.string),
   visibleColumns: PropTypes.arrayOf(PropTypes.string),

rdmo/projects/assets/js/components/main/Projects.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useEffect, useState} from 'react'
 import PropTypes from 'prop-types'
 import Table from '../helper/Table'
 import Link from 'rdmo/core/assets/js/components/Link'
@@ -13,6 +13,24 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
   const { currentUser } = currentUserObject
   const { myProjects } = config
 
+  const [showTopButton, setShowTopButton] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.pageYOffset > 100) {
+        setShowTopButton(true)
+      } else {
+        setShowTopButton(false)
+      }
+    }
+
+    window.addEventListener('scroll', handleScroll)
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
   const scrollToTop = () => {
     window.scrollTo({ top: 0, behavior: 'smooth' })
   }
@@ -205,6 +223,7 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
         data={projects}
         headerFormatters={headerFormatters}
         projectsActions={projectsActions}
+        showTopButton={showTopButton}
         scrollToTop={scrollToTop}
         sortableColumns={sortableColumns}
         visibleColumns={visibleColumns}

rdmo/projects/assets/js/constants.js

@@ -0,0 +1,3 @@
+// projects table
+export const INITIAL_TABLE_ROWS = '20'
+export const ROWS_TO_LOAD = '10'

rdmo/projects/assets/js/reducers/configReducer.js

@@ -1,10 +1,11 @@
 import { set, unset } from 'lodash'
 import { DELETE_CONFIG, UPDATE_CONFIG } from '../actions/types'
+import { INITIAL_TABLE_ROWS } from '../constants'
 
 const initialState = {
   myProjects: true,
   params: {},
-  tableRows: '20'
+  tableRows: INITIAL_TABLE_ROWS
 }
 
 export default function configReducer(state = initialState, action) {