Move left pane entirely to React

This commit is contained in:
Scott Nonnenberg 2019-01-14 13:49:58 -08:00
parent bf904ddd12
commit b3ac1373fa
142 changed files with 5016 additions and 3428 deletions

View file

@ -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) {