diff --git a/js/modules/data.d.ts b/js/modules/data.d.ts index 29e42df98..90e991484 100644 --- a/js/modules/data.d.ts +++ b/js/modules/data.d.ts @@ -1,3 +1,5 @@ export function searchMessages(query: string): Promise>; export function searchConversations(query: string): Promise>; export function getPrimaryDeviceFor(pubKey: string): Promise; + +export function getMessagesByConversation(conversationId: string, destructurer: any): Promise>; diff --git a/js/modules/data.js b/js/modules/data.js index d3bdb7b19..263b5a125 100644 --- a/js/modules/data.js +++ b/js/modules/data.js @@ -769,10 +769,7 @@ async function updateConversation(id, data, { Conversation }) { if (!existing) { throw new Error(`Conversation ${id} does not exist!`); } - - console.log(`[vince][update] Updating conversation ${id}`); - console.log(`[vince][update] New data:`, data); - + const merged = _.merge({}, existing.attributes, data); // Merging is a really bad idea and not what we want here, e.g. diff --git a/preload.js b/preload.js index d701ff174..c16e6e5f3 100644 --- a/preload.js +++ b/preload.js @@ -70,6 +70,9 @@ window.CONSTANTS = { MAX_MESSAGE_BODY_LENGTH: 64 * 1024, // Limited due to the proof-of-work requirement SMALL_GROUP_SIZE_LIMIT: 10, + DEFAULT_MEDIA_FETCH_COUNT: 50, + DEFAULT_DOCUMENTS_FETCH_COUNT: 150, + DEFAULT_MESSAGE_FETCH_COUNT: 30, }; window.versionInfo = { diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 0405c29d7..1c02ad7e3 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -28,7 +28,6 @@ $composition-container-height: 60px; overflow-y: auto; scrollbar-width: 4px; padding: $session-margin-lg; - scroll-behavior: smooth; &__loading { position: absolute; diff --git a/ts/components/session/SessionConversation.tsx b/ts/components/session/SessionConversation.tsx index c0f72b172..384080ac6 100644 --- a/ts/components/session/SessionConversation.tsx +++ b/ts/components/session/SessionConversation.tsx @@ -5,16 +5,17 @@ import { SessionCompositionBox } from './SessionCompositionBox'; import { SessionProgress } from './SessionProgress' import { Message } from '../conversation/Message'; +import { TimerNotification } from '../conversation/TimerNotification'; + import { SessionSpinner } from './SessionSpinner'; import { SessionScrollButton } from './SessionScrollButton'; - - // interface Props { // getHeaderProps: any; // conversationKey: any; // } + interface State { sendingProgess: number; prevSendingProgess: number; @@ -33,13 +34,12 @@ export class SessionConversation extends React.Component { constructor(props: any) { super(props); const conversationKey = this.props.conversations.selectedConversation; - const messages = this.props.conversations.conversationLookup[conversationKey].messages; this.state = { sendingProgess: 0, prevSendingProgess: 0, conversationKey, - messages, + messages: [], doneInitialScroll: false, scrollPositionPc: 0, scrollPositionPx: 0, @@ -48,47 +48,29 @@ export class SessionConversation extends React.Component { this.scrollToUnread = this.scrollToUnread.bind(this); this.scrollToBottom = this.scrollToBottom.bind(this); + this.renderMessage = this.renderMessage.bind(this); + this.renderTimerNotification = this.renderTimerNotification.bind(this); + this.messagesEndRef = React.createRef(); } - public componentDidMount() { + public async componentWillMount() { + const { conversationKey } = this.state; + await this.getMessages(conversationKey); + setTimeout(() => { this.scrollToBottom(true); - }, 20); - - this.setState({ - doneInitialScroll: true, - }); - } + }, 0); + setTimeout(() => { + this.setState({ + doneInitialScroll: true, + }); + }, 100); - public componentWillUpdate () { - console.log(`[vince][update] State:`, this.state); - console.log(`[vince][update] Props:`, this.props); - } - public componentWillReceiveProps() { - const { conversationKey, messages } = this.state; - const conversation = this.props.conversations.conversationLookup[conversationKey]; - - // Check if another message came through - const shouldLoad = !messages.length || (conversation.lastUpdated > messages[messages.length - 1]?.received_at); - - console.log(`[vince][update] conversation:`, conversation); - console.log(`[vince][update] conversation.lastupdated: `, conversation.lastUpdated) - console.log(`[vince][update] last message received at: `, messages[messages.length - 1]?.received_at) - console.log(`[vince][update] Should Update: `, shouldLoad) - console.log(`[vince][update] called ComponentWillRevieceProps. Messages: `, this.state.messages) - - // if (conversationKey && shouldLoad){ - // this.setState({ - // messages: await window.getMessagesByKey(conversationKey, true) - // }); - // } - - // this.setState({ - // messages: this.props.conversations.conversationLookup[conversationKey]?.messsages, - // }); + public async componentWillReceiveProps() { + const { conversationKey } = this.state; } @@ -98,17 +80,18 @@ export class SessionConversation extends React.Component { // const headerProps = this.props.getHeaderProps; const { messages, conversationKey, doneInitialScroll } = this.state; - const loading = !doneInitialScroll + const loading = !doneInitialScroll || messages.length === 0; console.log(`[vince] Loading: `, loading); console.log(`[vince] My conversation key is: `, conversationKey); + console.log(`[vince][messages]`, messages); + // TMEPORARY SOLUTION TO GETTING CONVERSATION UNTIL // SessionConversationStack is created // Get conversation by Key (NOT cid) const conversation = this.props.conversations.conversationLookup[conversationKey] - const conversationType = conversation.type; return (
@@ -125,12 +108,12 @@ export class SessionConversation extends React.Component {
{ loading && (
- + {/* */}
)}
- {this.renderMessages(conversationKey, conversationType)} + {this.renderMessages(conversationKey)}
@@ -146,50 +129,31 @@ export class SessionConversation extends React.Component { ); } - public renderMessages(conversationKey: string, conversationType: 'group' | 'direct') { + public renderMessages() { const { messages } = this.state; - - console.log(`[vince][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 && ( - - )} - ) + const messageProps = message.propsForMessage; + const timerProps = message.propsForTimerNotification; + const attachmentProps = message.propsForAttachment; + const quoteProps = message.propsForQuote; + + console.log(`[vince][props] messageProps`, messageProps); + console.log(`[vince][props] timerProps`, timerProps); + console.log(`[vince][props] attachmentProps`, attachmentProps); + console.log(`[vince][props] quoteProps`, quoteProps); + + let item; + item = messageProps ? this.renderMessage(messageProps) : item; + item = timerProps ? this.renderTimerNotification(timerProps) : item; + item = attachmentProps ? this.renderMessage(timerProps) : item; + item = quoteProps ? this.renderMessage(timerProps) : item; + + return item; + }) } ); @@ -251,4 +215,54 @@ export class SessionConversation extends React.Component { { behavior: firstLoad ? 'auto' : 'smooth' } ); } + + public async getMessages(conversationKey: string, limit = window.CONSTANTS.DEFAULT_MESSAGE_FETCH_COUNT){ + const messageSet = await window.Signal.Data.getMessagesByConversation( + conversationKey, + { limit, MessageCollection: window.Whisper.MessageCollection }, + ); + + console.log(`[vince][messages] MessageSet!!!`, messageSet);32 + + const messages = messageSet.models; + this.setState({ messages }); + } + + public renderMessage(messageProps: any) { + return ( + + ); + } + + public renderTimerNotification(timerProps: any) { + return ( + + ); + } } + diff --git a/ts/components/session/SessionGroupSettings.tsx b/ts/components/session/SessionGroupSettings.tsx index 5882e05b1..2f71d53f0 100644 --- a/ts/components/session/SessionGroupSettings.tsx +++ b/ts/components/session/SessionGroupSettings.tsx @@ -72,20 +72,18 @@ export class SessionGroupSettings extends React.Component { public async getMediaGalleryProps() { // We fetch more documents than media as they don’t require to be loaded // into memory right away. Revisit this once we have infinite scrolling: - const DEFAULT_MEDIA_FETCH_COUNT = 50; - const DEFAULT_DOCUMENTS_FETCH_COUNT = 150; const conversationId = this.props.id; const rawMedia = await window.Signal.Data.getMessagesWithVisualMediaAttachments( conversationId, { - limit: DEFAULT_MEDIA_FETCH_COUNT, + limit: window.CONSTANTS.DEFAULT_MEDIA_FETCH_COUNT, MessageCollection: window.Whisper.MessageCollection, } ); const rawDocuments = await window.Signal.Data.getMessagesWithFileAttachments( conversationId, { - limit: DEFAULT_DOCUMENTS_FETCH_COUNT, + limit: window.CONSTANTS.DEFAULT_DOCUMENTS_FETCH_COUNT, MessageCollection: window.Whisper.MessageCollection, } ); diff --git a/ts/state/ducks/conversations.ts b/ts/state/ducks/conversations.ts index 0e95ef0b1..06ff8f458 100644 --- a/ts/state/ducks/conversations.ts +++ b/ts/state/ducks/conversations.ts @@ -62,7 +62,6 @@ export type ConversationLookupType = { export type ConversationsStateType = { conversationLookup: ConversationLookupType; - messageCollection: string; selectedConversation?: string; showArchived: boolean; }; @@ -239,7 +238,6 @@ function showArchivedConversations() { function getEmptyState(): ConversationsStateType { return { conversationLookup: {}, - messageCollection: 'stuff', showArchived: false, }; } @@ -293,17 +291,10 @@ export function reducer( } } - let lastMessage: any; - window.getLastMessageByKey(id).then((message: any) => lastMessage = message); - const messages = [...state.messageCollection].push(lastMessage); - - console.log(`[vince][update] Updated messages to `, messages); - return { ...state, selectedConversation, showArchived, - messageCollection: 'afgjvhbrgvkhbrg', conversationLookup: { ...conversationLookup, [id]: data, diff --git a/ts/state/ducks/messages.ts b/ts/state/ducks/messages.ts new file mode 100644 index 000000000..6b2ffb4fb --- /dev/null +++ b/ts/state/ducks/messages.ts @@ -0,0 +1,6 @@ + + +export const reducer = (state: any, action: any) => { + console.log(`[vince][redux] Action: `, action); + return state; +} \ No newline at end of file diff --git a/ts/state/ducks/search.ts b/ts/state/ducks/search.ts index f5e38b259..2afa6c1e4 100644 --- a/ts/state/ducks/search.ts +++ b/ts/state/ducks/search.ts @@ -37,7 +37,6 @@ export type SearchStateType = { }; // Actions - type SearchResultsPayloadType = { query: string; normalizedPhoneNumber?: string; @@ -158,6 +157,41 @@ const getMessageProps = (messages: Array) => { }); }; + +async function doGetMessages( + query: string, + options: SearchOptions +): Promise { + const { regionCode } = options; + + const [discussions, messages] = await Promise.all([ + queryConversationsAndContacts(query, options), + queryMessages(query), + ]); + const { conversations, contacts } = discussions; + const filteredMessages = messages.filter(message => message !== undefined); + + let messageSet = []; + if (filteredMessages && !filteredMessages.length) { + messageSet = filteredMessages.map(message => { + const model = getMessageModel(message); + return model.propsForMessage; + }); + } + + return { + query, + normalizedPhoneNumber: normalize(query, { regionCode }), + conversations, + contacts, + messages: messageSet, + }; +} + + + + + async function queryMessages(query: string) { try { const normalized = cleanSearchTerm(query); diff --git a/ts/state/reducer.ts b/ts/state/reducer.ts index 965c27937..056c69dc1 100644 --- a/ts/state/reducer.ts +++ b/ts/state/reducer.ts @@ -7,14 +7,20 @@ import { } from './ducks/conversations'; import { reducer as user, UserStateType } from './ducks/user'; + +import { reducer as messages } from './ducks/search'; + + export type StateType = { search: SearchStateType; + messages: any; conversations: ConversationsStateType; user: UserStateType; }; export const reducers = { search, + messages, conversations, user, }; diff --git a/ts/state/smart/SessionConversation.tsx b/ts/state/smart/SessionConversation.tsx index f00b90477..60b63ffc8 100644 --- a/ts/state/smart/SessionConversation.tsx +++ b/ts/state/smart/SessionConversation.tsx @@ -3,7 +3,15 @@ import { mapDispatchToProps } from '../actions'; import { SessionConversation } from '../../components/session/SessionConversation'; import { StateType } from '../reducer'; -import { getSessionConversationInfo } from '../selectors/conversations'; +import { getQuery, getSearchResults, isSearching } from '../selectors/search'; +import { + getIntl, + getIsSecondaryDevice, + getRegionCode, + getUserNumber, +} from '../selectors/user'; + + const mapStateToProps = (state: StateType) => { //const conversationInfo = getSessionConversationInfo(state);