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 5 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;

340
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}`}>
{/*this.props.conversations[0].lastMessage*/} <div className="conversation-header">
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? {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)}
</>
)}
</div>
<SessionCompositionBox
onSendMessage={() => null}
/>
</div>
);
} }
// public renderMessages(conversationKey: string, conversationType: 'group' | 'direct') { public renderMessages(conversationKey: string, conversationType: 'group' | 'direct') {
// const { messages } = this.state; const { messages } = this.state;
// console.log(`Messages`, messages); console.log(`Messages`, messages);
// // FIND FOR EACH MESSAGE // FIND FOR EACH MESSAGE
// const isExpired = false; const isExpired = false;
// const isDeletable = false; const isDeletable = false;
// const messageType = 'direct'; const messageType = 'direct';
// const selected = false; const selected = false;
// const preview:any = []; const preview:any = [];
// const multiSelectMode = false; const multiSelectMode = false;
// const onSelectMessage = () => null; const onSelectMessage = () => null;
// const onSelectMessageUnchecked = () => null; const onSelectMessageUnchecked = () => null;
// const onShowDetail = () => null; const onShowDetail = () => null;
// const onShowUserDetails = () => null; const onShowUserDetails = () => null;
// // FIXME PAY ATTENTION; ONLY RENDER MESSAGES THAT ARE VISIBLE // FIXME PAY ATTENTION; ONLY RENDER MESSAGES THAT ARE VISIBLE
// return ( return (
// <>{ <>{
// messages.map((message: any) => { messages.map((message: any) => {
// return message.body && ( return message.body && (
// <Message <Message
// text = {message.body || ''} text = {message.body || ''}
// direction = {'incoming'} direction = {'incoming'}
// timestamp = {1581565995228} timestamp = {1581565995228}
// i18n = {window.i18n} i18n = {window.i18n}
// authorPhoneNumber = {message.source} authorPhoneNumber = {message.source}
// conversationType = {conversationType} conversationType = {conversationType}
// previews = {preview} previews = {preview}
// isExpired = {isExpired} isExpired = {isExpired}
// isDeletable = {isDeletable} isDeletable = {isDeletable}
// convoId = {conversationKey} convoId = {conversationKey}
// selected = {selected} selected = {selected}
// multiSelectMode = {multiSelectMode} multiSelectMode = {multiSelectMode}
// onSelectMessage = {onSelectMessage} onSelectMessage = {onSelectMessage}
// onSelectMessageUnchecked = {onSelectMessageUnchecked} onSelectMessageUnchecked = {onSelectMessageUnchecked}
// onShowDetail = {onShowDetail} onShowDetail = {onShowDetail}
// onShowUserDetails = {onShowUserDetails} onShowUserDetails = {onShowUserDetails}
// /> />
// )} )}
// ) )
// }</> }</>
// ); );
// } }
// public renderHeader(conversation: any) { public renderHeader(conversation: any) {
// return ( return (
// <ConversationHeader <ConversationHeader
// id={conversation.cid} id={conversation.cid}
// phoneNumber={conversation.id} phoneNumber={conversation.id}
// isVerified={true} isVerified={true}
// isMe={false} isMe={false}
// isFriend={true} isFriend={true}
// i18n={window.i18n} i18n={window.i18n}
// isGroup={false} isGroup={false}
// isArchived={false} isArchived={false}
// isPublic={false} isPublic={false}
// isRss={false} isRss={false}
// amMod={false} amMod={false}
// members={[]} members={[]}
// showBackButton={false} showBackButton={false}
// timerOptions={[]} timerOptions={[]}
// isBlocked={false} isBlocked={false}
// hasNickname={false} hasNickname={false}
// isFriendRequestPending={false} isFriendRequestPending={false}
// isOnline={true} isOnline={true}
// selectedMessages={null} selectedMessages={null}
// onSetDisappearingMessages={() => null} onSetDisappearingMessages={() => null}
// onDeleteMessages={() => null} onDeleteMessages={() => null}
// onDeleteContact={() => null} onDeleteContact={() => null}
// onResetSession={() => null} onResetSession={() => null}
// onCloseOverlay={() => null} onCloseOverlay={() => null}
// onDeleteSelectedMessages={() => null} onDeleteSelectedMessages={() => null}
// onArchive={() => null} onArchive={() => null}
// onMoveToInbox={() => null} onMoveToInbox={() => null}
// onShowSafetyNumber={() => null} onShowSafetyNumber={() => null}
// onShowAllMedia={() => null} onShowAllMedia={() => null}
// onShowGroupMembers={() => null} onShowGroupMembers={() => null}
// onGoBack={() => null} onGoBack={() => null}
// onBlockUser={() => null} onBlockUser={() => null}
// onUnblockUser={() => null} onUnblockUser={() => null}
// onClearNickname={() => null} onClearNickname={() => null}
// onChangeNickname={() => null} onChangeNickname={() => null}
// onCopyPublicKey={() => null} onCopyPublicKey={() => null}
// onLeaveGroup={() => null} onLeaveGroup={() => null}
// onAddModerators={() => null} onAddModerators={() => null}
// onRemoveModerators={() => null} onRemoveModerators={() => null}
// onInviteFriends={() => 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