Move left pane entirely to React

js/views/inbox_view.js

@@ -1,10 +1,12 @@
-/* global ConversationController: false */
-/* global extension: false */
-/* global getInboxCollection: false */
-/* global i18n: false */
-/* global Whisper: false */
-/* global textsecure: false */
-/* global Signal: false */
+/* global
+  ConversationController,
+  extension,
+  getInboxCollection,
+  i18n,
+  Whisper,
+  textsecure,
+  Signal
+*/
 
 // eslint-disable-next-line func-names
 (function() {
@@ -38,38 +40,6 @@
     },
   });
 
-  Whisper.FontSizeView = Whisper.View.extend({
-    defaultSize: 14,
-    maxSize: 30,
-    minSize: 14,
-    initialize() {
-      this.currentSize = this.defaultSize;
-      this.render();
-    },
-    events: { keydown: 'zoomText' },
-    zoomText(e) {
-      if (!e.ctrlKey) {
-        return;
-      }
-      const keyCode = e.which || e.keyCode;
-      const maxSize = 22; // if bigger text goes outside send-message textarea
-      const minSize = 14;
-      if (keyCode === 189 || keyCode === 109) {
-        if (this.currentSize > minSize) {
-          this.currentSize -= 1;
-        }
-      } else if (keyCode === 187 || keyCode === 107) {
-        if (this.currentSize < maxSize) {
-          this.currentSize += 1;
-        }
-      }
-      this.render();
-    },
-    render() {
-      this.$el.css('font-size', `${this.currentSize}px`);
-    },
-  });
-
   Whisper.AppLoadingScreen = Whisper.View.extend({
     templateName: 'app-loading-screen',
     className: 'app-loading-screen',
@@ -92,20 +62,6 @@
       this.render();
       this.$el.attr('tabindex', '1');
 
-      // eslint-disable-next-line no-new
-      new Whisper.FontSizeView({ el: this.$el });
-
-      const ourNumber = textsecure.storage.user.getNumber();
-      const me = ConversationController.getOrCreate(ourNumber, 'private');
-      this.mainHeaderView = new Whisper.ReactWrapperView({
-        className: 'main-header-wrapper',
-        Component: Signal.Components.MainHeader,
-        props: me.format(),
-      });
-      const update = () => this.mainHeaderView.update(me.format());
-      this.listenTo(me, 'change', update);
-      this.$('.main-header-placeholder').append(this.mainHeaderView.el);
-
       this.conversation_stack = new Whisper.ConversationStack({
         el: this.$('.conversation-stack'),
         model: { window: options.window },
@@ -125,40 +81,6 @@
           this.networkStatusView.render();
         }
       });
-      this.listenTo(inboxCollection, 'select', this.openConversation);
-
-      this.inboxListView = new Whisper.ConversationListView({
-        el: this.$('.inbox'),
-        collection: inboxCollection,
-      }).render();
-
-      this.inboxListView.listenTo(
-        inboxCollection,
-        'add change:timestamp change:name change:number',
-        this.inboxListView.updateLocation
-      );
-      this.inboxListView.listenTo(
-        inboxCollection,
-        'remove',
-        this.inboxListView.removeItem
-      );
-
-      this.searchView = new Whisper.ConversationSearchView({
-        el: this.$('.search-results'),
-        input: this.$('input.search'),
-      });
-
-      this.searchView.$el.hide();
-
-      this.listenTo(this.searchView, 'hide', function toggleVisibility() {
-        this.searchView.$el.hide();
-        this.inboxListView.$el.show();
-      });
-      this.listenTo(this.searchView, 'show', function toggleVisibility() {
-        this.searchView.$el.show();
-        this.inboxListView.$el.hide();
-      });
-      this.listenTo(this.searchView, 'open', this.openConversation);
 
       this.networkStatusView = new Whisper.NetworkStatusView();
       this.$el
@@ -170,18 +92,78 @@
         banner.$el.prependTo(this.$el);
         this.$el.addClass('expired');
       }
