some

package.json

@@ -16,6 +16,7 @@
     "babel-plugin-wildcard": "^7.0.0",
     "bootstrap": "^4.6.0",
     "create-index": "^2.6.0",
+    "history": "^5.0.0",
     "jalali-moment": "^3.3.10",
     "leaflet": "^1.7.1",
     "node-sass": "^5.0.0",
@@ -69,4 +70,4 @@
     "wildcard",
     "import-directory"
   ]
-}
+}

src/App.js

@@ -1,9 +1,14 @@
 import React, { Component } from 'react';
 import AppRouter from './Router';
-
+import store from './Redux/store';
+import { Provider } from 'react-redux';
 class App extends Component {
   render() {
-    return <AppRouter />;
+    return (
+      <Provider store={store}>
+        <AppRouter />
+      </Provider>
+    );
   }
 }
 

src/Redux/proxy.js

@@ -4,6 +4,7 @@ const baseURL = 'http://localhost:4040/api/v1'; //"https://chatstory.ir/api/v1";
 const token = '';
 const loginURL = 'user/otp/login';
 const logoutURL = 'user/logout';
+window.baseURL = baseURL;
 const Axios = axios.create({
   withCredentials: true,
   validateStatus: null,
@@ -43,18 +44,31 @@ class Proxy {
   };
   login = async (data, opt = { headers: { Authorization: `Bearer ${token}` } }) => {
     const login = await this.post(loginURL, data, opt);
-    if (!login || !login.refreshToken) this.result('login', false);
+    if (!login || !login.refreshToken) return this.result('login', false);
     localStorage.setItem('refresh', login.refreshToken);
     delete login.refreshToken;
-    if (data != {}) setTimeout(() => (window.location.href = '/'), 100);
+    localStorage.setItem('userData', JSON.stringify(login));
+    if (data != {}) window.router.setState({ islogin: true });
     return this.result('login', login);
   };
   logout = async () => {
     this.post(logoutURL);
     localStorage.removeItem('refresh');
-    window.location.href = '/';
+    localStorage.removeItem('userData');
+    window.router.setState({ islogin: false });
+    return this.result('logout', {});
+  };
+  status = () => {
+    let refresh = localStorage.getItem('refresh');
+    let userData = localStorage.getItem('userData');
+    if (!refresh) return false;
+    if (refresh == 'undefined') {
+      localStorage.removeItem('refresh');
+      localStorage.removeItem('userData');
+      return false;
+    }
+    return JSON.parse(userData);
   };
-  status = () => (localStorage.getItem('refresh') ? true : false);
 }
 const _proxy = new Proxy();
 

src/Redux/reducers/user.js

@@ -6,7 +6,7 @@ export default function user(state = initialState, action) {
   let { type, data } = action;
   switch (type) {
     case 'login':
-      return { ...state, ...data, islogin: proxy.status() };
+      return { ...state, ...proxy.status(), islogin: proxy.status(), ...data };
     case 'logout':
       return { ...state, islogin: proxy.status() };
     default:

src/Router.js

@@ -1,40 +1,32 @@
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import store from './Redux/store';
-import { Provider } from 'react-redux';
-
+import proxy from './Redux/proxy';
 import Home from './views/Home/Home';
 import ChatRoom from './views/ChatRoom/ChatRoom';
 import Auth from './views/Auth/Auth';
-import proxy from './Redux/proxy';
-export default class AppRouter extends Component {
+// import { connect } from 'react-redux';
+class AppRouter extends Component {
+  constructor(props) {
+    super(props);
+    window.router = this;
+  }
+  state = {};
   render() {
-    let home;
-    if (proxy.status()) {
-      home = (
-        <Route exact path={'/'}>
-          <Home />
-        </Route>
-      );
-    } else {
-      home = (
-        <Route exact path={'/'}>
-          <Auth />
-        </Route>
-      );
-    }
+    let home = (
+      <Route exact path={'/'}>
+        {proxy.status() ? <Home /> : <Auth />}
+      </Route>
+    );
+
     return (
-      <Provider store={store}>
-        <Router>
-          <Switch>{home}</Switch>
-          <Route exact path={`/chatroom/:id`}>
-            <ChatRoom />
-          </Route>
-          <Route exact path={'/auth'}>
-            <Auth />
-          </Route>
-        </Router>
-      </Provider>
+      <Router>
+        <Switch>{home}</Switch>
+        <Route exact path={`/chatroom/:id`}>
+          <ChatRoom />
+        </Route>
+      </Router>
     );
   }
 }
+
+export default AppRouter; //connect((state) => ({ isLogin: state.user.isLogin }), {})(AppRouter);

src/history.js

@@ -0,0 +1,3 @@
+// import { createBrowserHistory } from 'history';
+
+// export default createBrowserHistory();

src/views/Auth/Auth.js

@@ -8,11 +8,11 @@ import './Auth.scss';
 export default class Auth extends Component {
   constructor(props) {
     super(props);
+
     this.state = {
       page: 'logo',
     };
   }
-
   setPage = (val) => {
     this.setState({
       page: val,

src/views/ChatRoom/Body/Body.js

@@ -6,8 +6,6 @@ import { RecordState } from 'audio-react-recorder';
 import ReactPlayer from 'react-player';
 import ReactAudioPlayer from 'react-audio-player';
 
-import photo from '../../../assets/images/reza.png';
-import photo1 from '../../../assets/images/user2.png';
 import './Body.scss';
 import { list, send, sendKeys } from '../../../Redux/actions/message';
 import { info, bio } from '../../../Redux/actions/chat';
@@ -343,12 +341,15 @@ class Body extends Component {
   }
 
   render() {
-    const { setPage } = this.props;
+    const { setPage, chatInfo, messageList, userId } = this.props;
+    const userIdx = {};
+    chatInfo.users.map((e) => (userIdx[e.id] = e));
+    console.log({ userId });
     return (
       <div className="chat-body d-flex flex-column">
         <div className="chat-room__status d-flex flex-column" onClick={() => setPage('info')}>
-          <h1>{this.props.info.title}</h1>
-          <p>{this.props.info.subtitle}</p>
+          <h1>{chatInfo.title}</h1>
+          <p>{chatInfo.subtitle}</p>
         </div>
         <div
           className="chat-body__content d-flex flex-column"
@@ -359,18 +360,21 @@ class Body extends Component {
             paddingBottom: this.state.footer === 'suggest' ? 110 : 70,
           }}
         >
-          {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}
-                user={this.props.info.users[item.userId]}
-              />
-            ) : null
-          )}
+          {chatInfo.users &&
+            messageList.map((item, i) =>
+              this.state.image === null &&
+              this.state.music === null &&
+              this.state.video === null ? (
+                <Message
+                  isSelf={userId == item.userId}
+                  key={i}
+                  file={this.state.image}
+                  document={this.state.document}
+                  message={item}
+                  user={userIdx[item.userId] || { id: 0, fileId: 0, name: 'null' }}
+                />
+              ) : null
+            )}
           {this.state.image !== null ? (
             <div className="chat-body__content--preview d-flex">
               <img src={this.state.image} alt="" />
@@ -424,10 +428,13 @@ class Body extends Component {
   }
 }
 export default connect(
-  (state) => ({
-    info: state.chat.info,
-    userId: state.user.id,
-    message_list: state.message.list || [],
-  }),
+  (state) => {
+    console.log(state);
+    return {
+      chatInfo: state.chat.info,
+      userId: state.user.isLogin.id,
+      messageList: state.message.list || [],
+    };
+  },
   { list, send, sendKeys, info, bio }
 )(Body);

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

@@ -14,7 +14,7 @@ export default class Message2D extends Component {
         }}
       >
         <img
-          src={user.imageUri}
+          src={window.baseURL + '/file/download/' + user.fileId}
           style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
           alt={message.id}
         />
@@ -26,11 +26,14 @@ export default class Message2D extends Component {
           ) : null}
         </div>
         <div className="message-2d__options d-flex flex-column">
-          {message.options.map((option) => (
-            <div className="message-2d__options--row d-flex">
+          {message.options.map((option, i) => (
+            <div
+              key={message.id + '_' + option.id + '_' + i}
+              className="message-2d__options--row d-flex"
+            >
               {option.map((item, i) => (
                 <div
-                  key={i}
+                  key={message.id + '_' + item.id + '_' + i}
                   className="d-flex"
                   style={{ width: `calc(100% / ${option.length} )` }}
                   draggable={true}

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

@@ -18,7 +18,7 @@ export default class NormalMessage extends Component {
         }}
       >
         <img
-          src={user.imageUri}
+          src={window.baseURL + '/file/download/' + user.fileId}
           style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
           alt={message.id}
         />

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

@@ -26,7 +26,7 @@ export default class RadioMessage extends Component {
         }}
       >
         <img
-          src={user.imageUri}
+          src={window.baseURL + '/file/download/' + user.fileId}
           style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
           alt={message.id}
         />

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

@@ -42,7 +42,7 @@ export default class SliderMessage extends Component {
         }}
       >
         <img
-          src={user.imageUri}
+          src={window.baseURL + '/file/download/' + user.fileId}
           style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
           alt={message.id}
         />

src/views/ChatRoom/ChatRoom.js

@@ -8,11 +8,14 @@ import './ChatRoom.scss';
 export default class ChatRoom extends Component {
   constructor(props) {
     super(props);
+    window.nav = this.nav.bind(this);
     this.state = {
       page: 'chatroom',
     };
   }
-
+  nav = (url) => {
+    this.props.history.push(url);
+  };
   setPage = (val) => {
     this.setState({
       page: val,

src/views/Home/Header/NavbarDrawer/NavbarDrawer.js

@@ -50,7 +50,7 @@ class NavbarDrawer extends Component {
         },
         {
           name: 'خروج',
-          link: '/auth',
+          link: '/',
           icon: <ExitToAppIcon style={{ color: 'white', width: 35, height: 35, marginLeft: 10 }} />,
           toast: '',
           onClick: this.props.logout,

yarn.lock

@@ -1158,7 +1158,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.14.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
   integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
@@ -6182,6 +6182,13 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
+history@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.0.0.tgz#0cabbb6c4bbf835addb874f8259f6d25101efd08"
+  integrity sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"