Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-01 01:18:10 +02:00
Code Issues Projects Releases Wiki Activity

chore: fix react errors (#6637)

Browse Source 
Fix hook usage react error (console)

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
This commit is contained in:
andreas-unleash 2024-03-20 17:11:50 +02:00 committed by GitHub
parent b7232d0397
commit 33ec7e1894
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 40 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx
View File

@ -11,16 +11,16 @@ import { DashboardHeader } from './components/DashboardHeader/DashboardHeader';
import { useDashboardData } from './hooks/useDashboardData'; import { useDashboardData } from './hooks/useDashboardData';
import { Charts } from './Charts'; import { Charts } from './Charts';
const StickyWrapper = styled(Box)<{ scrolled?: boolean }>( const StickyWrapper = styled(Box, {
({ theme, scrolled }) => ({ shouldForwardProp: (prop) => prop !== 'scrolled',
})<{ scrolled?: boolean }>(({ theme, scrolled }) => ({
position: 'sticky', position: 'sticky',
top: 0, top: 0,
zIndex: 1000, zIndex: 1000,
padding: scrolled ? theme.spacing(2, 0) : theme.spacing(0, 0, 2), padding: scrolled ? theme.spacing(2, 0) : theme.spacing(0, 0, 2),
background: theme.palette.background.application, background: theme.palette.background.application,
transition: 'padding 0.3s ease', transition: 'padding 0.3s ease',
}), }));
);
export const ExecutiveDashboard: VFC = () => { export const ExecutiveDashboard: VFC = () => {
const [scrolled, setScrolled] = useState(false); const [scrolled, setScrolled] = useState(false);

25
frontend/src/component/executiveDashboard/hooks/useDashboardData.ts
View File

@ -8,8 +8,7 @@ import { useAvgTimeToProduction } from './useAvgTimeToProduction';
export const useDashboardData = ( export const useDashboardData = (
executiveDashboardData: ExecutiveSummarySchema, executiveDashboardData: ExecutiveSummarySchema,
projects: string[], projects: string[],
) => ) => {
useMemo(() => {
const projectsData = useFilteredTrends( const projectsData = useFilteredTrends(
executiveDashboardData.projectFlagTrends, executiveDashboardData.projectFlagTrends,
projects, projects,
@ -23,21 +22,31 @@ export const useDashboardData = (
); );
const groupedMetricsData = useGroupedProjectTrends(metricsData); 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, ...executiveDashboardData,
projectsData, projectsData,
groupedProjectsData, groupedProjectsData,
metricsData, metricsData,
groupedMetricsData, groupedMetricsData,
users, users: executiveDashboardData.users,
environmentTypeTrends, environmentTypeTrends: executiveDashboardData.environmentTypeTrends,
summary, summary,
avgDaysToProduction, avgDaysToProduction,
}),
[
executiveDashboardData,
projects,
projectsData,
groupedProjectsData,
metricsData,
groupedMetricsData,
summary,
avgDaysToProduction,
],
);
}; };
}, [executiveDashboardData, projects]);