feat(groups): add virtual scrolling at groups list

Add environment variable `REACT_APP_GROUPS_PER_PAGE` (default 1000),
which controls the `perPage` parameter of the API request being made to
fetch groups list.
Add virtual scrolling (via react-virtualized) at Groups page.

Addresses topcoder-archive#155

Author: cagdas001

client/src/components/GroupsSideMenu/filters.js

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from "react";
+import { List } from "react-virtualized";
 import PT from "prop-types";
+import _ from "lodash";
 
 import SearchBox from "../searchBox";
 import Button from "../Button";
@@ -133,23 +135,61 @@ function GroupsSection({
   selectedItemId,
   loadingGroups,
 }) {
+  /**
+   * Calculates the height value of an item.
+   * @param {Number} index index of the item to be calculated
+   * @return {Number} row height
+   */
+  function rowHeight({ index }) {
+    return items[index].name.length <= 30
+      ? 60
+      : 60 + (Math.floor(items[index].name.length / 30) - 1) * 20 + 20;
+  }
+
+  /**
+   * Row renderer for react-virtualized#List.
+   * Renders each item as a row.
+   * @param {String} key unique key for the item
+   * @param {Number} index index of the item (row)
+   * @param {Object} style
+   * @return {SectionRow} row element
+   */
+  function rowRenderer({ key, index, style }) {
+    return (
+      <div key={key} style={style}>
+        <SectionRow
+          key={`${title}${index}`}
+          title={items[index].name}
+          badge={items[index].count + ""}
+          action={(isSelected) =>
+            !isSelected && onItemClicked && onItemClicked(title, items[index])
+          }
+          selected={items[index].id === selectedItemId}
+        />
+      </div>
+    );
+  }
+
   return (
     <>
       <div className={styles.sectionTitle}>{title}</div>
       <div className={styles.sectionItemsContainer}>
-        {items.map((item, index) => {
-          return (
-            <SectionRow
-              key={`${title}${index}`}
-              title={item.name}
-              badge={item.count + ""}
-              action={(isSelected) =>
-                !isSelected && onItemClicked && onItemClicked(title, item)
-              }
-              selected={item.id === selectedItemId}
-            />
-          );
-        })}
+        <List
+          className={styles.groupsList}
+          width={385}
+          height={
+            items.length > 7
+              ? 450
+              : _.reduce(
+                  _.map(items, (item, index) => rowHeight({ index })),
+                  (a, b) => a + b,
+                  0
+                )
+          }
+          rowCount={items.length}
+          rowHeight={rowHeight}
+          rowRenderer={rowRenderer}
+        />
       </div>
       {items.length === 0 && !loadingGroups && (
         <div className={styles.message}>No results found</div>

client/src/components/GroupsSideMenu/filters.module.css

@@ -73,6 +73,10 @@
   flex-direction: column;
 }
 
+.groupsList {
+  outline: 0;
+}
+
 .sectionItemsContainer > div {
   margin-top: 20px;
 }
@@ -101,6 +105,7 @@
 }
 
 .sectionItemTitle {
+  width: 280px;
   color: gray2;
   word-break: break-all;
   padding-right: 12px;

client/src/config.js

@@ -6,6 +6,7 @@ export default {
   API_URL: process.env.REACT_APP_API_URL,
   API_PREFIX: process.env.REACT_APP_API_PREFIX,
   GROUPS_API_URL: process.env.REACT_APP_GROUPS_API_URL,
+  GROUPS_PER_PAGE: process.env.REACT_APP_GROUPS_PER_PAGE || 1000,
 
   BULK_UPLOAD_TEMPLATE_ID: process.env.REACT_APP_BULK_UPLOAD_TEMPLATE_ID,
   EMSI_SKILLPROVIDER_ID: process.env.REACT_APP_EMSI_SKILLPROVIDER_ID,

client/src/lib/groups.js

@@ -39,7 +39,7 @@ export async function getGroups(apiClient, handle, cancelToken) {
   // Now, get my groups first
   try {
     response = await apiClient.get(
-      `${config.GROUPS_API_URL}?universalUID=${userId}&membershipType=user`,
+      `${config.GROUPS_API_URL}?universalUID=${userId}&membershipType=user&perPage=${config.GROUPS_PER_PAGE}`,
       { cancelToken }
     );
   } catch (error) {
@@ -66,7 +66,7 @@ export async function getGroups(apiClient, handle, cancelToken) {
   // Fetch all groups in the org
   try {
     response = await apiClient.get(
-      `${config.GROUPS_API_URL}?organizationId=${organizationId}`,
+      `${config.GROUPS_API_URL}?organizationId=${organizationId}&perPage=${config.GROUPS_PER_PAGE}`,
       { cancelToken }
     );
   } catch (error) {

package-lock.json

@@ -37,6 +37,7 @@
     "lodash": "^4.17.19",
     "multer": "^1.4.2",
     "node-cache": "^5.1.0",
+    "react-virtualized": "^9.21.2",
     "swagger-ui-express": "^4.1.4",
     "tc-bus-api-wrapper": "topcoder-platform/tc-bus-api-wrapper.git#feature/auth0-proxy-server",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.4",