set styles for messages
Change-Id: I8b86255a55a745a305f953f77122a98970de0958
diff --git a/client/src/components/Message.js b/client/src/components/Message.js
index 7cfbbdc..b86c43f 100644
--- a/client/src/components/Message.js
+++ b/client/src/components/Message.js
@@ -1,27 +1,236 @@
-import { Typography } from '@mui/material'
-import { GroupOutlined } from '@mui/icons-material'
-import React from 'react'
-import ConversationAvatar from './ConversationAvatar'
+import { Box, Chip, Divider, Stack, Typography } from "@mui/material"
+import dayjs from "dayjs"
+import isToday from "dayjs/plugin/isToday"
+import isYesterday from "dayjs/plugin/isYesterday"
+import React from "react"
-function Message(props) {
- const message = props.message
- if (message.type == 'text/plain')
- return (<div className="message">
- <div className="message-avatar">
- <ConversationAvatar name={message.author} /></div>
- <Typography className="message-text">{message.body}</Typography>
- </div>)
- else if (message.type == 'contact')
- return (<div className="contact-event">
- <Typography className="message-text">Contact event</Typography>
- </div>)
- else if (message.type == 'initial')
- return (<div className="conversation-event">
- <Typography variant="h6" className="message-text" color="textSecondary">
- <div className="inline-avatar"><GroupOutlined color="action" style={{ fontSize: 32 }} /></div>Conversation created
- </Typography>
- </div>)
- else return ''
+dayjs.extend(isToday)
+dayjs.extend(isYesterday)
+
+export const MessageCall = (props) => {
+ return (
+ <Stack
+ alignItems="center"
+ >
+ "Appel"
+ </Stack>
+ )
}
-export default Message
\ No newline at end of file
+export const MessageInitial = (props) => {
+ return (
+ <Stack
+ alignItems="center"
+ >
+ "Le Swarm a été créé"
+ </Stack>
+ )
+}
+
+export const MessageDataTransfer = (props) => {
+ return (
+ <MessageBubble
+ backgroundColor={"#E5E5E5"}
+ position={props.position}
+ isFirstOfGroup={props.isFirstOfGroup}
+ isLastOfGroup={props.isLastOfGroup}
+ >
+ "data-transfer"
+ </MessageBubble>
+ )
+}
+
+export const MessageMember = (props) => {
+ return (
+ <Stack
+ alignItems="center"
+ >
+ <Chip
+ sx={{
+ width: "fit-content",
+ }}
+ label={`${props.message.author} s'est joint`}
+ />
+ </Stack>
+ )
+}
+
+export const MessageMerge = (props) => {
+ return (
+ <Stack
+ alignItems="center"
+ >
+ "merge"
+ </Stack>
+ )
+}
+
+export const MessageText = (props) => {
+ return (
+ <MessageBubble
+ backgroundColor={props.bubbleColor}
+ position={props.position}
+ isFirstOfGroup={props.isFirstOfGroup}
+ isLastOfGroup={props.isLastOfGroup}
+ >
+ <Typography variant="body1" color={props.textColor}>
+ {props.message.body}
+ </Typography>
+ </MessageBubble>
+ )
+}
+
+export const MessageDate = ({time}) => {
+ let textDate
+
+ if (time.isToday()) {
+ textDate = "Today"
+ }
+ else if (time.isYesterday()) {
+ textDate = "Yesterday"
+ }
+ else {
+ const date = time.date().toString().padStart(2,'0')
+ const month = (time.month()+1).toString().padStart(2,'0')
+ textDate = `${date}/${month}/${time.year()}`
+ }
+
+ return (
+ <Box marginTop="30px">
+ <Divider>
+ {textDate}
+ </Divider>
+ </Box>
+ )
+}
+
+export const MessageTime = ({time, hasDateOnTop}) => {
+ const hour = time.hour().toString().padStart(2,'0')
+ const minute = time.minute().toString().padStart(2,'0')
+ const textTime = `${hour}:${minute}`
+
+ return (
+ <Stack
+ direction="row"
+ justifyContent="center"
+ margin="30px"
+ marginTop={hasDateOnTop ? "20px" : "30px"}
+ >
+ <Typography
+ variant="caption"
+ color="#A7A7A7"
+ fontWeight={700}
+ >
+ {textTime}
+ </Typography>
+ </Stack>
+ )
+}
+
+export const MessageBubblesGroup = (props) => {
+
+ const isUser = true // should access user from the store
+ const position = isUser ? "end" : "start"
+ const bubbleColor = isUser ? "#005699" : "#E5E5E5"
+ const textColor = isUser ? "white" : "black"
+
+ return (
+ <Stack // Container for an entire row with a single group of bubbles
+ direction="row"
+ justifyContent={position}
+ >
+ <Stack // Container for a group of bubbles with the partipants informations
+ width="66.66%"
+ paddingTop="30px"
+ alignItems={position}
+ >
+ <ParticipantName
+ name={props.messages[0]?.author}
+ position={position}
+ />
+ <Stack // Container for the bubbles alone
+ spacing="6px"
+ alignItems={position}
+ direction="column-reverse"
+ >
+ {props.messages.map(
+ (message, index) => {
+ let Component
+ switch (message.type) {
+ case "text/plain":
+ Component = MessageText
+ break
+ case "application/data-transfer+json":
+ Component = MessageDataTransfer
+ break
+ }
+ return (
+ <Component // Container for a single bubble
+ key={message.id}
+ message={message}
+ textColor={textColor}
+ position={position}
+ bubbleColor={bubbleColor}
+ isFirstOfGroup={index == props.messages.length-1}
+ isLastOfGroup={index == 0}
+ />
+ )
+ }
+ )}
+ </Stack>
+ </Stack>
+ </Stack>
+ )
+}
+
+const MessageBubble = (props) => {
+ const largeRadius = "20px"
+ const smallRadius = "5px"
+ const radius = React.useMemo(() => {
+ if (props.position == "start") {
+ return {
+ borderStartStartRadius: props.isFirstOfGroup ? largeRadius : smallRadius,
+ borderStartEndRadius: largeRadius,
+ borderEndStartRadius: props.isLastOfGroup ? largeRadius : smallRadius,
+ borderEndEndRadius: largeRadius,
+ }
+ }
+ return {
+ borderStartStartRadius: largeRadius,
+ borderStartEndRadius: props.isFirstOfGroup ? largeRadius : smallRadius,
+ borderEndStartRadius: largeRadius,
+ borderEndEndRadius: props.isLastOfGroup ? largeRadius : smallRadius,
+ }
+ }, [props.isFirstOfGroup, props.isLastOfGroup, props.position])
+
+ return (
+ <Box
+ sx={{
+ width: "fit-content",
+ backgroundColor: props.backgroundColor,
+ padding: "16px",
+ ...radius,
+ }}
+ >
+ {props.children}
+ </Box>
+ )
+}
+
+const ParticipantName = (props) => {
+ return (
+ <Box
+ marginBottom="6px"
+ marginLeft="16px"
+ marginRight="16px"
+ >
+ <Typography
+ variant="caption"
+ color="#A7A7A7"
+ fontWeight={700}
+ >
+ {props.name}
+ </Typography>
+ </Box>
+ )
+}
\ No newline at end of file