add socket.io back, cleanup
Change-Id: I74e043268c23fb45371f1e397ca2931ca177afc3
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index 94947ca..b2fca5e 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,13 +1,21 @@
import Message from './Message'
-import React from 'react'
+import React, { useEffect } from 'react'
import { Box, Divider, Typography } from '@material-ui/core'
import ConversationAvatar from './ConversationAvatar'
+const reverseMap = (arr, f) => arr.map((_, idx, arr) => f(arr[arr.length - 1 - idx ]));
export default function MessageList(props) {
const displayName = props.conversation.getDisplayName()
+ const messages = props.conversation.getMessages()
+ console.log("MessageList render " + messages.length)
+
+ useEffect(() => {
+ props.loadMore()
+ }, [props.conversation.getId()])
+
return (
- <div className="message-list">
- <Box>
+ <React.Fragment>
+ <Box className="conversation-header">
<Box style={{ display: 'inline-block', margin: 16, verticalAlign: 'middle' }}>
<ConversationAvatar displayName={props.conversation.getDisplayNameNoFallback()} />
</Box>
@@ -15,11 +23,13 @@
<Typography variant="h6">{displayName}</Typography>
<Typography variant="subtitle1">{props.conversation.getId()}</Typography>
</Box>
+ <Divider orientation="horizontal" />
</Box>
- <Divider orientation="horizontal" />
- {props.messages.map((message, index) =>
- <Message key={index} username={message.senderId} text={message.body} />
- )}
- </div>
+ <div className="message-list">
+ <div className="message-list-inner">
+ {reverseMap(messages, (message) => <Message key={message.id} message={message} />)}
+ </div>
+ </div>
+ </React.Fragment>
)
}
\ No newline at end of file