front
Gorji 3 years ago
parent 759bdc0bc3
commit e0c90cdcb2
  1. 8
      src/Redux/actions/chat.js
  2. 1
      src/Redux/actions/index.js
  3. 13
      src/Redux/actions/message.js
  4. 2
      src/Redux/proxy.js
  5. 13
      src/Redux/reducers/chat.js
  6. 1
      src/Redux/reducers/index.js
  7. 16
      src/Redux/reducers/message.js
  8. 253
      src/views/ChatRoom/Body/Body.js
  9. 12
      src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
  10. 14
      src/views/ChatRoom/Body/Message/Message.js
  11. 12
      src/views/ChatRoom/Body/Message/Message2D/Message2D.js
  12. 40
      src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
  13. 12
      src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js
  14. 12
      src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js

@ -3,3 +3,11 @@ export const list =
(data = {}) =>
async (dispatch) =>
(await proxy.get('chat/list', data)).dispatch(dispatch);
export const info =
(data = {}) =>
async (dispatch) =>
(await proxy.get('chat/info', data)).dispatch(dispatch);
export const bio =
(data = {}) =>
async (dispatch) =>
(await proxy.get('chat/bio', data)).dispatch(dispatch);

@ -1,6 +1,7 @@
// @create-index
export { default as chat } from './chat.js';
export { default as message } from './message.js';
export { default as public } from './public.js';
export { default as user } from './user.js';

@ -0,0 +1,13 @@
import proxy from '../proxy';
export const list =
(data = {}) =>
async (dispatch) =>
(await proxy.get('message/list', data)).dispatch(dispatch);
export const send =
(data = {}) =>
async (dispatch) =>
(await proxy.post('message/send', data)).dispatch(dispatch);
export const sendKeys =
(data = {}) =>
async (dispatch) =>
(await proxy.post('message/sendKeys', data)).dispatch(dispatch);

