150 lines
4.3 KiB
JavaScript
150 lines
4.3 KiB
JavaScript
import React, { Fragment, useState, useCallback } from 'react';
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
|
|
import _ from "lodash"
|
|
import ChatCard from '../atoms/ChatCard'
|
|
import TextField from '@material-ui/core/TextField';
|
|
import { Button } from '@material-ui/core';
|
|
import IconAdd from '@material-ui/icons/Add';
|
|
import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
|
|
import { useDispatch } from 'react-redux';
|
|
import { useSelector } from 'react-redux'
|
|
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
card: {
|
|
width: '100%',
|
|
},
|
|
wrapper: {
|
|
minHeight: '100%',
|
|
},
|
|
contain: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
[theme.breakpoints.up('md')]: {
|
|
padding: '2vh 18vw',
|
|
},
|
|
},
|
|
push: {
|
|
height: '50px'
|
|
},
|
|
foot: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
[theme.breakpoints.up('md')]: {
|
|
padding: '2vh 18vw',
|
|
},
|
|
},
|
|
chat: {
|
|
|
|
},
|
|
filterForm: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
backgroundColor: theme.palette.input.main,
|
|
padding: theme.spacing(1),
|
|
width: '100%',
|
|
[theme.breakpoints.up('md')]: {
|
|
padding: theme.spacing(3),
|
|
},
|
|
},
|
|
button: {
|
|
backgroundColor: 'inherit',
|
|
borderRadius: '0',
|
|
'& svg': {
|
|
fontSize: '1.5rem',
|
|
[theme.breakpoints.up('sm')]: {
|
|
fontSize: '2rem',
|
|
},
|
|
}
|
|
},
|
|
icon: {
|
|
color: theme.palette.secondary.main,
|
|
background: theme.palette.primary.important,
|
|
padding: theme.spacing(1),
|
|
borderRadius: '50%',
|
|
},
|
|
video: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '11vh',
|
|
},
|
|
title: {
|
|
fontSize: '1em',
|
|
fontWeight: '500',
|
|
},
|
|
titleBorder: {
|
|
'&:after': {
|
|
content: '""',
|
|
width: '15px',
|
|
borderBottom: 'solid 2px',
|
|
borderColor: theme.palette.primary.main + '!important',
|
|
display: 'flex',
|
|
},
|
|
},
|
|
}));
|
|
|
|
|
|
function Chat(props) {
|
|
const classes = useStyles();
|
|
const [text, setText] = useState("");
|
|
const dispatch = useDispatch()
|
|
|
|
const messages = useSelector(state => state.answer.messages);
|
|
const loadingMessage = useSelector(state => state.answer.loadingMessage);
|
|
|
|
const sendMessage = useCallback(
|
|
(message) => dispatch({ type: 'POST_MESSAGE_ANSWER_REQUEST', payload: { answerId: props.answerId, message: message } }),
|
|
[dispatch]
|
|
)
|
|
|
|
const postMessage = () => {
|
|
sendMessage(text);
|
|
setText('');
|
|
}
|
|
|
|
return (
|
|
<Fragment>
|
|
<div className={classes.wrapper}>
|
|
<div className={classes.contain}>
|
|
{
|
|
_.orderBy(messages, ['c_time'], ['asc']).map((message, index) => {
|
|
return <ChatCard message={message} key={index}></ChatCard>
|
|
})
|
|
}
|
|
|
|
</div>
|
|
</div>
|
|
<div id="F" className={classes.foot}>
|
|
<div className={classes.filterForm}>
|
|
<TextField
|
|
fullWidth
|
|
multiline
|
|
rows={isWidthUp('md', props.width) ? 8 : 1}
|
|
id="standard-search"
|
|
name="chattext"
|
|
value={text}
|
|
onChange={(e) => setText(e.target.value)}
|
|
placeholder={"Message"}
|
|
className={classes.textField}
|
|
InputLabelProps={{
|
|
shrink: true,
|
|
}}
|
|
/>
|
|
<Button onClick={()=>postMessage()}
|
|
disabled={loadingMessage}
|
|
variant="contained"
|
|
className={classes.button}>
|
|
<ArrowUpwardIcon className={classes.icon}/>
|
|
</Button >
|
|
</div>
|
|
</div>
|
|
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
export default withWidth()(Chat) |