import React, { Component } from 'react'; import Message from './Message/Message'; import ChatInputs from './ChatInputs/ChatInput'; import ChatSuggest from './ChatSuggest/ChatSuggest'; import { RecordState } from 'audio-react-recorder'; import ReactPlayer from 'react-player'; import ReactAudioPlayer from 'react-audio-player'; import { ToastContainer } from 'react-toastify'; import './Body.scss'; import { list, send, sendKeys } from '../../../Redux/actions/message'; import { info, bio } from '../../../Redux/actions/chat'; import { connect } from 'react-redux'; class Body extends Component { constructor(props) { super(props); this.state = { id: window.location.href.split('/').pop() * 1, data: {}, message: '', voice: null, file: null, image: null, video: null, music: null, document: null, footer: 'suggest', suggest: [ [ { id: 0, text: 'سلام' }, { id: 0, text: 'سلام' }, ], [{ id: 1, text: 'وقت بخیر' }], [{ id: 2, text: 'لطفا بامن تماس بگیر' }], [{ id: 3, text: 'متشکرم' }], ], }; } start = () => { this.setState({ voice: RecordState.START, }); }; stop = () => { this.setState({ voice: RecordState.STOP, }); }; //audioData contains blob and blobUrl onStop = (audioData) => { this.setState({ voice: audioData, }); this.sendVoice(audioData); }; cancel = () => { this.setState({ voice: null, }); }; typeText = (e) => { this.setState({ message: e.target.value, }); }; addFile = async (e) => { if ( e.target.files[0].type === 'image/apng' || e.target.files[0].type === 'image/avif' || e.target.files[0].type === 'image/gif' || e.target.files[0].type === 'image/jpeg' || e.target.files[0].type === 'image/png' || e.target.files[0].type === 'image/svg+xml' || e.target.files[0].type === 'image/webp' ) { this.setState({ image: URL.createObjectURL(e.target.files[0]), file: 'fill', video: null, document: null, music: null, }); } else if ( e.target.files[0].type === 'video/3gpp' || e.target.files[0].type === 'video/mpeg' || e.target.files[0].type === 'video/mp4' || e.target.files[0].type === 'video/ogg' || e.target.files[0].type === 'video/quicktime' || e.target.files[0].type === 'video/webm' ) { this.setState({ image: null, file: 'fill', video: URL.createObjectURL(e.target.files[0]), document: null, music: null, }); } else if ( e.target.files[0].type === 'audio/3gpp' || e.target.files[0].type === 'audio/aac' || e.target.files[0].type === 'audio/flac' || e.target.files[0].type === 'audio/mpeg' || e.target.files[0].type === 'audio/mp3' || e.target.files[0].type === 'audio/mp4' || e.target.files[0].type === 'audio/ogg' || e.target.files[0].type === 'audio/wav' || e.target.files[0].type === 'audio/webm' ) { this.setState({ image: null, file: 'fill', video: null, document: null, music: URL.createObjectURL(e.target.files[0]), }); } else { this.setState({ image: null, file: 'fill', video: null, music: null, document: { data: URL.createObjectURL(e.target.files[0]), name: e.target.files[0].name }, }); } }; sendMessage = () => { console.log(1); if (this.state.file !== null) { this.sendFile(); return; } else { console.log(2); let now = new Date(); this.setState((prevState) => ({ data: { ...prevState.data, messages: [ ...prevState.data.messages, { id: 'm12', type: 'normal', text: prevState.message, voice: null, image: null, file: null, video: null, music: null, document: null, createdAt: now.toString(), user: { id: 'u1', name: 'علی', }, }, ], }, })); this.setState({ message: '', }); } }; sendVoice = (audioData) => { let now = new Date(); this.setState((prevState) => ({ data: { ...prevState.data, messages: [ ...prevState.data.messages, { id: 'm9', text: null, type: 'normal', voice: audioData, createdAt: now.toString(), image: null, video: null, document: null, music: null, user: { id: 'u1', name: 'علی', }, }, ], }, })); this.setState({ voice: null, }); }; sendFile = () => { const { image, video, music, document } = this.state; let now = new Date(); if (image !== null) { this.setState((prevState) => ({ data: { ...prevState.data, messages: [ ...prevState.data.messages, { id: 'm8', type: 'normal', text: prevState.message, voice: null, createdAt: now.toString(), image: image, video: null, document: null, music: null, user: { id: 'u1', name: 'علی', }, }, ], }, })); this.setState({ file: null, image: null, message: '', }); } else if (video !== null) { this.setState((prevState) => ({ data: { ...prevState.data, messages: [ ...prevState.data.messages, { id: 'm8', type: 'normal', text: prevState.message, voice: null, createdAt: now.toString(), image: null, video: video, document: null, music: null, user: { id: 'u1', name: 'علی', }, }, ], }, })); this.setState({ file: null, video: null, message: '', }); } else if (music !== null) { this.setState((prevState) => ({ data: { ...prevState.data, messages: [ ...prevState.data.messages, { id: 'm8', text: prevState.message, type: 'normal', voice: null, createdAt: now.toString(), image: null, video: null, document: null, music: music, user: { id: 'u1', name: 'علی', }, }, ], }, })); this.setState({ file: null, music: null, message: '', }); } else if (document !== null) { this.setState((prevState) => ({ data: { ...prevState.data, messages: [ ...prevState.data.messages, { id: 'm8', text: prevState.message, type: 'normal', voice: null, createdAt: now.toString(), image: null, video: null, document: document, music: null, user: { id: 'u1', name: 'علی', }, }, ], }, })); this.setState({ file: null, document: null, message: '', }); } }; cancelSendFile = () => { this.setState({ file: null, document: null, message: '', image: null, video: null, voice: null, music: null, }); }; componentDidMount() { this.props.list({ chatId: this.state.id }); this.props.info({ id: this.state.id }); // this.componentDidUpdate(); } componentDidUpdate() { let chatroom = document.getElementById('chatroom'); chatroom.scrollTop = chatroom.scrollHeight + 40; } randomColor() { let hex = Math.floor(Math.random() * 0x999999); let color = '#' + hex.toString(16); return color; } render() { const { setPage, chatInfo, messageList, userId } = this.props; const userIdx = {}; chatInfo.users.map((e) => (userIdx[e.id] = { ...e, color: this.randomColor() })); console.log({ userId }); return (
setPage('info')}>

{chatInfo.title}

{chatInfo.subtitle}

{chatInfo.users && messageList.map((item, i) => this.state.image === null && this.state.music === null && this.state.video === null ? ( ) : null )} {this.state.image !== null ? (
) : null} {this.state.video !== null ? (
) : null} {this.state.music !== null ? (
) : null} {this.state.document !== null ? (

{`ارسال (${this.state.document.name}) به ${this.props.info.title}؟`}

) : null}
{this.state.footer === 'normal' ? ( ) : null} {this.state.footer === 'suggest' ? : null}
); } } export default connect( (state) => { console.log(state); return { chatInfo: state.chat.info, userId: state.user.isLogin.id, messageList: state.message.list || [], }; }, { list, send, sendKeys, info, bio } )(Body);