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

Partially rendered message success and root store manipulation

Browse Source
pull/1102/head
Vincent 6 years ago
parent c365481aee
commit bb0279983d
6 changed files with 209 additions and 182 deletions
Show Stats Download Patch File Download Diff File

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

@ -76,8 +76,8 @@
}, },
}; };
this.store = Signal.State.createStore(initialState); const store = Signal.State.createStore(initialState);
window.conversationStore = this.store; window.conversationStore = store;
this.sessionConversationView = new Whisper.ReactWrapperView({ this.sessionConversationView = new Whisper.ReactWrapperView({
JSX: Signal.State.Roots.createSessionConversation(this.store), JSX: Signal.State.Roots.createSessionConversation(this.store),
@ -94,11 +94,11 @@
openConversationExternal, openConversationExternal,
} = Signal.State.bindActionCreators( } = Signal.State.bindActionCreators(
Signal.State.Ducks.conversations.actions, Signal.State.Ducks.conversations.actions,
this.store.dispatch store.dispatch
); );
const { userChanged } = Signal.State.bindActionCreators( const { userChanged } = Signal.State.bindActionCreators(
Signal.State.Ducks.user.actions, Signal.State.Ducks.user.actions,
this.store.dispatch store.dispatch
); );
this.openConversationAction = openConversationExternal; this.openConversationAction = openConversationExternal;

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

@ -13,186 +13,184 @@ import { SessionSpinner } from './SessionSpinner';
// conversationKey: any; // conversationKey: any;
// } // }
// interface State { interface State {
// sendingProgess: number; sendingProgess: number;
// prevSendingProgess: number; prevSendingProgess: number;
// messages: Array<any>; conversationKey: string;
// } messages: Array<any>;
}
export class SessionConversation extends React.Component<any, any> { export class SessionConversation extends React.Component<any, State> {
constructor(props: any) { constructor(props: any) {
super(props); super(props);
// this.state = { const conversationKey = window.inboxStore.getState().conversations.selectedConversation;
// sendingProgess: 0,
// prevSendingProgess: 0, this.state = {
// messages: [], sendingProgess: 0,
// }; prevSendingProgess: 0,
conversationKey,
messages: [],
};
} }
// async componentWillMount() { async componentWillMount() {
// const { conversationKey } = this.props; const {conversationKey} = this.state;
// this.setState({ if (conversationKey){
// messages: await window.getMessagesByKey(conversationKey) this.setState({
// }); messages: await window.getMessagesByKey(conversationKey)
});
// } }
}
render() { render() {
console.log(`[vince]`, this.props);
// const headerProps = this.props.getHeaderProps;
// // const headerProps = this.props.getHeaderProps; const { conversationKey } = this.state;
// const { conversationKey } = this.props; const loadingMessages = this.state.messages.length === 0;
// const loadingMessages = this.state.messages.length === 0;
// TMEPORARY SOLUTION TO GETTING CONVERSATION UNTIL
// // TMEPORARY SOLUTION TO GETTING CONVERSATION UNTIL // SessionConversationStack is created
// // SessionConversationStack is created
// Get conversation by Key (NOT cid)
// // Get conversation by Key (NOT cid) const conversation = window.getConversationByKey(conversationKey);
// const conversation = window.getConversationByKey(conversationKey); const conversationType = conversation.attributes.type;
// const conversationType = conversation.attributes.type;
console.log(`[vince] Conversation key: `, conversationKey);
// console.log(`Conversation key: `, conversationKey); console.log(`[vince] Conversation:`, conversation);
// 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>
// <SessionCompositionBox
// onSendMessage={() => null}
// />
// </div>
// );
return ( 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.props.conversations[0].lastMessage*/} {this.renderMessages(conversationKey, conversationType)}
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?
</> </>
)}
</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) => {
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 renderMessages(conversationKey: string, conversationType: 'group' | 'direct') { public renderHeader(conversation: any) {
// const { messages } = this.state; return (
<ConversationHeader
// console.log(`Messages`, messages); id={conversation.cid}
phoneNumber={conversation.id}
// // FIND FOR EACH MESSAGE isVerified={true}
// const isExpired = false; isMe={false}
// const isDeletable = false; isFriend={true}
// const messageType = 'direct'; i18n={window.i18n}
// const selected = false; isGroup={false}
// const preview:any = []; isArchived={false}
// const multiSelectMode = false; isPublic={false}
// const onSelectMessage = () => null; isRss={false}
// const onSelectMessageUnchecked = () => null; amMod={false}
// const onShowDetail = () => null; members={[]}
// const onShowUserDetails = () => null; showBackButton={false}
timerOptions={[]}
isBlocked={false}
// // FIXME PAY ATTENTION; ONLY RENDER MESSAGES THAT ARE VISIBLE hasNickname={false}
// return ( isFriendRequestPending={false}
// <>{ isOnline={true}
// messages.map((message: any) => { selectedMessages={null}
onSetDisappearingMessages={() => null}
// return message.body && ( onDeleteMessages={() => null}
// <Message onDeleteContact={() => null}
// text = {message.body || ''} onResetSession={() => null}
// direction = {'incoming'} onCloseOverlay={() => null}
// timestamp = {1581565995228} onDeleteSelectedMessages={() => null}
// i18n = {window.i18n} onArchive={() => null}
// authorPhoneNumber = {message.source} onMoveToInbox={() => null}
// conversationType = {conversationType} onShowSafetyNumber={() => null}
// previews = {preview} onShowAllMedia={() => null}
// isExpired = {isExpired} onShowGroupMembers={() => null}
// isDeletable = {isDeletable} onGoBack={() => null}
// convoId = {conversationKey} onBlockUser={() => null}
// selected = {selected} onUnblockUser={() => null}
// multiSelectMode = {multiSelectMode} onClearNickname={() => null}
// onSelectMessage = {onSelectMessage} onChangeNickname={() => null}
// onSelectMessageUnchecked = {onSelectMessageUnchecked} onCopyPublicKey={() => null}
// onShowDetail = {onShowDetail} onLeaveGroup={() => null}
// onShowUserDetails = {onShowUserDetails} onAddModerators={() => null}
// /> onRemoveModerators={() => null}
// )} onInviteFriends={() => null}
// ) />
// }</> );
// ); }
// }
// 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 scrollToUnread() {
// } }
// public scrollToBottom() { public scrollToBottom() {
// } }
} }

1
ts/global.d.ts vendored
Unescape Escape View File

@ -5,6 +5,7 @@ interface Window {
renderConversationView: any; renderConversationView: any;
Events: any; Events: any;
inboxStore: any;
Lodash: any; Lodash: any;
deleteAllData: any; deleteAllData: any;
clearLocalData: any; clearLocalData: any;

2
ts/state/ducks/conversations.ts
Unescape Escape View File

@ -247,7 +247,7 @@ export function reducer(
action: ConversationActionType action: ConversationActionType
): ConversationsStateType { ): ConversationsStateType {
if (!state) { if (!state) {
return getEmptyState(); return getEmptyState();\
} }
if (action.type === 'CONVERSATION_ADDED') { if (action.type === 'CONVERSATION_ADDED') {

32
ts/state/selectors/conversations.ts
Unescape Escape View File

@ -161,6 +161,36 @@ export const _getLeftPaneLists = (
}; };
}; };
export const _getSessionConversationInfo = (
lookup: ConversationLookupType,
comparator: (left: ConversationType, right: ConversationType) => number,
selectedConversation?: string
): {
conversation: ConversationType | undefined;
selectedConversation?: string;
} => {
const values = Object.values(lookup);
const sorted = values.sort(comparator);
let conversation;
const max = sorted.length;
for (let i = 0; i < max; i += 1) {
let conv = sorted[i];
if (conv.id === selectedConversation){
conversation = conv;
break;
}
}
return {
conversation,
selectedConversation,
};
};
export const getLeftPaneLists = createSelector( export const getLeftPaneLists = createSelector(
getConversationLookup, getConversationLookup,
getConversationComparator, getConversationComparator,
@ -172,7 +202,7 @@ export const getSessionConversationInfo = createSelector(
getConversationLookup, getConversationLookup,
getConversationComparator, getConversationComparator,
getSelectedConversation, getSelectedConversation,
_getLeftPaneLists _getSessionConversationInfo,
); );
export const getMe = createSelector( export const getMe = createSelector(

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

@ -3,15 +3,13 @@ import { mapDispatchToProps } from '../actions';
import { SessionConversation } from '../../components/session/SessionConversation'; import { SessionConversation } from '../../components/session/SessionConversation';
import { StateType } from '../reducer'; import { StateType } from '../reducer';
import { getSessionConversationInfo, getSelectedConversation } from '../selectors/conversations'; import { getSessionConversationInfo } from '../selectors/conversations';
const mapStateToProps = (state: StateType) => { const mapStateToProps = (state: StateType) => {
const lists = getSessionConversationInfo(state); const conversationInfo = getSessionConversationInfo(state);
const selectedConversation = getSelectedConversation(state);
return { return {
...lists, ...conversationInfo,
selectedConversation,
} }
}; };

Write Preview
Loading…
Cancel
Save