+
+      this.setupLeftPane();
     },
     render_attributes: {
       welcomeToSignal: i18n('welcomeToSignal'),
       selectAContact: i18n('selectAContact'),
-      searchForPeopleOrGroups: i18n('searchForPeopleOrGroups'),
-      settings: i18n('settings'),
     },
     events: {
       click: 'onClick',
-      'click #header': 'focusHeader',
-      'click .conversation': 'focusConversation',
-      'input input.search': 'filterContacts',
+    },
+    setupLeftPane() {
+      // Here we set up a full redux store with initial state for our LeftPane Root
+      const inboxCollection = getInboxCollection();
+      const conversations = inboxCollection.map(
+        conversation => conversation.cachedProps
+      );
+      const initialState = {
+        conversations: {
+          conversationLookup: Signal.Util.makeLookup(conversations, 'id'),
+        },
+        user: {
+          regionCode: window.storage.get('regionCode'),
+          ourNumber: textsecure.storage.user.getNumber(),
+          i18n: window.i18n,
+        },
+      };
+
+      this.store = Signal.State.createStore(initialState);
+      window.inboxStore = this.store;
+      this.leftPaneView = new Whisper.ReactWrapperView({
+        JSX: Signal.State.Roots.createLeftPane(this.store),
+        className: 'left-pane-wrapper',
+      });
+
+      // Enables our redux store to be updated by backbone events in the outside world
+      const {
+        conversationAdded,
+        conversationChanged,
+        conversationRemoved,
+        removeAllConversations,
+        messageExpired,
+        openConversationExternal,
+      } = Signal.State.bindActionCreators(
+        Signal.State.Ducks.conversations.actions,
+        this.store.dispatch
+      );
+      const { userChanged } = Signal.State.bindActionCreators(
+        Signal.State.Ducks.user.actions,
+        this.store.dispatch
+      );
+
+      this.openConversationAction = openConversationExternal;
+
+      this.listenTo(inboxCollection, 'remove', conversation => {
+        const { id } = conversation || {};
+        conversationRemoved(id);
+      });
+      this.listenTo(inboxCollection, 'add', conversation => {
+        const { id, cachedProps } = conversation || {};
+        conversationAdded(id, cachedProps);
+      });
+      this.listenTo(inboxCollection, 'change', conversation => {
+        const { id, cachedProps } = conversation || {};
+        conversationChanged(id, cachedProps);
+      });
+      this.listenTo(inboxCollection, 'reset', removeAllConversations);
+
+      Whisper.events.on('messageExpired', messageExpired);
+      Whisper.events.on('userChanged', userChanged);
+
+      // Finally, add it to the DOM
+      this.$('.left-pane-placeholder').append(this.leftPaneView.el);
     },
     startConnectionListener() {
       this.interval = setInterval(() => {
@@ -237,30 +219,18 @@
     reloadBackgroundPage() {
       window.location.reload();
     },
-    filterContacts(e) {
-      this.searchView.filterContacts(e);
-      const input = this.$('input.search');
-      if (input.val().length > 0) {
-        input.addClass('active');
-        const textDir = window.getComputedStyle(input[0]).direction;
-        if (textDir === 'ltr') {
-          input.removeClass('rtl').addClass('ltr');
-        } else if (textDir === 'rtl') {
-          input.removeClass('ltr').addClass('rtl');
-        }
-      } else {
-        input.removeClass('active');
-      }
-    },
-    openConversation(conversation) {
-      this.searchView.hideHints();
-      if (conversation) {
-        ConversationController.markAsSelected(conversation);
-        this.conversation_stack.open(
-          ConversationController.get(conversation.id)
-        );
-        this.focusConversation();
+    async openConversation(id, messageId) {
+      const conversation = await window.ConversationController.getOrCreateAndWait(
+        id,
+        'private'
+      );
+
+      if (this.openConversationAction) {
+        this.openConversationAction(id, messageId);
       }
+
+      this.conversation_stack.open(conversation);
+      this.focusConversation();
     },
     closeRecording(e) {
       if (e && this.$(e.target).closest('.capture-audio').length > 0) {