From 918eeae27543b8de269628a2362ddd03f0798275 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 13 Nov 2020 14:29:59 +1100 Subject: [PATCH] move InboxView to react --- background.html | 19 +- background_test.html | 18 +- js/models/messages.js | 2 +- js/modules/signal.js | 20 +- js/views/conversation_view.js | 4 - js/views/inbox_view.js | 178 +----------- js/views/session_conversation_view.js | 26 -- js/views/session_inbox_view.js | 28 ++ js/views/session_settings_view.js | 28 -- stylesheets/_index.scss | 19 +- stylesheets/_session_constants.scss | 1 - stylesheets/_session_conversation.scss | 9 +- stylesheets/_session_left_pane.scss | 8 +- test/index.html | 17 +- ts/components/LeftPane.tsx | 31 +- ts/components/MainViewController.tsx | 41 +-- .../session/LeftPaneContactSection.tsx | 13 +- .../session/LeftPaneMessageSection.tsx | 19 +- .../session/LeftPaneSettingSection.tsx | 23 +- ts/components/session/SessionInboxView.tsx | 273 ++++++++++++++++++ .../conversation/SessionConversation.tsx | 17 +- .../session/settings/SessionSettings.tsx | 2 - ts/state/ducks/conversations.ts | 19 +- ts/state/ducks/noop.ts | 4 - ts/state/roots/createLeftPane.tsx | 16 - ts/state/roots/createSessionConversation.tsx | 16 - ts/window.d.ts | 6 +- 27 files changed, 387 insertions(+), 470 deletions(-) delete mode 100644 js/views/session_conversation_view.js create mode 100644 js/views/session_inbox_view.js delete mode 100644 js/views/session_settings_view.js create mode 100644 ts/components/session/SessionInboxView.tsx delete mode 100644 ts/state/ducks/noop.ts delete mode 100644 ts/state/roots/createLeftPane.tsx delete mode 100644 ts/state/roots/createSessionConversation.tsx diff --git a/background.html b/background.html index 71a6d8c7b..dc6aa0f53 100644 --- a/background.html +++ b/background.html @@ -35,24 +35,6 @@ - - + diff --git a/background_test.html b/background_test.html index f67656e20..c104bedee 100644 --- a/background_test.html +++ b/background_test.html @@ -34,23 +34,6 @@ - + diff --git a/js/models/messages.js b/js/models/messages.js index 381026463..131738e07 100644 --- a/js/models/messages.js +++ b/js/models/messages.js @@ -86,7 +86,7 @@ // const applicableConversationChanges = // 'change:color change:name change:number change:profileName change:profileAvatar'; // FIXME AUDRIC - const conversation = this.getConversation(); + // const conversation = this.getConversation(); // const fromContact = this.getIncomingContact(); // this.listenTo(conversation, applicableConversationChanges, generateProps); diff --git a/js/modules/signal.js b/js/modules/signal.js index c70c9b17d..b9156512a 100644 --- a/js/modules/signal.js +++ b/js/modules/signal.js @@ -1,6 +1,5 @@ // The idea with this file is to make it webpackable for the style guide -const { bindActionCreators } = require('redux'); const Crypto = require('./crypto'); const Data = require('./data'); const Database = require('./database'); @@ -46,14 +45,11 @@ const { const { SessionConversation, } = require('../../ts/components/session/conversation/SessionConversation'); -const { - SettingsView, -} = require('../../ts/components/session/settings/SessionSettings'); const { SessionModal } = require('../../ts/components/session/SessionModal'); const { SessionSeedModal, } = require('../../ts/components/session/SessionSeedModal'); - +const { SessionInboxView} = require('../../ts/components/session/SessionInboxView') const { SessionPasswordModal, } = require('../../ts/components/session/SessionPasswordModal'); @@ -107,11 +103,6 @@ const { } = require('../../ts/components/conversation/TypingBubble'); // State -const { createLeftPane } = require('../../ts/state/roots/createLeftPane'); -const { - createSessionConversation, -} = require('../../ts/state/roots/createSessionConversation'); -const { createStore } = require('../../ts/state/createStore'); const conversationsDuck = require('../../ts/state/ducks/conversations'); const userDuck = require('../../ts/state/ducks/user'); const messagesDuck = require('../../ts/state/ducks/messages'); @@ -251,7 +242,6 @@ exports.setup = (options = {}) => { ContactDetail, ContactListItem, ContactName, - SettingsView, EmbeddedContact, Emojify, Lightbox, @@ -262,6 +252,7 @@ exports.setup = (options = {}) => { UserDetailsDialog, DevicePairingDialog, SessionRegistrationView, + SessionInboxView, ConfirmDialog, UpdateGroupNameDialog, UpdateGroupMembersDialog, @@ -287,19 +278,12 @@ exports.setup = (options = {}) => { TypingBubble, }; - const Roots = { - createLeftPane, - createSessionConversation, - }; const Ducks = { conversations: conversationsDuck, user: userDuck, messages: messagesDuck, }; const State = { - bindActionCreators, - createStore, - Roots, Ducks, }; diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index a1bd49337..208c97a22 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -662,10 +662,6 @@ this.updateHeader(); }, - async openConversation(number) { - window.Whisper.events.trigger('showConversation', number); - }, - listenBack(view) { this.panels = this.panels || []; if (this.panels.length > 0) { diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js index 24ef179f8..fe0d415d9 100644 --- a/js/views/inbox_view.js +++ b/js/views/inbox_view.js @@ -23,7 +23,7 @@ className: 'app-loading-screen', }); - Whisper.InboxView = Whisper.View.extend({ + Whisper.InboxViewWhisper = Whisper.View.extend({ templateName: 'two-column', className: 'inbox index', initialize(options = {}) { @@ -61,182 +61,14 @@ } }); + this.openSettings = this.openSettings.bind(this); + this.openSessionConversation = this.openSessionConversation.bind(this); // FIXME: Fix this for new react views this.setupLeftPane(); }, - open(conversation) { - this.setupSessionConversation(conversation.id); - conversation.trigger('opened'); - }, - close(conversation) { - const $el = $(`#conversation-${conversation.cid}`); - if ($el && $el.length > 0) { - $el.remove(); - } - }, - setupSessionConversation() { - // Here we set up a full redux store with initial state for our Conversation Root - - this.sessionConversationView = new Whisper.ReactWrapperView({ - JSX: Signal.State.Roots.createSessionConversation(window.inboxStore), - className: 'conversation-item', - }); - - // Add sessionConversation to the DOM - $('#main-view').html(''); - $('#main-view').append(this.sessionConversationView.el); - }, - async setupLeftPane() { - // Here we set up a full redux store with initial state for our LeftPane Root - const convoCollection = getConversations(); - const conversations = convoCollection.map( - conversation => conversation.cachedProps - ); - - const filledConversations = conversations.map(async conv => { - const messages = await window.getMessagesByKey(conv.id); - return { ...conv, messages }; - }); - - const fullFilledConversations = await Promise.all(filledConversations); - - const initialState = { - conversations: { - conversationLookup: Signal.Util.makeLookup( - fullFilledConversations, - 'id' - ), - }, - user: { - regionCode: window.storage.get('regionCode'), - ourNumber: - window.storage.get('primaryDevicePubKey') || - textsecure.storage.user.getNumber(), - isSecondaryDevice: !!window.storage.get('isSecondaryDevice'), - i18n: window.i18n, - }, - section: { - focusedSection: 1, - }, - }; - - 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 - ); - const { messageChanged } = Signal.State.bindActionCreators( - Signal.State.Ducks.messages.actions, - this.store.dispatch - ); - - this.openConversationAction = openConversationExternal; - - this.fetchHandleMessageSentData = this.fetchHandleMessageSentData.bind( - this - ); - this.handleMessageSentFailure = this.handleMessageSentFailure.bind(this); - this.handleMessageSentSuccess = this.handleMessageSentSuccess.bind(this); - - this.listenTo(convoCollection, 'remove', conversation => { - const { id } = conversation || {}; - conversationRemoved(id); - }); - this.listenTo(convoCollection, 'add', conversation => { - const { id, cachedProps } = conversation || {}; - conversationAdded(id, cachedProps); - }); - this.listenTo(convoCollection, 'change', conversation => { - const { id, cachedProps } = conversation || {}; - conversationChanged(id, cachedProps); - }); - this.listenTo(convoCollection, 'reset', removeAllConversations); - - window.libsession - .getMessageQueue() - .events.addListener('success', this.handleMessageSentSuccess); - window.libsession - .getMessageQueue() - .events.addListener('fail', this.handleMessageSentFailure); - Whisper.events.on('messageExpired', messageExpired); - Whisper.events.on('messageChanged', messageChanged); - Whisper.events.on('userChanged', userChanged); - - // Finally, add it to the DOM - this.$('.left-pane-placeholder').append(this.leftPaneView.el); - }, - async fetchHandleMessageSentData(m) { - // nobody is listening to this freshly fetched message .trigger calls - const tmpMsg = await window.Signal.Data.getMessageById(m.identifier, { - Message: Whisper.Message, - }); - - if (!tmpMsg) { - return null; - } - - // find the corresponding conversation of this message - const conv = window.ConversationController.get( - tmpMsg.get('conversationId') - ); - - if (!conv) { - return null; - } - - // then, find in this conversation the very same message - // const msg = conv.messageCollection.models.find( - // convMsg => convMsg.id === tmpMsg.id - // ); - const msg = window.MessageController._get()[m.identifier]; - - if (!msg || !msg.message) { - return null; - } - - return { msg: msg.message }; - }, - - async handleMessageSentSuccess(sentMessage, wrappedEnvelope) { - const fetchedData = await this.fetchHandleMessageSentData(sentMessage); - if (!fetchedData) { - return; - } - const { msg } = fetchedData; - - msg.handleMessageSentSuccess(sentMessage, wrappedEnvelope); - }, - - async handleMessageSentFailure(sentMessage, error) { - const fetchedData = await this.fetchHandleMessageSentData(sentMessage); - if (!fetchedData) { - return; - } - const { msg } = fetchedData; - - await msg.handleMessageSentFailure(sentMessage, error); - }, startConnectionListener() { this.interval = setInterval(() => { @@ -271,10 +103,6 @@ view.remove(); } }, - onProgress() {}, - reloadBackgroundPage() { - window.location.reload(); - }, async openConversation(id, messageId) { // If we call this to create a new conversation, it can only be private // (group conversations are created elsewhere) diff --git a/js/views/session_conversation_view.js b/js/views/session_conversation_view.js deleted file mode 100644 index 4d3d4807b..000000000 --- a/js/views/session_conversation_view.js +++ /dev/null @@ -1,26 +0,0 @@ -/* global Whisper */ - -// eslint-disable-next-line func-names -(function() { - 'use strict'; - - window.Whisper = window.Whisper || {}; - - Whisper.SessionConversationView = Whisper.View.extend({ - initialize(options) { - this.props = { - ...options, - }; - }, - - render() { - this.conversationView = new Whisper.ReactWrapperView({ - className: 'session-conversation-wrapper', - Component: window.Signal.Components.SessionConversation, - props: this.props, - }); - - this.$el.prepend(this.conversationView.el); - }, - }); -})(); diff --git a/js/views/session_inbox_view.js b/js/views/session_inbox_view.js new file mode 100644 index 000000000..6f2cae8b4 --- /dev/null +++ b/js/views/session_inbox_view.js @@ -0,0 +1,28 @@ +/* global Whisper */ + +// eslint-disable-next-line func-names +(function() { + 'use strict'; + + window.Whisper = window.Whisper || {}; + + Whisper.InboxView = Whisper.View.extend({ + initialize() { + this.render(); + }, + + render() { + this.dialogView = new Whisper.ReactWrapperView({ + className: 'inbox index', + Component: window.Signal.Components.SessionInboxView, + }); + + this.$el.append(this.dialogView.el); + return this; + }, + + close() { + this.remove(); + }, + }); + })(); \ No newline at end of file diff --git a/js/views/session_settings_view.js b/js/views/session_settings_view.js deleted file mode 100644 index 3d6623283..000000000 --- a/js/views/session_settings_view.js +++ /dev/null @@ -1,28 +0,0 @@ -/* global i18n, Whisper */ - -// eslint-disable-next-line func-names -(function() { - 'use strict'; - - window.Whisper = window.Whisper || {}; - - Whisper.SessionSettingsView = Whisper.View.extend({ - initialize() { - this.render(); - }, - render() { - this.settingsView = new Whisper.ReactWrapperView({ - className: 'session-settings', - Component: window.Signal.Components.SettingsView, - props: { - i18n, - }, - }); - - this.$el.append(this.settingsView.el); - }, - close() { - this.remove(); - }, - }); -})(); diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index 572ee9330..5ef186740 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -1,10 +1,12 @@ -.new-conversation, -.inbox, -.gutter { +.inbox { height: 100%; overflow: hidden; } +.inbox.index { + display: flex; +} + .edit-profile-dialog, .create-group-dialog, .user-details-dialog { @@ -74,13 +76,6 @@ } .gutter { - display: flex; - flex-direction: column; - float: left; - width: 300px; - user-select: none; - position: relative; - .tool-bar { margin-top: 8px; color: $color-dark-05; @@ -197,7 +192,9 @@ h4.section-toggle, flex-grow: 1; display: flex; } - +.conversation.placeholder { + height: 100vh; +} .left-pane-wrapper { flex: 1; } diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index c0a5f000a..138cb0300 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -168,7 +168,6 @@ $session-search-input-height: 34px; $main-view-header-height: 63px; $session-conversation-header-height: 60px; $session-left-pane-width: 300px; -$session-left-pane-sections-container-width: 80px; // Various Components $session-icon-size-sm: 15px; diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 48694599f..5768cf697 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -112,11 +112,10 @@ } } -.session-conversation-wrapper { - position: absolute; - width: 100%; - height: 100%; - background-color: $session-shade-2; +.session-conversation { + flex-grow: 1; + display: flex; + flex-direction: column; } .conversation-content { diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 3c3627556..4563402e7 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -2,7 +2,6 @@ $session-compose-margin: 20px; .gutter { width: 380px !important; - padding-inline-end: 5px !important; transition: $session-transition-duration; @include themify($themes) { @@ -98,7 +97,8 @@ $session-compose-margin: 20px; .module-left-pane { width: $session-left-pane-width; position: relative; - height: -webkit-fill-available; + height: 100vh; + flex-shrink: 0; &-session { display: flex; @@ -106,8 +106,8 @@ $session-compose-margin: 20px; } &__sections-container { - height: -webkit-fill-available; - width: $session-left-pane-sections-container-width; + height: 100vh; + flex-shrink: 0; display: inline-flex; flex-direction: column; overflow: auto; diff --git a/test/index.html b/test/index.html index 7dc06700c..6ef6df4b9 100644 --- a/test/index.html +++ b/test/index.html @@ -24,22 +24,6 @@ - - + diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index 566acb201..5b3b12fb5 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -14,6 +14,7 @@ import { LeftPaneSettingSection } from './session/LeftPaneSettingSection'; import { SessionIconType } from './session/icon'; import { SessionTheme } from '../state/ducks/SessionTheme'; import { DefaultTheme } from 'styled-components'; +import { SessionSettingCategory } from './session/settings/SessionSettings'; // from https://github.com/bvaughn/react-virtualized/blob/fb3484ed5dcc41bffae8eab029126c0fb8f7abc0/source/List/types.js#L5 export type RowRendererParamsType = { @@ -36,7 +37,10 @@ interface Props { focusedSection: SectionType; focusSection: (section: SectionType) => void; - openConversationInternal: (id: string, messageId?: string) => void; + openConversationExternal: (id: string, messageId?: string) => void; + showSessionSettingsCategory: (category: SessionSettingCategory) => void; + showSessionViewConversation: () => void; + settingsCategory?: SessionSettingCategory; updateSearchTerm: (searchTerm: string) => void; search: (query: string, options: SearchOptions) => void; clearSearch: () => void; @@ -75,6 +79,11 @@ export class LeftPane extends React.Component { public handleSectionSelected(section: SectionType) { this.props.clearSearch(); this.props.focusSection(section); + if (section === SectionType.Settings) { + this.props.showSessionSettingsCategory(SessionSettingCategory.Appearance); + } else { + this.props.showSessionViewConversation(); + } } public render(): JSX.Element { @@ -108,7 +117,7 @@ export class LeftPane extends React.Component { private renderMessageSection() { const { - openConversationInternal, + openConversationExternal, conversations, contacts, searchResults, @@ -129,7 +138,7 @@ export class LeftPane extends React.Component { return ( { } private renderContactSection() { - const { openConversationInternal } = this.props; + const { openConversationExternal } = this.props; const directContacts = this.getDirectContactsOnly(); return ( ); @@ -159,8 +168,16 @@ export class LeftPane extends React.Component { } private renderSettingSection() { - const { isSecondaryDevice } = this.props; + const { isSecondaryDevice, showSessionSettingsCategory, settingsCategory } = this.props; + + const category = settingsCategory || SessionSettingCategory.Appearance; - return ; + return ( + + ); } } diff --git a/ts/components/MainViewController.tsx b/ts/components/MainViewController.tsx index ce12ec63b..3cb9d693f 100644 --- a/ts/components/MainViewController.tsx +++ b/ts/components/MainViewController.tsx @@ -1,19 +1,6 @@ import React from 'react'; -import ReactDOM from 'react-dom'; - -import { - SessionSettingCategory, - SettingsView, -} from './session/settings/SessionSettings'; import { createLegacyGroup, createMediumGroup } from '../session/medium_group'; - -export const MainViewController = { - createClosedGroup, - renderMessageView, - renderSettingsView, -}; - import { ContactType } from './session/SessionMemberListItem'; import { ToastUtils } from '../session/utils'; @@ -98,28 +85,6 @@ async function createClosedGroup( return true; } -// ///////////////////////////////////// -// ///////////// Rendering ///////////// -// ///////////////////////////////////// - -function renderMessageView() { - if (document.getElementById('main-view')) { - ReactDOM.render(, document.getElementById('main-view')); - } -} - -function renderSettingsView(category: SessionSettingCategory) { - // tslint:disable-next-line: no-backbone-get-set-outside-model - const isSecondaryDevice = !!window.textsecure.storage.get( - 'isSecondaryDevice' - ); - if (document.getElementById('main-view')) { - ReactDOM.render( - , - document.getElementById('main-view') - ); - } -} +export const MainViewController = { + createClosedGroup, +}; diff --git a/ts/components/session/LeftPaneContactSection.tsx b/ts/components/session/LeftPaneContactSection.tsx index 5fc3e7ff8..2ceeba863 100644 --- a/ts/components/session/LeftPaneContactSection.tsx +++ b/ts/components/session/LeftPaneContactSection.tsx @@ -14,15 +14,12 @@ import { SessionClosableOverlay, SessionClosableOverlayType, } from './SessionClosableOverlay'; -import { MainViewController } from '../MainViewController'; import { ToastUtils } from '../../session/utils'; -import { toast } from 'react-toastify'; -import { SessionToast } from './SessionToast'; export interface Props { directContacts: Array; - openConversationInternal: (id: string, messageId?: string) => void; + openConversationExternal: (id: string, messageId?: string) => void; } interface State { @@ -49,15 +46,9 @@ export class LeftPaneContactSection extends React.Component { } public componentDidMount() { - MainViewController.renderMessageView(); - window.Whisper.events.on('calculatingPoW', this.closeOverlay); } - public componentDidUpdate() { - MainViewController.renderMessageView(); - } - public componentWillUnmount() { this.setState({ addContactRecipientID: '' }); window.Whisper.events.off('calculatingPoW', this.closeOverlay); @@ -101,7 +92,7 @@ export class LeftPaneContactSection extends React.Component { style={style} {...item} i18n={window.i18n} - onClick={this.props.openConversationInternal} + onClick={this.props.openConversationExternal} /> ); }; diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx index b129742f7..2c0ced3c3 100644 --- a/ts/components/session/LeftPaneMessageSection.tsx +++ b/ts/components/session/LeftPaneMessageSection.tsx @@ -44,7 +44,7 @@ export interface Props { updateSearchTerm: (searchTerm: string) => void; search: (query: string, options: SearchOptions) => void; - openConversationInternal: (id: string, messageId?: string) => void; + openConversationExternal: (id: string, messageId?: string) => void; clearSearch: () => void; } @@ -99,14 +99,9 @@ export class LeftPaneMessageSection extends React.Component { } public componentDidMount() { - MainViewController.renderMessageView(); window.Whisper.events.on('calculatingPoW', this.closeOverlay); } - public componentDidUpdate() { - MainViewController.renderMessageView(); - } - public componentWillUnmount() { this.updateSearch(''); window.Whisper.events.off('calculatingPoW', this.closeOverlay); @@ -117,7 +112,7 @@ export class LeftPaneMessageSection extends React.Component { key, style, }: RowRendererParamsType): JSX.Element => { - const { conversations, openConversationInternal } = this.props; + const { conversations, openConversationExternal } = this.props; if (!conversations) { throw new Error('renderRow: Tried to render without conversations'); @@ -130,7 +125,7 @@ export class LeftPaneMessageSection extends React.Component { key={key} style={style} {...conversation} - onClick={openConversationInternal} + onClick={openConversationExternal} i18n={window.i18n} /> ); @@ -139,7 +134,7 @@ export class LeftPaneMessageSection extends React.Component { public renderList(): JSX.Element | Array { const { conversations, - openConversationInternal, + openConversationExternal, searchResults, } = this.props; const contacts = searchResults?.contacts || []; @@ -149,7 +144,7 @@ export class LeftPaneMessageSection extends React.Component { ); @@ -384,7 +379,7 @@ export class LeftPaneMessageSection extends React.Component { } private handleMessageButtonClick() { - const { openConversationInternal } = this.props; + const { openConversationExternal } = this.props; if (!this.state.valuePasted && !this.props.searchTerm) { ToastUtils.pushToastError( @@ -399,7 +394,7 @@ export class LeftPaneMessageSection extends React.Component { const error = validateNumber(pubkey); if (!error) { - openConversationInternal(pubkey); + openConversationExternal(pubkey); } else { ToastUtils.pushToastError('invalidPubKey', error); } diff --git a/ts/components/session/LeftPaneSettingSection.tsx b/ts/components/session/LeftPaneSettingSection.tsx index f0a93c794..38e6871f2 100644 --- a/ts/components/session/LeftPaneSettingSection.tsx +++ b/ts/components/session/LeftPaneSettingSection.tsx @@ -3,8 +3,6 @@ import classNames from 'classnames'; import { LeftPane } from '../LeftPane'; -import { MainViewController } from '../MainViewController'; - import { SessionButton, SessionButtonColor, @@ -17,10 +15,11 @@ import { SessionSettingCategory } from './settings/SessionSettings'; interface Props { isSecondaryDevice: boolean; + settingsCategory: SessionSettingCategory; + showSessionSettingsCategory: (category: SessionSettingCategory) => void; } export interface State { - settingCategory: SessionSettingCategory; searchQuery: string; } @@ -29,7 +28,6 @@ export class LeftPaneSettingSection extends React.Component { super(props); this.state = { - settingCategory: SessionSettingCategory.Appearance, searchQuery: '', }; @@ -37,14 +35,6 @@ export class LeftPaneSettingSection extends React.Component { this.onDeleteAccount = this.onDeleteAccount.bind(this); } - public componentDidMount() { - MainViewController.renderSettingsView(this.state.settingCategory); - } - - public componentDidUpdate() { - MainViewController.renderSettingsView(this.state.settingCategory); - } - public render(): JSX.Element { return (
@@ -68,12 +58,13 @@ export class LeftPaneSettingSection extends React.Component { } public renderRow(item: any): JSX.Element { + const {settingsCategory} = this.props; return (
{ @@ -85,7 +76,7 @@ export class LeftPaneSettingSection extends React.Component {
- {item.id === this.state.settingCategory && ( + {item.id === settingsCategory && ( { } public setCategory(category: SessionSettingCategory) { - this.setState({ - settingCategory: category, - }); + this.props.showSessionSettingsCategory(category); } } diff --git a/ts/components/session/SessionInboxView.tsx b/ts/components/session/SessionInboxView.tsx new file mode 100644 index 000000000..9b07574f8 --- /dev/null +++ b/ts/components/session/SessionInboxView.tsx @@ -0,0 +1,273 @@ +import React from 'react'; +import { Provider } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import { getMessageQueue } from '../../session'; +import { createStore } from '../../state/createStore'; +import { StateType } from '../../state/reducer'; +import { SmartLeftPane } from '../../state/smart/LeftPane'; +import { SmartSessionConversation } from '../../state/smart/SessionConversation'; +import { SessionSettingCategory, SettingsView } from './settings/SessionSettings'; + +// Workaround: A react component's required properties are filtering up through connect() +// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363 +const FilteredLeftPane = SmartLeftPane as any; +const FilteredSessionConversation = SmartSessionConversation as any; + + +type Props = { + focusedSection: number; +}; + +type State = { + isInitialLoadComplete: boolean; + settingsCategory?: SessionSettingCategory; +}; + +// tslint:disable: react-a11y-img-has-alt + + +export class SessionInboxView extends React.Component { + private store: any; + + constructor(props: any) { + super(props); + this.state = { + isInitialLoadComplete: false, + settingsCategory: undefined, + }; + + // Inbox + const inboxCollection = window.getInboxCollection(); + this.fetchHandleMessageSentData = this.fetchHandleMessageSentData.bind( + this + ); + this.handleMessageSentFailure = this.handleMessageSentFailure.bind(this); + this.handleMessageSentSuccess = this.handleMessageSentSuccess.bind(this); + this.showSessionSettingsCategory = this.showSessionSettingsCategory.bind(this); + this.showSessionViewConversation = this.showSessionViewConversation.bind(this); + + void this.setupLeftPane(); + + // ConversationCollection + // this.listenTo(inboxCollection, 'messageError', () => { + // if (this.networkStatusView) { + // this.networkStatusView.render(); + // } + // }); + + // this.networkStatusView = new Whisper.NetworkStatusView(); + // this.$el + // .find('.network-status-container') + // .append(this.networkStatusView.render().el); + + // extension.expired(expired => { + // if (expired) { + // const banner = new Whisper.ExpiredAlertBanner().render(); + // banner.$el.prependTo(this.$el); + // this.$el.addClass('expired'); + // } + // }); + } + + + public render() { + if (!this.state.isInitialLoadComplete) { + return <>; + } + + const isSettingsView = this.state.settingsCategory !== undefined; + return ( + +
+
+ {this.renderLeftPane()} +
+ {isSettingsView ? this.renderSettings() : this.renderSessionConversation()} + + ); } + + private renderLeftPane() { + return ( + + ); + } + + private renderSettings() { + const isSecondaryDevice = !!window.textsecure.storage.get('isSecondaryDevice'); + const category = this.state.settingsCategory || SessionSettingCategory.Appearance; + + return ( + + ); + } + + private renderSessionConversation() { + return ( +
+ +
+ ); +} + + private async fetchHandleMessageSentData(m: any) { + // nobody is listening to this freshly fetched message .trigger calls + const tmpMsg = await window.Signal.Data.getMessageById(m.identifier, { + Message: window.Whisper.Message, + }); + + if (!tmpMsg) { + return null; + } + + // find the corresponding conversation of this message + const conv = window.ConversationController.get( + tmpMsg.get('conversationId') + ); + + if (!conv) { + return null; + } + + // then, find in this conversation the very same message + // const msg = conv.messageCollection.models.find( + // convMsg => convMsg.id === tmpMsg.id + // ); + const msg = window.MessageController._get()[m.identifier]; + + if (!msg || !msg.message) { + return null; + } + + return { msg: msg.message }; + } + + private async handleMessageSentSuccess(sentMessage: any, wrappedEnvelope: any) { + const fetchedData = await this.fetchHandleMessageSentData(sentMessage); + if (!fetchedData) { + return; + } + const { msg } = fetchedData; + + msg.handleMessageSentSuccess(sentMessage, wrappedEnvelope); + } + + private async handleMessageSentFailure(sentMessage: any, error: any) { + const fetchedData = await this.fetchHandleMessageSentData(sentMessage); + if (!fetchedData) { + return; + } + const { msg } = fetchedData; + + await msg.handleMessageSentFailure(sentMessage, error); + } + + private async setupLeftPane() { + // Here we set up a full redux store with initial state for our LeftPane Root + const convoCollection = window.getConversations(); + const conversations = convoCollection.map( + (conversation: any) => conversation.cachedProps + ); + + const filledConversations = conversations.map(async (conv: any) => { + const messages = await window.getMessagesByKey(conv.id); + return { ...conv, messages }; + }); + + const fullFilledConversations = await Promise.all(filledConversations); + + const initialState = { + conversations: { + conversationLookup: window.Signal.Util.makeLookup( + fullFilledConversations, + 'id' + ), + }, + user: { + regionCode: window.storage.get('regionCode'), + ourNumber: + window.storage.get('primaryDevicePubKey') || + window.textsecure.storage.user.getNumber(), + isSecondaryDevice: !!window.storage.get('isSecondaryDevice'), + i18n: window.i18n, + }, + section: { + focusedSection: 1, + }, + }; + + this.store = createStore(initialState); + window.inboxStore = this.store; + + // Enables our redux store to be updated by backbone events in the outside world + const { + conversationAdded, + conversationChanged, + conversationRemoved, + removeAllConversations, + messageExpired, + openConversationExternal, + } = bindActionCreators( + window.Signal.State.Ducks.conversations.actions, + this.store.dispatch + ); + const { userChanged } = bindActionCreators( + window.Signal.State.Ducks.user.actions, + this.store.dispatch + ); + const { messageChanged } = bindActionCreators( + window.Signal.State.Ducks.messages.actions, + this.store.dispatch + ); + + // this.openConversationAction = openConversationExternal; + + this.fetchHandleMessageSentData = this.fetchHandleMessageSentData.bind( + this + ); + this.handleMessageSentFailure = this.handleMessageSentFailure.bind(this); + this.handleMessageSentSuccess = this.handleMessageSentSuccess.bind(this); + + // this.listenTo(convoCollection, 'remove', conversation => { + // const { id } = conversation || {}; + // conversationRemoved(id); + // }); + // this.listenTo(convoCollection, 'add', conversation => { + // const { id, cachedProps } = conversation || {}; + // conversationAdded(id, cachedProps); + // }); + // this.listenTo(convoCollection, 'change', conversation => { + // const { id, cachedProps } = conversation || {}; + // conversationChanged(id, cachedProps); + // }); + // this.listenTo(convoCollection, 'reset', removeAllConversations); + + getMessageQueue() + .events.addListener('success', this.handleMessageSentSuccess); + + getMessageQueue() + .events.addListener('fail', this.handleMessageSentFailure); + + window.Whisper.events.on('messageExpired', messageExpired); + window.Whisper.events.on('messageChanged', messageChanged); + window.Whisper.events.on('userChanged', userChanged); + + // Finally, add it to the DOM + // this.$('.left-pane-placeholder').append(this.leftPaneView.el); + this.setState({ isInitialLoadComplete: true }); + } + + private showSessionSettingsCategory(category: SessionSettingCategory) { + this.setState({ settingsCategory: category }); + } + + private showSessionViewConversation() { + this.setState({ settingsCategory: undefined }); + } +} diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index 545f43b22..d7b25f9bf 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -83,11 +83,11 @@ export class SessionConversation extends React.Component { const { conversationKey } = this.props; - const conversationModel = window.ConversationController.getOrThrow( + const conversationModel = window.ConversationController.get( conversationKey ); - const unreadCount = conversationModel.get('unreadCount'); + const unreadCount = conversationModel?.get('unreadCount') || 0; this.state = { messageProgressVisible: false, sendingProgress: 0, @@ -151,8 +151,11 @@ export class SessionConversation extends React.Component { // ~~~~~~~~~~~~~~~~ LIFECYCLES ~~~~~~~~~~~~~~~~ // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - public async componentWillMount() { - await this.loadInitialMessages(); + + public componentDidUpdate(prevProps: Props, prevState: State) { + if (this.props.conversationKey !== prevProps.conversationKey) { + void this.loadInitialMessages(); + } } public componentWillUnmount() { @@ -304,15 +307,17 @@ export class SessionConversation extends React.Component { public async loadInitialMessages() { const { conversationKey } = this.props; - const conversationModel = window.ConversationController.getOrThrow( + const conversationModel = window.ConversationController.get( conversationKey ); + if (!conversationModel) { + return; + } const unreadCount = await conversationModel.getUnreadCount(); const messagesToFetch = Math.max( Constants.CONVERSATION.DEFAULT_MESSAGE_FETCH_COUNT, unreadCount ); - this.props.actions.fetchMessagesForConversation({ conversationKey, count: messagesToFetch, diff --git a/ts/components/session/settings/SessionSettings.tsx b/ts/components/session/settings/SessionSettings.tsx index 896cdd2cb..f2a153d8a 100644 --- a/ts/components/session/settings/SessionSettings.tsx +++ b/ts/components/session/settings/SessionSettings.tsx @@ -10,8 +10,6 @@ import { import { BlockedNumberController, UserUtil } from '../../../util'; import { MultiDeviceProtocol } from '../../../session/protocols'; import { PubKey } from '../../../session/types'; -import { SessionToast, SessionToastType } from '../SessionToast'; -import { toast } from 'react-toastify'; import { ToastUtils } from '../../../session/utils'; export enum SessionSettingCategory { diff --git a/ts/state/ducks/conversations.ts b/ts/state/ducks/conversations.ts index d2670b4d3..0380ab7e1 100644 --- a/ts/state/ducks/conversations.ts +++ b/ts/state/ducks/conversations.ts @@ -1,7 +1,6 @@ import { omit } from 'lodash'; import { trigger } from '../../shims/events'; -import { NoopActionType } from './noop'; // State @@ -127,7 +126,6 @@ export const actions = { conversationRemoved, removeAllConversations, messageExpired, - openConversationInternal, openConversationExternal, }; @@ -183,20 +181,6 @@ function messageExpired( }; } -// Note: we need two actions here to simplify. Operations outside of the left pane can -// trigger an 'openConversation' so we go through Whisper.events for all conversation -// selection. -function openConversationInternal( - id: string, - messageId?: string -): NoopActionType { - trigger('showConversation', id, messageId); - - return { - type: 'NOOP', - payload: null, - }; -} function openConversationExternal( id: string, messageId?: string @@ -286,6 +270,9 @@ export function reducer( if (action.type === 'SELECTED_CONVERSATION_CHANGED') { const { payload } = action; const { id } = payload; + if (state.selectedConversation !== id) { + window.owsDesktopApp.appView.openConversation(id, {}); + } return { ...state, diff --git a/ts/state/ducks/noop.ts b/ts/state/ducks/noop.ts deleted file mode 100644 index 8126c425e..000000000 --- a/ts/state/ducks/noop.ts +++ /dev/null @@ -1,4 +0,0 @@ -export type NoopActionType = { - type: 'NOOP'; - payload: null; -}; diff --git a/ts/state/roots/createLeftPane.tsx b/ts/state/roots/createLeftPane.tsx deleted file mode 100644 index 608e13a0b..000000000 --- a/ts/state/roots/createLeftPane.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { Provider } from 'react-redux'; - -import { Store } from 'redux'; - -import { SmartLeftPane } from '../smart/LeftPane'; - -// Workaround: A react component's required properties are filtering up through connect() -// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363 -const FilteredLeftPane = SmartLeftPane as any; - -export const createLeftPane = (store: Store) => ( - - - -); diff --git a/ts/state/roots/createSessionConversation.tsx b/ts/state/roots/createSessionConversation.tsx deleted file mode 100644 index cd27dc370..000000000 --- a/ts/state/roots/createSessionConversation.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { Provider } from 'react-redux'; - -import { Store } from 'redux'; - -import { SmartSessionConversation } from '../smart/SessionConversation'; - -// Workaround: A react component's required properties are filtering up through connect() -// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363 -const FilteredSessionConversation = SmartSessionConversation as any; - -export const createSessionConversation = (store: Store) => ( - - - -); diff --git a/ts/window.d.ts b/ts/window.d.ts index 97b78d4c0..e06e985ef 100644 --- a/ts/window.d.ts +++ b/ts/window.d.ts @@ -16,6 +16,7 @@ import {} from 'styled-components/cssprop'; import { ConversationControllerType } from '../js/ConversationController'; import { any } from 'underscore'; +import { Store } from 'redux'; /* We declare window stuff here instead of global.d.ts because we are importing other declarations. If you import anything in global.d.ts, the type system won't work correctly. @@ -95,7 +96,7 @@ declare global { versionInfo: any; getStoragePubKey: any; pubkeyPattern: any; - getConversations: any; + getConversations: () => ConversationCollection; getGuid: any; ContactBuffer: any; GroupBuffer: any; @@ -111,5 +112,8 @@ declare global { ) => Promise<{ pubKey: ArrayBufferLike; privKey: ArrayBufferLike }>; setClockParams: any; clientClockSynced: number | undefined; + getInboxCollection: any; + getMessagesByKey: any; + inboxStore: Store; } }