Merge pull request #1654 from mendix/fix/WC-1321-date-filter-causing-…

…multiple-requests

[WC-1321] Date filter causing multiple requests

packages/modules/data-widgets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "data-widgets",
   "moduleName": "Data Widgets",
-  "version": "2.5.5",
+  "version": "2.5.6",
   "license": "Apache-2.0",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "repository": {

packages/pluggableWidgets/datagrid-date-filter-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue with DateFilter causing poor page performance (#166116)
+
 ## [2.4.1] - 2022-8-11
 
 ### Fixed

packages/pluggableWidgets/datagrid-date-filter-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "datagrid-date-filter-web",
   "widgetName": "DatagridDateFilter",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "repository": {

packages/pluggableWidgets/datagrid-date-filter-web/src/components/FilterComponent.tsx

@@ -29,12 +29,18 @@ interface FilterComponentProps {
 
 export function FilterComponent(props: FilterComponentProps): ReactElement {
     const [type, setType] = useState<DefaultFilterEnum>(props.defaultFilter);
-    const [value, setValue] = useState<Date | undefined>(undefined);
+    const [value, setValue] = useState<Date | undefined>(props.defaultValue);
     const [rangeValues, setRangeValues] = useState<RangeDateValue>([props.defaultStartDate, props.defaultEndDate]);
     const pickerRef = useRef<DatePickerComponent | null>(null);
 
     useEffect(() => {
-        setValue(props.defaultValue);
+        setValue(prev => {
+            if (prev?.toISOString() === props.defaultValue?.toISOString()) {
+                return prev;
+            }
+
+            return props.defaultValue;
+        });
     }, [props.defaultValue]);
 
     useEffect(() => {

packages/pluggableWidgets/datagrid-date-filter-web/src/components/__tests__/FilterComponent.spec.tsx

@@ -1,5 +1,6 @@
 import { render } from "enzyme";
 import { createElement } from "react";
+import { render as render_fromTestingLibrary } from "@testing-library/react";
 import { FilterComponent } from "../FilterComponent";
 import ReactDOM from "react-dom";
 
@@ -37,4 +38,57 @@ describe("Filter component", () => {
 
         expect(component).toMatchSnapshot();
     });
+
+    describe("with defaultValue", () => {
+        it("call updateFilters when defaultValue get new value", () => {
+            const date = new Date(946684800000);
+            const updateFilters = jest.fn();
+            const { rerender } = render_fromTestingLibrary(
+                <FilterComponent adjustable defaultFilter="equal" defaultValue={date} updateFilters={updateFilters} />
+            );
+
+            // First time updateFilters is called on initial mount
+            expect(updateFilters).toBeCalledTimes(1);
+            expect(updateFilters.mock.calls[0][0]).toBe(date);
+
+            const nextValue = new Date(999999900000);
+
+            rerender(
+                <FilterComponent
+                    adjustable
+                    defaultFilter="equal"
+                    defaultValue={nextValue}
+                    updateFilters={updateFilters}
+                />
+            );
+
+            expect(updateFilters).toBeCalledTimes(2);
+            expect(updateFilters.mock.calls[1][0]).toBe(nextValue);
+        });
+
+        it("don't call updateFilters when defaultValue get same value", () => {
+            const date = new Date(946684800000);
+            const updateFilters = jest.fn();
+            const { rerender } = render_fromTestingLibrary(
+                <FilterComponent adjustable defaultFilter="equal" defaultValue={date} updateFilters={updateFilters} />
+            );
+
+            // First time updateFilters is called on initial mount
+            expect(updateFilters).toBeCalledTimes(1);
+            expect(updateFilters.mock.calls[0][0]).toBe(date);
+
+            const nextValue = new Date(946684800000);
+
+            rerender(
+                <FilterComponent
+                    adjustable
+                    defaultFilter="equal"
+                    defaultValue={nextValue}
+                    updateFilters={updateFilters}
+                />
+            );
+
+            expect(updateFilters).toBeCalledTimes(1);
+        });
+    });
 });

packages/pluggableWidgets/datagrid-date-filter-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="DatagridDateFilter" version="2.4.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="DatagridDateFilter" version="2.4.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="DatagridDateFilter.xml" />
         </widgetFiles>