set

src/Router.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import proxy from './Redux/proxy';
 import Home from './views/Home/Home';
-import ChatRoom from './views/ChatRoom/ChatRoom';
+import ChatRoom from './views/ChatRoom';
 import Auth from './views/Auth/Auth';
 // import { connect } from 'react-redux';
 class AppRouter extends Component {

src/views/ChatRoom/Body/Input/index.js

@@ -7,7 +7,7 @@ import AttachmentIcon from '@material-ui/icons/Attachment';
 import TextField from '@material-ui/core/TextField';
 import SendIcon from '@material-ui/icons/Send';
 
-import './ChatInputs.scss';
+import './index.scss';
 export default class ChatInputs extends Component {
   render() {
     const {

src/views/ChatRoom/Body/Keyboard/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import Carousel from 'react-elastic-carousel';
-import './ChatSuggest.scss';
+import './index.scss';
 export default function suggetbar({ suggest }) {
   return (
     <div className="chat-suggest portrait-slider d-flex flex-column">

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Avatar from '@material-ui/core/Avatar';
 
-import './Message2D.scss';
+import './index.scss';
 import { toast } from 'react-toastify';
 
 export default class Message2D extends Component {

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

@@ -1,38 +0,0 @@
-import React, { Component } from 'react';
-
-import NormalMessage from './NormalMessage/NormalMessage';
-import Message2D from './Message2D/Message2D';
-import DraggableMessage from './DraggableMessage/DraggableMessage';
-import SliderMessage from './SliderMessage/SliderMessage.js';
-import RadioMessage from './RadioMessage/RadioMessage.js';
-
-export default class Message extends Component {
-  render() {
-    const { message, user, isSelf, file, document, prevUserId, isActive } = this.props;
-    return (
-      <div style={{ marginTop: 5 }}>
-        <NormalMessage
-          prevUserId={prevUserId}
-          message={message}
-          user={user}
-          isSelf={isSelf}
-          file={file}
-          document={document}
-        >
-          {message.type === '2d' ? (
-            <Message2D message={message} user={user} isSelf={isSelf} isActive={isActive} />
-          ) : null}
-          {message.type === 'draggable' ? (
-            <DraggableMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
-          ) : null}
-          {message.type === 'slider' ? (
-            <SliderMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
-          ) : null}
-          {message.type === 'radio' ? (
-            <RadioMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
-          ) : null}
-        </NormalMessage>
-      </div>
-    );
-  }
-}

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

@@ -8,7 +8,7 @@ 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';
+import './index.scss';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import ReplyIcon from '@material-ui/icons/Reply';
@@ -45,7 +45,11 @@ export default class NormalMessage extends Component {
             alt={user.name}
             src={window.baseURL + '/file/download/' + user.fileId}
             className=""
-            style={{ backgroundColor: user.color, alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
+            style={{
+              marginTop: -5,
+              backgroundColor: user.color,
+              alignSelf: isSelf ? 'flex-end' : 'flex-start',
+            }}
           >
             {user.name
               .split(' ')
@@ -54,7 +58,10 @@ export default class NormalMessage extends Component {
           </Avatar>
         )}
 
-        <div className="d-flex" style={{ direction: isSelf ? 'rtl' : 'ltr' }}>
+        <div
+          className="d-flex"
+          style={{ direction: isSelf ? 'rtl' : 'ltr', marginTop: hasavatar ? -15 : 0 }}
+        >
           <div
             className={
               message.voice === null &&

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

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
+import Avatar from '@material-ui/core/Avatar';
+import { toast } from 'react-toastify';
+
+export default class RadioMessage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: this.props.message.value,
+    };
+  }
+
+  handleRadioChange = (newValue) => {
+    if (this.props.isActive)
+      this.setState({
+        value: newValue,
+      });
+  };
+
+  render() {
+    const { message, user, isSelf, isActive } = this.props;
+    return (
+      <div className="message-2d d-flex flex-column d-flex">
+        <div className="message-2d__options d-flex flex-wrap justify-content-center">
+          {message.options.map((row) => (
+            <Row list={row} handleRadioChange={this.handleRadioChange} value={this.state.value} />
+          ))}
+        </div>
+        {isActive && (
+          <button className="message-2d__submit" onClick={() => toast.success('ثبت شد')}>
+            ثبت
+            <ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
+          </button>
+        )}
+      </div>
+    );
+  }
+}
+
+const Row = (props) => {
+  return (
+    <div className="message-2d__options--row d-flex">
+      {props.list.map((item) => (
+        <Item item={item} {...props} />
+      ))}
+    </div>
+  );
+};
+
+const Item = (props) => {
+  return (
+    <div
+      onClick={() => props.handleRadioChange(props.item.name)}
+      style={{
+        backgroundColor: props.item.name === props.value ? '#6f42c1' : 'rgb(181 224 252 / 47%)',
+        color: props.item.name === props.value ? 'white' : 'black',
+      }}
+    >
+      {props.item.name}
+    </div>
+  );
+};

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

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import Normal from './Normal';
+import Inline from './Inline';
+import Sort from './Sort';
+import Slider from './Slider';
+import Select from './Select';
+import MultiSelect from './MultiSelect';
+import './index.scss';
+const types = {
+  normal: <></>,
+  sort: Sort,
+  inline: Inline,
+  silder: Slider,
+  select: Select,
+  multiselect: MultiSelect,
+};
+export default class Message extends Component {
+  render() {
+    const { message, user, isSelf, file, document, prevUserId, isActive } = this.props;
+    const Key = types[message.type];
+    return (
+      <div className="Message">
+        <Normal
+          prevUserId={prevUserId}
+          message={message}
+          user={user}
+          isSelf={isSelf}
+          file={file}
+          document={document}
+        >
+          <Key message={message} isSelf={isSelf} isActive={isActive} />
+        </Normal>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,5 @@
+@media screen and (max-width: 4500px) {
+  .Message {
+    margin-top: 2px;
+  }
+}

src/views/ChatRoom/Body/index.js

@@ -1,17 +1,16 @@
 import React, { Component } from 'react';
-import Message from './Message/Message';
-import ChatInputs from './ChatInputs/ChatInput';
-import ChatSuggest from './ChatSuggest/ChatSuggest';
+import Message from './Message';
+import ChatInputs from './Input';
+import ChatSuggest from './Keyboard';
 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 {
+import './index.scss';
+class List extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -360,9 +359,10 @@ class Body extends Component {
           className="chat-body__content d-flex flex-column"
           id="chatroom"
           style={{
+            paddingTop: 10,
             overflowX: 'hidden',
             overflowY: this.state.file !== null ? 'hidden' : 'scroll',
-            paddingBottom: this.state.footer === 'suggest' ? 150 : 70,
+            paddingBottom: this.state.footer === 'suggest' ? 150 : 40,
           }}
         >
           {chatInfo.users &&
@@ -371,9 +371,9 @@ class Body extends Component {
               this.state.music === null &&
               this.state.video === null ? (
                 <Message
-                  isActive={true || i == messageList.length - 1}
+                  isActive={i == messageList.length - 1}
                   prevUserId={i > 0 ? messageList[i - 1].userId : 0}
-                  isSelf={1 != item.userId}
+                  isSelf={1 == item.userId}
                   key={i}
                   file={this.state.image}
                   document={this.state.document}
@@ -454,4 +454,4 @@ export default connect(
     };
   },
   { list, send, sendKeys, info, bio }
-)(Body);
+)(List);

src/views/ChatRoom/Body/index.scss

@@ -4,7 +4,7 @@
     border: 3px solid #ffffff66;
     width: 60px;
     height: 60px;
-    top: 20px;
+    // top: 20px;
     z-index: 30;
     font-family: 'IRANSansNumeralBold';
     & div {

src/views/ChatRoom/Header/index.js

@@ -4,7 +4,7 @@ import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 
-import './Header.scss';
+import './index.scss';
 export default class Header extends Component {
   constructor(props) {
     super(props);

src/views/ChatRoom/Info/FileTabs/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import './FileTabs.scss';
+import './index.scss';
 export default class FileTabs extends Component {
   constructor(props) {
     super(props);

src/views/ChatRoom/Info/Gallery/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Carousel from 'react-elastic-carousel';
 import CloseIcon from '@material-ui/icons/Close';
 
-import './Gallery.scss';
+import './index.scss';
 
 export default function Gallery(props) {
   // const [state,setState] = useState({

src/views/ChatRoom/Info/index.js

@@ -1,12 +1,10 @@
 import React, { Component } from 'react';
 import ChatIcon from '@material-ui/icons/Chat';
-
-import FileTabs from './FileTabs/FileTabs';
-import Gallery from './Gallery/Gallery.js';
-
+import FileTabs from './FileTabs';
+import Gallery from './Gallery';
 import user2 from '../../../assets/images/user2.png';
 
-import './ChatInfo.scss';
+import './index.scss';
 export default class ChatInfo extends Component {
   constructor(props) {
     super(props);

src/views/ChatRoom/index.js

@@ -1,10 +1,8 @@
 import React, { Component } from 'react';
-
-import Header from './Header/Header';
-import Body from './Body/Body';
-import ChatInfo from './ChatInfo/ChatInfo';
-
-import './ChatRoom.scss';
+import Header from './Header';
+import Body from './Body';
+import Info from './Info';
+import './index.scss';
 export default class ChatRoom extends Component {
   constructor(props) {
     super(props);
@@ -31,7 +29,7 @@ export default class ChatRoom extends Component {
           </>
         ) : (
           <>
-            <ChatInfo />
+            <Info />
           </>
         )}
       </div>