@dhis2/analytics 23.13.3 → 23.13.4

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [23.13.4](https://github.com/dhis2/analytics/compare/v23.13.3...v23.13.4) (2022-08-05)
+
+
+### Bug Fixes
+
+* request first page when sorting/filtering ([#1301](https://github.com/dhis2/analytics/issues/1301)) ([125e2af](https://github.com/dhis2/analytics/commit/125e2af84c19c81a9f8665d3e0cf2a88aaffdbda))
+
 ## [23.13.3](https://github.com/dhis2/analytics/compare/v23.13.2...v23.13.3) (2022-08-02)
 
 

package/build/cjs/components/OpenFileDialog/OpenFileDialog.js

@@ -79,25 +79,28 @@ const OpenFileDialog = _ref2 => {
     onNew,
     currentUser
   } = _ref2;
-  const filesQuery = (0, _react.useMemo)(() => getQuery(type), []);
+  const filesQuery = (0, _react.useMemo)(() => getQuery(type), [type]);
   const defaultFilters = {
     searchTerm: '',
     createdBy: _CreatedByFilter.CREATED_BY_ALL,
     visType: defaultFilterVisType
   };
   const [{
+    page,
     sortField,
-    sortDirection
-  }, setSorting] = (0, _react.useState)({
+    sortDirection,
+    filters
+  }, setState] = (0, _react.useReducer)((state, newState) => ({ ...state,
+    ...newState
+  }), {
+    page: 1,
     sortField: 'displayName',
-    sortDirection: 'asc'
+    sortDirection: 'asc',
+    filters: defaultFilters
   });
-  const [page, setPage] = (0, _react.useState)(1);
   const [nameFilterValue, setNameFilterValue] = (0, _react.useState)(defaultFilters.searchTerm);
   const [searchTimeout, setSearchTimeout] = (0, _react.useState)(null);
-  const [filters, setFilters] = (0, _react.useState)(defaultFilters);
-
-  const formatFilters = () => {
+  const formatFilters = (0, _react.useCallback)(() => {
     const queryFilters = [];
 
     switch (filters.createdBy) {
@@ -134,8 +137,7 @@ const OpenFileDialog = _ref2 => {
     }
 
     return queryFilters;
-  };
-
+  }, [currentUser, filters]);
   const {
     loading,
     error,
@@ -146,10 +148,29 @@ const OpenFileDialog = _ref2 => {
   });
 
   const resetFilters = () => {
-    setFilters(defaultFilters);
+    setState({
+      filters: defaultFilters,
+      page: 1
+    });
     setNameFilterValue(defaultFilters.searchTerm);
   };
 
+  const setPage = pageNum => setState({
+    page: pageNum
+  });
+
+  const sortData = _ref3 => {
+    let {
+      name,
+      direction
+    } = _ref3;
+    return setState({
+      sortField: name,
+      sortDirection: direction,
+      page: 1
+    });
+  };
+
   (0, _react.useEffect)(() => {
     // only fetch data when the dialog is open
     if (open) {
@@ -160,19 +181,7 @@ const OpenFileDialog = _ref2 => {
         filters: formatFilters()
       });
     }
-  }, [open, page, sortField, sortDirection]);
-  (0, _react.useEffect)(() => {
-    // avoid fetching data when the dialog is first rendered (hidden)
-    if (open) {
-      // reset pagination when filters are applied/changed
-      setPage(1);
-      refetch({
-        sortField,
-        sortDirection,
-        filters: formatFilters()
-      });
-    }
-  }, [filters]);
+  }, [open, page, sortField, sortDirection, filters, refetch, formatFilters]);
   const headers = [{
     field: 'displayName',
     label: _d2I18n.default.t('Name'),
@@ -216,8 +225,11 @@ const OpenFileDialog = _ref2 => {
     onChange: value => {
       setNameFilterValue(value);
       clearTimeout(searchTimeout);
-      setSearchTimeout(setTimeout(() => setFilters({ ...filters,
-        searchTerm: value
+      setSearchTimeout(setTimeout(() => setState({
+        page: 1,
+        filters: { ...filters,
+          searchTerm: value
+        }
       }), 200));
     }
   })), (filterVisTypes === null || filterVisTypes === void 0 ? void 0 : filterVisTypes.length) && /*#__PURE__*/_react.default.createElement("div", {
@@ -225,15 +237,21 @@ const OpenFileDialog = _ref2 => {
   }, /*#__PURE__*/_react.default.createElement(_VisTypeFilter.VisTypeFilter, {
     visTypes: filterVisTypes,
     selected: filters.visType,
-    onChange: value => setFilters({ ...filters,
-      visType: value
+    onChange: value => setState({
+      page: 1,
+      filters: { ...filters,
+        visType: value
+      }
     })
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "jsx-".concat(_OpenFileDialogStyles.styles.__hash) + " " + "created-by-field-container"
   }, /*#__PURE__*/_react.default.createElement(_CreatedByFilter.CreatedByFilter, {
     selected: filters.createdBy,
-    onChange: value => setFilters({ ...filters,
-      createdBy: value
+    onChange: value => setState({
+      page: 1,
+      filters: { ...filters,
+        createdBy: value
+      }
     })
   })), !(0, _isEqual.default)(filters, defaultFilters) && /*#__PURE__*/_react.default.createElement(_ui.Button, {
     onClick: resetFilters,
@@ -246,26 +264,17 @@ const OpenFileDialog = _ref2 => {
     className: "jsx-".concat(_OpenFileDialogStyles.styles.__hash) + " " + "data-table-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_ui.DataTable, {
     layout: "fixed"
-  }, /*#__PURE__*/_react.default.createElement(_ui.DataTableHead, null, /*#__PURE__*/_react.default.createElement(_ui.DataTableRow, null, data !== null && data !== void 0 && data.files[_utils.AOTypeMap[type].apiEndpoint].length ? headers.map(_ref3 => {
+  }, /*#__PURE__*/_react.default.createElement(_ui.DataTableHead, null, /*#__PURE__*/_react.default.createElement(_ui.DataTableRow, null, data !== null && data !== void 0 && data.files[_utils.AOTypeMap[type].apiEndpoint].length ? headers.map(_ref4 => {
     let {
       field,
       label,
       width
-    } = _ref3;
+    } = _ref4;
     return /*#__PURE__*/_react.default.createElement(_ui.DataTableColumnHeader, {
       width: width,
       key: field,
       name: field,
-      onSortIconClick: _ref4 => {
-        let {
-          name,
-          direction
-        } = _ref4;
-        return setSorting({
-          sortField: name,
-          sortDirection: direction
-        });
-      },
+      onSortIconClick: sortData,
       sortDirection: getSortDirection(field)
     }, label);
   }) : /*#__PURE__*/_react.default.createElement(_ui.DataTableColumnHeader, null))), /*#__PURE__*/_react.default.createElement(_ui.DataTableBody, {

package/build/es/components/OpenFileDialog/OpenFileDialog.js

@@ -4,7 +4,7 @@ import i18n from '@dhis2/d2-i18n';
 import { Box, Modal, ModalTitle, ModalContent, DataTable, DataTableHead, DataTableBody, DataTableRow, DataTableCell, DataTableColumnHeader, NoticeBox, CircularLoader, Button } from '@dhis2/ui';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { VIS_TYPE_GROUP_ALL, VIS_TYPE_GROUP_CHARTS } from '../../modules/visTypes.js';
 import { CreatedByFilter, CREATED_BY_ALL, CREATED_BY_ALL_BUT_CURRENT_USER, CREATED_BY_CURRENT_USER } from './CreatedByFilter.js';
 import { FileList } from './FileList.js';
@@ -52,25 +52,28 @@ export const OpenFileDialog = _ref2 => {
     onNew,
     currentUser
   } = _ref2;
-  const filesQuery = useMemo(() => getQuery(type), []);
+  const filesQuery = useMemo(() => getQuery(type), [type]);
   const defaultFilters = {
     searchTerm: '',
     createdBy: CREATED_BY_ALL,
     visType: defaultFilterVisType
   };
   const [{
+    page,
     sortField,
-    sortDirection
-  }, setSorting] = useState({
+    sortDirection,
+    filters
+  }, setState] = useReducer((state, newState) => ({ ...state,
+    ...newState
+  }), {
+    page: 1,
     sortField: 'displayName',
-    sortDirection: 'asc'
+    sortDirection: 'asc',
+    filters: defaultFilters
   });
-  const [page, setPage] = useState(1);
   const [nameFilterValue, setNameFilterValue] = useState(defaultFilters.searchTerm);
   const [searchTimeout, setSearchTimeout] = useState(null);
-  const [filters, setFilters] = useState(defaultFilters);
-
-  const formatFilters = () => {
+  const formatFilters = useCallback(() => {
     const queryFilters = [];
 
     switch (filters.createdBy) {
@@ -107,8 +110,7 @@ export const OpenFileDialog = _ref2 => {
     }
 
     return queryFilters;
-  };
-
+  }, [currentUser, filters]);
   const {
     loading,
     error,
@@ -119,10 +121,29 @@ export const OpenFileDialog = _ref2 => {
   });
 
   const resetFilters = () => {
-    setFilters(defaultFilters);
+    setState({
+      filters: defaultFilters,
+      page: 1
+    });
     setNameFilterValue(defaultFilters.searchTerm);
   };
 
+  const setPage = pageNum => setState({
+    page: pageNum
+  });
+
+  const sortData = _ref3 => {
+    let {
+      name,
+      direction
+    } = _ref3;
+    return setState({
+      sortField: name,
+      sortDirection: direction,
+      page: 1
+    });
+  };
+
   useEffect(() => {
     // only fetch data when the dialog is open
     if (open) {
@@ -133,19 +154,7 @@ export const OpenFileDialog = _ref2 => {
         filters: formatFilters()
       });
     }
-  }, [open, page, sortField, sortDirection]);
-  useEffect(() => {
-    // avoid fetching data when the dialog is first rendered (hidden)
-    if (open) {
-      // reset pagination when filters are applied/changed
-      setPage(1);
-      refetch({
-        sortField,
-        sortDirection,
-        filters: formatFilters()
-      });
-    }
-  }, [filters]);
+  }, [open, page, sortField, sortDirection, filters, refetch, formatFilters]);
   const headers = [{
     field: 'displayName',
     label: i18n.t('Name'),
@@ -189,8 +198,11 @@ export const OpenFileDialog = _ref2 => {
     onChange: value => {
       setNameFilterValue(value);
       clearTimeout(searchTimeout);
-      setSearchTimeout(setTimeout(() => setFilters({ ...filters,
-        searchTerm: value
+      setSearchTimeout(setTimeout(() => setState({
+        page: 1,
+        filters: { ...filters,
+          searchTerm: value
+        }
       }), 200));
     }
   })), (filterVisTypes === null || filterVisTypes === void 0 ? void 0 : filterVisTypes.length) && /*#__PURE__*/React.createElement("div", {
@@ -198,15 +210,21 @@ export const OpenFileDialog = _ref2 => {
   }, /*#__PURE__*/React.createElement(VisTypeFilter, {
     visTypes: filterVisTypes,
     selected: filters.visType,
-    onChange: value => setFilters({ ...filters,
-      visType: value
+    onChange: value => setState({
+      page: 1,
+      filters: { ...filters,
+        visType: value
+      }
     })
   })), /*#__PURE__*/React.createElement("div", {
     className: "jsx-".concat(styles.__hash) + " " + "created-by-field-container"
   }, /*#__PURE__*/React.createElement(CreatedByFilter, {
     selected: filters.createdBy,
-    onChange: value => setFilters({ ...filters,
-      createdBy: value
+    onChange: value => setState({
+      page: 1,
+      filters: { ...filters,
+        createdBy: value
+      }
     })
   })), !isEqual(filters, defaultFilters) && /*#__PURE__*/React.createElement(Button, {
     onClick: resetFilters,
@@ -219,26 +237,17 @@ export const OpenFileDialog = _ref2 => {
     className: "jsx-".concat(styles.__hash) + " " + "data-table-wrapper"
   }, /*#__PURE__*/React.createElement(DataTable, {
     layout: "fixed"
-  }, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, data !== null && data !== void 0 && data.files[AOTypeMap[type].apiEndpoint].length ? headers.map(_ref3 => {
+  }, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, data !== null && data !== void 0 && data.files[AOTypeMap[type].apiEndpoint].length ? headers.map(_ref4 => {
     let {
       field,
       label,
       width
-    } = _ref3;
+    } = _ref4;
     return /*#__PURE__*/React.createElement(DataTableColumnHeader, {
       width: width,
       key: field,
       name: field,
-      onSortIconClick: _ref4 => {
-        let {
-          name,
-          direction
-        } = _ref4;
-        return setSorting({
-          sortField: name,
-          sortDirection: direction
-        });
-      },
+      onSortIconClick: sortData,
       sortDirection: getSortDirection(field)
     }, label);
   }) : /*#__PURE__*/React.createElement(DataTableColumnHeader, null))), /*#__PURE__*/React.createElement(DataTableBody, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "23.13.3",
+    "version": "23.13.4",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {