narrow: Encapsulate the Narrow type within its module, checked with an opaque type

src/api/messages/getMessages.js

@@ -1,7 +1,7 @@
 /* @flow strict-local */
 import type { Auth, ApiResponseSuccess } from '../transportTypes';
 import type { Identity } from '../../types';
-import type { Message, Narrow } from '../apiTypes';
+import type { Message, ApiNarrow } from '../apiTypes';
 import type { Reaction } from '../modelTypes';
 import { apiGet } from '../apiFetch';
 import { identityOfAuth } from '../../account/accountMisc';
@@ -86,7 +86,7 @@ const migrateResponse = (response, identity: Identity) => {
 export default async (
   auth: Auth,
   args: {|
-    narrow: Narrow,
+    narrow: ApiNarrow,
     anchor: number,
     numBefore: number,
     numAfter: number,

src/api/modelTypes.js

@@ -312,7 +312,13 @@ export type NarrowElement = $ReadOnly<{|
   operator: NarrowOperator,
 |}>;
 
-export type Narrow = $ReadOnlyArray<NarrowElement>;
+/**
+ * A narrow, in the form used in the Zulip API at get-messages.
+ *
+ * See also `Narrow` in the non-API app code, which describes how we
+ * represent narrows within the app.
+ */
+export type ApiNarrow = $ReadOnlyArray<NarrowElement>;
 
 //
 //

src/api/registerForEvents.js

@@ -1,7 +1,7 @@
 /* @flow strict-local */
 import type { RawInitialData, InitialData } from './initialDataTypes';
 import type { Auth } from './transportTypes';
-import type { Narrow } from './apiTypes';
+import type { ApiNarrow } from './apiTypes';
 import type { CrossRealmBot, User } from './modelTypes';
 import { apiPost } from './apiFetch';
 import { AvatarURL } from '../utils/avatar';
@@ -13,7 +13,7 @@ type RegisterForEventsParams = {|
   event_types?: string[],
   fetch_event_types?: string[],
   include_subscribers?: boolean,
-  narrow?: Narrow,
+  narrow?: ApiNarrow,
   queue_lifespan_secs?: number,
   client_capabilities?: {|
     notification_settings_null: boolean,

src/caughtup/__tests__/caughtUpReducer-test.js

@@ -10,6 +10,7 @@ import {
   HOME_NARROW_STR,
   ALL_PRIVATE_NARROW,
   ALL_PRIVATE_NARROW_STR,
+  SEARCH_NARROW,
 } from '../../utils/narrow';
 
 describe('caughtUpReducer', () => {
@@ -42,7 +43,7 @@ describe('caughtUpReducer', () => {
 
       const action = deepFreeze({
         ...eg.action.message_fetch_start,
-        narrow: [{ operator: 'search', operand: 'some query' }],
+        narrow: SEARCH_NARROW('some query'),
       });
 
       const newState = caughtUpReducer(initialState, action);
@@ -126,7 +127,7 @@ describe('caughtUpReducer', () => {
 
       const action = deepFreeze({
         ...eg.action.message_fetch_complete,
-        narrow: [{ operator: 'search', operand: 'some query' }],
+        narrow: SEARCH_NARROW('some query'),
       });
 
       const newState = caughtUpReducer(initialState, action);

src/chat/MarkUnreadButton.js

@@ -8,7 +8,13 @@ import { connect } from '../react-redux';
 import { ZulipButton } from '../common';
 import * as api from '../api';
 import { getAuth, getStreams } from '../selectors';
-import { isHomeNarrow, isStreamNarrow, isTopicNarrow } from '../utils/narrow';
+import {
+  isHomeNarrow,
+  isStreamNarrow,
+  isTopicNarrow,
+  streamNameOfNarrow,
+  topicOfNarrow,
+} from '../utils/narrow';
 
 const styles = createStyleSheet({
   button: {
@@ -34,17 +40,19 @@ class MarkUnreadButton extends PureComponent<Props> {
 
   markStreamAsRead = () => {
     const { auth, narrow, streams } = this.props;
-    const stream = streams.find(s => s.name === narrow[0].operand);
+    const streamName = streamNameOfNarrow(narrow);
+    const stream = streams.find(s => s.name === streamName);
     if (stream) {
       api.markStreamAsRead(auth, stream.stream_id);
     }
   };
 
   markTopicAsRead = () => {
     const { auth, narrow, streams } = this.props;
-    const stream = streams.find(s => s.name === narrow[0].operand);
+    const streamName = streamNameOfNarrow(narrow);
+    const stream = streams.find(s => s.name === streamName);
     if (stream) {
-      api.markTopicAsRead(auth, stream.stream_id, narrow[1].operand);
+      api.markTopicAsRead(auth, stream.stream_id, topicOfNarrow(narrow));
     }
   };
 

src/chat/__tests__/fetchingReducer-test.js

@@ -3,7 +3,13 @@ import deepFreeze from 'deep-freeze';
 
 import * as eg from '../../__tests__/lib/exampleData';
 import fetchingReducer from '../fetchingReducer';
-import { HOME_NARROW, HOME_NARROW_STR, streamNarrow, keyFromNarrow } from '../../utils/narrow';
+import {
+  HOME_NARROW,
+  HOME_NARROW_STR,
+  streamNarrow,
+  keyFromNarrow,
+  SEARCH_NARROW,
+} from '../../utils/narrow';
 import { MESSAGE_FETCH_START, MESSAGE_FETCH_ERROR } from '../../actionConstants';
 import { DEFAULT_FETCHING } from '../fetchingSelectors';
 
@@ -16,7 +22,7 @@ describe('fetchingReducer', () => {
 
       const action = deepFreeze({
         type: MESSAGE_FETCH_START,
-        narrow: [],
+        narrow: HOME_NARROW,
         numBefore: 10,
         numAfter: 10,
       });
@@ -62,7 +68,7 @@ describe('fetchingReducer', () => {
 
       const action = deepFreeze({
         ...eg.action.message_fetch_start,
-        narrow: [{ operator: 'search', operand: 'some query' }],
+        narrow: SEARCH_NARROW('some query'),
       });
 
       const newState = fetchingReducer(initialState, action);
@@ -108,7 +114,7 @@ describe('fetchingReducer', () => {
 
       const action = {
         ...eg.action.message_fetch_complete,
-        narrow: [],
+        narrow: HOME_NARROW,
         numBefore: 10,
         numAfter: 0,
       };
@@ -130,7 +136,7 @@ describe('fetchingReducer', () => {
 
     const action = deepFreeze({
       ...eg.action.message_fetch_complete,
-      narrow: [{ operator: 'search', operand: 'some query' }],
+      narrow: SEARCH_NARROW('some query'),
     });
 
     const newState = fetchingReducer(initialState, action);

src/chat/__tests__/narrowsReducer-test.js

@@ -13,6 +13,7 @@ import {
   topicNarrow,
   STARRED_NARROW_STR,
   keyFromNarrow,
+  SEARCH_NARROW,
 } from '../../utils/narrow';
 import {
   MESSAGE_FETCH_ERROR,
@@ -324,7 +325,7 @@ describe('narrowsReducer', () => {
 
       const action = deepFreeze({
         ...eg.action.message_fetch_start,
-        narrow: [{ operator: 'search', operand: 'some query' }],
+        narrow: SEARCH_NARROW('some query'),
       });
 
       const newState = narrowsReducer(initialState, action);
@@ -396,7 +397,7 @@ describe('narrowsReducer', () => {
       const action = deepFreeze({
         type: MESSAGE_FETCH_COMPLETE,
         anchor: 2,
-        narrow: [],
+        narrow: HOME_NARROW,
         messages: [
           eg.streamMessage({ id: 2 }),
           eg.streamMessage({ id: 3 }),
@@ -424,7 +425,7 @@ describe('narrowsReducer', () => {
       const action = deepFreeze({
         type: MESSAGE_FETCH_COMPLETE,
         anchor: 2,
-        narrow: [],
+        narrow: HOME_NARROW,
         messages: [
           eg.streamMessage({ id: 3, timestamp: 2 }),
           eg.streamMessage({ id: 4, timestamp: 1 }),
@@ -451,7 +452,7 @@ describe('narrowsReducer', () => {
       const action = deepFreeze({
         anchor: FIRST_UNREAD_ANCHOR,
         type: MESSAGE_FETCH_COMPLETE,
-        narrow: [],
+        narrow: HOME_NARROW,
         messages: [
           eg.streamMessage({ id: 3, timestamp: 2 }),
           eg.streamMessage({ id: 4, timestamp: 1 }),
@@ -477,7 +478,7 @@ describe('narrowsReducer', () => {
       const action = deepFreeze({
         anchor: LAST_MESSAGE_ANCHOR,
         type: MESSAGE_FETCH_COMPLETE,
-        narrow: [],
+        narrow: HOME_NARROW,
         messages: [
           eg.streamMessage({ id: 3, timestamp: 2 }),
           eg.streamMessage({ id: 4, timestamp: 1 }),
@@ -502,7 +503,7 @@ describe('narrowsReducer', () => {
 
       const action = deepFreeze({
         ...eg.action.message_fetch_complete,
-        narrow: [{ operator: 'search', operand: 'some query' }],
+        narrow: SEARCH_NARROW('some query'),
       });
 
       const newState = narrowsReducer(initialState, action);

src/chat/narrowsSelectors.js

@@ -29,6 +29,7 @@ import {
   isMessageInNarrow,
   caseNarrowDefault,
   keyFromNarrow,
+  streamNameOfNarrow,
 } from '../utils/narrow';
 import { shouldBeMuted } from '../utils/message';
 import { NULL_ARRAY, NULL_SUBSCRIPTION } from '../nullObjects';
@@ -125,13 +126,14 @@ export const getStreamInNarrow: Selector<Subscription | {| ...Stream, in_home_vi
     if (!isStreamOrTopicNarrow(narrow)) {
       return NULL_SUBSCRIPTION;
     }
+    const streamName = streamNameOfNarrow(narrow);
 
-    const subscription = subscriptions.find(x => x.name === narrow[0].operand);
+    const subscription = subscriptions.find(x => x.name === streamName);
     if (subscription) {
       return subscription;
     }
 
-    const stream = streams.find(x => x.name === narrow[0].operand);
+    const stream = streams.find(x => x.name === streamName);
     if (stream) {
       return {
         ...stream,

src/compose/ComposeBox.js

@@ -33,7 +33,12 @@ import * as api from '../api';
 import { FloatingActionButton, Input } from '../common';
 import { showErrorAlert } from '../utils/info';
 import { IconDone, IconSend } from '../common/Icons';
-import { isStreamNarrow, isStreamOrTopicNarrow, topicNarrow } from '../utils/narrow';
+import {
+  isStreamNarrow,
+  isStreamOrTopicNarrow,
+  streamNameOfNarrow,
+  topicNarrow,
+} from '../utils/narrow';
 import ComposeMenu from './ComposeMenu';
 import getComposeInputPlaceholder from './getComposeInputPlaceholder';
 import NotSubscribed from '../message/NotSubscribed';
@@ -307,8 +312,12 @@ class ComposeBox extends PureComponent<Props, State> {
 
   getDestinationNarrow = (): Narrow => {
     const { narrow } = this.props;
-    const topic = this.state.topic.trim();
-    return isStreamNarrow(narrow) ? topicNarrow(narrow[0].operand, topic || '(no topic)') : narrow;
+    if (isStreamNarrow(narrow)) {
+      const streamName = streamNameOfNarrow(narrow);
+      const topic = this.state.topic.trim();
+      return topicNarrow(streamName, topic || '(no topic)');
+    }
+    return narrow;
   };
 
   handleSend = () => {

src/compose/getComposeInputPlaceholder.js

@@ -1,42 +1,40 @@
 /* @flow strict-local */
 import type { Narrow, UserOrBot, LocalizableText } from '../types';
-import { isStreamNarrow, isTopicNarrow, isGroupPmNarrow, is1to1PmNarrow } from '../utils/narrow';
+import { caseNarrowDefault } from '../utils/narrow';
 
 export default (
   narrow: Narrow,
   ownEmail: string,
   usersByEmail: Map<string, UserOrBot>,
-): LocalizableText => {
-  if (isGroupPmNarrow(narrow)) {
-    return { text: 'Message group' };
-  }
+): LocalizableText =>
+  caseNarrowDefault(
+    narrow,
+    {
+      pm: emails => {
+        if (emails.length > 1) {
+          return { text: 'Message group' };
+        }
+        const email = emails[0];
 
-  if (is1to1PmNarrow(narrow)) {
-    if (ownEmail && narrow[0].operand === ownEmail) {
-      return { text: 'Jot down something' };
-    }
+        if (email === ownEmail) {
+          return { text: 'Jot down something' };
+        }
 
-    if (!usersByEmail) {
-      return { text: 'Type a message' };
-    }
+        const user = usersByEmail.get(email);
+        if (!user) {
+          return { text: 'Type a message' };
+        }
 
-    const user = usersByEmail.get(narrow[0].operand) || {};
-    return {
-      text: 'Message {recipient}',
-      values: { recipient: `@${user.full_name}` },
-    };
-  }
-
-  if (isStreamNarrow(narrow)) {
-    return {
-      text: 'Message {recipient}',
-      values: { recipient: `#${narrow[0].operand}` },
-    };
-  }
-
-  if (isTopicNarrow(narrow)) {
-    return { text: 'Reply' };
-  }
-
-  return { text: 'Type a message' };
-};
+        return {
+          text: 'Message {recipient}',
+          values: { recipient: `@${user.full_name}` },
+        };
+      },
+      stream: name => ({
+        text: 'Message {recipient}',
+        values: { recipient: `#${name}` },
+      }),
+      topic: () => ({ text: 'Reply' }),
+    },
+    () => ({ text: 'Type a message' }),
+  );

src/message/__tests__/messageActionSheet-test.js

@@ -1,5 +1,6 @@
 // @flow strict-local
 import deepFreeze from 'deep-freeze';
+import { HOME_NARROW } from '../../utils/narrow';
 
 import * as eg from '../../__tests__/lib/exampleData';
 import { constructMessageActionButtons, constructHeaderActionButtons } from '../messageActionSheet';
@@ -18,7 +19,7 @@ const baseBackgroundData = deepFreeze({
 });
 
 describe('constructActionButtons', () => {
-  const narrow = deepFreeze([]);
+  const narrow = deepFreeze(HOME_NARROW);
 
   test('show star message option if message is not starred', () => {
     const message = eg.streamMessage();
@@ -53,7 +54,7 @@ describe('constructActionButtons', () => {
 });
 
 describe('constructHeaderActionButtons', () => {
-  const narrow = deepFreeze([]);
+  const narrow = deepFreeze(HOME_NARROW);
 
   test('show Unmute topic option if topic is muted', () => {
     const mute = deepFreeze([['electron issues', 'issue #556']]);

src/message/__tests__/renderMessages-test.js

@@ -4,7 +4,7 @@ import { HOME_NARROW } from '../../utils/narrow';
 import renderMessages from '../renderMessages';
 
 describe('renderMessages', () => {
-  const narrow = deepFreeze([]);
+  const narrow = deepFreeze(HOME_NARROW);
 
   test('empty messages results in a single empty section', () => {
     const messageList = renderMessages([], HOME_NARROW);