From bb0279983d9dd424e6f2056108279ad80bc5cf5f Mon Sep 17 00:00:00 2001 From: Vincent Date: Fri, 21 Feb 2020 16:14:36 +1100 Subject: [PATCH] Partially rendered message success and root store manipulation --- js/views/inbox_view.js | 8 +- ts/components/session/SessionConversation.tsx | 338 +++++++++--------- ts/global.d.ts | 1 + ts/state/ducks/conversations.ts | 2 +- ts/state/selectors/conversations.ts | 32 +- ts/state/smart/SessionConversation.tsx | 10 +- 6 files changed, 209 insertions(+), 182 deletions(-) diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js index 4f8b1dd3e..ff7ddd070 100644 --- a/js/views/inbox_view.js +++ b/js/views/inbox_view.js @@ -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; diff --git a/ts/components/session/SessionConversation.tsx b/ts/components/session/SessionConversation.tsx index 77460fbfc..95eb16ea8 100644 --- a/ts/components/session/SessionConversation.tsx +++ b/ts/components/session/SessionConversation.tsx @@ -13,186 +13,184 @@ import { SessionSpinner } from './SessionSpinner'; // conversationKey: any; // } -// interface State { -// sendingProgess: number; -// prevSendingProgess: number; -// messages: Array; -// } +interface State { + sendingProgess: number; + prevSendingProgess: number; + conversationKey: string; + messages: Array; +} -export class SessionConversation extends React.Component { +export class SessionConversation extends React.Component { 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 ( - //
- //
- // {this.renderHeader(conversation)} - //
- - // - - //
- // { loadingMessages ? ( - //
- // - //
- // ) : ( - // <> - // {/*this.renderMessages(conversationKey, conversationType)*/} - // {this.props.conversations[0].lastMessage} - // - // )} - //
+ + // 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 ( +
+
+ {this.renderHeader(conversation)} +
+ + + +
+ { loadingMessages ? ( +
+ +
+ ) : ( + <> + {this.renderMessages(conversationKey, conversationType)} + + )} +
- // null} - // /> - //
- // ); + null} + /> +
+ ); + } + + 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 && ( + + )} + ) + } + ); + + } + + 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? - - ) + 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 && ( - // - // )} - // ) - // } - // ); - - // } - -// public renderHeader(conversation: any) { -// return ( -// 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() { + + } } diff --git a/ts/global.d.ts b/ts/global.d.ts index bf6aade1d..67fdb4cce 100644 --- a/ts/global.d.ts +++ b/ts/global.d.ts @@ -5,6 +5,7 @@ interface Window { renderConversationView: any; Events: any; + inboxStore: any; Lodash: any; deleteAllData: any; clearLocalData: any; diff --git a/ts/state/ducks/conversations.ts b/ts/state/ducks/conversations.ts index 06ff8f458..9f32c9580 100644 --- a/ts/state/ducks/conversations.ts +++ b/ts/state/ducks/conversations.ts @@ -247,7 +247,7 @@ export function reducer( action: ConversationActionType ): ConversationsStateType { if (!state) { - return getEmptyState(); + return getEmptyState();\ } if (action.type === 'CONVERSATION_ADDED') { diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index 958929e8a..7e11de103 100644 --- a/ts/state/selectors/conversations.ts +++ b/ts/state/selectors/conversations.ts @@ -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( diff --git a/ts/state/smart/SessionConversation.tsx b/ts/state/smart/SessionConversation.tsx index 58f11e711..fcc897b6b 100644 --- a/ts/state/smart/SessionConversation.tsx +++ b/ts/state/smart/SessionConversation.tsx @@ -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, } };