删除mobx observer

package.json

@@ -21,7 +21,8 @@
     "react-chat-elements": "^12.0.11",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1",
-    "rxjs": "^7.8.1"
+    "rxjs": "^7.8.1",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/lib/msgUtils.js

@@ -64,7 +64,7 @@ export const whatsappMsgMapped = {
       if ((contentObj?.status === 'failed' )) {
         contentObj = {
           type: 'error',
-          text: {body: 'Message failed to send' }, // contentObj.errorMessage
+          text: {body: '❌ Message failed to send' }, // contentObj.errorMessage
           id: contentObj.id,
           wamid: contentObj.id,
         };

src/lib/realTimeAPI.js

@@ -1,10 +1,18 @@
 import { webSocket } from 'rxjs/webSocket';
-import { filter, buffer, map, tap } from 'rxjs/operators';
-// import { v4 as uuid } from "uuid";
+import { filter, buffer, map, tap, retryWhen, delay, take } from 'rxjs/operators';
+import { v4 as uuid } from "uuid";
 
 export class RealTimeAPI {
   constructor(param) {
-    this.webSocket = webSocket(param);
+    this.webSocket = webSocket(param).pipe(
+      retryWhen(errors =>
+        errors.pipe(
+          tap(val => console.error(`WebSocket connection failed with error: ${val}`)),
+          delay(5000), // retry after 5 seconds
+          take(5)
+        )
+      )
+    );
   }
 
   getObservable() {

src/main.jsx

@@ -38,6 +38,7 @@ const router = createBrowserRouter([
       { path: 'order/follow', element: <OrderFollow /> },
       { path: 'chat/history', element: <ChatHistory /> },
       { path: 'sales/management', element: <SalesManagement /> },
+      { path: 'order/chat/:order_id', element: <Conversations /> },
       { path: 'order/chat', element: <Conversations /> },
       { path: 'account/profile', element: <AccountProfile /> },
     ],

src/views/Conversations/ChatWindow.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { observer } from 'mobx-react';
+import { useParams, useNavigate } from "react-router-dom";
 import { Layout, List, Avatar, Flex, Typography, Spin } from 'antd';
 import Messages from './Components/Messages';
 import InputBox from './Components/InputBox';
@@ -20,11 +20,14 @@ const { Sider, Content, Header, Footer } = Layout;
 /**
  *
  */
-const ChatWindow = observer(() => {
+const ChatWindow = (() => {
+	const { order_id } = useParams();
   const { loginUser: currentUser } = useAuthContext();
   const { errors, sendMessage, currentConversation, customerOrderProfile: orderInfo } = useConversationContext();
   const { quotes, contact, last_contact, ...order } = orderInfo;
 
+  console.log(order_id, currentUser);
+
   return (
     <Spin spinning={false} tip={'正在连接...'} >
       <Layout className='full-height h-full chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 198px)', height: 'calc(100% - 198px)' }}>

src/views/Conversations/Components/ContactInfo.jsx

@@ -1,9 +1,8 @@
 import { useContext } from 'react';
-import { observer } from "mobx-react";
 import { stores_Context } from '../config';
 import { Table } from 'antd';
 
-const ContactInfo = observer((props) => {
+const ContactInfo = ((props) => {
   // const {  } = useContext(stores_Context);
     return (
       <>

src/views/Conversations/Components/ContactPanel.jsx

@@ -1,9 +1,8 @@
 import { useContext } from 'react';
-import { observer } from "mobx-react";
 import { stores_Context } from '../config';
 import { Table } from 'antd';
 
-const ContactPanel = observer((props) => {
+const ContactPanel = ((props) => {
   // const {  } = useContext(stores_Context);
     return (
       <>

src/views/Conversations/Components/ConversationsList.jsx

@@ -1,5 +1,4 @@
 import { useRef, useEffect, useState } from 'react';
-import { observer } from 'mobx-react';
 import { List, Avatar, Flex } from 'antd';
 import { useConversationContext } from '@/stores/Conversations/ConversationContext';
 import { ChatItem, ChatList } from 'react-chat-elements';
@@ -7,7 +6,7 @@ import { useGetJson } from '@/hooks/userFetch';
 /**
  * []
  */
-const Conversations = observer(({ conversations }) => {
+const Conversations = (({ conversations }) => {
   const { switchConversation, conversationsList } = useConversationContext();
   // console.log(conversationsList);
   const [chatlist, setChatlist] = useState([]);

src/views/Conversations/Components/CreatePayment.jsx

@@ -1,8 +1,7 @@
 import { createContext, useContext, useEffect, useState } from 'react';
-import { observer } from "mobx-react";
 import { Popover, Flex, Button } from 'antd';
 
-const CreatePayment = observer((props) => {
+const CreatePayment = ((props) => {
 
   const [open, setOpen] = useState(false);
   const handleOpenChange = (newOpen) => {

src/views/Conversations/Components/CustomerProfile.jsx

@@ -1,4 +1,3 @@
-import { observer } from 'mobx-react';
 import { Card, Flex, Avatar, Typography, Radio, Button, Table } from 'antd';
 import { useAuthContext } from '@/stores/AuthContext.js';
 import { useConversationContext } from '@/stores/Conversations/ConversationContext';
@@ -28,7 +27,7 @@ const orderStatus = [
 
 const { Meta } = Card;
 
-const CustomerProfile = observer(({ customer }) => {
+const CustomerProfile = (({ customer }) => {
   const { errors, customerOrderProfile: orderInfo } = useConversationContext();
   const { loginUser: currentUser } = useAuthContext();
   const { quotes, contact, last_contact, ...order } = orderInfo;

src/views/Conversations/Components/InputBox.jsx

@@ -1,12 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { observer } from 'mobx-react';
 import { Input, Button, Tabs, List, Space, Popover, Flex } from 'antd';
 // import { Input } from 'react-chat-elements';
 import { useConversationContext } from '@/stores/Conversations/ConversationContext';
 import { LikeOutlined, MessageOutlined, StarOutlined, SendOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons';
 import { isEmpty } from '@/utils/utils';
 
-const InputBox = observer(({ onSend }) => {
+const InputBox = (({ onSend }) => {
   const { currentConversation, templates } = useConversationContext();
   const [textContent, setTextContent] = useState('');
   console.log('ttt');

src/views/Conversations/Components/LocalTimeClock.jsx

@@ -1,9 +1,8 @@
 import { useEffect, useState } from 'react';
-import { observer } from 'mobx-react';
 import { Typography } from 'antd';
 import { useConversationContext } from '@/stores/Conversations/ConversationContext';
 
-const LocalTimeClock = observer((props) => {
+const LocalTimeClock = ((props) => {
   const { customerOrderProfile: orderInfo } = useConversationContext();
 
   const [customerDateTime, setCustomerDateTime] = useState();

src/views/Conversations/Components/Messages.jsx

@@ -1,10 +1,9 @@
 import { useEffect, useState, useRef } from 'react';
-import { observer } from 'mobx-react';
 import { List, Avatar, Timeline, Image } from 'antd';
 import { MessageBox } from 'react-chat-elements';
 import { useConversationContext } from '@/stores/Conversations/ConversationContext';
 
-const Messages = observer(() => {
+const Messages = (() => {
   const { messages: messagesList } = useConversationContext();
   // const messagesList = parseMessage(messages);
   // console.log(messagesList);
@@ -38,9 +37,10 @@ const Messages = observer(() => {
           {...message}
           onOpen={() => handlePreview(message)}
           letterItem={{ id: 1, letter: 'AS' }}
-          // read | 'waiting'| 'sent' | 'received' | 'read'
+          // 'waiting'| 'sent' | 'received' | 'read'
           styles={{backgroundColor: message.sender === 'me' ? '#ccd5ae' : 'inherit'}}
           notchStyle={{fill: '#ccd5ae'}}
+          // copiableDate={false}
         />
       ))}
       <Image src={previewSrc} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />

src/views/Conversations/Components/QuotesHistory.jsx

@@ -1,8 +1,7 @@
 import { createContext, useContext, useEffect, useState } from 'react';
-import { observer } from 'mobx-react';
 import { Popover, Flex, Button, List, Popconfirm } from 'antd';
 
-const CreatePayment = observer((props) => {
+const CreatePayment = ((props) => {
   const [open, setOpen] = useState(false);
   const handleOpenChange = (newOpen) => {
     setOpen(newOpen);

src/views/Conversations/Index2.jsx

@@ -1,5 +1,4 @@
 import { useContext } from 'react';
-import { observer } from 'mobx-react';
 import { Table } from 'antd';
 import WebSocketLib from '@/lib/websocketLib2';
 
@@ -28,7 +27,7 @@ const customers = [
   // Or broadcast a message to all customers like this:
   // connections.forEach(conn => conn.sendMessage('Hello, all customers!'));
 
-export default observer((props) => {
+export default ((props) => {
   // const {  } = useContext(stores_Context);
   return <></>;
 });