studiokit-scaffolding-js 5.0.0-next.2.9 → 5.1.0

package/lib/components/HOC/CollectionComponent.d.ts

@@ -1,14 +1,14 @@
 import React, { ComponentClass, ComponentType } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { MODEL_STATUS } from '../../constants/modelStatus';
-import { BaseReduxState, Model } from '../../types';
-import { CollectionCommonProps, CollectionCommonState, CollectionCreateParams, CollectionDeleteParams, CollectionLoadParams, CollectionMethodConfiguration, CollectionMethods, CollectionReduxResponse, CollectionUpdateParams } from '../../types/Collection';
+import { BaseReduxState, Model, ModelCollection } from '../../types';
+import { CollectionCommonProps, CollectionCommonState, CollectionCreateParams, CollectionDeleteParams, CollectionDerivedProps, CollectionLoadParams, CollectionMethodConfiguration, CollectionMethods, CollectionReduxResponse, CollectionUpdateParams } from '../../types/Collection';
 import { GuidComponentWrappedProps } from './GuidComponent';
 /** The props passed into `CollectionComponent` from the user and other HOCs. */
 export interface CollectionComponentProps<TModel extends Model> extends CollectionCommonProps, GuidComponentWrappedProps, RouteComponentProps, CollectionReduxResponse<TModel> {
 }
 /** The props passed down to the `WrappedComponent`. */
