From f778d4b322580b45b697b78d83ecb94850d52cc5 Mon Sep 17 00:00:00 2001
From: "Ouin, Edouard" <edouard.ouin@sap.com>
Date: Fri, 6 Sep 2024 17:39:32 +0100
Subject: [PATCH] fix(ga): add Klaus fix for pagesize

---
 packages/webapp/src/webview/state/reducers.ts |  1 +
 .../src/webview/ui/components/App/App.tsx     | 24 ++++++-------------
 .../Header/Filters/FiltersRibbon.tsx          |  2 +-
 .../Header/SearchField/SearchField.tsx        |  4 +++-
 4 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/packages/webapp/src/webview/state/reducers.ts b/packages/webapp/src/webview/state/reducers.ts
index e62171e2..30fc34fe 100644
--- a/packages/webapp/src/webview/state/reducers.ts
+++ b/packages/webapp/src/webview/state/reducers.ts
@@ -481,3 +481,4 @@ export const getNetworkStatus = (state: AppState) => state.networkStatus;
 export const getActiveScreen = (state: AppState) => state.activeScreen;
 export const getProductFilters = (state: AppState) => state.selectedProductFilters;
 export const getComponentFilters = (state: AppState) => state.selectedComponentFilters;
+export const getPageSize = (state: AppState) => state.pageSize;
diff --git a/packages/webapp/src/webview/ui/components/App/App.tsx b/packages/webapp/src/webview/ui/components/App/App.tsx
index 705506bc..ba29f014 100644
--- a/packages/webapp/src/webview/ui/components/App/App.tsx
+++ b/packages/webapp/src/webview/ui/components/App/App.tsx
@@ -36,29 +36,19 @@ export function App(): ReactElement {
         if (!resultsContainer) {
             return undefined;
         }
-        //tree-item element height is ~100px, using 50px here to be on the safe side.
+        // tree-item element height is ~100px, using 50px here to be on the safe side. Header uses ~300,  minimum page size is 5.
         const setPageSizeByContainerHeight = (pxHeight: number): void => {
-            actions.setPageSize(Math.ceil(pxHeight / 50));
+            actions.setPageSize(Math.max(5, Math.ceil((pxHeight - 300) / 50)));
         };
-        const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
-            const containerEntry = entries.find((entry) => entry?.target?.id === 'results-container');
-            if (containerEntry) {
-                setPageSizeByContainerHeight(containerEntry.contentRect.height);
-            }
-        });
-        // Set initial page size
-        setPageSizeByContainerHeight(resultsContainer.clientHeight);
-        resizeObserver.observe(resultsContainer);
-        return () => {
-            if (resizeObserver) {
-                resizeObserver.unobserve(resultsContainer);
-            }
+
+        window.onresize = () => {
+            setPageSizeByContainerHeight(window.innerHeight);
         };
+        setPageSizeByContainerHeight(window.innerHeight);
+        return undefined;
     }, []);
 
     useEffect(() => {
-        // appState.pageSize
-
         const isMore =
             appState.guidedAnswerTreeSearchResult.trees.length < appState.guidedAnswerTreeSearchResult.resultSize;
         setHasMore(isMore);
diff --git a/packages/webapp/src/webview/ui/components/Header/Filters/FiltersRibbon.tsx b/packages/webapp/src/webview/ui/components/Header/Filters/FiltersRibbon.tsx
index 53a4ded1..5e2b9594 100644
--- a/packages/webapp/src/webview/ui/components/Header/Filters/FiltersRibbon.tsx
+++ b/packages/webapp/src/webview/ui/components/Header/Filters/FiltersRibbon.tsx
@@ -26,7 +26,7 @@ export function FiltersRibbon() {
                 component: []
             },
             paging: {
-                responseSize: 20, //appState.pageSize,
+                responseSize: appState.pageSize,
                 offset: 0
             }
         });
diff --git a/packages/webapp/src/webview/ui/components/Header/SearchField/SearchField.tsx b/packages/webapp/src/webview/ui/components/Header/SearchField/SearchField.tsx
index 3b8df86b..6b1e1306 100644
--- a/packages/webapp/src/webview/ui/components/Header/SearchField/SearchField.tsx
+++ b/packages/webapp/src/webview/ui/components/Header/SearchField/SearchField.tsx
@@ -9,6 +9,7 @@ import {
     getSearchQuery,
     getNetworkStatus,
     getActiveScreen,
+    getPageSize,
     getProductFilters,
     getComponentFilters
 } from '../../../../state/reducers';
@@ -22,6 +23,7 @@ export const SearchField: React.FC = (): JSX.Element => {
     const networkStatus: string = useAppSelector(getNetworkStatus);
     const productFilters: string[] = useAppSelector(getProductFilters);
     const componentFilters: string[] = useAppSelector(getComponentFilters);
+    const pageSize: number = useAppSelector(getPageSize);
     const activeScreen: string = useAppSelector(getActiveScreen);
     const activeSearch: string = useAppSelector(getSearchQuery);
 
@@ -70,7 +72,7 @@ export const SearchField: React.FC = (): JSX.Element => {
                     component: componentFilters
                 },
                 {
-                    responseSize: 20,
+                    responseSize: pageSize,
                     offset: 0
                 }
             );