need fix

src/Redux/actions/chat.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);

src/Redux/actions/index.js

@@ -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';
 

src/Redux/actions/message.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);

src/Redux/proxy.js

@@ -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);

src/Redux/reducers/chat.js

@@ -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;
   }

src/Redux/reducers/index.js

@@ -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';
 

src/Redux/reducers/message.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;
+  }
+}

src/views/ChatRoom/Body/Body.js

@@ -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);

src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js

@@ -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}

src/views/ChatRoom/Body/Message/Message.js

@@ -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}
       </>
     );

src/views/ChatRoom/Body/Message/Message2D/Message2D.js

@@ -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}

src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js

@@ -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,

src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js

@@ -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}

src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js

@@ -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}