Switch state object from list to KVP.

elastic · Oct 1, 2020 · 5f6f325 · 5f6f325
1 parent f4473da
commit 5f6f325
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 53 deletions.
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/browser_expanded_row.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/browser_expanded_row.tsx
@@ -28,7 +28,7 @@ export const BrowserExpandedRow: React.FC<BrowserExpandedRowProps> = ({ checkGro
   }, [dispatch, checkGroup]);
 
   const journeys = useSelector(journeySelector);
-  const journey = journeys.find((j) => j.checkGroup === checkGroup);
+  const journey = journeys[checkGroup];
 
   return <BrowserExpandedRowComponent checkGroup={checkGroup} journey={journey} />;
 };

diff --git a/x-pack/plugins/uptime/public/state/reducers/journey.ts b/x-pack/plugins/uptime/public/state/reducers/journey.ts
@@ -21,66 +21,65 @@ export interface JourneyState {
   error?: Error;
 }
 
-const initialState: JourneyState[] = [];
-
-type Payload = FetchJourneyStepsParams & SyntheticsJourneyApiResponse & GetJourneyFailPayload;
-
-function loadJourney(state: JourneyState[], checkGroup: string) {
-  const journeyToLoad: JourneyState | undefined = state.find((j) => j.checkGroup === checkGroup);
-  if (journeyToLoad) {
-    return {
-      ...journeyToLoad,
-      loading: true,
-    };
-  }
-  return {
-    checkGroup,
-    steps: [],
-    loading: true,
-  };
+interface JourneyKVP {
+  [checkGroup: string]: JourneyState;
 }
 
-function updateJourneyError(state: JourneyState[], action: Action<GetJourneyFailPayload>) {
-  const journeyToUpdate: JourneyState | undefined = state.find(
-    (j) => j.checkGroup === action.payload.checkGroup
-  );
-  if (journeyToUpdate) {
-    return {
-      ...journeyToUpdate,
-      loading: false,
-      error: action.payload.error,
-    };
-  }
-  return {
-    checkGroup: action.payload.checkGroup,
-    loading: false,
-    steps: [],
-    error: action.payload.error,
-  };
-}
+const initialState: JourneyKVP = {};
+
+type Payload = FetchJourneyStepsParams & SyntheticsJourneyApiResponse & GetJourneyFailPayload;
 
-export const journeyReducer = handleActions<JourneyState[], Payload>(
+export const journeyReducer = handleActions<JourneyKVP, Payload>(
   {
-    [String(getJourneySteps)]: (state: JourneyState[], action: Action<FetchJourneyStepsParams>) => [
-      ...state.filter(({ checkGroup }) => checkGroup !== action.payload.checkGroup),
-      loadJourney(state, action.payload.checkGroup),
-    ],
+    [String(getJourneySteps)]: (
+      state: JourneyKVP,
+      { payload: { checkGroup } }: Action<FetchJourneyStepsParams>
+    ) => ({
+      ...state,
+      // add an empty entry while fetching the check group,
+      // or update the previously-loaded entry to a new loading state
+      [checkGroup]: state[checkGroup]
+        ? {
+            ...state[checkGroup],
+            loading: true,
+          }
+        : {
+            checkGroup,
+            steps: [],
+            loading: true,
+          },
+    }),
 
     [String(getJourneyStepsSuccess)]: (
-      state: JourneyState[],
-      action: Action<SyntheticsJourneyApiResponse>
-    ) => [
-      ...state.filter((j) => j.checkGroup !== action.payload.checkGroup),
-      { checkGroup: action.payload.checkGroup, steps: action.payload.steps, loading: false },
-    ],
+      state: JourneyKVP,
+      { payload: { checkGroup, steps } }: Action<SyntheticsJourneyApiResponse>
+    ) => ({
+      ...state,
+      [checkGroup]: {
+        loading: false,
+        checkGroup,
+        steps,
+      },
+    }),
 
     [String(getJourneyStepsFail)]: (
-      state: JourneyState[],
-      action: Action<GetJourneyFailPayload>
-    ) => [
-      ...state.filter((j) => j.checkGroup !== action.payload.checkGroup),
-      updateJourneyError(state, action),
-    ],
+      state: JourneyKVP,
+      { payload: { checkGroup, error } }: Action<GetJourneyFailPayload>
+    ) => ({
+      ...state,
+      [checkGroup]: state[checkGroup]
+        ? {
+            ...state[checkGroup],
+            loading: false,
+            error,
+          }
+        : {
+            checkGroup,
+            loading: false,
+            steps: [],
+            error,
+          },
+    }),
   },
   initialState
 );