From 62d158b6894f185145077c61e358f61db4566628 Mon Sep 17 00:00:00 2001 From: Pedro Jaramillo Date: Thu, 23 Jan 2020 17:11:11 -0500 Subject: [PATCH] Add usePageId hook that fires action when user navigates to page --- x-pack/plugins/endpoint/endpoint_app_types.ts | 2 ++ .../applications/endpoint/store/action.ts | 3 ++- .../endpoint/store/alerts/action.ts | 6 +----- .../endpoint/store/alerts/middleware.ts | 2 +- .../endpoint/store/routing/action.ts | 15 ++++++++++++++ .../endpoint/store/routing/index.ts | 7 +++++++ .../applications/endpoint/store/selectors.ts | 1 - .../endpoint/view/alerts/index.tsx | 11 ++++------ .../applications/endpoint/view/use_page_id.ts | 20 +++++++++++++++++++ 9 files changed, 52 insertions(+), 15 deletions(-) create mode 100644 x-pack/plugins/endpoint/public/applications/endpoint/store/routing/action.ts create mode 100644 x-pack/plugins/endpoint/public/applications/endpoint/store/routing/index.ts create mode 100644 x-pack/plugins/endpoint/public/applications/endpoint/view/use_page_id.ts diff --git a/x-pack/plugins/endpoint/endpoint_app_types.ts b/x-pack/plugins/endpoint/endpoint_app_types.ts index 7dabf7cfdab1911..eeae0ea5b15f2cf 100644 --- a/x-pack/plugins/endpoint/endpoint_app_types.ts +++ b/x-pack/plugins/endpoint/endpoint_app_types.ts @@ -32,3 +32,5 @@ export interface AlertData { }; }; } + +export type PageId = 'alertsPage' | 'endpointListPage'; diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/store/action.ts b/x-pack/plugins/endpoint/public/applications/endpoint/store/action.ts index 63555c75bd3d381..593041af75c05ae 100644 --- a/x-pack/plugins/endpoint/public/applications/endpoint/store/action.ts +++ b/x-pack/plugins/endpoint/public/applications/endpoint/store/action.ts @@ -6,5 +6,6 @@ import { EndpointListAction } from './endpoint_list'; import { AlertAction } from './alerts'; +import { RoutingAction } from './routing'; -export type AppAction = EndpointListAction | AlertAction; +export type AppAction = EndpointListAction | AlertAction | RoutingAction; diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/action.ts b/x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/action.ts index 4cc8904fcc347a9..20a123218c751e5 100644 --- a/x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/action.ts +++ b/x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/action.ts @@ -6,14 +6,10 @@ import { AlertData } from '../../../../../endpoint_app_types'; -interface AppRequestedAlertsData { - readonly type: 'appRequestedAlertsData'; -} - interface ServerReturnedAlertsData { readonly type: 'serverReturnedAlertsData'; readonly payload: AlertData[]; } -export type AlertAction = AppRequestedAlertsData | ServerReturnedAlertsData; +export type AlertAction = ServerReturnedAlertsData; diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/middleware.ts b/x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/middleware.ts index 4432bc30681ae3c..9b377ec63e71f65 100644 --- a/x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/middleware.ts +++ b/x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/middleware.ts @@ -15,7 +15,7 @@ export const alertMiddlewareFactory: ( ) => Middleware<{}, GlobalState, Dispatch> = coreStart => { return store => next => async action => { next(action); - if (action.type === 'appRequestedAlertsData') { + if (action.type === 'userNavigatedToPage' && action.payload === 'alertsPage') { const response: AlertData[] = await coreStart.http.get('/api/endpoint/alerts'); store.dispatch({ type: 'serverReturnedAlertsData', payload: response }); } diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/store/routing/action.ts b/x-pack/plugins/endpoint/public/applications/endpoint/store/routing/action.ts new file mode 100644 index 000000000000000..082564af358866e --- /dev/null +++ b/x-pack/plugins/endpoint/public/applications/endpoint/store/routing/action.ts @@ -0,0 +1,15 @@ +/* + * 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 { PageId } from '../../../../../endpoint_app_types'; + +interface UserNavigatedToPage { + readonly type: 'userNavigatedToPage'; + + readonly payload: PageId; +} + +export type RoutingAction = UserNavigatedToPage; diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/store/routing/index.ts b/x-pack/plugins/endpoint/public/applications/endpoint/store/routing/index.ts new file mode 100644 index 000000000000000..68fd04d6a835537 --- /dev/null +++ b/x-pack/plugins/endpoint/public/applications/endpoint/store/routing/index.ts @@ -0,0 +1,7 @@ +/* + * 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. + */ + +export { RoutingAction } from './action'; diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/store/selectors.ts b/x-pack/plugins/endpoint/public/applications/endpoint/store/selectors.ts index cf34784f9146682..70f3e5af3b77955 100644 --- a/x-pack/plugins/endpoint/public/applications/endpoint/store/selectors.ts +++ b/x-pack/plugins/endpoint/public/applications/endpoint/store/selectors.ts @@ -19,7 +19,6 @@ function alertListStateSelector(state: GlobalState) { return state.alertList; } -// TODO abstract this its in two places /** * Calls the `secondSelector` with the result of the `selector`. Use this when re-exporting a * concern-specific selector. `selector` should return the concern-specific state. diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/index.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/index.tsx index 007f886f84b2f71..f33cf718ea9c007 100644 --- a/x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/index.tsx +++ b/x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/index.tsx @@ -4,14 +4,17 @@ * you may not use this file except in compliance with the Elastic License. */ -import { memo, useState, useMemo, useEffect } from 'react'; +import { memo, useState, useMemo } from 'react'; import React from 'react'; import { EuiDataGrid } from '@elastic/eui'; import { useDispatch, useSelector } from 'react-redux'; import { AlertAction } from '../../store/alerts/action'; import * as selectors from '../../store/selectors'; +import { usePageId } from '../use_page_id'; export const AlertIndex = memo(() => { + usePageId('alertsPage'); + const columns: Array<{ id: string }> = [ { id: 'alert_type' }, { id: 'event_type' }, @@ -25,12 +28,6 @@ export const AlertIndex = memo(() => { const [visibleColumns, setVisibleColumns] = useState(() => columns.map(({ id }) => id)); - const dispatch: (action: AlertAction) => unknown = useDispatch(); - - useEffect(() => { - dispatch({ type: 'appRequestedAlertsData' }); - }, [dispatch]); - const json = useSelector(selectors.alertListData); const renderCellValue = useMemo(() => { diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/use_page_id.ts b/x-pack/plugins/endpoint/public/applications/endpoint/view/use_page_id.ts new file mode 100644 index 000000000000000..43c1597bc51610b --- /dev/null +++ b/x-pack/plugins/endpoint/public/applications/endpoint/view/use_page_id.ts @@ -0,0 +1,20 @@ +/* + * 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 { useEffect } from 'react'; +import { useDispatch } from 'react-redux'; +import { PageId } from '../../../../endpoint_app_types'; +import { RoutingAction } from '../store/routing'; + +/** + * Dispatches a 'userNavigatedToPage' action with the given 'pageId' as the action payload + */ +export function usePageId(pageId: PageId) { + const dispatch: (action: RoutingAction) => unknown = useDispatch(); + useEffect(() => { + dispatch({ type: 'userNavigatedToPage', payload: pageId }); + }, [dispatch, pageId]); +}