Add usePageId hook that fires action when user navigates to page

x-pack/plugins/endpoint/endpoint_app_types.ts

@@ -32,3 +32,5 @@ export interface AlertData {
     };
   };
 }
+
+export type PageId = 'alertsPage' | 'endpointListPage';

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;

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;

x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/middleware.ts

@@ -15,7 +15,7 @@ export const alertMiddlewareFactory: (
 ) => Middleware<{}, GlobalState, Dispatch<AppAction>> = 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 });
     }

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;

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';

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.

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(() => {

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]);
+}