-export interface CollectionComponentWrappedProps<TModel extends Model> extends Omit<CollectionComponentProps<TModel>, keyof RouteComponentProps>, CollectionMethods, CollectionCommonState {
+export interface CollectionComponentWrappedProps<TModel extends Model> extends Omit<CollectionComponentProps<TModel>, keyof RouteComponentProps>, CollectionDerivedProps<TModel>, CollectionMethods, CollectionCommonState {
 }
 export declare function configureCollectionComponent<TModel extends Model, TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & CollectionComponentWrappedProps<TModel>>, LoaderComponent?: ComponentType): {
     new (props: TOwnProps & CollectionComponentProps<TModel>): {
@@ -22,6 +22,7 @@ export declare function configureCollectionComponent<TModel extends Model, TOwnP
         create: (params: CollectionCreateParams) => void;
         update: (params: CollectionUpdateParams) => void;
         delete: (params: CollectionDeleteParams) => void;
+        getModelArray: import("memoize-one").MemoizedFn<(model: ModelCollection<TModel>, guid?: string | undefined) => TModel[]>;
         render(): JSX.Element;
         context: any;
         setState<K extends "modelStatus" | "previousModelStatus" | "fetchingId">(state: CollectionCommonState | ((prevState: Readonly<CollectionCommonState>, props: Readonly<TOwnProps & CollectionComponentProps<TModel>>) => CollectionCommonState | Pick<CollectionCommonState, K> | null) | Pick<CollectionCommonState, K> | null, callback?: (() => void) | undefined): void;

package/lib/components/HOC/CollectionComponent.js

@@ -58,6 +58,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureMapStateToProps = exports.configureCollectionComponent = void 0;
+var memoize_one_1 = __importDefault(require("memoize-one"));
 var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var react_router_1 = require("react-router");
@@ -110,6 +111,7 @@ function configureCollectionComponent(WrappedComponent, LoaderComponent) {
             _this.delete = function (params) {
                 collection_1.deleteItemFromCollection(_this.getCollectionMethodConfig(), params);
             };
+            _this.getModelArray = memoize_one_1.default(function (model, guid) { return model_1.getModelArray(model, guid); });
             _this.state = {
                 // initializing until model is loaded
                 modelStatus: modelStatus_1.MODEL_STATUS.UNINITIALIZED,
@@ -139,7 +141,7 @@ function configureCollectionComponent(WrappedComponent, LoaderComponent) {
             if (modelStatus === modelStatus_1.MODEL_STATUS.UNINITIALIZED) {
                 return react_1.default.createElement(LoaderComponent, null);
             }
-            return (react_1.default.createElement(WrappedComponent, __assign({}, otherProps, { modelStatus: modelStatus, previousModelStatus: previousModelStatus, fetchingId: fetchingId, load: this.load, stopPeriodicLoad: this.stopPeriodicLoad, create: this.create, update: this.update, delete: this.delete })));
+            return (react_1.default.createElement(WrappedComponent, __assign({}, otherProps, { modelArray: this.getModelArray(this.props.model, this.props.guid), modelStatus: modelStatus, previousModelStatus: previousModelStatus, fetchingId: fetchingId, load: this.load, stopPeriodicLoad: this.stopPeriodicLoad, create: this.create, update: this.update, delete: this.delete })));
         };
         return CollectionComponent;
     }(react_1.Component));

package/lib/components/HOC/CollectionFirstItemComponent.d.ts

@@ -1,8 +1,8 @@
 import React, { ComponentClass, ComponentType } from 'react';
-import { CollectionItemReduxResponse, Model } from '../../types';
+import { CollectionItemDerivedProps, CollectionItemReduxResponse, Model, ModelCollection } from '../../types';
 import { CollectionComponentWrappedProps } from './CollectionComponent';
 /** The props passed into `WrappedComponent`. */
-export interface CollectionFirstItemComponentWrappedProps<TModel extends Model> extends Omit<CollectionComponentWrappedProps<TModel>, 'model'>, CollectionItemReduxResponse<TModel> {
+export interface CollectionFirstItemComponentWrappedProps<TModel extends Model> extends Omit<CollectionComponentWrappedProps<TModel>, 'model'>, CollectionItemReduxResponse<TModel>, CollectionItemDerivedProps<TModel> {
 }
 /**
  * HOC meant to pass the first collection item to the wrapped component as its model.
@@ -10,6 +10,8 @@ export interface CollectionFirstItemComponentWrappedProps<TModel extends Model>
  */
 export declare function configureCollectionFirstItemComponent<TModel extends Model, TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & CollectionFirstItemComponentWrappedProps<TModel>>): {
     new (props: (TOwnProps & CollectionComponentWrappedProps<TModel>) | Readonly<TOwnProps & CollectionComponentWrappedProps<TModel>>): {
+        getModelArray: import("memoize-one").MemoizedFn<(model: ModelCollection<TModel>, guid?: string | undefined) => TModel[]>;
+        getModelMinusRelations: import("memoize-one").MemoizedFn<(model: TModel) => Partial<TModel>>;
         getFirstItem: () => TModel;
         render(): JSX.Element;
         context: any;
@@ -36,6 +38,8 @@ export declare function configureCollectionFirstItemComponent<TModel extends Mod
         UNSAFE_componentWillUpdate?(nextProps: Readonly<TOwnProps & CollectionComponentWrappedProps<TModel>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: TOwnProps & CollectionComponentWrappedProps<TModel>, context: any): {
+        getModelArray: import("memoize-one").MemoizedFn<(model: ModelCollection<TModel>, guid?: string | undefined) => TModel[]>;
+        getModelMinusRelations: import("memoize-one").MemoizedFn<(model: TModel) => Partial<TModel>>;
         getFirstItem: () => TModel;
         render(): JSX.Element;
         context: any;

package/lib/components/HOC/CollectionFirstItemComponent.js

@@ -49,8 +49,12 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
             r[k] = a[j];
     return r;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureCollectionFirstItemComponent = void 0;
+var memoize_one_1 = __importDefault(require("memoize-one"));
 var react_1 = __importStar(require("react"));
 var model_1 = require("../../utils/model");
 /**
@@ -62,8 +66,11 @@ function configureCollectionFirstItemComponent(WrappedComponent) {
         __extends(CollectionFirstItemComponent, _super);
         function CollectionFirstItemComponent() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.getModelArray = memoize_one_1.default(function (model, guid) { return model_1.getModelArray(model, guid); });
+            _this.getModelMinusRelations = memoize_one_1.default(function (model) { return model_1.getModelMinusRelations(model); });
             _this.getFirstItem = function () {
-                var _a = _this.props, model = _a.model, modelArray = _a.modelArray, guid = _a.guid;
+                var _a = _this.props, model = _a.model, guid = _a.guid;
+                var modelArray = _this.getModelArray(model, guid);
                 var singleItem = modelArray.length > 0
                     ? modelArray[0]
                     : model[guid]
@@ -76,7 +83,7 @@ function configureCollectionFirstItemComponent(WrappedComponent) {
         CollectionFirstItemComponent.prototype.render = function () {
             var pathParams = this.props.pathParams;
             var firstItem = this.getFirstItem();
-            var modelMinusRelations = model_1.getModelMinusRelations(firstItem);
+            var modelMinusRelations = this.getModelMinusRelations(firstItem);
             var p = __spreadArrays(pathParams);
             if (firstItem.id) {
                 p.push(firstItem.id.toString());

package/lib/components/HOC/CollectionItemComponent.d.ts

@@ -1,13 +1,13 @@
 import React, { ComponentClass, ComponentType } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { MODEL_STATUS } from '../../constants/modelStatus';
-import { BaseReduxState, CollectionCommonProps, CollectionCommonState, CollectionCreateParams, CollectionItemDeleteParams, CollectionItemLoadParams, CollectionItemMethods, CollectionItemReduxResponse, CollectionItemUpdateParams, CollectionMethodConfiguration, Model } from '../../types';
+import { BaseReduxState, CollectionCommonProps, CollectionCommonState, CollectionCreateParams, CollectionItemDeleteParams, CollectionItemDerivedProps, CollectionItemLoadParams, CollectionItemMethods, CollectionItemReduxResponse, CollectionItemUpdateParams, CollectionMethodConfiguration, Model } from '../../types';
 import { GuidComponentWrappedProps } from './GuidComponent';
 /** The props passed into `CollectionItemComponent` from the user and other HOCs. */
 export interface CollectionItemComponentProps<TModel extends Model> extends CollectionCommonProps, GuidComponentWrappedProps, RouteComponentProps, CollectionItemReduxResponse<TModel> {
 }
 /** The props passed down to the `WrappedComponent`. */
-export interface CollectionItemComponentWrappedProps<TModel extends Model> extends Omit<CollectionItemComponentProps<TModel>, keyof RouteComponentProps>, CollectionItemMethods, CollectionCommonState {
+export interface CollectionItemComponentWrappedProps<TModel extends Model> extends Omit<CollectionItemComponentProps<TModel>, keyof RouteComponentProps>, CollectionItemDerivedProps<TModel>, CollectionItemMethods, CollectionCommonState {
 }
 export declare function configureCollectionItemComponent<TModel extends Model, TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & CollectionItemComponentWrappedProps<TModel>>, LoaderComponent?: ComponentType): {
     new (props: TOwnProps & CollectionItemComponentProps<TModel>): {
@@ -20,6 +20,7 @@ export declare function configureCollectionItemComponent<TModel extends Model, T
         create: (params: CollectionCreateParams) => void;
         update: (params: CollectionItemUpdateParams) => void;
         delete: (params?: CollectionItemDeleteParams) => void;
+        getModelMinusRelations: import("memoize-one").MemoizedFn<(model: TModel) => Partial<TModel>>;
         render(): JSX.Element;
         context: any;
         setState<K extends "modelStatus" | "previousModelStatus" | "fetchingId">(state: CollectionCommonState | ((prevState: Readonly<CollectionCommonState>, props: Readonly<TOwnProps & CollectionItemComponentProps<TModel>>) => CollectionCommonState | Pick<CollectionCommonState, K> | null) | Pick<CollectionCommonState, K> | null, callback?: (() => void) | undefined): void;

package/lib/components/HOC/CollectionItemComponent.js

@@ -58,6 +58,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureMapStateToProps = exports.configureCollectionItemComponent = void 0;
+var memoize_one_1 = __importDefault(require("memoize-one"));
 var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var react_router_1 = require("react-router");
@@ -113,6 +114,7 @@ function configureCollectionItemComponent(WrappedComponent, LoaderComponent) {
                 var model = _this.props.model;
                 collection_1.deleteCollectionItem(model, _this.getCollectionMethodConfig(), params);
             };
+            _this.getModelMinusRelations = memoize_one_1.default(function (model) { return model_1.getModelMinusRelations(model); });
             _this.state = {
                 // initializing until model is loaded, or if no model
                 modelStatus: modelStatus_1.MODEL_STATUS.UNINITIALIZED,
@@ -136,7 +138,7 @@ function configureCollectionItemComponent(WrappedComponent, LoaderComponent) {
             if (modelStatus === modelStatus_1.MODEL_STATUS.UNINITIALIZED) {
                 return react_1.default.createElement(LoaderComponent, null);
             }
-            return (react_1.default.createElement(WrappedComponent, __assign({}, otherProps, { model: this.props.model, modelMinusRelations: this.props.modelMinusRelations, modelStatus: modelStatus, previousModelStatus: previousModelStatus, load: this.load, stopPeriodicLoad: this.stopPeriodicLoad, create: this.create, update: this.update, delete: this.delete })));
+            return (react_1.default.createElement(WrappedComponent, __assign({}, otherProps, { model: this.props.model, modelMinusRelations: this.getModelMinusRelations(this.props.model), modelStatus: modelStatus, previousModelStatus: previousModelStatus, load: this.load, stopPeriodicLoad: this.stopPeriodicLoad, create: this.create, update: this.update, delete: this.delete })));
         };
         return CollectionItemComponent;
     }(react_1.Component));

package/lib/components/HOC/SearchPersistorComponent.js

@@ -103,20 +103,20 @@ function configureSearchPersistorComponent(WrappedComponent) {
                     selectedTab: search.selectedTab,
                     sortingRules: search.sortingRules,
                     pageSize: search.pageSize,
-                    pagesByTab: search.pagesByTab
+                    pageByTab: search.pageByTab
                 }), 
                 // do not trigger a re-load unless queryAll is true
                 search.queryAll ? _this.doSearch : undefined);
             };
             _this.setSelectedTab = function (selectedTab) {
                 var _a, _b;
-                var pagesByTab = __assign({}, ((_b = (_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.pagesByTab) !== null && _b !== void 0 ? _b : {}));
+                var pageByTab = __assign({}, ((_b = (_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.pageByTab) !== null && _b !== void 0 ? _b : {}));
                 // if not set, default page to zero when switching tabs
-                if (!pagesByTab[selectedTab])
-                    pagesByTab[selectedTab] = 0;
+                if (!pageByTab[selectedTab])
+                    pageByTab[selectedTab] = 0;
                 _this.updateAndPersistSearch({
                     selectedTab: selectedTab,
-                    pagesByTab: pagesByTab
+                    pageByTab: pageByTab
                 });
             };
             _this.setKeywords = function (event) {
@@ -135,7 +135,7 @@ function configureSearchPersistorComponent(WrappedComponent) {
                 _this.updateAndPersistSearch({
                     queryAll: queryAll,
                     requiredMessage: !queryAll ? null : _this.state.search ? _this.state.search.requiredMessage : null
-                });
+                }, _this.doSearch);
             };
             _this.setSortingRules = function (newSortingRules) {
                 _this.updateAndPersistSearch({
@@ -144,21 +144,21 @@ function configureSearchPersistorComponent(WrappedComponent) {
             };
             _this.setPageSize = function (newPageSize, newPage) {
                 var _a, _b, _c, _d;
-                var pagesByTab = __assign({}, ((_b = (_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.pagesByTab) !== null && _b !== void 0 ? _b : {}));
+                var pageByTab = __assign({}, ((_b = (_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.pageByTab) !== null && _b !== void 0 ? _b : {}));
                 var selectedTab = (_d = (_c = _this.state.search) === null || _c === void 0 ? void 0 : _c.selectedTab) !== null && _d !== void 0 ? _d : 1;
-                pagesByTab[selectedTab] = newPage;
+                pageByTab[selectedTab] = newPage;
                 _this.updateAndPersistSearch({
                     pageSize: newPageSize,
-                    pagesByTab: pagesByTab
+                    pageByTab: pageByTab
                 });
             };
             _this.setPage = function (newPage) {
                 var _a, _b, _c, _d;
-                var pagesByTab = __assign({}, ((_b = (_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.pagesByTab) !== null && _b !== void 0 ? _b : {}));
+                var pageByTab = __assign({}, ((_b = (_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.pageByTab) !== null && _b !== void 0 ? _b : {}));
                 var selectedTab = (_d = (_c = _this.state.search) === null || _c === void 0 ? void 0 : _c.selectedTab) !== null && _d !== void 0 ? _d : 1;
-                pagesByTab[selectedTab] = newPage;
+                pageByTab[selectedTab] = newPage;
                 _this.updateAndPersistSearch({
-                    pagesByTab: pagesByTab
+                    pageByTab: pageByTab
                 });
             };
             _this.state = {

package/lib/components/ManageTable.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { Column, SortingRule } from 'react-table';
+import { Model, Search } from '../types';
+export interface ManageTableProps<TModel, TSearchDataParams> {
+    search: Search;
+    isFiltered: boolean;
+    setSelectedTab: (selectedTab: number) => void;
+    setSortingRules: (newSortingRules: SortingRule[]) => void;
+    setPageSize: (newPageSize: number, newPage: number) => void;
+    setPage: (newPage: number) => void;
+    tabs: number[];
+    getTabName: (tab?: number) => string;
+    searchData: (params: TSearchDataParams) => Record<number, TModel[]>;
+    searchDataParams: TSearchDataParams;
+    columns: Column<TModel>[];
+    entityName: string;
+    canQueryAll?: boolean;
+}
+export declare const ManageTable: <TModel extends Model, TSearchDataParams extends {}>({ search: { hasSearched, queryAll, selectedTab, sortingRules, pageSize, pageByTab }, isFiltered, setSelectedTab, setSortingRules, setPageSize, setPage, tabs, getTabName, searchData, searchDataParams, columns, entityName, canQueryAll }: ManageTableProps<TModel, TSearchDataParams>) => JSX.Element;

package/lib/components/ManageTable.js

@@ -0,0 +1,112 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ManageTable = void 0;
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var react_2 = __importDefault(require("react"));
+var react_bootstrap_1 = require("react-bootstrap");
+var react_table_1 = __importDefault(require("react-table"));
+var table_1 = require("../constants/table");
+var RefreshIndicator_1 = require("./RefreshIndicator");
+var ManageTable = function (_a) {
+    //#region Data
+    var _b = _a.search, hasSearched = _b.hasSearched, queryAll = _b.queryAll, selectedTab = _b.selectedTab, sortingRules = _b.sortingRules, pageSize = _b.pageSize, pageByTab = _b.pageByTab, isFiltered = _a.isFiltered, setSelectedTab = _a.setSelectedTab, setSortingRules = _a.setSortingRules, setPageSize = _a.setPageSize, setPage = _a.setPage, tabs = _a.tabs, getTabName = _a.getTabName, searchData = _a.searchData, searchDataParams = _a.searchDataParams, columns = _a.columns, entityName = _a.entityName, canQueryAll = _a.canQueryAll;
+    var _c = react_1.useState(), dataByTab = _c[0], setDataByTab = _c[1];
+    var isInitialized = dataByTab !== undefined;
+    // search and set state, which can be debounced as a single unit of work
+    var searchAndSetData = react_1.useCallback(function (params, setDataByTab) {
+        setDataByTab(searchData(params));
+    }, [searchData]);
+    // search is debounced to prevent it being rapidly called
+    // useMemo with no dependencies ensures we keep the same debounced function between renders
+    var debouncedSearchAndSetData = react_1.useMemo(function () { return lodash_1.debounce(searchAndSetData); }, [searchAndSetData]);
+    // search once without debounce to initialize dataByTab state
+    react_1.useEffect(function () {
+        if (!isInitialized) {
+            setDataByTab(searchData(searchDataParams));
+        }
+    }, [isInitialized, searchData, searchDataParams]);
+    // search using debounced method when searchDataParams changes, after initialization
+    // use `isMounted` to not call the callback unless the component is mounted
+    react_1.useEffect(function () {
+        var isMounted = true;
+        if (isInitialized) {
+            debouncedSearchAndSetData(searchDataParams, function (dataByTab) {
+                if (isMounted)
+                    setDataByTab(dataByTab);
+            });
+        }
+        return function () {
+            isMounted = false;
+        };
+    }, [debouncedSearchAndSetData, isInitialized, searchDataParams]);
+    //#endregion Data
+    var noResultsFound = isFiltered && !!dataByTab && Object.values(dataByTab).every(function (d) { return d.length === 0; });
+    var currentTab = selectedTab !== null && selectedTab !== void 0 ? selectedTab : 1;
+    var data = dataByTab === null || dataByTab === void 0 ? void 0 : dataByTab[currentTab];
+    //#region Tabs
+    var onTabSelect = react_1.useCallback(function (eventKey) {
+        setSelectedTab(Number(eventKey));
+    }, [setSelectedTab]);
+    var dataLengthByTab = react_1.useMemo(function () {
+        var value = {};
+        tabs.forEach(function (tab) {
+            var _a;
+            value[tab] = (_a = dataByTab === null || dataByTab === void 0 ? void 0 : dataByTab[tab].length) !== null && _a !== void 0 ? _a : 0;
+        });
+        return value;
+    }, [dataByTab, tabs]);
+    var SearchTabs = react_1.useMemo(function () { return (react_2.default.createElement(react_bootstrap_1.Tabs, { activeKey: selectedTab, id: "search-tabs", onSelect: onTabSelect }, tabs.map(function (tab) { return (react_2.default.createElement(react_bootstrap_1.Tab, { key: tab, eventKey: tab.toString(), title: getTabName(tab) + " (" + dataLengthByTab[tab] + ")", disabled: noResultsFound })); }))); }, [dataLengthByTab, getTabName, noResultsFound, onTabSelect, selectedTab, tabs]);
+    //#endregion Tabs
+    //#region Table
+    var NoDataComponent = react_1.useMemo(function () {
+        return hasSearched ? (react_2.default.createElement("p", { className: "pt4 tc" },
+            "No ",
+            entityName.toLocaleLowerCase(),
+            " matched your search.",
+            canQueryAll && !queryAll && (react_2.default.createElement(react_2.default.Fragment, null,
+                " You might want to try again with \"Search All ",
+                entityName,
+                "\" checked.")))) : (react_2.default.createElement("p", { className: "pt4 tc" },
+            "No ",
+            getTabName(selectedTab).toLowerCase(),
+            " ",
+            entityName.toLocaleLowerCase(),
+            ' ',
+            isFiltered ? 'matched your search' : 'found',
+            "."));
+    }, [canQueryAll, entityName, getTabName, hasSearched, isFiltered, queryAll, selectedTab]);
+    var NoDataComponentCallback = react_1.useCallback(function () { return NoDataComponent; }, [NoDataComponent]);
+    var Table = react_1.useMemo(function () {
+        var _a;
+        var showPagination = !!data && data.length > table_1.TABLE_DEFAULT_PAGE_SIZE;
+        // if pagination is not enabled, or page is not set, ensure page is 0, the first page
+        var pageForTab = showPagination && pageByTab && selectedTab ? pageByTab[selectedTab] : 0;
+        // if there are less items to display than the page size, shrink the page size so there are not empty rows
+        var currentPageSize = Math.min((_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : table_1.TABLE_DEFAULT_PAGE_SIZE, pageSize !== null && pageSize !== void 0 ? pageSize : table_1.TABLE_DEFAULT_PAGE_SIZE);
+        var pageSizeOptions = table_1.TABLE_PAGE_SIZE_OPTIONS.filter(function (s) { return !(data === null || data === void 0 ? void 0 : data.length) || s <= (data === null || data === void 0 ? void 0 : data.length); });
+        return (react_2.default.createElement(react_table_1.default, { "aria-describedby": "search-results-label", className: "manage-table -striped cb" + ((data === null || data === void 0 ? void 0 : data.length) === 1 ? ' single-row-action-button' : ''), data: data, showPagination: showPagination, showPaginationTop: true, sorted: sortingRules, pageSize: currentPageSize, page: pageForTab, pageSizeOptions: pageSizeOptions, columns: columns, onSortedChange: setSortingRules, onPageSizeChange: setPageSize, onPageChange: setPage, NoDataComponent: NoDataComponentCallback }));
+    }, [
+        NoDataComponentCallback,
+        columns,
+        data,
+        pageByTab,
+        pageSize,
+        selectedTab,
+        setPage,
+        setPageSize,
+        setSortingRules,
+        sortingRules
+    ]);
+    //#endregion Table
+    if (!dataByTab)
+        return react_2.default.createElement(RefreshIndicator_1.RefreshIndicator, { label: "Loading...", labelClassName: "color-white" });
+    return (react_2.default.createElement(react_2.default.Fragment, null,
+        react_2.default.createElement("h3", { id: "search-results-label", className: "visually-hidden" }, "Search Results"),
+        SearchTabs,
+        Table));
+};
+exports.ManageTable = ManageTable;

package/lib/components/UserRoles/index.d.ts

@@ -107,5 +107,5 @@ export declare class UserRoles extends Component<UserRolesProps, UserRolesState>
     render(): JSX.Element;
 }
 export declare const mapStateToProps: (state: BaseReduxState, ownProps: UserRolesOwnProps) => UserRolesReduxProps;
-declare const _default: import("react-redux").ConnectedComponent<typeof UserRoles, Pick<React.ClassAttributes<UserRoles> & UserRolesProps, "ref" | "queryParams" | "modelName" | "externalProviders" | "model" | "key" | "readOnly" | "guid" | "load" | "pathParams" | "modelStatus" | "disableAutoLoad" | "modelArray" | "stopPeriodicLoad" | "create" | "update" | "delete" | "previousModelStatus" | "fetchingId" | "textForRole" | "entityName" | "defaultRole" | "roleDescriptions" | "renderAddDescription" | "isUpdateDisabled" | "isDeleteDisabled" | "allowMultipleRoles" | "requiredRole" | "isAddDisabled" | "modifyUserRoleActivityName" | "deleteOwnUserRoleActivityName" | "addRoleExcludeList" | "entity" | "filterUsers" | "onAdd" | "onUpdate" | "onRemove" | "renderTableDescription" | "lowercaseTextForRole" | "singularArticleForRole"> & UserRolesOwnProps>;
+declare const _default: import("react-redux").ConnectedComponent<typeof UserRoles, Pick<React.ClassAttributes<UserRoles> & UserRolesProps, "ref" | "queryParams" | "modelName" | "externalProviders" | "model" | "key" | "readOnly" | "guid" | "entityName" | "load" | "pathParams" | "modelStatus" | "disableAutoLoad" | "modelArray" | "stopPeriodicLoad" | "create" | "update" | "delete" | "previousModelStatus" | "fetchingId" | "textForRole" | "defaultRole" | "roleDescriptions" | "renderAddDescription" | "isUpdateDisabled" | "isDeleteDisabled" | "allowMultipleRoles" | "requiredRole" | "isAddDisabled" | "modifyUserRoleActivityName" | "deleteOwnUserRoleActivityName" | "addRoleExcludeList" | "entity" | "filterUsers" | "onAdd" | "onUpdate" | "onRemove" | "renderTableDescription" | "lowercaseTextForRole" | "singularArticleForRole"> & UserRolesOwnProps>;
 export default _default;

package/lib/constants/index.d.ts

@@ -7,5 +7,6 @@ export * from './modelStatus';
 export * from './notificationType';
 export * from './operatingSystem';
 export * from './shard';
+export * from './table';
 export * from './tier';
 export * from './userRole';

package/lib/constants/index.js

@@ -19,5 +19,6 @@ __exportStar(require("./modelStatus"), exports);
 __exportStar(require("./notificationType"), exports);
 __exportStar(require("./operatingSystem"), exports);
 __exportStar(require("./shard"), exports);
+__exportStar(require("./table"), exports);
 __exportStar(require("./tier"), exports);
 __exportStar(require("./userRole"), exports);

package/lib/constants/table.d.ts

@@ -0,0 +1,15 @@
+export declare const TABLE_DEFAULT_PAGE_SIZE = 25;
+export declare const TABLE_PAGE_SIZE_OPTIONS: number[];
+export declare enum MANAGE_TABLE_TAB {
+    AVAILABLE = 1,
+    DELETED = 2
+}
+/** Iterable array of tabs */
+export declare const MANAGE_TABLE_TABS: MANAGE_TABLE_TAB[];
+export declare enum GROUP_MANAGE_TABLE_TAB {
+    CURRENT = 1,
+    PAST = 2,
+    DELETED = 3
+}
+/** Iterable array of tabs */
+export declare const GROUP_MANAGE_TABLE_TABS: GROUP_MANAGE_TABLE_TAB[];

package/lib/constants/table.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GROUP_MANAGE_TABLE_TABS = exports.GROUP_MANAGE_TABLE_TAB = exports.MANAGE_TABLE_TABS = exports.MANAGE_TABLE_TAB = exports.TABLE_PAGE_SIZE_OPTIONS = exports.TABLE_DEFAULT_PAGE_SIZE = void 0;
+exports.TABLE_DEFAULT_PAGE_SIZE = 25;
+exports.TABLE_PAGE_SIZE_OPTIONS = [25, 50, 100, 150, 200];
+var MANAGE_TABLE_TAB;
+(function (MANAGE_TABLE_TAB) {
+    MANAGE_TABLE_TAB[MANAGE_TABLE_TAB["AVAILABLE"] = 1] = "AVAILABLE";
+    MANAGE_TABLE_TAB[MANAGE_TABLE_TAB["DELETED"] = 2] = "DELETED";
+})(MANAGE_TABLE_TAB = exports.MANAGE_TABLE_TAB || (exports.MANAGE_TABLE_TAB = {}));
+/** Iterable array of tabs */
+exports.MANAGE_TABLE_TABS = [MANAGE_TABLE_TAB.AVAILABLE, MANAGE_TABLE_TAB.DELETED];
+var GROUP_MANAGE_TABLE_TAB;
+(function (GROUP_MANAGE_TABLE_TAB) {
+    GROUP_MANAGE_TABLE_TAB[GROUP_MANAGE_TABLE_TAB["CURRENT"] = 1] = "CURRENT";
+    GROUP_MANAGE_TABLE_TAB[GROUP_MANAGE_TABLE_TAB["PAST"] = 2] = "PAST";
+    GROUP_MANAGE_TABLE_TAB[GROUP_MANAGE_TABLE_TAB["DELETED"] = 3] = "DELETED";
+})(GROUP_MANAGE_TABLE_TAB = exports.GROUP_MANAGE_TABLE_TAB || (exports.GROUP_MANAGE_TABLE_TAB = {}));
+/** Iterable array of tabs */
+exports.GROUP_MANAGE_TABLE_TABS = [
+    GROUP_MANAGE_TABLE_TAB.CURRENT,
+    GROUP_MANAGE_TABLE_TAB.PAST,
+    GROUP_MANAGE_TABLE_TAB.DELETED
+];

package/lib/hooks/useCollection.d.ts

@@ -1,5 +1,5 @@
-import { CollectionCommonProps, CollectionCommonState, CollectionMethods, CollectionReduxResponse, Model } from '../types';
-export interface UseCollectionResponse<TModel extends Model> extends CollectionCommonState, CollectionReduxResponse<TModel>, CollectionMethods {
+import { CollectionCommonProps, CollectionCommonState, CollectionDerivedProps, CollectionMethods, CollectionReduxResponse, Model } from '../types';
+export interface UseCollectionResponse<TModel extends Model> extends CollectionCommonState, CollectionReduxResponse<TModel>, CollectionDerivedProps<TModel>, CollectionMethods {
     guid: string;
 }
 export declare function useCollection<TModel extends Model>(props: CollectionCommonProps): UseCollectionResponse<TModel>;

package/lib/hooks/useCollectionConfiguration.js

@@ -6,6 +6,7 @@ var react_redux_1 = require("react-redux");
 var react_router_1 = require("react-router");
 var modelStatus_1 = require("../constants/modelStatus");
 var model_1 = require("../utils/model");
+var route_1 = require("../utils/route");
 var useGuid_1 = require("./useGuid");
 var usePrevious_1 = require("./usePrevious");
 /**
@@ -23,13 +24,20 @@ function useCollectionConfiguration(props, selectorFunction) {
     var _b = react_1.useState(modelStatus_1.MODEL_STATUS.UNINITIALIZED), modelStatus = _b[0], setModelStatus = _b[1];
     var previousModelStatus = usePrevious_1.usePrevious(modelStatus);
     var _c = react_1.useState(), fetchingId = _c[0], setFetchingId = _c[1];
+    var pathParams = react_1.useMemo(function () { return propPathParams || route_1.getPathParamsFromRouteMatchParams(routeMatchParams, modelName); }, [
+        modelName,
+        propPathParams,
+        routeMatchParams
+    ]);
     var _d = react_redux_1.useSelector(function (state) {
-        return selectorFunction({ guid: guid, modelName: modelName, pathParams: propPathParams, routeMatchParams: routeMatchParams, state: state });
-    }), pathParams = _d.pathParams, model = _d.model, modelArray = _d.modelArray, modelMinusRelations = _d.modelMinusRelations;
+        return selectorFunction({ guid: guid, modelName: modelName, pathParams: pathParams, routeMatchParams: routeMatchParams, state: state });
+    }), model = _d.model, isCollectionItem = _d.isCollectionItem;
     var previousModelName = usePrevious_1.usePrevious(modelName);
     var previousModel = usePrevious_1.usePrevious(model);
     var previousPathParams = usePrevious_1.usePrevious(pathParams);
     var previousQueryParams = usePrevious_1.usePrevious(queryParams);
+    var modelArray = react_1.useMemo(function () { return (!isCollectionItem ? model_1.getModelArray(model, guid) : undefined); }, [guid, isCollectionItem, model]);
+    var modelMinusRelations = react_1.useMemo(function () { return (isCollectionItem ? model_1.getModelMinusRelations(model) : undefined); }, [isCollectionItem, model]);
     var changeModelStatus = function (newModelStatus, newFetchingId) {
         setFetchingId(newFetchingId);
         setModelStatus(newModelStatus);

package/lib/hooks/useCollectionItem.d.ts

@@ -1,5 +1,5 @@
-import { CollectionCommonProps, CollectionCommonState, CollectionItemMethods, CollectionItemReduxResponse, Model } from '../types';
-export interface UseCollectionItemResponse<TModel extends Model> extends CollectionCommonState, CollectionItemReduxResponse<TModel>, CollectionItemMethods {
+import { CollectionCommonProps, CollectionCommonState, CollectionItemDerivedProps, CollectionItemMethods, CollectionItemReduxResponse, Model } from '../types';
+export interface UseCollectionItemResponse<TModel extends Model> extends CollectionCommonState, CollectionItemReduxResponse<TModel>, CollectionItemDerivedProps<TModel>, CollectionItemMethods {
     guid: string;
 }
 export declare function useCollectionItem<TModel extends Model>(props: CollectionCommonProps): UseCollectionItemResponse<TModel>;

package/lib/types/Collection.d.ts

@@ -30,8 +30,7 @@ export interface CollectionSelectorMethodResponse<TModel extends Model> {
     modelName: string;
     pathParams: string[];
     model: TModel | ModelCollection<TModel>;
-    modelArray?: TModel[];
-    modelMinusRelations?: Partial<TModel>;
+    isCollectionItem: boolean;
 }
 /** A method used to select a collection or collection item model from redux. */
 export declare type CollectionSelectorMethod = <TModel extends Model>(params: CollectionSelectorMethodParams) => CollectionSelectorMethodResponse<TModel>;
@@ -158,6 +157,8 @@ export interface CollectionMethods {
 export interface CollectionItemReduxResponse<TModel extends Model> {
     /** The collection item model loaded from redux, or loaded into redux using `load()`. */
     model: TModel;
+}
+export interface CollectionItemDerivedProps<TModel extends Model> {
     /** The collection item model, without any of its nested relations. */
     modelMinusRelations: Partial<TModel>;
 }
@@ -165,6 +166,8 @@ export interface CollectionItemReduxResponse<TModel extends Model> {
 export interface CollectionReduxResponse<TModel extends Model> {
     /** The collection model loaded from redux if available, or loaded into redux using `load()`. */
     model: ModelCollection<TModel>;
+}
+export interface CollectionDerivedProps<TModel extends Model> {
     /** The collection model converted to an array of all collection items. */
     modelArray: TModel[];
 }

package/lib/types/Search.d.ts

@@ -13,6 +13,6 @@ export interface Search {
     sortingRules?: SortingRule[];
     /** react-table page size, for pagination */
     pageSize?: number;
-    /** react-table currently selected page, for pagination */
-    pagesByTab?: Record<string, number | undefined>;
+    /** react-table currently selected page for a given tab, for pagination */
+    pageByTab?: Record<string, number | undefined>;
 }

package/lib/utils/collection.js

@@ -1,17 +1,23 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cleanupCollectionGuidKey = exports.handleCollectionParamsChange = exports.handleCollectionItemParamsChange = exports.initializeCollection = exports.initializeCollectionItem = exports.deleteCollectionItem = exports.deleteItemFromCollection = exports.updateCollectionItem = exports.updateItemInCollection = exports.createCollectionItem = exports.createItemInCollection = exports.loadCollectionItem = exports.loadCollection = exports.stopCollectionPeriodicLoad = exports.selectCollectionFromState = exports.selectCollectionItemFromState = void 0;
 var lodash_1 = require("lodash");
+var memoize_one_1 = __importDefault(require("memoize-one"));
 var constants_1 = require("../constants");
 var actionCreator_1 = require("../redux/actionCreator");
 var actions_1 = require("../redux/actions");
-var model_1 = require("./model");
 var route_1 = require("./route");
 //#region Redux Methods
+var getPathParams = memoize_one_1.default(function (pathParams, routeMatchParams, modelName) {
+    return pathParams || route_1.getPathParamsFromRouteMatchParams(routeMatchParams, modelName);
+});
 function selectCollectionItemFromState(params) {
     var guid = params.guid, modelName = params.modelName, pathParams = params.pathParams, routeMatchParams = params.routeMatchParams, state = params.state;
     var modelNameLevelCount = route_1.getMinRequiredPathParamsCount(modelName);
-    var p = pathParams || route_1.getPathParamsFromRouteMatchParams(routeMatchParams, modelName);
+    var p = getPathParams(pathParams, routeMatchParams, modelName);
     var reduxModelName = route_1.getReduxModelName(p, modelName);
     var model = {};
     // find `model` using `guid` as its key, to match new item created in `create()`
@@ -28,31 +34,27 @@ function selectCollectionItemFromState(params) {
     else {
         // find `model` using pathParams
         var reduxModel = (lodash_1.get(state.models, reduxModelName) || {});
-        model = (Object.keys(reduxModel).length > 0 ? lodash_1.merge({}, reduxModel) : {});
+        model = (Object.keys(reduxModel).length > 0 ? reduxModel : {});
     }
-    // convenient way to access model without relations, for use in PUT requests
-    var modelMinusRelations = model_1.getModelMinusRelations(model);
     return {
         modelName: modelName,
         pathParams: p,
         model: model,
-        modelMinusRelations: modelMinusRelations
+        isCollectionItem: true
     };
 }
 exports.selectCollectionItemFromState = selectCollectionItemFromState;
 function selectCollectionFromState(params) {
-    var guid = params.guid, modelName = params.modelName, pathParams = params.pathParams, routeMatchParams = params.routeMatchParams, state = params.state;
-    var p = pathParams || route_1.getPathParamsFromRouteMatchParams(routeMatchParams, modelName);
+    var modelName = params.modelName, pathParams = params.pathParams, routeMatchParams = params.routeMatchParams, state = params.state;
+    var p = getPathParams(pathParams, routeMatchParams, modelName);
     var reduxModelName = route_1.getReduxModelName(p, modelName);
     var model = lodash_1.get(state.models, reduxModelName);
-    model = model && Object.keys(model).length > 0 ? lodash_1.merge({}, model) : {};
-    // convenient way to access collection as an array
-    var modelArray = model_1.getModelArray(model, guid);
+    model = model && Object.keys(model).length > 0 ? model : {};
     return {
         modelName: modelName,
         pathParams: p,
         model: model,
-        modelArray: modelArray
+        isCollectionItem: false
     };
 }
 exports.selectCollectionFromState = selectCollectionFromState;

package/lib/utils/manageTable.d.ts

@@ -0,0 +1,2 @@
+export declare const getManageTableTabName: (selectedTab?: number | undefined) => "" | "Available" | "Deleted";
+export declare const getGroupManageTableTabName: (selectedTab?: number | undefined) => "" | "Deleted" | "Current" | "Past";

package/lib/utils/manageTable.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGroupManageTableTabName = exports.getManageTableTabName = void 0;
+var table_1 = require("../constants/table");
+var getManageTableTabName = function (selectedTab) {
+    switch (selectedTab) {
+        case table_1.MANAGE_TABLE_TAB.AVAILABLE:
+            return 'Available';
+        case table_1.MANAGE_TABLE_TAB.DELETED:
+            return 'Deleted';
+        default:
+            return '';
+    }
+};
+exports.getManageTableTabName = getManageTableTabName;
+var getGroupManageTableTabName = function (selectedTab) {
+    switch (selectedTab) {
+        case table_1.GROUP_MANAGE_TABLE_TAB.CURRENT:
+            return 'Current';
+        case table_1.GROUP_MANAGE_TABLE_TAB.DELETED:
+            return 'Deleted';
+        case table_1.GROUP_MANAGE_TABLE_TAB.PAST:
+            return 'Past';
+        default:
+            return '';
+    }
+};
+exports.getGroupManageTableTabName = getGroupManageTableTabName;

package/lib/utils/search.d.ts

@@ -14,12 +14,15 @@ export declare const isEntityMatchedByKeywords: (entity: {
 export declare const searchEntities: <T extends {
     isDeleted: boolean;
     activities: string[];
-}>(entityArray: T[], entityFilterFunction: (entity: T, keywordsList: string[]) => boolean, readActivity: string, canReadAnyGlobally?: boolean | undefined, keywords?: string | undefined) => {
-    availableArray: T[];
-    deletedArray: T[];
-};
-export declare const searchGroups: (groups: ModelCollection<Group>, groupsArray: Group[], externalTerms: ModelCollection<ExternalTerm>, canReadGroupsGlobally?: boolean | undefined, keywords?: string | undefined, dateString?: string | undefined) => {
-    currentGroups: Group[];
-    pastGroups: Group[];
-    deletedGroups: Group[];
-};
+}>(entityArray: T[], entityMatchFunction: (entity: T, keywordsList: string[]) => boolean, readActivity: string, canReadAnyGlobally?: boolean | undefined, keywords?: string | undefined) => Record<number, T[]>;
+export interface SearchModelArrayParams<TModel> {
+    modelArray: TModel[];
+    canReadyAnyGlobally?: boolean;
+    keywords?: string;
+}
+export interface SearchGroupsParams extends SearchModelArrayParams<Group> {
+    groups: ModelCollection<Group>;
+    externalTerms: ModelCollection<ExternalTerm>;
+    dateString?: string;
+}
+export declare const searchGroups: ({ groups, modelArray: groupsArray, externalTerms, canReadyAnyGlobally, keywords, dateString }: SearchGroupsParams) => Record<number, Group[]>;

package/lib/utils/search.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.searchGroups = exports.searchEntities = exports.isEntityMatchedByKeywords = exports.isEntityMatchedByKeyword = exports.isEntityUserMatchedByKeyword = exports.getKeywordsList = void 0;
+var table_1 = require("../constants/table");
 var date_1 = require("./date");
 var groupDates_1 = require("./groupDates");
 var groupRoles_1 = require("./groupRoles");
@@ -31,30 +32,43 @@ var isEntityMatchedByKeyword = function (entity, keyword) {
 exports.isEntityMatchedByKeyword = isEntityMatchedByKeyword;
 var isEntityMatchedByKeywords = function (entity, keywordsList) { return !keywordsList || keywordsList.length === 0 || keywordsList.every(function (k) { return exports.isEntityMatchedByKeyword(entity, k); }); };
 exports.isEntityMatchedByKeywords = isEntityMatchedByKeywords;
-var searchEntities = function (entityArray, entityFilterFunction, readActivity, canReadAnyGlobally, keywords) {
+var searchEntities = function (entityArray, entityMatchFunction, readActivity, canReadAnyGlobally, keywords) {
+    var _a;
     var keywordsList = exports.getKeywordsList(keywords);
     var filteredEntities = entityArray.reduce(function (acc, e) {
+        var _a;
         // exclude if cannot read any entity and does not have the read activity
         if (!canReadAnyGlobally && !e.activities.includes(readActivity))
             return acc;
         // exclude if does not match, if any
-        if (!entityFilterFunction(e, keywordsList))
+        if (!entityMatchFunction(e, keywordsList))
             return acc;
-        // put into either available or deleted array
-        if (!e.isDeleted)
-            acc.availableArray.push(e);
-        else
-            acc.deletedArray.push(e);
+        // add entity to the corresponding tab filtered array
+        var tab = e.isDeleted ? table_1.MANAGE_TABLE_TAB.DELETED : table_1.MANAGE_TABLE_TAB.AVAILABLE;
+        var tabArray = (_a = acc[tab]) !== null && _a !== void 0 ? _a : [];
+        tabArray.push(e);
+        acc[tab] = tabArray;
         return acc;
-    }, { availableArray: [], deletedArray: [] });
+    }, (_a = {}, _a[table_1.MANAGE_TABLE_TAB.AVAILABLE] = [], _a[table_1.MANAGE_TABLE_TAB.DELETED] = [], _a));
     return filteredEntities;
 };
 exports.searchEntities = searchEntities;
-//#region Groups
-var searchGroups = function (groups, groupsArray, externalTerms, canReadGroupsGlobally, keywords, dateString) {
+var getGroupTab = function (group, endDate) {
+    if (group.isDeleted) {
+        return table_1.GROUP_MANAGE_TABLE_TAB.DELETED;
+    }
+    else if (!!group.id && date_1.isNowBeforeDate(endDate)) {
+        return table_1.GROUP_MANAGE_TABLE_TAB.CURRENT;
+    }
+    return table_1.GROUP_MANAGE_TABLE_TAB.PAST;
+};
+var searchGroups = function (_a) {
+    var _b;
+    var groups = _a.groups, groupsArray = _a.modelArray, externalTerms = _a.externalTerms, canReadyAnyGlobally = _a.canReadyAnyGlobally, keywords = _a.keywords, dateString = _a.dateString;
     var keywordsList = exports.getKeywordsList(keywords);
-    var visibleGroups = canReadGroupsGlobally ? groupsArray : groupRoles_1.groupsAsAnythingButLearner(groups);
+    var visibleGroups = canReadyAnyGlobally ? groupsArray : groupRoles_1.groupsAsAnythingButLearner(groups);
     var filteredGroups = visibleGroups.reduce(function (acc, g) {
+        var _a;
         // exclude if does not match keywords, if any
         if (!exports.isEntityMatchedByKeywords(g, keywordsList))
             return acc;
@@ -66,18 +80,16 @@ var searchGroups = function (groups, groupsArray, externalTerms, canReadGroupsGl
                 date_1.getLocalMomentFromUtc(dateString) > date_1.getLocalMomentFromUtc(endDate))) {
             return acc;
         }
-        // put into current, past, or deleted array
-        if (g.isDeleted) {
-            acc.deletedGroups.push(g);
-        }
-        else if (!!g.id && date_1.isNowBeforeDate(endDate)) {
-            acc.currentGroups.push(g);
-        }
-        else {
-            acc.pastGroups.push(g);
-        }
+        var tab = getGroupTab(g, endDate);
+        var tabArray = (_a = acc[tab]) !== null && _a !== void 0 ? _a : [];
+        tabArray.push(g);
+        acc[tab] = tabArray;
         return acc;
-    }, { currentGroups: [], pastGroups: [], deletedGroups: [] });
+    }, (_b = {},
+        _b[table_1.GROUP_MANAGE_TABLE_TAB.CURRENT] = [],
+        _b[table_1.GROUP_MANAGE_TABLE_TAB.PAST] = [],
+        _b[table_1.GROUP_MANAGE_TABLE_TAB.DELETED] = [],
+        _b));
     return filteredGroups;
 };
 exports.searchGroups = searchGroups;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "5.0.0-next.2.9",
+	"version": "5.1.0",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",
@@ -126,6 +126,7 @@
 		"history": "^4.10.1",
 		"local-storage-fallback": "^4.1.1",
 		"lodash": "^4.17.20",
+		"memoize-one": "^6.0.0",
 		"moment-timezone": "^0.5.32",
 		"parchment": "^1.1.4",
 		"pluralize": "^8.0.0",