From 0188a171992d0dbabaed1360e95d5a524a168c44 Mon Sep 17 00:00:00 2001 From: cauemarcondes Date: Wed, 20 Jan 2021 18:13:59 +0100 Subject: [PATCH] moving useBreakPoint to common hooks folder, removing useShouldUSeMobileLayout hook --- .../app/RumDashboard/RumDashboard.tsx | 2 +- .../components/app/service_overview/index.tsx | 6 ++--- .../service_overview_table_container.tsx | 6 ++--- .../use_should_use_mobile_layout.ts | 27 ------------------- .../public/components/shared/search_bar.tsx | 2 +- .../shared/time_comparison/index.tsx | 2 +- .../use_break_points.ts} | 0 7 files changed, 9 insertions(+), 36 deletions(-) delete mode 100644 x-pack/plugins/apm/public/components/app/service_overview/use_should_use_mobile_layout.ts rename x-pack/plugins/apm/public/{components/app/RumDashboard/hooks/useBreakPoints.ts => hooks/use_break_points.ts} (100%) diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx index c810bd3e7c489..447f6d502fe40 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx @@ -18,7 +18,7 @@ import { UXMetrics } from './UXMetrics'; import { ImpactfulMetrics } from './ImpactfulMetrics'; import { PageLoadAndViews } from './Panels/PageLoadAndViews'; import { VisitorBreakdownsPanel } from './Panels/VisitorBreakdowns'; -import { useBreakPoints } from './hooks/useBreakPoints'; +import { useBreakPoints } from '../../../hooks/use_break_points'; import { getPercentileLabel } from './UXMetrics/translations'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; diff --git a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx index 51ab6a984aef5..f265a4cb247fa 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx @@ -12,6 +12,7 @@ import { isRumAgentName } from '../../../../common/agent_name'; import { AnnotationsContextProvider } from '../../../context/annotations/annotations_context'; import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context'; import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context'; +import { useBreakPoints } from '../../../hooks/use_break_points'; import { LatencyChart } from '../../shared/charts/latency_chart'; import { TransactionBreakdownChart } from '../../shared/charts/transaction_breakdown_chart'; import { TransactionErrorRateChart } from '../../shared/charts/transaction_error_rate_chart'; @@ -22,7 +23,6 @@ import { ServiceOverviewErrorsTable } from './service_overview_errors_table'; import { ServiceOverviewInstancesTable } from './service_overview_instances_table'; import { ServiceOverviewThroughputChart } from './service_overview_throughput_chart'; import { ServiceOverviewTransactionsTable } from './service_overview_transactions_table'; -import { useShouldUseMobileLayout } from './use_should_use_mobile_layout'; /** * The height a chart should be if it's next to a table with 5 rows and a title. @@ -44,8 +44,8 @@ export function ServiceOverview({ // The default EuiFlexGroup breaks at 768, but we want to break at 992, so we // observe the window width and set the flex directions of rows accordingly - const shouldUseMobileLayout = useShouldUseMobileLayout(); - const rowDirection = shouldUseMobileLayout ? 'column' : 'row'; + const { isMedium } = useBreakPoints(); + const rowDirection = isMedium ? 'column' : 'row'; const { transactionType } = useApmServiceContext(); const transactionTypeLabel = i18n.translate( diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_table_container.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_table_container.tsx index 76db81a70550d..bbd6dd1d498d3 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_table_container.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_table_container.tsx @@ -6,7 +6,7 @@ import React, { ReactNode } from 'react'; import styled from 'styled-components'; -import { useShouldUseMobileLayout } from './use_should_use_mobile_layout'; +import { useBreakPoints } from '../../../hooks/use_break_points'; /** * The height for a table on the overview page. Is the height of a 5-row basic @@ -58,12 +58,12 @@ export function ServiceOverviewTableContainer({ children?: ReactNode; isEmptyAndLoading: boolean; }) { - const shouldUseMobileLayout = useShouldUseMobileLayout(); + const { isMedium } = useBreakPoints(); return ( {children} diff --git a/x-pack/plugins/apm/public/components/app/service_overview/use_should_use_mobile_layout.ts b/x-pack/plugins/apm/public/components/app/service_overview/use_should_use_mobile_layout.ts deleted file mode 100644 index bd844a3f2e694..0000000000000 --- a/x-pack/plugins/apm/public/components/app/service_overview/use_should_use_mobile_layout.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import { isWithinMaxBreakpoint } from '@elastic/eui'; -import { useEffect, useState } from 'react'; - -export function useShouldUseMobileLayout() { - const [shouldUseMobileLayout, setShouldUseMobileLayout] = useState( - isWithinMaxBreakpoint(window.innerWidth, 'm') - ); - - useEffect(() => { - const resizeHandler = () => { - setShouldUseMobileLayout(isWithinMaxBreakpoint(window.innerWidth, 'm')); - }; - window.addEventListener('resize', resizeHandler); - - return () => { - window.removeEventListener('resize', resizeHandler); - }; - }); - - return shouldUseMobileLayout; -} diff --git a/x-pack/plugins/apm/public/components/shared/search_bar.tsx b/x-pack/plugins/apm/public/components/shared/search_bar.tsx index e0d176dd1c541..ca4329971d08f 100644 --- a/x-pack/plugins/apm/public/components/shared/search_bar.tsx +++ b/x-pack/plugins/apm/public/components/shared/search_bar.tsx @@ -11,7 +11,7 @@ import { px } from '../../style/variables'; import { DatePicker } from './DatePicker'; import { KueryBar } from './KueryBar'; import { TimeComparison } from './time_comparison'; -import { useBreakPoints } from '../app/RumDashboard/hooks/useBreakPoints'; +import { useBreakPoints } from '../../hooks/use_break_points'; const SearchBarFlexGroup = styled(EuiFlexGroup)` margin: ${({ theme }) => diff --git a/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx b/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx index 4a43560869a78..ea441f226e531 100644 --- a/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx @@ -13,7 +13,7 @@ import { getDateDifference } from '../../../../common/utils/formatters'; import { useUrlParams } from '../../../context/url_params_context/use_url_params'; import { px, unit } from '../../../style/variables'; import * as urlHelpers from '../../shared/Links/url_helpers'; -import { useBreakPoints } from '../../app/RumDashboard/hooks/useBreakPoints'; +import { useBreakPoints } from '../../../hooks/use_break_points'; const PrependContainer = styled.div` display: flex; diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useBreakPoints.ts b/x-pack/plugins/apm/public/hooks/use_break_points.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useBreakPoints.ts rename to x-pack/plugins/apm/public/hooks/use_break_points.ts