fix: conditionally show the Show More button in item selector (#326)

The button should only be shown if there are more items that can be fetched (e.g., more than the 5 displayed items). The way this is done is to fetch 6 items even though only 5 will be displayed. Then we can easily check if 6 items were returned in the api response. There is also a minor amount of code clean-up - removing unneeded properties, moving a function to where it actually belongs. Fixes [https://jira.dhis2.org/browse/DHIS2-7076]
dhis2 · Jun 4, 2019 · 09d4c87 · 09d4c87
1 parent 6fc4cb7
commit 09d4c87
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 93 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2019-05-22T08:39:03.062Z\n"
-"PO-Revision-Date: 2019-05-22T08:39:03.062Z\n"
+"POT-Creation-Date: 2019-06-04T08:23:22.661Z\n"
+"PO-Revision-Date: 2019-06-04T08:23:22.661Z\n"
 
 msgid "Dashboard"
 msgstr ""
@@ -154,6 +154,9 @@ msgstr ""
 msgid "Event Visualizer"
 msgstr ""
 
+msgid "Apps"
+msgstr ""
+
 msgid "Reports"
 msgstr ""
 

diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
         "@dhis2/d2-ui-translation-dialog": "^6.0.1",
         "@dhis2/data-visualizer-plugin": "^33.0.2",
         "@dhis2/ui": "1.0.0-beta.15",
-        "@dhis2/ui-core": "2.2.0",
+        "@dhis2/ui-core": "2.5.1",
         "@material-ui/core": "^3.9.2",
         "@material-ui/icons": "^3.0.2",
         "d2": "^31.6.0",

diff --git a/src/api/index.js b/src/api/index.js
@@ -1,5 +1,4 @@
 import arrayClean from 'd2-utilizr/lib/arrayClean';
-import { itemTypeMap } from '../modules/itemTypes';
 import {
     getListItemFields,
     getFavoritesFields,
@@ -10,8 +9,6 @@ import {
 
 export const onError = error => console.log('Error: ', error);
 
-export const getEndPointName = type => itemTypeMap[type].endPointName;
-
 // Dashboard item
 export const getDashboardItemsFields = ({ withFavorite } = {}) =>
     arrayClean([

diff --git a/src/api/metadata.js b/src/api/metadata.js
@@ -1,7 +1,7 @@
 import { getInstance } from 'd2';
 import arrayClean from 'd2-utilizr/lib/arrayClean';
 
-import { getEndPointName } from './index';
+import { getEndPointName } from '../modules/itemTypes';
 
 // Id, name
 export const getIdNameFields = ({ rename } = {}) => [

diff --git a/src/components/ItemSelector/CategorizedMenuGroup.js b/src/components/ItemSelector/CategorizedMenuGroup.js
@@ -49,7 +49,7 @@ class CategorizedMenuGroup extends Component {
     };
 
     render() {
-        const { title, type, items } = this.props;
+        const { title, type, items, hasMore } = this.props;
         return (
             <Fragment>
                 <HeaderMenuItem title={title} />
@@ -65,26 +65,28 @@ class CategorizedMenuGroup extends Component {
                         />
                     );
                 })}
-                <MenuItem
-                    dense
-                    key={`showmore${title}`}
-                    onClick={this.toggleSeeMore}
-                    label={
-                        <button className={classes.showMoreButton}>
-                            {this.state.seeMore
-                                ? i18n.t('Show fewer')
-                                : i18n.t('Show more')}
-                        </button>
-                    }
-                />
+                {hasMore ? (
+                    <MenuItem
+                        dense
+                        key={`showmore${title}`}
+                        onClick={this.toggleSeeMore}
+                        label={
+                            <button className={classes.showMoreButton}>
+                                {this.state.seeMore
+                                    ? i18n.t('Show fewer')
+                                    : i18n.t('Show more')}
+                            </button>
+                        }
+                    />
+                ) : null}
                 <Divider margin="8px 0px" />
             </Fragment>
         );
     }
 }
 
 CategorizedMenuGroup.propTypes = {
-    type: PropTypes.oneOf(categorizedItems.map(i => i.id)).isRequired,
+    type: PropTypes.oneOf(categorizedItems).isRequired,
     title: PropTypes.string.isRequired,
     items: PropTypes.array.isRequired,
     onChangeItemsLimit: PropTypes.func.isRequired,

diff --git a/src/components/ItemSelector/ItemSelector.js b/src/components/ItemSelector/ItemSelector.js
@@ -53,30 +53,41 @@ class ItemSelector extends React.Component {
         this.setState({ filter: event.target.value }, this.fetchItems);
     };
 
-    getCategorizedMenuGroups = items =>
-        categorizedItems.map(type => {
-            const itemType = itemTypeMap[type.id];
-
-            return items && items[itemType.countName] > 0 ? (
-                <CategorizedMenuGroup
-                    key={type.id}
-                    type={type.id}
-                    title={type.title}
-                    items={items[itemType.endPointName]}
-                    onChangeItemsLimit={this.fetchItems}
-                />
-            ) : null;
-        });
+    getCategorizedMenuGroups = () =>
+        categorizedItems
+            .filter(type => {
+                const itemType = itemTypeMap[type];
+                return (
+                    this.state.items && this.state.items[itemType.endPointName]
+                );
+            })
+            .map(type => {
+                const itemType = itemTypeMap[type];
+                const allItems = this.state.items[itemType.endPointName];
+                const hasMore = allItems.length > 5;
+                const items = this.state.maxOptions.has(itemType.id)
+                    ? allItems
+                    : allItems.slice(0, 5);
+
+                return (
+                    <CategorizedMenuGroup
+                        key={type}
+                        type={type}
+                        title={itemType.pluralTitle}
+                        items={items}
+                        onChangeItemsLimit={this.fetchItems}
+                        hasMore={hasMore}
+                    />
+                );
+            });
 
-    getSinglesMenuGroups = items =>
-        items.map(category => (
+    getSinglesMenuGroups = () =>
+        singleItems.map(category => (
             <SinglesMenuGroup key={category.id} category={category} />
         ));
 
-    getMenuGroups = items =>
-        this.getCategorizedMenuGroups(items).concat(
-            this.getSinglesMenuGroups(singleItems)
-        );
+    getMenuGroups = () =>
+        this.getCategorizedMenuGroups().concat(this.getSinglesMenuGroups());
 
     fetchItems = async type => {
         if (type) {
@@ -95,19 +106,17 @@ class ItemSelector extends React.Component {
             });
         }
 
-        let queryString = '';
+        let queryString = '?count=6';
         if ([...this.state.maxOptions.values()].length) {
-            queryString =
-                '?max=' + [...this.state.maxOptions.values()].join('&max=');
+            queryString +=
+                '&max=' + [...this.state.maxOptions.values()].join('&max=');
         }
 
         const filter = this.state.filter ? `/${this.state.filter}` : '';
 
         this.context.d2.Api.getApi()
             .get(`dashboards/q${filter}${queryString}`)
-            .then(response => {
-                this.setState({ items: response });
-            })
+            .then(response => this.setState({ items: response }))
             .catch(console.error);
     };
 
@@ -131,7 +140,7 @@ class ItemSelector extends React.Component {
                     disableAutoFocus={true}
                     disableRestoreFocus={true}
                 >
-                    <Menu>{this.getMenuGroups(this.state.items)}</Menu>
+                    <Menu>{this.getMenuGroups()}</Menu>
                 </Popover>
             </Fragment>
         );

diff --git a/src/components/ItemSelector/selectableItems.js b/src/components/ItemSelector/selectableItems.js
@@ -1,6 +1,5 @@
 import i18n from '@dhis2/d2-i18n';
 import {
-    itemTypeMap,
     spacerContent,
     REPORT_TABLE,
     CHART,
@@ -42,36 +41,15 @@ export const singleItems = [
 
 // categorizedItems are grouped in the item selector menu
 export const categorizedItems = [
-    {
-        id: REPORT_TABLE,
-        title: itemTypeMap[REPORT_TABLE].pluralTitle,
-    },
-    {
-        id: CHART,
-        title: itemTypeMap[CHART].pluralTitle,
-    },
-    { id: MAP, title: itemTypeMap[MAP].pluralTitle },
-    {
-        id: EVENT_REPORT,
-        title: itemTypeMap[EVENT_REPORT].pluralTitle,
-    },
-    {
-        id: EVENT_CHART,
-        title: itemTypeMap[EVENT_CHART].pluralTitle,
-    },
-    {
-        id: USERS,
-        title: itemTypeMap[USERS].pluralTitle,
-    },
-    {
-        id: REPORTS,
-        title: itemTypeMap[REPORTS].pluralTitle,
-    },
-    {
-        id: RESOURCES,
-        title: itemTypeMap[RESOURCES].pluralTitle,
-    },
-    { id: APP, title: itemTypeMap[APP].pluralTitle },
+    REPORT_TABLE,
+    CHART,
+    MAP,
+    EVENT_REPORT,
+    EVENT_CHART,
+    USERS,
+    REPORTS,
+    RESOURCES,
+    APP,
 ];
 
 // listItemTypes are included in a single dashboard item

diff --git a/src/modules/itemTypes.js b/src/modules/itemTypes.js
@@ -60,7 +60,6 @@ export const itemTypeMap = {
         id: REPORT_TABLE,
         endPointName: 'reportTables',
         propName: 'reportTable',
-        countName: 'reportTableCount',
         pluralTitle: i18n.t('Pivot tables'),
         plugin: 'reportTablePlugin',
         domainType: DOMAIN_TYPE_AGGREGATE,
@@ -72,7 +71,6 @@ export const itemTypeMap = {
         id: CHART,
         endPointName: 'charts',
         propName: 'chart',
-        countName: 'chartCount',
         pluralTitle: i18n.t('Charts'),
         plugin: 'chartPlugin',
         domainType: DOMAIN_TYPE_AGGREGATE,
@@ -84,7 +82,6 @@ export const itemTypeMap = {
         id: MAP,
         endPointName: 'maps',
         propName: 'map',
-        countName: 'mapCount',
         pluralTitle: i18n.t('Maps'),
         plugin: 'mapPlugin',
         domainType: DOMAIN_TYPE_AGGREGATE,
@@ -96,7 +93,6 @@ export const itemTypeMap = {
         id: EVENT_REPORT,
         endPointName: 'eventReports',
         propName: 'eventReport',
-        countName: 'eventReportCount',
         pluralTitle: i18n.t('Event reports'),
         plugin: 'eventReportPlugin',
         domainType: DOMAIN_TYPE_TRACKER,
@@ -108,7 +104,6 @@ export const itemTypeMap = {
         id: EVENT_CHART,
         endPointName: 'eventCharts',
         propName: 'eventChart',
-        countName: 'eventChartCount',
         pluralTitle: i18n.t('Event charts'),
         plugin: 'eventChartPlugin',
         domainType: DOMAIN_TYPE_TRACKER,
@@ -119,14 +114,12 @@ export const itemTypeMap = {
     [APP]: {
         endPointName: 'apps',
         propName: 'appKey',
-        countName: 'appCount',
-        pluralTitle: 'Apps',
+        pluralTitle: i18n.t('Apps'),
     },
     [REPORTS]: {
         id: REPORTS,
         endPointName: 'reports',
         propName: 'reports',
-        countName: 'reportCount',
         pluralTitle: i18n.t('Reports'),
         appUrl: id =>
             `dhis-web-reporting/getReportParams.action?mode=report&uid=${id}`,
@@ -135,15 +128,13 @@ export const itemTypeMap = {
         id: RESOURCES,
         endPointName: 'resources',
         propName: 'resources',
-        countName: 'resourceCount',
         pluralTitle: i18n.t('Resources'),
         appUrl: id => `api/documents/${id}/data`,
     },
     [USERS]: {
         id: USERS,
         endPointName: 'users',
         propName: 'users',
-        countName: 'userCount',
         pluralTitle: i18n.t('Users'),
         appUrl: id => `dhis-web-dashboard-integration/profile.action?id=${id}`,
     },
@@ -159,6 +150,8 @@ export const itemTypeMap = {
     },
 };
 
+export const getEndPointName = type => itemTypeMap[type].endPointName;
+
 export const getItemUrl = (type, item, d2) => {
     let url;
 

diff --git a/yarn.lock b/yarn.lock
@@ -1274,10 +1274,10 @@
     react "^16.6.0"
     react-dom "^16.6.0"
 
-"@dhis2/ui-core@2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/ui-core/-/ui-core-2.2.0.tgz#9122403623c9f84127ad3e89134b6d08948e550a"
-  integrity sha512-uhu9WUDyYY+v5nnO0Nhu/x0Rey6okZHFTNKvndvHk4Gm/qSrpNvINHOFAC930I5MdVvCP0UHKrqas1JXAJ3nqg==
+"@dhis2/ui-core@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@dhis2/ui-core/-/ui-core-2.5.1.tgz#da24154f6ca02659ecc6725dfafc5a16c77dfb12"
+  integrity sha512-WnfVTxACo/Y9Iy1o5Usj+wbRYpgWePEuRFZ067VAPZhwVp6uekj7V2ONa1DpvUOLcRP8Z/DtlSN6EAaKzKhF+A==
   dependencies:
     classnames "^2.2.6"
     styled-jsx "^3.2.1"