keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

Working conversation openning

Browse Source
pull/1102/head
Vincent 5 years ago
parent 57b20d2f1a
commit bf5badda3b
8 changed files with 295 additions and 237 deletions
Show Stats Download Patch File Download Diff File

14
js/background.js
Unescape Escape View File

@ -986,19 +986,7 @@
}
return toastID;
};
window.renderConversationView = conversationKey => {
const sessionConversation = new Whisper.SessionConversationView({
el: $('#main-view'),
conversationKey,
});
sessionConversation.render();
console.log(conversationKey);
console.log(conversationKey);
console.log(conversationKey);
};
};
window.getFriendsFromContacts = contacts => {
// To call from TypeScript, input / output are both

5
js/conversation_controller.js
Unescape Escape View File

@ -69,7 +69,9 @@
const conversation = window.getConversationByKey(key);
// Grab messages and push to conv object.
await conversation.fetchMessages();
if (!conversation.messageCollection.models.length){
await conversation.fetchMessages();
}
const messagesModel = conversation.messageCollection.models;
const messages = messagesModel.map(conv => conv.attributes);
@ -77,7 +79,6 @@
return messages;
}
window.ConversationController = {
get(id) {
if (!this._initialFetchComplete) {

2
js/modules/signal.js
Unescape Escape View File

@ -146,6 +146,7 @@ const {
// 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');
@ -335,6 +336,7 @@ exports.setup = (options = {}) => {
const Roots = {
createLeftPane,
createSessionConversation,
};
const Ducks = {
conversations: conversationsDuck,

134
js/views/inbox_view.js
Unescape Escape View File

@ -21,61 +21,16 @@
Whisper.ConversationStack = Whisper.View.extend({
className: 'conversation-stack',
open(conversation) {
const id = `conversation-${conversation.cid}`;
const container = $('#main-view .conversation-stack');
// Has been opened since app start, but not focussed
const conversationExists = container.children(`#${id}`).length > 0;
// Is focussed
const conversationOpened = container.children().first().id === id;
// To limit the size of the DOM for speed
const maxNumConversations = 10;
const numConversations = container
.children()
.not('.conversation.placeholder').length;
const shouldTrimConversations = numConversations > maxNumConversations;
if (shouldTrimConversations) {
// Removes conversation which has been hidden the longest
container.children()[numConversations - 1].remove();
}
if (conversationExists) {
// User opened conversation, move it to top of stack, rather than re-rendering
const conversations = container
.children()
.not('.conversation.placeholder');
container
.children(`#${id}`)
.first()
.insertBefore(conversations.first());
conversation.trigger('opened');
return;
}
// const container = $('#main-view .conversation-stack');
// container.html('');
if (!conversationOpened) {
this.$el
.first()
.find('video, audio')
.each(function pauseMedia() {
this.pause();
});
let $el = this.$(`#${id}`);
if ($el === null || $el.length === 0) {
const view = new Whisper.ConversationView({
model: conversation,
window: this.model.window,
});
view.view.resetScrollPosition();
// eslint-disable-next-line prefer-destructuring
$el = view.$el;
}
this.setupSessionConversation();
// const sessionConversationView = new Whisper.SessionConversationView({
// el: container,
// conversationKey: conversation.id,
// });
// sessionConversationView.render();
container.prepend($el);
}
conversation.trigger('opened');
},
close(conversation) {
@ -98,6 +53,77 @@
reject: onCancel,
});
},
setupSessionConversation() {
// 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 initialState = {
conversations: {
conversationLookup: Signal.Util.makeLookup(conversations, 'id'),
},
user: {
regionCode: window.storage.get('regionCode'),
ourNumber:
window.storage.get('primaryDevicePubKey') ||
textsecure.storage.user.getNumber(),
isSecondaryDevice: !!window.storage.get('isSecondaryDevice'),
i18n: window.i18n,
},
};
this.store = Signal.State.createStore(initialState);
window.inboxStore = this.store;
this.sessionConversationView = new Whisper.ReactWrapperView({
JSX: Signal.State.Roots.createSessionConversation(this.store),
className: 'session-conversation-redux-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(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);
Whisper.events.on('messageExpired', messageExpired);
Whisper.events.on('userChanged', userChanged);
// Add sessionConversation to the DOM
// Don't worry - this isn't fetching messages on every re-render. It's pulling
// from Redux
// $('#main-view .conversation-stack').html('');
$('#main-view .conversation-stack').prepend(this.sessionConversationView.el);
},
});
Whisper.AppLoadingScreen = Whisper.View.extend({
@ -345,7 +371,7 @@
}
this.conversation_stack.open(conversation);
this.focusConversation();
// this.focusConversation();
},
closeConversation(conversation) {
if (conversation) {

4
ts/components/session/LeftPaneMessageSection.tsx
Unescape Escape View File

@ -109,7 +109,7 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
key,
style,
}: RowRendererParamsType): JSX.Element => {
// const { openConversationInternal } = this.props;
const { openConversationInternal } = this.props;
const conversations = this.getCurrentConversations();
@ -125,7 +125,7 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
key={key}
style={style}
{...conversation}
onClick={() => window.renderConversationView(conversationKey)}
onClick={openConversationInternal}
i18n={window.i18n}
/>
);

342
ts/components/session/SessionConversation.tsx
Unescape Escape View File

@ -8,181 +8,191 @@ import { Message } from '../conversation/Message';
import { SessionSpinner } from './SessionSpinner';
interface Props {
getHeaderProps: any;
conversationKey: any;
}
interface State {
sendingProgess: number;
prevSendingProgess: number;
messages: Array<any>;
}
export class SessionConversation extends React.Component<Props, State> {
// interface Props {
// getHeaderProps: any;
// conversationKey: any;
// }
// interface State {
// sendingProgess: number;
// prevSendingProgess: number;
// messages: Array<any>;
// }
export class SessionConversation extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
sendingProgess: 0,
prevSendingProgess: 0,
messages: [],
};
// this.state = {
// sendingProgess: 0,
// prevSendingProgess: 0,
// messages: [],
// };
}
async componentWillMount() {
const { conversationKey } = this.props;
// async componentWillMount() {
// const { conversationKey } = this.props;
this.setState({
messages: await window.getMessagesByKey(conversationKey)
});
// this.setState({
// messages: await window.getMessagesByKey(conversationKey)
// });
}
// }
render() {
// const headerProps = this.props.getHeaderProps;
const { conversationKey } = this.props;
const loadingMessages = this.state.messages.length === 0;
// TMEPORARY SOLUTION TO GETTING CONVERSATION UNTIL
// SessionConversationStack is created
// Get conversation by Key (NOT cid)
const conversation = window.getConversationByKey(conversationKey);
const conversationType = conversation.attributes.type;
console.log(`Conversation key: `, conversationKey);
return (
<div className={`conversation-item conversation-${conversation.cid}`}>
<div className="conversation-header">
{this.renderHeader(conversation)}
</div>
<SessionProgress
visible={true}
value={this.state.sendingProgess}
prevValue={this.state.prevSendingProgess}
/>
// console.log(`[vince]`, this.props);
// // const headerProps = this.props.getHeaderProps;
// const { conversationKey } = this.props;
// const loadingMessages = this.state.messages.length === 0;
// // TMEPORARY SOLUTION TO GETTING CONVERSATION UNTIL
// // SessionConversationStack is created
// // Get conversation by Key (NOT cid)
// const conversation = window.getConversationByKey(conversationKey);
// const conversationType = conversation.attributes.type;
// console.log(`Conversation key: `, conversationKey);
// return (
// <div className={`conversation-item conversation-${conversation.cid}`}>
// <div className="conversation-header">
// {this.renderHeader(conversation)}
// </div>
// <SessionProgress
// visible={true}
// value={this.state.sendingProgess}
// prevValue={this.state.prevSendingProgess}
// />
// <div className="messages-container">
// { loadingMessages ? (
// <div className="messages-container__loading">
// <SessionSpinner/>
// </div>
// ) : (
// <>
// {/*this.renderMessages(conversationKey, conversationType)*/}
// {this.props.conversations[0].lastMessage}
// </>
// )}
// </div>
<div className="messages-container">
{ loadingMessages ? (
<div className="messages-container__loading">
<SessionSpinner/>
</div>
) : (
<>
{this.renderMessages(conversationKey, conversationType)}
</>
)}
</div>
<SessionCompositionBox
onSendMessage={() => null}
/>
</div>
);
}
public renderMessages(conversationKey: string, conversationType: 'group' | 'direct') {
const { messages } = this.state;
console.log(`Messages`, messages);
// FIND FOR EACH MESSAGE
const isExpired = false;
const isDeletable = false;
const messageType = 'direct';
const selected = false;
const preview:any = [];
const multiSelectMode = false;
const onSelectMessage = () => null;
const onSelectMessageUnchecked = () => null;
const onShowDetail = () => null;
const onShowUserDetails = () => null;
// FIXME PAY ATTENTION; ONLY RENDER MESSAGES THAT ARE VISIBLE
return (
<>{
messages.map((message: any) => (
<Message
text = {message.body || ''}
direction = {'incoming'}
timestamp = {1581565995228}
i18n = {window.i18n}
authorPhoneNumber = {message.source}
conversationType = {conversationType}
previews = {preview}
isExpired = {isExpired}
isDeletable = {isDeletable}
convoId = {conversationKey}
selected = {selected}
multiSelectMode = {multiSelectMode}
onSelectMessage = {onSelectMessage}
onSelectMessageUnchecked = {onSelectMessageUnchecked}
onShowDetail = {onShowDetail}
onShowUserDetails = {onShowUserDetails}
/>
))
}</>
);
}
public renderHeader(conversation: any) {
// <SessionCompositionBox
// onSendMessage={() => null}
// />
// </div>
// );
return (
<ConversationHeader
id={conversation.cid}
phoneNumber={conversation.id}
isVerified={true}
isMe={false}
isFriend={true}
i18n={window.i18n}
isGroup={false}
isArchived={false}
isPublic={false}
isRss={false}
amMod={false}
members={[]}
showBackButton={false}
timerOptions={[]}
isBlocked={false}
hasNickname={false}
isFriendRequestPending={false}
isOnline={true}
selectedMessages={null}
onSetDisappearingMessages={() => null}
onDeleteMessages={() => null}
onDeleteContact={() => null}
onResetSession={() => null}
onCloseOverlay={() => null}
onDeleteSelectedMessages={() => null}
onArchive={() => null}
onMoveToInbox={() => null}
onShowSafetyNumber={() => null}
onShowAllMedia={() => null}
onShowGroupMembers={() => null}
onGoBack={() => null}
onBlockUser={() => null}
onUnblockUser={() => null}
onClearNickname={() => null}
onChangeNickname={() => null}
onCopyPublicKey={() => null}
onLeaveGroup={() => null}
onAddModerators={() => null}
onRemoveModerators={() => null}
onInviteFriends={() => null}
/>
);
}
public scrollToUnread() {
<>
{/*this.props.conversations[0].lastMessage*/}
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem fugiat omnis aperiam nulla ducimus dolores, molestias hic aliquam laboriosam velit, quas quis autem distinctio vero beatae id tempora error nostrum?
</>
)
}
public scrollToBottom() {
}
}
// public renderMessages(conversationKey: string, conversationType: 'group' | 'direct') {
// const { messages } = this.state;
// console.log(`Messages`, messages);
// // FIND FOR EACH MESSAGE
// const isExpired = false;
// const isDeletable = false;
// const messageType = 'direct';
// const selected = false;
// const preview:any = [];
// const multiSelectMode = false;
// const onSelectMessage = () => null;
// const onSelectMessageUnchecked = () => null;
// const onShowDetail = () => null;
// const onShowUserDetails = () => null;
// // FIXME PAY ATTENTION; ONLY RENDER MESSAGES THAT ARE VISIBLE
// return (
// <>{
// messages.map((message: any) => {
// return message.body && (
// <Message
// text = {message.body || ''}
// direction = {'incoming'}
// timestamp = {1581565995228}
// i18n = {window.i18n}
// authorPhoneNumber = {message.source}
// conversationType = {conversationType}
// previews = {preview}
// isExpired = {isExpired}
// isDeletable = {isDeletable}
// convoId = {conversationKey}
// selected = {selected}
// multiSelectMode = {multiSelectMode}
// onSelectMessage = {onSelectMessage}
// onSelectMessageUnchecked = {onSelectMessageUnchecked}
// onShowDetail = {onShowDetail}
// onShowUserDetails = {onShowUserDetails}
// />
// )}
// )
// }</>
// );
// }
// public renderHeader(conversation: any) {
// return (
// <ConversationHeader
// id={conversation.cid}
// phoneNumber={conversation.id}
// isVerified={true}
// isMe={false}
// isFriend={true}
// i18n={window.i18n}
// isGroup={false}
// isArchived={false}
// isPublic={false}
// isRss={false}
// amMod={false}
// members={[]}
// showBackButton={false}
// timerOptions={[]}
// isBlocked={false}
// hasNickname={false}
// isFriendRequestPending={false}
// isOnline={true}
// selectedMessages={null}
// onSetDisappearingMessages={() => null}
// onDeleteMessages={() => null}
// onDeleteContact={() => null}
// onResetSession={() => null}
// onCloseOverlay={() => null}
// onDeleteSelectedMessages={() => null}
// onArchive={() => null}
// onMoveToInbox={() => null}
// onShowSafetyNumber={() => null}
// onShowAllMedia={() => null}
// onShowGroupMembers={() => null}
// onGoBack={() => null}
// onBlockUser={() => null}
// onUnblockUser={() => null}
// onClearNickname={() => null}
// onChangeNickname={() => null}
// onCopyPublicKey={() => null}
// onLeaveGroup={() => null}
// onAddModerators={() => null}
// onRemoveModerators={() => null}
// onInviteFriends={() => null}
// />
// );
// }
// public scrollToUnread() {
// }
// public scrollToBottom() {
// }
// }

16
ts/state/roots/createSessionConversation.tsx
Unescape Escape View File

@ -0,0 +1,16 @@
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) => (
<Provider store={store as any}>
<FilteredSessionConversation />
</Provider>
);

15
ts/state/smart/SessionConversation.tsx
Unescape Escape View File

@ -0,0 +1,15 @@
import { connect } from 'react-redux';
import { mapDispatchToProps } from '../actions';
import { SessionConversation } from '../../components/session/SessionConversation';
import { StateType } from '../reducer';
import { getLeftPaneLists } from '../selectors/conversations';
const mapStateToProps = (state: StateType) => {
const lists = getLeftPaneLists(state);
return lists;
};
const smart = connect(mapStateToProps, mapDispatchToProps);
export const SmartSessionConversation = smart(SessionConversation);
Write Preview
Loading…
Cancel
Save