Bug 1745383 - [devtools] Clean up the selected request reducer and adds a new selector to get clicked request r=bomsy

Differential Revision: https://phabricator.services.mozilla.com/D135241

devtools/client/netmonitor/src/components/request-list/RequestListContent.js

@@ -25,6 +25,7 @@ const {
   getDisplayedRequests,
   getColumns,
   getSelectedRequest,
+  getClickedRequest,
 } = require("devtools/client/netmonitor/src/selectors/index");
 
 loader.lazyRequireGetter(
@@ -453,7 +454,7 @@ module.exports = connect(
     networkDetailsOpen: state.ui.networkDetailsOpen,
     networkDetailsWidth: state.ui.networkDetailsWidth,
     networkDetailsHeight: state.ui.networkDetailsHeight,
-    clickedRequest: state.requests.clickedRequest,
+    clickedRequest: getClickedRequest(state),
     displayedRequests: getDisplayedRequests(state),
     firstRequestStartedMs: state.requests.firstStartedMs,
     selectedActionBarTabId: state.ui.selectedActionBarTabId,

devtools/client/netmonitor/src/reducers/requests.js

@@ -33,6 +33,8 @@ function Requests() {
     requests: [],
     // Selected request ID
     selectedId: null,
+    // Right click request represents the last request that was clicked
+    clickedRequestId: null,
     // @backward-compact { version 85 } The preselectedId can either be
     // the actor id on old servers, or the resourceId on new ones.
     preselectedId: null,
@@ -76,14 +78,9 @@ function requestsReducer(state = Requests(), action) {
 
     // Select specific request.
     case SELECT_REQUEST: {
-      // Selected request represents the last request that was clicked
-      // before the context menu is shown
-      const clickedRequest = state.requests.find(
-        needle => needle.id === action.id
-      );
       return {
         ...state,
-        clickedRequest,
+        clickedRequestId: action.id,
         selectedId: action.id,
       };
     }
@@ -98,12 +95,9 @@ function requestsReducer(state = Requests(), action) {
     }
 
     case RIGHT_CLICK_REQUEST: {
-      const clickedRequest = state.requests.find(
-        needle => needle.id === action.id
-      );
       return {
         ...state,
-        clickedRequest,
+        clickedRequestId: action.id,
       };
     }
 

devtools/client/netmonitor/src/selectors/requests.js

@@ -175,7 +175,14 @@ function getRecordingState(state) {
   return state.requests.recording;
 }
 
+const getClickedRequest = createSelector(
+  state => state.requests,
+  ({ requests, clickedRequestId }) =>
+    requests.find(request => request.id == clickedRequestId)
+);
+
 module.exports = {
+  getClickedRequest,
   getDisplayedRequestById,
   getDisplayedRequests,
   getDisplayedRequestsSummary,