Store state.narrows as an Immutable.Map (continued)

docs/howto/debugging.md

@@ -14,6 +14,7 @@ A variety of tools are available to help us do that.
   * ... [with React DevTools](#react-devtools)
   * ... [with Reactotron](#reactotron)
   * ... [with redux-logger](#redux-logger)
+  * ... [with immutable-devtools](#immutable-devtools)
 * [Debugging the message list](#webview) in its WebView
   * ... on iOS, [with Safari developer tools](#webview-safari)
   * ... on Android, [with the Chrome Developer Tools](#webview-chrome)
@@ -158,6 +159,33 @@ call to `createLogger` in `src/boot/middleware.js`.
   doc](https://github.com/evgenyrodionov/redux-logger#options).
 
 
+<div id="immutable-devtools" />
+
+## immutable-devtools: inspect Immutable.js objects in Chrome
+
+Some of the data in the Redux state is stored in Immutable.js data
+structures. It's normally awkward to inspect these data structures; an
+`Immutable.Map` object, for example, is full of properties like
+`size`, `__altered`, `__hash`, and `__ownerID`, which you have to dig
+around to get at a clear representation of the items contained.
+
+[`immutable-devtools`](https://github.com/andrewdavey/immutable-devtools)
+fixes this problem in Google Chrome v47+ by installing a "custom
+formatter".
+
+(Alternatively, we might have recommended a [Chrome
+extension](https://github.com/mattzeunert/immutable-object-formatter-extension),
+which `immutable-devtools` mentions in its setup doc. But using the
+NPM package provides the formatter for `zulip-mobile` just as
+effectively without making widespread changes in behavior when you
+browse the Web.)
+
+To enable it, open Chrome Dev Tools and press F1 to open the settings.
+In the "Console" section, tick "Enable custom formatters". If it isn't
+working, please consult the project's issue tracker before opening an
+issue in `zulip-mobile`.
+
+
 <div id="webview" />
 
 # Tools: Debugging the message list (in WebView)

flow-typed/npm/immutable-devtools_vx.x.x.js

@@ -0,0 +1,35 @@
+// flow-typed signature: 14523166b9c09a9ed88bca4845a653b1
+// flow-typed version: <<STUB>>/immutable-devtools_v0.1.5/flow_v0.113.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'immutable-devtools'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'immutable-devtools' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'immutable-devtools/dist' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'immutable-devtools/dist/index' {
+  declare module.exports: $Exports<'immutable-devtools/dist'>;
+}
+declare module 'immutable-devtools/dist/index.js' {
+  declare module.exports: $Exports<'immutable-devtools/dist'>;
+}

package.json

@@ -120,6 +120,7 @@
     "flow-bin": "^0.113.0",
     "flow-coverage-report": "^0.6.0",
     "flow-typed": "^2.4.0",
+    "immutable-devtools": "^0.1.5",
     "jest": "^26.4.1",
     "jest-cli": "^26.4.1",
     "jest-environment-jsdom": "^26.3.0",

src/__tests__/lib/exampleData.js

@@ -576,5 +576,5 @@ export const eventNewMessageActionBase /* \: $Diff<EventNewMessageAction, {| mes
   type: EVENT_NEW_MESSAGE,
   id: 1001,
   caughtUp: {},
-  ownEmail: selfAccount.email,
+  ownUser: selfUser,
 };

src/actionTypes.js

@@ -313,7 +313,7 @@ type EventNewMessageAction = {|
   ...$Diff<MessageEvent, { flags: mixed }>,
   type: typeof EVENT_NEW_MESSAGE,
   caughtUp: CaughtUpState,
-  ownEmail: string,
+  ownUser: User,
 |};
 
 type EventSubmessageAction = {|

src/boot/store.js

@@ -19,6 +19,18 @@ import createMigration from '../redux-persist-migrate/index';
 import { provideLoggingContext } from './loggingContext';
 import { tryGetActiveAccount } from '../account/accountsSelectors';
 
+if (process.env.NODE_ENV === 'development') {
+  // Chrome dev tools for Immutable.
+  //
+  // To enable, press F1 from the Chrome dev tools to open the
+  // settings. In the "Console" section, check "Enable custom
+  // formatters".
+  //
+  // eslint-disable-next-line import/no-extraneous-dependencies, global-require
+  const installDevTools = require('immutable-devtools');
+  installDevTools(Immutable);
+}
+
 // AsyncStorage.clear(); // use to reset storage during development
 
 /**
@@ -199,6 +211,12 @@ const migrations: { [string]: (GlobalState) => GlobalState } = {
     })),
   }),
 
+  // Convert `narrows` from object-as-map to `Immutable.Map`.
+  '16': state => ({
+    ...state,
+    narrows: Immutable.Map(state.narrows),
+  }),
+
   // TIP: When adding a migration, consider just using `dropCache`.
 };