@ -43,7 +43,7 @@ class Proxy {
};
login = async (data, opt = { headers: { Authorization: `Bearer ${token}` } }) => {
const login = await this.post(loginURL, data, opt);
if (!login) this.result('login', false);
if (!login || !login.refreshToken) this.result('login', false);
localStorage.setItem('refresh', login.refreshToken);
delete login.refreshToken;
if (data != {}) setTimeout(() => (window.location.href = '/'), 100);

@ -1,11 +1,24 @@
const initialState = {
list: [],
info: { users: [] },
bio: {
album: [],
images: [],
videos: [],
music: [],
documnet: [],
link: [],
},
};
export default function chat(state = initialState, action) {
let { type, data } = action;
switch (type) {
case 'chat/list':
return { ...state, list: data };
case 'chat/info':
return { ...state, info: data };
case 'chat/bio':
return { ...state, bio: data };
default:
return state;
}

@ -1,6 +1,7 @@
// @create-index
export { default as chat } from './chat.js';
export { default as message } from './message.js';
export { default as public } from './public.js';
export { default as user } from './user.js';

@ -0,0 +1,16 @@
const initialState = {
list: [],
};
export default function chat(state = initialState, action) {
let { type, data } = action;
switch (type) {
case 'message/list':
return { ...state, list: data };
case 'message/send':
return { ...state, list: [...list, ...data] };
case 'message/sendKeys':
return { ...state, list: [...list, ...data] };
default:
return state;
}
}

@ -9,231 +9,15 @@ import ReactAudioPlayer from 'react-audio-player';
import photo from '../../../assets/images/reza.png';
import photo1 from '../../../assets/images/user2.png';
import './Body.scss';
export default class Body extends Component {
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 = {
data: {
id: '1',
users: [
{
id: 'u1',
name: 'حسن',
imageUri: photo,
},
{
id: 'u2',
name: 'علی',
imageUri: photo1,
},
],
messages: [
{
id: 'm1',
type: 'normal',
text: 'چظوری!',
voice: null,
image: null,
video: null,
music: null,
document: null,
createdAt: '2020-10-10T12:48:00.000Z',
user: {
id: 'u1',
name: 'علی',
},
},
{
id: 'm2',
type: 'normal',
text: 'من خیلی خوبم',
voice: null,
image: null,
video: null,
music: null,
document: null,
createdAt: '2020-10-03T14:49:00.000Z',
user: {
id: 'u2',
name: 'رضا',
},
},
{
id: 'm3',
type: 'normal',
text: 'تو خودت چطوری؟',
voice: null,
image: null,
video: null,
music: null,
document: null,
createdAt: '2020-10-03T14:49:40.000Z',
user: {
id: 'u2',
name: 'رضا',
},
},
{
id: 'm4',
type: 'normal',
text: 'خوبی',
voice: null,
image: null,
video: null,
music: null,
document: null,
createdAt: '2020-10-03T14:50:00.000Z',
user: {
id: 'u1',
name: 'علی',
},
},
{
id: 'm5',
type: 'normal',
text: 'کجا رفتی؟',
voice: null,
image: null,
video: null,
music: null,
document: null,
createdAt: '2020-10-03T14:51:00.000Z',
user: {
id: 'u1',
name: 'علی',
},
},
{
id: 'm6',
type: 'normal',
text: 'نشد که بشه',
voice: null,
image: null,
video: null,
music: null,
document: null,
createdAt: '2020-10-03T14:49:00.000Z',
user: {
id: 'u2',
name: 'رضا',
},
},
{
id: 'm7',
type: 'normal',
text: 'من که به نظرم خوب نمیاد',
voice: null,
image: null,
video: null,
music: null,
document: null,
createdAt: '2020-10-03T14:53:00.000Z',
user: {
id: 'u1',
name: 'علی',
},
},
{
id: 'm7',
type: 'normal',
text: 'یک تماس جدید',
voice: null,
image: null,
video: null,
music: null,
document: null,
createdAt: '2020-10-03T14:53:00.000Z',
user: {
id: 'u1',
name: 'علی',
},
},
{
id: 'm10',
type: '2d',
options: [
[{ id: 0, name: 'تکنولوژی' }],
[
{ id: 1, name: 'ورزشی' },
{ id: 2, name: 'علمی' },
],
[
{ id: 3, name: 'مذهبی' },
{ id: 4, name: 'اجتماعی' },
{ id: 5, name: 'سیاسی' },
],
],
text: 'به دنبال چی میگردی؟',
voice: null,
image: null,
video: null,
music: null,
document: null,
createdAt: '2020-10-03T14:53:00.000Z',
user: {
id: 'u2',
name: 'رضا',
},
},
{
id: 'm11',
type: 'draggable',
options: [
[{ id: 0, name: 'پرسپولیس', position: 1 }],
[{ id: 1, name: 'سپاهان', position: 2 }],
[{ id: 2, name: 'استقلال', position: 3 }],
],
text: ' موقعیت تیمهای زیر را در پایان مسابقات جدول لیگ برتر را پیش بینی کنید!',
voice: null,
image: null,
video: null,
music: null,
document: null,
createdAt: '2020-10-03T14:53:00.000Z',
user: {
id: 'u2',
name: 'رضا',
},
},
{
id: 'm12',
type: 'slider',
options: null,
text: 'معدل شما درآزمون دکتری',
voice: null,
image: null,
video: null,
music: null,
document: null,
createdAt: '2020-10-03T14:53:00.000Z',
user: {
id: 'u2',
name: 'رضا',
},
},
{
id: 'm13',
type: 'radio',
options: [
{ id: 0, name: 'مادرید' },
{ id: 1, name: 'میلان' },
{ id: 2, name: 'رم' },
{ id: 3, name: 'ونیز' },
],
text: 'پایتخت کشور ایتالیا؟',
voice: null,
image: null,
video: null,
music: null,
document: null,
createdAt: '2020-10-03T14:53:00.000Z',
user: {
id: 'u2',
name: 'رضا',
},
},
],
},
id: window.location.href.split('/').pop() * 1,
data: {},
message: '',
voice: null,
file: null,
@ -548,8 +332,9 @@ export default class Body extends Component {
};
componentDidMount() {
let chatroom = document.getElementById('chatroom');
chatroom.scrollTop = chatroom.scrollHeight + 40;
this.props.list({ chatId: this.state.id });
this.props.info({ id: this.state.id });
// this.componentDidUpdate();
}
componentDidUpdate() {
@ -562,8 +347,8 @@ export default class Body extends Component {
return (
<div className="chat-body d-flex flex-column">
<div className="chat-room__status d-flex flex-column" onClick={() => setPage('info')}>
<h1>محسن محمدی</h1>
<p>2 دقیقه پیش آنلاین بوده</p>
<h1>{this.props.info.title}</h1>
<p>{this.props.info.subtitle}</p>
</div>
<div
className="chat-body__content d-flex flex-column"
@ -574,15 +359,15 @@ export default class Body extends Component {
paddingBottom: this.state.footer === 'suggest' ? 110 : 70,
}}
>
{this.state.data.messages.map((item, i) =>
{this.props.message_list.map((item, i) =>
this.state.image === null && this.state.music === null && this.state.video === null ? (
<Message
isSelf={this.props.userId == item.userId}
key={i}
file={this.state.image}
document={this.state.document}
message={item}
user1={this.state.data.users[0]}
user2={this.state.data.users[1]}
user={this.props.info.users[item.userId]}
/>
) : null
)}
@ -604,7 +389,7 @@ export default class Body extends Component {
{this.state.document !== null ? (
<div className="chat-body__content--confirm d-flex">
<div className="chat-body__content--confirm___box d-flex flex-column">
<p>{`ارسال (${this.state.document.name}) به ${this.state.data.users[1].name}؟`}</p>
<p>{`ارسال (${this.state.document.name}) به ${this.props.info.title}؟`}</p>
<div className="chat-body__content--confirm___box---options d-flex">
<button style={{ color: '#00ff00' }} onClick={() => this.sendFile()}>
ارسال
@ -638,3 +423,11 @@ export default class Body extends Component {
);
}
}
export default connect(
(state) => ({
info: state.chat.info,
userId: state.user.id,
message_list: state.message.list || [],
}),
{ list, send, sendKeys, info, bio }
)(Body);

@ -28,23 +28,23 @@ export default class DraggableMessage extends Component {
}));
};
render() {
const { message, user1, user2 } = this.props;
const { message, user, isSelf } = this.props;
return (
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: message.user.id === user1.id ? 0 : 40,
marginLeft: message.user.id === user1.id ? 40 : 0,
marginRight: isSelf ? 0 : 40,
marginLeft: isSelf ? 40 : 0,
}}
>
<img
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
style={{ alignSelf: message.user.id === user1.id ? 'flex-end' : 'flex-start' }}
src={user.imageUri}
style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
alt={message.id}
/>
<div className="message-2d__text d-flex">
{message.text !== null ? (
<p id="3" style={{ color: message.user.id === user1.id ? 'white' : 'black' }}>
<p id="3" style={{ color: isSelf ? 'white' : 'black' }}>
{message.text}
</p>
) : null}

@ -8,27 +8,27 @@ import RadioMessage from './RadioMessage/RadioMessage.js';
export default class Message extends Component {
render() {
const { message, user1, user2, file, document } = this.props;
const { message, user, isSelf, file, document } = this.props;
return (
<>
{message.type === 'normal' ? (
<NormalMessage
message={message}
user1={user1}
user2={user2}
user={user}
isSelf={isSelf}
file={file}
document={document}
/>
) : null}
{message.type === '2d' ? <Message2D message={message} user1={user1} user2={user2} /> : null}
{message.type === '2d' ? <Message2D message={message} user={user} isSelf={isSelf} /> : null}
{message.type === 'draggable' ? (
<DraggableMessage message={message} user1={user1} user2={user2} />
<DraggableMessage message={message} user={user} isSelf={isSelf} />
) : null}
{message.type === 'slider' ? (
<SliderMessage message={message} user1={user1} user2={user2} />
<SliderMessage message={message} user={user} isSelf={isSelf} />
) : null}
{message.type === 'radio' ? (
<RadioMessage message={message} user1={user1} user2={user2} />
<RadioMessage message={message} user={user} isSelf={isSelf} />
) : null}
</>
);

@ -4,23 +4,23 @@ import './Message2D.scss';
export default class Message2D extends Component {
render() {
const { message, user1, user2 } = this.props;
const { message, user, isSelf } = this.props;
return (
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: message.user.id === user1.id ? 0 : 40,
marginLeft: message.user.id === user1.id ? 40 : 0,
marginRight: isSelf ? 0 : 40,
marginLeft: isSelf ? 40 : 0,
}}
>
<img
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
style={{ alignSelf: message.user.id === user1.id ? 'flex-end' : 'flex-start' }}
src={user.imageUri}
style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
alt={message.id}
/>
<div className="message-2d__text d-flex">
{message.text !== null ? (
<p id="3" style={{ color: message.user.id === user1.id ? 'white' : 'black' }}>
<p id="3" style={{ color: isSelf ? 'white' : 'black' }}>
{message.text}
</p>
) : null}

@ -7,19 +7,19 @@ import './NormalMessage.scss';
export default class NormalMessage extends Component {
render() {
const { message, user1, user2, document } = this.props;
const { message, user, document, isSelf } = this.props;
return (
<div
className="normal-message d-flex flex-column d-flex"
style={{
marginRight: message.user.id === user1.id ? 0 : 40,
marginLeft: message.user.id === user1.id ? 40 : 0,
marginRight: isSelf ? 0 : 40,
marginLeft: isSelf ? 40 : 0,
filter: document !== null ? 'blur(16px)' : 'blur(0px)',
}}
>
<img
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
style={{ alignSelf: message.user.id === user1.id ? 'flex-end' : 'flex-start' }}
src={user.imageUri}
style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
alt={message.id}
/>
<div
@ -32,7 +32,7 @@ export default class NormalMessage extends Component {
? `normal-message__box d-flex`
: `normal-message__box d-flex normal-message__box--file`
}
style={{ backgroundColor: message.user.id === user1.id ? 'rgb(15, 93, 190)' : 'white' }}
style={{ backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white' }}
>
{message.voice === null &&
message.video === null &&
@ -43,17 +43,15 @@ export default class NormalMessage extends Component {
className="normal-message__box--detail d-flex"
style={{
top: 0,
right: message.user.id === user1.id ? 'auto' : 20,
left: message.user.id === user1.id ? 20 : 'auto',
direction: message.user.id !== user1.id ? 'ltr' : 'rtl',
paddingRight: message.user.id === user1.id ? 90 : 'auto',
paddingLeft: message.user.id === user1.id ? 'auto' : 90,
right: isSelf ? 'auto' : 20,
left: isSelf ? 20 : 'auto',
direction: isSelf ? 'ltr' : 'rtl',
paddingRight: isSelf ? 90 : 'auto',
paddingLeft: isSelf ? 'auto' : 90,
}}
>
<div style={{ color: message.user.id === user1.id ? '#aaa' : 'gray' }}>
{message.user.name}
</div>
<span style={{ color: message.user.id === user1.id ? '#aaa' : 'gray' }}>12:14</span>
<div style={{ color: isSelf ? '#aaa' : 'gray' }}>{user.name}</div>
<span style={{ color: isSelf ? '#aaa' : 'gray' }}>{message.date}</span>
</div>
) : null}
@ -62,7 +60,7 @@ export default class NormalMessage extends Component {
message.image === null &&
message.music === null &&
message.document === null ? (
<p id="3" style={{ color: message.user.id === user1.id ? 'white' : 'black' }}>
<p id="3" style={{ color: isSelf ? 'white' : 'black' }}>
{message.text}
</p>
) : null}
@ -72,7 +70,7 @@ export default class NormalMessage extends Component {
<a href={message.image} download>
<img src={message.image} download alt="" />
</a>
<p id="2" style={{ color: message.user.id === user1.id ? 'white' : 'black' }}>
<p id="2" style={{ color: isSelf ? 'white' : 'black' }}>
{message.text}
</p>
</div>
@ -82,7 +80,7 @@ export default class NormalMessage extends Component {
<a href={message.video} download>
<ReactPlayer url={message.video} controls width={'100%'} height={250} />
</a>
<p id="1" style={{ color: message.user.id === user1.id ? 'white' : 'black' }}>
<p id="1" style={{ color: isSelf ? 'white' : 'black' }}>
{message.text}
</p>
</div>
@ -94,13 +92,13 @@ export default class NormalMessage extends Component {
download
className="normal-message__box--document d-flex"
style={{
backgroundColor: message.user.id === user1.id ? 'rgb(15, 93, 190)' : 'white',
color: message.user.id === user1.id ? 'white' : 'black',
backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white',
color: isSelf ? 'white' : 'black',
}}
>
<CloudDownloadIcon
style={{
color: message.user.id === user1.id ? 'white' : 'black',
color: isSelf ? 'white' : 'black',
width: 32,
height: 32,
marginRight: 10,

@ -16,23 +16,23 @@ export default class RadioMessage extends Component {
};
render() {
const { message, user1, user2 } = this.props;
const { message, user, isSelf } = this.props;
return (
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: message.user.id === user1.id ? 0 : 40,
marginLeft: message.user.id === user1.id ? 40 : 0,
marginRight: isSelf ? 0 : 40,
marginLeft: isSelf ? 40 : 0,
}}
>
<img
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
style={{ alignSelf: message.user.id === user1.id ? 'flex-end' : 'flex-start' }}
src={user.imageUri}
style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
alt={message.id}
/>
<div className="message-2d__text d-flex">
{message.text !== null ? (
<p id="3" style={{ color: message.user.id === user1.id ? 'white' : 'black' }}>
<p id="3" style={{ color: isSelf ? 'white' : 'black' }}>
{message.text}
</p>
) : null}

@ -32,23 +32,23 @@ export default class SliderMessage extends Component {
}
};
render() {
const { message, user1, user2 } = this.props;
const { message, user, isSelf } = this.props;
return (
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: message.user.id === user1.id ? 0 : 40,
marginLeft: message.user.id === user1.id ? 40 : 0,
marginRight: isSelf ? 0 : 40,
marginLeft: isSelf ? 40 : 0,
}}
>
<img
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
style={{ alignSelf: message.user.id === user1.id ? 'flex-end' : 'flex-start' }}
src={user.imageUri}
style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
alt={message.id}
/>
<div className="message-2d__text d-flex">
{message.text !== null ? (
<p id="3" style={{ color: message.user.id === user1.id ? 'white' : 'black' }}>
<p id="3" style={{ color: isSelf ? 'white' : 'black' }}>
{message.text}
</p>
) : null}

Loading…
Cancel
Save