commit bef18a53d0f65880cc613d41c5e4f0c51ad6c89c
author idillon <io.daza-dillon@savoirfairelinux.com> Thu Sep 01 01:51:40 2022 -0400
committer idillon <io.daza-dillon@savoirfairelinux.com> Fri Sep 16 17:14:08 2022 -0400
tree 133e750331ab0f88a8f936b3d8f5a7217db3900b
parent 24fe8d814cc409c7151cbfe0d298660a288e1548

set styles for messages

Change-Id: I8b86255a55a745a305f953f77122a98970de0958

client/src/components/ConversationView.js

diff --git a/client/src/components/ConversationView.js b/client/src/components/ConversationView.js
index d0ab227..075e96a 100644
--- a/client/src/components/ConversationView.js
+++ b/client/src/components/ConversationView.js
@@ -5,9 +5,11 @@
 import Conversation from '../../../model/Conversation';
 import LoadingPage from './loading';
 import io from "socket.io-client";
+import { Box, Stack, Typography } from '@mui/material';
+import ConversationAvatar from './ConversationAvatar';
 
 const ConversationView = props => {
-  const [loadingMesages, setLoadingMesages] = useState(false)
+  const [loadingMessages, setLoadingMessages] = useState(false)
   const [socket, setSocket] = useState(undefined)
   const [state, setState] = useState({
     loaded: false,
@@ -65,7 +67,7 @@
   }, [state.conversation ? state.conversation.getId() : "", socket])
 
   useEffect(() => {
-    if (!loadingMesages || !state.conversation)
+    if (!loadingMessages || !state.conversation)
       return
     console.log(`Load more messages`)
     const controller = new AbortController()
@@ -73,7 +75,7 @@
       .then(res => res.json())
       .then(messages => {
         console.log(messages)
-        setLoadingMesages(false)
+        setLoadingMessages(false)
         setState(state => {
           if (state.conversation)
             state.conversation.addLoadedMessages(messages)
@@ -81,7 +83,7 @@
           })
       }).catch(e => console.log(e))
       return () => controller.abort()
-  }, [state, loadingMesages])
+  }, [state, loadingMessages])
 
   const sendMessage = (message) => {
     authManager.fetch(`/api/accounts/${props.accountId}/conversations/${props.conversationId}`, {
@@ -98,12 +100,35 @@
       return <LoadingPage />
   } else if (state.error === true) {
       return <div>Error loding {props.conversationId}</div>
-  } else {
-  return <div className="messenger">
-      <MessageList conversation={state.conversation} loading={loadingMesages} loadMore={() => setLoadingMesages(true)} messages={state.conversation.getMessages()} />
-      <SendMessageForm onSend={sendMessage} />
-    </div>
   }
+
+  return (
+    <Stack
+      flexGrow={1}
+      height="100%"
+    >
+      <Stack direction="row" flexGrow={0}>
+        <Box style={{ margin: 16, flexShrink: 0 }}>
+          <ConversationAvatar displayName={state.conversation.getDisplayNameNoFallback()} />
+        </Box>
+        <Box style={{ flex: "1 1 auto", overflow: 'hidden' }}>
+          <Typography className="title" variant="h6">{state.conversation.getDisplayName()}</Typography>
+          <Typography className="subtitle" variant="subtitle1" >{state.conversation.getId()}</Typography>
+        </Box>
+      </Stack>
+      <Stack flexGrow={1} overflow="auto">
+        <MessageList
+          conversationId={state.conversation.getId()}
+          loading={loadingMessages} 
+          loadMore={() => setLoadingMessages(true)}
+          messages={state.conversation.getMessages()}
+        />
+      </Stack>
+      <Stack flexGrow={0}>
+        <SendMessageForm onSend={sendMessage} />
+      </Stack>
+    </Stack>
+  )
 }
 
 export default ConversationView
\ No newline at end of file