From 33ec7e189410b29444b13da5bdf04427a9c32280 Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Wed, 20 Mar 2024 17:11:50 +0200
Subject: [PATCH] chore: fix react errors (#6637)

Fix hook usage react error (console)

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 .../executiveDashboard/ExecutiveDashboard.tsx | 20 ++++----
 .../hooks/useDashboardData.ts                 | 51 +++++++++++--------
 2 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx b/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx
index f72968298f..8dfb63839d 100644
--- a/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx
+++ b/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx
@@ -11,16 +11,16 @@ import { DashboardHeader } from './components/DashboardHeader/DashboardHeader';
 import { useDashboardData } from './hooks/useDashboardData';
 import { Charts } from './Charts';
 
-const StickyWrapper = styled(Box)<{ scrolled?: boolean }>(
-    ({ theme, scrolled }) => ({
-        position: 'sticky',
-        top: 0,
-        zIndex: 1000,
-        padding: scrolled ? theme.spacing(2, 0) : theme.spacing(0, 0, 2),
-        background: theme.palette.background.application,
-        transition: 'padding 0.3s ease',
-    }),
-);
+const StickyWrapper = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'scrolled',
+})<{ scrolled?: boolean }>(({ theme, scrolled }) => ({
+    position: 'sticky',
+    top: 0,
+    zIndex: 1000,
+    padding: scrolled ? theme.spacing(2, 0) : theme.spacing(0, 0, 2),
+    background: theme.palette.background.application,
+    transition: 'padding 0.3s ease',
+}));
 
 export const ExecutiveDashboard: VFC = () => {
     const [scrolled, setScrolled] = useState(false);
diff --git a/frontend/src/component/executiveDashboard/hooks/useDashboardData.ts b/frontend/src/component/executiveDashboard/hooks/useDashboardData.ts
index 82133e0df4..09059e1e93 100644
--- a/frontend/src/component/executiveDashboard/hooks/useDashboardData.ts
+++ b/frontend/src/component/executiveDashboard/hooks/useDashboardData.ts
@@ -8,36 +8,45 @@ import { useAvgTimeToProduction } from './useAvgTimeToProduction';
 export const useDashboardData = (
     executiveDashboardData: ExecutiveSummarySchema,
     projects: string[],
-) =>
-    useMemo(() => {
-        const projectsData = useFilteredTrends(
-            executiveDashboardData.projectFlagTrends,
-            projects,
-        );
+) => {
+    const projectsData = useFilteredTrends(
+        executiveDashboardData.projectFlagTrends,
+        projects,
+    );
 
-        const groupedProjectsData = useGroupedProjectTrends(projectsData);
+    const groupedProjectsData = useGroupedProjectTrends(projectsData);
 
-        const metricsData = useFilteredTrends(
-            executiveDashboardData.metricsSummaryTrends,
-            projects,
-        );
-        const groupedMetricsData = useGroupedProjectTrends(metricsData);
+    const metricsData = useFilteredTrends(
+        executiveDashboardData.metricsSummaryTrends,
+        projects,
+    );
+    const groupedMetricsData = useGroupedProjectTrends(metricsData);
 
-        const { users, environmentTypeTrends } = executiveDashboardData;
+    const summary = useFilteredFlagsSummary(projectsData);
 
-        const summary = useFilteredFlagsSummary(projectsData);
+    const avgDaysToProduction = useAvgTimeToProduction(groupedProjectsData);
 
-        const avgDaysToProduction = useAvgTimeToProduction(groupedProjectsData);
-
-        return {
+    return useMemo(
+        () => ({
             ...executiveDashboardData,
             projectsData,
             groupedProjectsData,
             metricsData,
             groupedMetricsData,
-            users,
-            environmentTypeTrends,
+            users: executiveDashboardData.users,
+            environmentTypeTrends: executiveDashboardData.environmentTypeTrends,
             summary,
             avgDaysToProduction,
-        };
-    }, [executiveDashboardData, projects]);
+        }),
+        [
+            executiveDashboardData,
+            projects,
+            projectsData,
+            groupedProjectsData,
+            metricsData,
+            groupedMetricsData,
+            summary,
+            avgDaysToProduction,
+        ],
+    );
+};