some messga fixes

src/Redux/proxy.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { toast } from 'react-toastify';
-const baseURL = 'https://chatstory.ir/api/v1'; //"https://chatstory.ir/api/v1";
+const baseURL = 'https://chatstory.ir/api/v1'; //'https://chatstory.ir/api/v1';
 const token = '';
 const loginURL = 'user/otp/login';
 const logoutURL = 'user/logout';

src/views/ChatRoom/Body/Body.js

@@ -24,7 +24,7 @@ class Body extends Component {
       video: null,
       music: null,
       document: null,
-      footer: 'suggest',
+      footer: 'normal',
       suggest: [
         [{ id: 0, text: 'سلام' }],
         [{ id: 1, text: 'وقت بخیر' }],
@@ -363,7 +363,7 @@ class Body extends Component {
           style={{
             overflowX: 'hidden',
             overflowY: this.state.file !== null ? 'hidden' : 'scroll',
-            paddingBottom: this.state.footer === 'suggest' ? 110 : 70,
+            paddingBottom: this.state.footer === 'suggest' ? 150 : 70,
           }}
         >
           {chatInfo.users &&
@@ -372,7 +372,7 @@ class Body extends Component {
               this.state.music === null &&
               this.state.video === null ? (
                 <Message
-                  isSelf={userId == item.userId}
+                  isSelf={1 == item.userId}
                   key={i}
                   file={this.state.image}
                   document={this.state.document}

src/views/ChatRoom/Body/Body.scss

@@ -91,13 +91,14 @@
       z-index: 1000;
       background-color: rgb(210, 196, 214);
       background: url(../../../assets/images/chat.png);
+      box-shadow: 0px 0px 5px 2px #9d9595ad;
       background-size: cover;
       overflow-y: scroll;
       overflow-x: hidden;
       position: fixed;
       bottom: 0px;
       left: 0;
-      padding-top: 5px;
+
       padding-bottom: 5px;
     }
   }

src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.js

@@ -16,15 +16,15 @@ export default function suggetbar({ suggest }) {
 const Row = ({ row }) => {
   return (
     <div className="chat-suggest__row d-flex">
-      <Suggest item={row[0]} />
+      {/* <Suggest item={row[0]} /> */}
-      {/* {row.map((item, i) => (
+      {row.map((item, i) => (
         <Suggest item={item} key={i} />
-      ))} */}
+      ))}
     </div>
   );
 };
 
-const Suggest = (item) => {
+const Suggest = ({ item }) => {
   console.log(item.text);
   return <div className="chat-suggest__row--item d-flex">{item.text}</div>;
 };

src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss

@@ -1,25 +1,29 @@
 @media screen and (max-width: 4500px) {
   .chat-suggest {
+    & .rec-slider-container {
+      margin: 0 !important;
+    }
     // border-bottom-right-radius: 40px;
     // border-bottom-left-radius: 40px;
     width: 100%;
     // height : 40px;
     padding: 2px 0px 0px;
     align-items: flex-end;
-    &__row{
+    margin-top: 5px;
+    &__row {
       width: 100%;
       &--item {
         padding: 8px 6px;
         background-color: white;
         border-radius: 5px;
-        margin: 5px;
+        margin: 0 2px;
         width: 100% !important;
-        justify-content: center;
+        justify-content: right;
         color: black;
-        min-height: 60px;
+        height: 90px;
+        text-align: right;
       }
     }
-    
   }
 }
 
@@ -27,8 +31,8 @@
   width: 100% !important;
   height: 100% !important;
   position: relative;
-  padding: 20px 12px 0px;
+  padding: 0px 6px 0px;
-  margin-bottom: 10px;
+  margin-bottom: 2px;
   justify-content: center !important;
 }
 
@@ -43,8 +47,9 @@
 }
 .rec-pagination {
   z-index: 600;
-  position: absolute;
+  margin-top: 2px !important;
-  top: -12px;
+  // position: absolute;
+  // top: -12px;
   // left: calc(50% - 20px) !important;
   & button {
     background-color: grey;

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

@@ -5,51 +5,28 @@ import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
 import Avatar from '@material-ui/core/Avatar';
 
 export default class DraggableMessage extends Component {
-  state = {
+  constructor(props) {
-    items: ['استقلال', 'پرسپولیس', 'سپاهان'],
+    super(props);
-  };
+    this.state = this.props.message;
-
+  }
   onSortEnd = ({ oldIndex, newIndex }) => {
-    this.setState(({ items }) => ({
+    this.setState(({ options }) => ({
-      items: arrayMove(items, oldIndex, newIndex),
+      options: arrayMove(options, oldIndex, newIndex),
     }));
   };
 
   render() {
     const { message, user, isSelf } = this.props;
+
     return (
       <div
         className="message-2d d-flex flex-column d-flex"
         style={{
-          marginRight: isSelf ? 0 : 40,
+          marginRight: isSelf ? 0 : 70,
-          marginLeft: isSelf ? 40 : 0,
+          marginLeft: isSelf ? 70 : 0,
         }}
       >
-        <Avatar
+        <SortableList items={this.state.options} onSortEnd={this.onSortEnd} />
-          alt={user.name}
-          src={window.baseURL + '/file/download/' + user.fileId}
-          className=""
-          style={{ backgroundColor: user.color }}
-        >
-          {user.name
-            .split(' ')
-            .map((e) => e.slice(0, 1))
-            .join(' ')}
-        </Avatar>
-
-        {/* <img
-          src={window.baseURL + '/file/download/' + user.fileId}
-          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: isSelf ? 'white' : 'black' }}>
-              {message.text}
-            </p>
-          ) : null}
-        </div>
-        <SortableList items={message.options} onSortEnd={this.onSortEnd} />
         <button className="message-2d__submit">
           ثبت
           <ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
@@ -72,7 +49,7 @@ const SortableList = SortableContainer(({ items }) => {
 const SortableItem = SortableElement(({ value }) => (
   <div className="message-2d__options--row d-flex">
     {value.map((item) => (
-      <div>{item.text}</div>
+      <div>{item.name}</div>
     ))}
   </div>
 ));

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

@@ -11,15 +11,14 @@ export default class Message extends Component {
     const { message, user, isSelf, file, document } = this.props;
     return (
       <>
-        {message.type === 'normal' ? (
+        <NormalMessage
-          <NormalMessage
+          message={message}
-            message={message}
+          user={user}
-            user={user}
+          isSelf={isSelf}
-            isSelf={isSelf}
+          file={file}
-            file={file}
+          document={document}
-            document={document}
+        />
-          />
+
-        ) : null}
         {message.type === '2d' ? <Message2D message={message} user={user} isSelf={isSelf} /> : null}
         {message.type === 'draggable' ? (
           <DraggableMessage message={message} user={user} isSelf={isSelf} />

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

@@ -10,33 +10,10 @@ export default class Message2D extends Component {
       <div
         className="message-2d d-flex flex-column d-flex"
         style={{
-          marginRight: isSelf ? 0 : 40,
+          marginRight: isSelf ? 0 : 70,
-          marginLeft: isSelf ? 40 : 0,
+          marginLeft: isSelf ? 70 : 0,
         }}
       >
-        <Avatar
-          alt={user.name}
-          src={window.baseURL + '/file/download/' + user.fileId}
-          className=""
-          style={{ backgroundColor: user.color }}
-        >
-          {user.name
-            .split(' ')
-            .map((e) => e.slice(0, 1))
-            .join(' ')}
-        </Avatar>
-        {/* <img
-          src={window.baseURL + '/file/download/' + user.fileId}
-          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: isSelf ? 'white' : 'black' }}>
-              {message.text}
-            </p>
-          ) : null}
-        </div>
         <div className="message-2d__options d-flex flex-column">
           {message.options.map((option, i) => (
             <div

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

@@ -36,12 +36,14 @@
         width: 100%;
         justify-content: space-around;
         div {
-          background-color: rgba(153, 153, 153, 0.47);
+          background-color: rgb(181 224 252 / 47%);
           border-radius: 10px;
           justify-content: center;
           align-items: center;
           margin: 2px 3px;
           padding: 6px;
+          flex: 1;
+          text-align: center;
           span {
             font-size: 16px;
             color: black;
@@ -60,7 +62,7 @@
         border-radius: 5px;
       }
       &--draggable {
-        background-color: rgba(153, 153, 153, 0.47);
+        background-color: rgb(181 224 252 / 47%);
         border-radius: 10px;
         justify-content: center;
         align-items: center;
@@ -90,7 +92,7 @@
   display: flex !important;
   width: 100% !important;
   margin: 0px !important;
-  background-color: rgba(153, 153, 153, 0.47);
+  background-color: rgb(181 224 252 / 47%);
   justify-content: center !important;
   align-items: center !important;
   border-radius: 10px;

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

@@ -3,7 +3,11 @@ import ReactAudioPlayer from 'react-audio-player';
 import ReactPlayer from 'react-player';
 import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
 import Avatar from '@material-ui/core/Avatar';
-
+import moment from 'jalali-moment';
+import DoneIcon from '@material-ui/icons/Done';
+import DoneAllIcon from '@material-ui/icons/DoneAll';
+import EditIcon from '@material-ui/icons/Edit';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import './NormalMessage.scss';
 
 export default class NormalMessage extends Component {
@@ -13,8 +17,8 @@ export default class NormalMessage extends Component {
       <div
         className="normal-message d-flex flex-column d-flex"
         style={{
-          marginRight: isSelf ? 0 : 40,
+          marginRight: isSelf ? 0 : 70,
-          marginLeft: isSelf ? 40 : 0,
+          marginLeft: isSelf ? 70 : 0,
           filter: document !== null ? 'blur(16px)' : 'blur(0px)',
         }}
       >
@@ -22,7 +26,7 @@ export default class NormalMessage extends Component {
           alt={user.name}
           src={window.baseURL + '/file/download/' + user.fileId}
           className=""
-          style={{ backgroundColor: user.color }}
+          style={{ backgroundColor: user.color, alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
         >
           {user.name
             .split(' ')
@@ -55,15 +59,16 @@ export default class NormalMessage extends Component {
               className="normal-message__box--detail d-flex"
               style={{
                 top: 0,
-                right: isSelf ? 'auto' : 20,
+
-                left: isSelf ? 20 : 'auto',
                 direction: isSelf ? 'ltr' : 'rtl',
-                paddingRight: isSelf ? 90 : 'auto',
+                paddingRight: isSelf ? 60 : 0,
-                paddingLeft: isSelf ? 'auto' : 90,
+                paddingLeft: isSelf ? 15 : 70,
               }}
             >
+              <div style={{ color: isSelf ? '#aaa' : 'gray' }}>
+                <ExpandMoreIcon fontSize="small" />
+              </div>
               <div style={{ color: isSelf ? '#aaa' : 'gray' }}>{user.name}</div>
-              <span style={{ color: isSelf ? '#aaa' : 'gray' }}>{message.date}</span>
             </div>
           ) : null}
 
@@ -119,6 +124,21 @@ export default class NormalMessage extends Component {
               <div>{message.document.name}</div>
             </a>
           ) : null}
+          <div className="normal-message__box--dete d-flex">
+            <span style={{ color: isSelf ? '#aaa' : 'gray' }}>
+              {message.status == 1 && <DoneIcon fontSize="small" />}
+              {message.status == 2 && <DoneAllIcon fontSize="small" />}
+              {message.updatedAt ? (
+                <>
+                  <span> ویرایش در</span>
+
+                  {moment(message.updatedAt).format(' hh:mm jMM/jDD')}
+                </>
+              ) : (
+                moment(message.createdAt).format('hh:mm')
+              )}
+            </span>
+          </div>
         </div>
       </div>
     );

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

@@ -2,11 +2,12 @@
   .normal-message {
     // width: 100%;
     position: relative;
+    margin-bottom: 5px;
     img {
       width: 65px;
       height: 65px;
       object-fit: cover;
-      border-radius: 30px;
+      border-radius: 15px;
       border: 3px solid rgba(201, 201, 201, 0.857);
       position: relative;
       top: 20px;
@@ -15,15 +16,15 @@
     &__box {
       justify-content: flex-end;
       width: 100%;
-      padding: 35px 15px 5px;
+      padding: 35px 7px 5px;
       background-color: white;
-      border-radius: 30px;
+      border-radius: 15px;
       position: relative;
       p {
         width: 100%;
         text-align: right;
         direction: rtl;
-        font-size: 17px;
+        font-size: 16px;
         // font-family: IRANSansNumeral;
         font-weight: 500;
       }
@@ -32,6 +33,19 @@
         width: 100%;
         top: 10px;
         justify-content: space-between;
+        font-size: 12px;
+        span {
+          font-family: IRANSansNumeralLight;
+        }
+      }
+      &--dete {
+        position: absolute;
+        width: 100%;
+        padding-top: 20px;
+        padding-left: 20px;
+        bottom: 0px;
+        justify-content: space-between;
+        font-size: 11px;
         span {
           font-family: IRANSansNumeralLight;
         }

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

@@ -22,33 +22,10 @@ export default class RadioMessage extends Component {
       <div
         className="message-2d d-flex flex-column d-flex"
         style={{
-          marginRight: isSelf ? 0 : 40,
+          marginRight: isSelf ? 0 : 70,
-          marginLeft: isSelf ? 40 : 0,
+          marginLeft: isSelf ? 70 : 0,
         }}
       >
-        <Avatar
-          alt={user.name}
-          src={window.baseURL + '/file/download/' + user.fileId}
-          className=""
-          style={{ backgroundColor: user.color }}
-        >
-          {user.name
-            .split(' ')
-            .map((e) => e.slice(0, 1))
-            .join(' ')}
-        </Avatar>
-        {/* <img
-          src={window.baseURL + '/file/download/' + user.fileId}
-          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: isSelf ? 'white' : 'black' }}>
-              {message.text}
-            </p>
-          ) : null}
-        </div>
         <div className="message-2d__options d-flex flex-wrap justify-content-center">
           {message.options.map((row) => (
             <Row list={row} />

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

@@ -37,33 +37,10 @@ export default class SliderMessage extends Component {
       <div
         className="message-2d d-flex flex-column d-flex"
         style={{
-          marginRight: isSelf ? 0 : 40,
+          marginRight: isSelf ? 0 : 70,
-          marginLeft: isSelf ? 40 : 0,
+          marginLeft: isSelf ? 70 : 0,
         }}
       >
-        <Avatar
-          alt={user.name}
-          src={window.baseURL + '/file/download/' + user.fileId}
-          className=""
-          style={{ backgroundColor: user.color }}
-        >
-          {user.name
-            .split(' ')
-            .map((e) => e.slice(0, 1))
-            .join(' ')}
-        </Avatar>
-        {/* <img 
-          
-          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: isSelf ? 'white' : 'black' }}>
-              {message.text}
-            </p>
-          ) : null}
-        </div>
         <Grid container spacing={2} alignItems="center">
           <Grid item xs>
             <Slider