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;

338
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 ( return (
// <div className={`conversation-item conversation-${conversation.cid}`}> <div className={`conversation-item conversation-${conversation.cid}`}>
// <div className="conversation-header"> <div className="conversation-header">
// {this.renderHeader(conversation)} {this.renderHeader(conversation)}
// </div> </div>
// <SessionProgress <SessionProgress
// visible={true} visible={true}
// value={this.state.sendingProgess} value={this.state.sendingProgess}
// prevValue={this.state.prevSendingProgess} prevValue={this.state.prevSendingProgess}
// /> />
// <div className="messages-container"> <div className="messages-container">
// { loadingMessages ? ( { loadingMessages ? (
// <div className="messages-container__loading"> <div className="messages-container__loading">
// <SessionSpinner/> <SessionSpinner/>
// </div> </div>
// ) : ( ) : (
// <> <>
// {/*this.renderMessages(conversationKey, conversationType)*/} {this.renderMessages(conversationKey, conversationType)}
// {this.props.conversations[0].lastMessage} </>
// </> )}
// )} </div>
// </div>
// <SessionCompositionBox <SessionCompositionBox
// onSendMessage={() => null} onSendMessage={() => null}
// /> />
// </div> </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 renderHeader(conversation: any) {
return ( return (
<> <ConversationHeader
{/*this.props.conversations[0].lastMessage*/} id={conversation.cid}
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? 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 renderMessages(conversationKey: string, conversationType: 'group' | 'direct') { public scrollToBottom() {
// 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() {
// }
} }

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(

10
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