Loading messages by id
This commit is contained in:
Vincent
parent
ea4dc05009
commit
57b20d2f1a
|
|
@ -18,7 +18,16 @@ $composition-container-height: 60px;
|
|||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: 4px;
|
||||
padding: $session-margin-lg;
|
||||
|
||||
&__loading {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.composition-container {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { SessionCompositionBox } from './SessionCompositionBox';
|
|||
import { SessionProgress } from './SessionProgress'
|
||||
|
||||
import { Message } from '../conversation/Message';
|
||||
|
||||
import { SessionSpinner } from './SessionSpinner';
|
||||
|
||||
|
||||
interface Props {
|
||||
|
|
@ -16,8 +16,7 @@ interface Props {
|
|||
interface State {
|
||||
sendingProgess: number;
|
||||
prevSendingProgess: number;
|
||||
loadingMessages: boolean;
|
||||
messages: any;
|
||||
messages: Array<any>;
|
||||
}
|
||||
|
||||
export class SessionConversation extends React.Component<Props, State> {
|
||||
|
|
@ -26,8 +25,7 @@ export class SessionConversation extends React.Component<Props, State> {
|
|||
this.state = {
|
||||
sendingProgess: 0,
|
||||
prevSendingProgess: 0,
|
||||
loadingMessages: false,
|
||||
messages: {},
|
||||
messages: [],
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -36,19 +34,21 @@ export class SessionConversation extends React.Component<Props, State> {
|
|||
|
||||
this.setState({
|
||||
messages: await window.getMessagesByKey(conversationKey)
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
// 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);
|
||||
|
||||
|
|
@ -66,9 +66,17 @@ export class SessionConversation extends React.Component<Props, State> {
|
|||
|
||||
|
||||
<div className="messages-container">
|
||||
{this.renderMessages(conversationKey)}
|
||||
|
||||
{ loadingMessages ? (
|
||||
<div className="messages-container__loading">
|
||||
<SessionSpinner/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{this.renderMessages(conversationKey, conversationType)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<SessionCompositionBox
|
||||
onSendMessage={() => null}
|
||||
|
|
@ -77,96 +85,50 @@ export class SessionConversation extends React.Component<Props, State> {
|
|||
);
|
||||
}
|
||||
|
||||
public renderMessages(conversationKey: string ) {
|
||||
public renderMessages(conversationKey: string, conversationType: 'group' | 'direct') {
|
||||
const { messages } = this.state;
|
||||
|
||||
// FIXME PAY ATTENTION; ONLY RENDER MESSAGES THAT ARE VISIBLE
|
||||
const messagesLength = messages.length;
|
||||
|
||||
console.log(`Messages`, messages);
|
||||
|
||||
let messageList = [];
|
||||
// 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;
|
||||
|
||||
messages?.keys.map(key => {
|
||||
const message = messages[key];
|
||||
return (<>THIS IS A MESSAGE</>)
|
||||
});
|
||||
console.log(messages);
|
||||
|
||||
return messages;
|
||||
// FIXME PAY ATTENTION; ONLY RENDER MESSAGES THAT ARE VISIBLE
|
||||
return (
|
||||
<>{
|
||||
messages.map((message: any) => (
|
||||
<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}
|
||||
/>
|
||||
))
|
||||
}</>
|
||||
);
|
||||
|
||||
// for(let i = messagesLength - 1; i > 0; i--){
|
||||
// messageList.push({
|
||||
// isDeletable: true,
|
||||
// text: 'fdgdfg',
|
||||
// direction: 'incoming',
|
||||
// timestamp: '1581565995228',
|
||||
// i18n: window.i18n,
|
||||
// authorPhoneNumber: messages[i].source,
|
||||
// conversationType: 'direct',
|
||||
// previews: [],
|
||||
// isExpired: false,
|
||||
// convoId: messages[i].conversationId,
|
||||
// selected: false,
|
||||
// multiSelectMode: false,
|
||||
// onSelectMessage: () => null,
|
||||
// onSelectMessageUnchecked: () => null,
|
||||
// onShowDetail : () => null,
|
||||
// onShowUserDetails: () => null,
|
||||
// });
|
||||
// }
|
||||
|
||||
// console.log(`[vince] MessageList: `, messageList);
|
||||
|
||||
// return messages && (
|
||||
// <Message
|
||||
// isDeletable = {false}
|
||||
// text = {messages[0].body}
|
||||
// direction = {'incoming'}
|
||||
// timestamp = {1581565995228}
|
||||
// i18n = {window.i18n}
|
||||
// authorPhoneNumber = {messages[0].source}
|
||||
// conversationType = {'direct'}
|
||||
// previews = {[]}
|
||||
// isExpired = {false}
|
||||
// convoId = {messages[0].conversationId}
|
||||
// selected = {false}
|
||||
// multiSelectMode = {false}
|
||||
// onSelectMessage = {() => null}
|
||||
// onSelectMessageUnchecked = {() => null}
|
||||
// onShowDetail = {() => null}
|
||||
// onShowUserDetails = {() => null}
|
||||
// />
|
||||
// )
|
||||
|
||||
// return (
|
||||
// <>
|
||||
// {
|
||||
// messageList.map(message => {
|
||||
// return (
|
||||
// <Message
|
||||
// isDeletable = {message.isDeletable}
|
||||
// text = {message.text}
|
||||
// direction = {'incoming'}
|
||||
// timestamp = {1581565995228}
|
||||
// i18n = {message.i18n}
|
||||
// authorPhoneNumber = {message.authorPhoneNumber}
|
||||
// conversationType = {'direct'}
|
||||
// previews = {message.previews}
|
||||
// isExpired = {message.isExpired}
|
||||
// convoId = {message.convoId}
|
||||
// selected = {message.selected}
|
||||
// multiSelectMode = {message.multiSelectMode}
|
||||
// onSelectMessage = {message.onSelectMessage}
|
||||
// onSelectMessageUnchecked = {message.onSelectMessageUnchecked}
|
||||
// onShowDetail = {message.onShowDetail}
|
||||
// onShowUserDetails = {message.onShowUserDetails}
|
||||
// />
|
||||
// )}
|
||||
// );
|
||||
// }
|
||||
// </>
|
||||
// );
|
||||
}
|
||||
|
||||
public renderHeader(conversation: any) {
|
||||
|
|
@ -215,4 +177,12 @@ export class SessionConversation extends React.Component<Props, State> {
|
|||
/>
|
||||
);
|
||||
}
|
||||
|
||||
public scrollToUnread() {
|
||||
|
||||
}
|
||||
|
||||
public scrollToBottom() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10537,10 +10537,10 @@ typedarray@^0.0.6:
|
|||
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
|
||||
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
|
||||
|
||||
typescript@3.3.3333:
|
||||
version "3.3.3333"
|
||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.3333.tgz#171b2c5af66c59e9431199117a3bcadc66fdcfd6"
|
||||
integrity sha512-JjSKsAfuHBE/fB2oZ8NxtRTk5iGcg6hkYXMnZ3Wc+b2RSqejEqTaem11mHASMnFilHrax3sLK0GDzcJrekZYLw==
|
||||
typescript@^3.7:
|
||||
version "3.7.5"
|
||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae"
|
||||
integrity sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==
|
||||
|
||||
uc.micro@^1.0.1:
|
||||
version "1.0.6"
|
||||
|
|
|
|||
Loading…
Reference in New Issue