[Breakpoints] remove immutable.js from xhrBreakpoint reducer (firefox-devtools#7487)

Author: kenjiO

src/actions/breakpoints/index.js

@@ -377,7 +377,7 @@ export function toggleDisabledBreakpoint(line: number, column?: number) {
 export function enableXHRBreakpoint(index: number, bp: XHRBreakpoint) {
   return ({ dispatch, getState, client }: ThunkArgs) => {
     const xhrBreakpoints = getXHRBreakpoints(getState());
-    const breakpoint = bp || xhrBreakpoints.get(index);
+    const breakpoint = bp || xhrBreakpoints[index];
     const enabledBreakpoint = {
       ...breakpoint,
       disabled: false
@@ -395,7 +395,7 @@ export function enableXHRBreakpoint(index: number, bp: XHRBreakpoint) {
 export function disableXHRBreakpoint(index: number, bp: XHRBreakpoint) {
   return ({ dispatch, getState, client }: ThunkArgs) => {
     const xhrBreakpoints = getXHRBreakpoints(getState());
-    const breakpoint = bp || xhrBreakpoints.get(index);
+    const breakpoint = bp || xhrBreakpoints[index];
     const disabledBreakpoint = {
       ...breakpoint,
       disabled: true
@@ -417,7 +417,7 @@ export function updateXHRBreakpoint(
 ) {
   return ({ dispatch, getState, client }: ThunkArgs) => {
     const xhrBreakpoints = getXHRBreakpoints(getState());
-    const breakpoint = xhrBreakpoints.get(index);
+    const breakpoint = xhrBreakpoints[index];
 
     const updatedBreakpoint = {
       ...breakpoint,
@@ -445,7 +445,7 @@ export function togglePauseOnAny() {
       return dispatch(setXHRBreakpoint("", "ANY"));
     }
 
-    const bp = xhrBreakpoints.get(index);
+    const bp = xhrBreakpoints[index];
     if (bp.disabled) {
       return dispatch(enableXHRBreakpoint(index, bp));
     }
@@ -469,7 +469,7 @@ export function setXHRBreakpoint(path: string, method: string) {
 export function removeXHRBreakpoint(index: number) {
   return ({ dispatch, getState, client }: ThunkArgs) => {
     const xhrBreakpoints = getXHRBreakpoints(getState());
-    const breakpoint = xhrBreakpoints.get(index);
+    const breakpoint = xhrBreakpoints[index];
     return dispatch({
       type: "REMOVE_XHR_BREAKPOINT",
       breakpoint,

src/components/SecondaryPanes/XHRBreakpoints.js

@@ -89,7 +89,7 @@ class XHRBreakpoints extends Component<Props, State> {
 
     const { editIndex, inputValue, inputMethod } = this.state;
     const { xhrBreakpoints } = this.props;
-    const { path, method } = xhrBreakpoints.get(editIndex);
+    const { path, method } = xhrBreakpoints[editIndex];
 
     if (path !== inputValue || method != inputMethod) {
       this.props.updateXHRBreakpoint(editIndex, inputValue, inputMethod);
@@ -120,7 +120,7 @@ class XHRBreakpoints extends Component<Props, State> {
 
   editExpression = index => {
     const { xhrBreakpoints } = this.props;
-    const { path, method } = xhrBreakpoints.get(index);
+    const { path, method } = xhrBreakpoints[index];
     this.setState({
       inputValue: path,
       inputMethod: method,
@@ -162,7 +162,7 @@ class XHRBreakpoints extends Component<Props, State> {
       enableXHRBreakpoint,
       disableXHRBreakpoint
     } = this.props;
-    const breakpoint = xhrBreakpoints.get(index);
+    const breakpoint = xhrBreakpoints[index];
     if (breakpoint.disabled) {
       enableXHRBreakpoint(index);
     } else {
@@ -218,7 +218,7 @@ class XHRBreakpoints extends Component<Props, State> {
     return (
       <ul className="pane expressions-list">
         {explicitXhrBreakpoints.map(this.renderBreakpoint)}
-        {(showInput || explicitXhrBreakpoints.size === 0) &&
+        {(showInput || explicitXhrBreakpoints.length === 0) &&
           this.renderXHRInput(this.handleNewSubmit)}
       </ul>
     );
@@ -231,7 +231,7 @@ class XHRBreakpoints extends Component<Props, State> {
     return (
       <div
         className={classnames("breakpoints-exceptions-options", {
-          empty: explicitXhrBreakpoints.size === 0
+          empty: explicitXhrBreakpoints.length === 0
         })}
       >
         <ExceptionOption

src/reducers/breakpoints.js

@@ -9,8 +9,6 @@
  * @module reducers/breakpoints
  */
 
-import * as I from "immutable";
-
 import { isGeneratedId } from "devtools-source-map";
 import { isEqual } from "lodash";
 
@@ -20,19 +18,19 @@ import type { XHRBreakpoint, Breakpoint, SourceLocation } from "../types";
 import type { Action, DonePromiseAction } from "../actions/types";
 
 export type BreakpointsMap = { [string]: Breakpoint };
-export type XHRBreakpointsList = I.List<XHRBreakpoint>;
+export type XHRBreakpointsList = $ReadOnlyArray<XHRBreakpoint>;
 
 export type BreakpointsState = {
   breakpoints: BreakpointsMap,
   xhrBreakpoints: XHRBreakpointsList
 };
 
 export function initialBreakpointsState(
-  xhrBreakpoints?: any[] = []
+  xhrBreakpoints?: XHRBreakpointsList = []
 ): BreakpointsState {
   return {
     breakpoints: {},
-    xhrBreakpoints: I.List(xhrBreakpoints),
+    xhrBreakpoints: xhrBreakpoints,
     breakpointsDisabled: false
   };
 }
@@ -118,44 +116,42 @@ function addXHRBreakpoint(state, action) {
   if (existingBreakpointIndex === -1) {
     return {
       ...state,
-      xhrBreakpoints: xhrBreakpoints.push(breakpoint)
+      xhrBreakpoints: [...xhrBreakpoints, breakpoint]
     };
-  } else if (xhrBreakpoints.get(existingBreakpointIndex) !== breakpoint) {
+  } else if (xhrBreakpoints[existingBreakpointIndex] !== breakpoint) {
+    const newXhrBreakpoints = [...xhrBreakpoints];
+    newXhrBreakpoints[existingBreakpointIndex] = breakpoint;
     return {
       ...state,
-      xhrBreakpoints: xhrBreakpoints.set(existingBreakpointIndex, breakpoint)
+      xhrBreakpoints: newXhrBreakpoints
     };
   }
 
   return state;
 }
 
 function removeXHRBreakpoint(state, action) {
-  const {
-    breakpoint: { path, method }
-  } = action;
+  const { breakpoint } = action;
   const { xhrBreakpoints } = state;
 
   if (action.status === "start") {
     return state;
   }
 
-  const index = xhrBreakpoints.findIndex(
-    bp => bp.path === path && bp.method === method
-  );
-
   return {
     ...state,
-    xhrBreakpoints: xhrBreakpoints.delete(index)
+    xhrBreakpoints: xhrBreakpoints.filter(bp => !isEqual(bp, breakpoint))
   };
 }
 
 function updateXHRBreakpoint(state, action) {
   const { breakpoint, index } = action;
   const { xhrBreakpoints } = state;
+  const newXhrBreakpoints = [...xhrBreakpoints];
+  newXhrBreakpoints[index] = breakpoint;
   return {
     ...state,
-    xhrBreakpoints: xhrBreakpoints.set(index, breakpoint)
+    xhrBreakpoints: newXhrBreakpoints
   };
 }
 

src/selectors/breakpoints.js

@@ -6,11 +6,14 @@
 
 import { createSelector } from "reselect";
 
-import type { BreakpointsState } from "../reducers/breakpoints";
+import type {
+  BreakpointsState,
+  XHRBreakpointsList
+} from "../reducers/breakpoints";
 
 type OuterState = { breakpoints: BreakpointsState };
 
-export function getXHRBreakpoints(state: OuterState) {
+export function getXHRBreakpoints(state: OuterState): XHRBreakpointsList {
   return state.breakpoints.xhrBreakpoints;
 }
 

src/utils/bootstrap.js

@@ -116,6 +116,6 @@ function updatePrefs(state: any) {
   }
 
   if (currentXHRBreakpoints !== previousXHRBreakpoints) {
-    asyncStore.xhrBreakpoints = currentXHRBreakpoints.toJS();
+    asyncStore.xhrBreakpoints = currentXHRBreakpoints;
   }
 }