120 lines
4.1 KiB
JavaScript
120 lines
4.1 KiB
JavaScript
import React, { Fragment } from 'react'
|
|
import { useSelector } from 'react-redux'
|
|
import { Typography } from '@material-ui/core';
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
import VideoVimeo from './VideoVimeo'
|
|
import ChatCardMessage from './ChatCardMessage'
|
|
import _ from "lodash"
|
|
import Ar from "lodash/array"
|
|
import {TextField, Button, Grid, Hidden} from '@material-ui/core';
|
|
import ButtonBase from '@material-ui/core/ButtonBase';
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
card: {
|
|
width: '100%',
|
|
},
|
|
userMessage: {
|
|
display: 'flex',
|
|
alignItems: 'flex-end',
|
|
},
|
|
messageSender: {
|
|
fontSize: '0.9em',
|
|
fontWeight: '300',
|
|
color: theme.palette.primary.important,
|
|
},
|
|
messageContent: {
|
|
fontWeight: '300',
|
|
color: theme.palette.secondary.main,
|
|
},
|
|
messageDate: {
|
|
fontSize: '0.8em',
|
|
fontWeight: '300',
|
|
color: theme.palette.primary.dark,
|
|
padding: theme.spacing(2,0),
|
|
},
|
|
currentUserBubble: {
|
|
|
|
alignSelf: 'flex-end',
|
|
},
|
|
currentMessageSender: {
|
|
color: theme.palette.primary.important,
|
|
},
|
|
otherUserBubble: {
|
|
|
|
alignSelf: 'flex-start',
|
|
},
|
|
otherMessageSender: {
|
|
color: theme.palette.primary.main,
|
|
},
|
|
avatar: {
|
|
width: '2.5em',
|
|
borderRadius: '50%',
|
|
margin: theme.spacing(0,1),
|
|
},
|
|
videoVimeo: {
|
|
[theme.breakpoints.up('md')]: {
|
|
paddingBottom: '55%',
|
|
},
|
|
|
|
},
|
|
cartoucheChat: {
|
|
// display: 'flex',
|
|
padding: theme.spacing(2) + 'px 18vw'
|
|
}
|
|
,
|
|
grille: {
|
|
paddingTop: theme.spacing(4),
|
|
paddingBottom: theme.spacing(4),
|
|
paddingLeft : theme.spacing(4),
|
|
marginBottom: "30px",
|
|
|
|
borderRadius: "5px",
|
|
border: "1px solid #1E2327",
|
|
color: theme.palette.primary.dark
|
|
},
|
|
}));
|
|
|
|
export default function ChatCard(props) {
|
|
const classes = useStyles();
|
|
const userFirstName = useSelector(state => state.user.firstname);
|
|
const userLastName = useSelector(state => state.user.lastname);
|
|
const userPicture = useSelector(state => state.user.picture);
|
|
const bubbleClass = (userFirstName === props.message.sender.firstname && userLastName === props.message.sender.lastname) ? classes.currentUserBubble : classes.otherUserBubble
|
|
const messageSenderClass = (userFirstName === props.message.sender.firstname && userLastName === props.message.sender.lastname) ? classes.currentMessageSender : classes.otherMessageSender
|
|
const bubbleSide = (userFirstName === props.message.sender.firstname && userLastName === props.message.sender.lastname) ? 'right' : 'left'
|
|
// const logoUrl = (props.answer.ad
|
|
// ? (props.answer.ad.company.logo
|
|
// ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + this.props.answer.ad.company.logo
|
|
// : publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg")
|
|
// : "")
|
|
const logoUrl = ""
|
|
|
|
return (
|
|
<section className={classes.grille}>
|
|
|
|
<ChatCardMessage side={bubbleSide} firstname={props.message.sender.firstname} lastname={props.message.sender.lastname} picture={userPicture}
|
|
video={
|
|
(props.message.video)
|
|
? true :
|
|
false}
|
|
message={
|
|
(props.message.video)
|
|
? (<VideoVimeo classesOverride={ classes.videoVimeo } videoId={Ar.last(_.split(props.message.video.cdn_url, '/'))} />)
|
|
: ""}
|
|
messageTexte = {props.message.content}
|
|
messageSenderClass={messageSenderClass} bubbleClass={bubbleClass}
|
|
envoyeLe={(new Date(props.message.c_time)).toLocaleDateString("fr-FR")}
|
|
envoyeA ={(new Date(props.message.c_time)).toLocaleTimeString("fr-FR")}/>
|
|
|
|
<Typography
|
|
className={classes.messageDate}
|
|
align="center"
|
|
>
|
|
{/* Envoyé le {(new Date(props.message.c_time)).toLocaleDateString("fr-FR")} à {(new Date(props.message.c_time)).toLocaleTimeString("fr-FR")} */}
|
|
</Typography>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
|