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

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

@ -13,186 +13,184 @@ import { SessionSpinner } from './SessionSpinner';
// conversationKey: any;
// }
// interface State {
// sendingProgess: number;
// prevSendingProgess: number;
// messages: Array<any>;
// }
interface State {
sendingProgess: number;
prevSendingProgess: number;
conversationKey: string;
messages: Array<any>;
}
export class SessionConversation extends React.Component<any, any> {
export class SessionConversation extends React.Component<any, State> {
constructor(props: any) {
super(props);
// this.state = {
// sendingProgess: 0,
// prevSendingProgess: 0,
// messages: [],
// };
const conversationKey = window.inboxStore.getState().conversations.selectedConversation;
this.state = {
sendingProgess: 0,
prevSendingProgess: 0,
conversationKey,
messages: [],
};
}
// async componentWillMount() {
// const { conversationKey } = this.props;
async componentWillMount() {
const {conversationKey} = this.state;
// this.setState({
// messages: await window.getMessagesByKey(conversationKey)
// });
// }
if (conversationKey){
this.setState({
messages: await window.getMessagesByKey(conversationKey)
});
}
}
render() {
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>
// const headerProps = this.props.getHeaderProps;
const { conversationKey } = this.state;
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(`[vince] 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)}
</>
)}
</div>
// <SessionCompositionBox
// onSendMessage={() => null}
// />
// </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 renderHeader(conversation: any) {
return (
<>
{/*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?
</>
)
<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 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() {
// }
public scrollToBottom() {
}
}

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

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

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

@ -247,7 +247,7 @@ export function reducer(
action: ConversationActionType
): ConversationsStateType {
if (!state) {
return getEmptyState();
return getEmptyState();\
}
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(
getConversationLookup,
getConversationComparator,
@ -172,7 +202,7 @@ export const getSessionConversationInfo = createSelector(
getConversationLookup,
getConversationComparator,
getSelectedConversation,
_getLeftPaneLists
_getSessionConversationInfo,
);
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 { StateType } from '../reducer';
import { getSessionConversationInfo, getSelectedConversation } from '../selectors/conversations';
import { getSessionConversationInfo } from '../selectors/conversations';
const mapStateToProps = (state: StateType) => {
const lists = getSessionConversationInfo(state);
const selectedConversation = getSelectedConversation(state);
const conversationInfo = getSessionConversationInfo(state);
return {
...lists,
selectedConversation,
...conversationInfo,
}
};

Write Preview
Loading…
Cancel
Save