Move left pane entirely to React

ts/state/selectors/conversations.ts

@@ -0,0 +1,124 @@
+import { compact } from 'lodash';
+import { createSelector } from 'reselect';
+import { format } from '../../types/PhoneNumber';
+
+import { LocalizerType } from '../../types/Util';
+import { StateType } from '../reducer';
+import {
+  ConversationLookupType,
+  ConversationsStateType,
+  ConversationType,
+} from '../ducks/conversations';
+
+import { getIntl, getRegionCode, getUserNumber } from './user';
+
+export const getConversations = (state: StateType): ConversationsStateType =>
+  state.conversations;
+
+export const getConversationLookup = createSelector(
+  getConversations,
+  (state: ConversationsStateType): ConversationLookupType => {
+    return state.conversationLookup;
+  }
+);
+
+export const getSelectedConversation = createSelector(
+  getConversations,
+  (state: ConversationsStateType): string | undefined => {
+    return state.selectedConversation;
+  }
+);
+
+function getConversationTitle(
+  conversation: ConversationType,
+  options: { i18n: LocalizerType; ourRegionCode: string }
+): string {
+  if (conversation.name) {
+    return conversation.name;
+  }
+
+  if (conversation.type === 'group') {
+    const { i18n } = options;
+
+    return i18n('unknownGroup');
+  }
+
+  return format(conversation.phoneNumber, options);
+}
+
+const collator = new Intl.Collator();
+
+export const _getConversationComparator = (
+  i18n: LocalizerType,
+  ourRegionCode: string
+) => {
+  return (left: ConversationType, right: ConversationType): number => {
+    const leftTimestamp = left.timestamp;
+    const rightTimestamp = right.timestamp;
+    if (leftTimestamp && !rightTimestamp) {
+      return -1;
+    }
+    if (rightTimestamp && !leftTimestamp) {
+      return 1;
+    }
+    if (leftTimestamp && rightTimestamp && leftTimestamp !== rightTimestamp) {
+      return rightTimestamp - leftTimestamp;
+    }
+
+    const leftTitle = getConversationTitle(left, {
+      i18n,
+      ourRegionCode,
+    }).toLowerCase();
+    const rightTitle = getConversationTitle(right, {
+      i18n,
+      ourRegionCode,
+    }).toLowerCase();
+
+    return collator.compare(leftTitle, rightTitle);
+  };
+};
+export const getConversationComparator = createSelector(
+  getIntl,
+  getRegionCode,
+  _getConversationComparator
+);
+
+export const _getLeftPaneList = (
+  lookup: ConversationLookupType,
+  comparator: (left: ConversationType, right: ConversationType) => number,
+  selectedConversation?: string
+): Array<ConversationType> => {
+  const values = Object.values(lookup);
+  const filtered = compact(
+    values.map(conversation => {
+      if (!conversation.activeAt) {
+        return null;
+      }
+
+      if (selectedConversation === conversation.id) {
+        return {
+          ...conversation,
+          isSelected: true,
+        };
+      }
+
+      return conversation;
+    })
+  );
+
+  return filtered.sort(comparator);
+};
+
+export const getLeftPaneList = createSelector(
+  getConversationLookup,
+  getConversationComparator,
+  getSelectedConversation,
+  _getLeftPaneList
+);
+
+export const getMe = createSelector(
+  [getConversationLookup, getUserNumber],
+  (lookup: ConversationLookupType, ourNumber: string): ConversationType => {
+    return lookup[ourNumber];
+  }
+);