From f86da08caa4800d5529a9fbfc7d302bbcd3f09be Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Wed, 20 Mar 2024 15:04:27 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=9C=A8=E7=BA=BF=E8=81=8A=E5=A4=A9:?=
 =?UTF-8?q?=20=E6=98=BE=E7=A4=BA=E8=BF=87=E6=9C=9F=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/ConversationStore.js               |  6 ++--
 .../Components/ConversationsList.jsx          |  2 +-
 .../Components/ExpireTimeClock.jsx            | 28 +++++++++++++------
 .../Components/InputComposer.jsx              |  6 ++--
 .../Components/MessagesHeader.jsx             |  2 +-
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/stores/ConversationStore.js b/src/stores/ConversationStore.js
index f171ec5..6dbe4ee 100644
--- a/src/stores/ConversationStore.js
+++ b/src/stores/ConversationStore.js
@@ -255,11 +255,12 @@ const messageSlice = (set, get) => ({
 
     const targetIndex = conversationsList.findIndex((ele) => String(ele.sn) === String(targetId));
     let newConversations = [];
-    if (targetIndex !== -1 && message.status === 'received') { // 'delivered'
+    if (targetIndex !== -1) { // 'delivered'
       // 更新列表的时间
       conversationsList.splice(targetIndex, 1, {
         ...conversationsList[targetIndex],
-        last_received_time: message.deliverTime, // todo: 需要+8 hours
+        last_received_time: message.status === 'received' ? message.deliverTime : conversationsList[targetIndex].last_received_time, // todo: 需要+8 hours
+        conversation_expiretime: message?.conversation?.expireTime || conversationsList[targetIndex].conversation_expiretime || '', // 保留使用UTC时间
       });
     } else if (targetIndex === -1) {
       // 当前客户端不存在的会话 todo: 设置为当前(在WhatsApp返回号码不一致时)
@@ -273,6 +274,7 @@ const messageSlice = (set, get) => ({
         whatsapp_name: message?.senderName || message?.sender || '',
         customer_name: message?.senderName || message?.sender || '',
         whatsapp_phone_number: message.from,
+        conversation_expiretime: message?.conversation?.expireTime || '', // 保留使用UTC时间
       }];
     }
 
diff --git a/src/views/Conversations/Components/ConversationsList.jsx b/src/views/Conversations/Components/ConversationsList.jsx
index 12c55f4..1ca83c9 100644
--- a/src/views/Conversations/Components/ConversationsList.jsx
+++ b/src/views/Conversations/Components/ConversationsList.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState, useRef } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import { Dropdown, Input } from 'antd';
-import { fetchOrderConversationsList, fetchConversationItemClose, fetchMessages, MESSAGE_PAGE_SIZE, } from '@/actions/ConversationActions';
+import { fetchOrderConversationsList, fetchConversationItemClose, } from '@/actions/ConversationActions';
 import { ChatItem } from 'react-chat-elements';
 import { isEmpty } from '@/utils/utils';
 import useConversationStore from '@/stores/ConversationStore';
diff --git a/src/views/Conversations/Components/ExpireTimeClock.jsx b/src/views/Conversations/Components/ExpireTimeClock.jsx
index cad09a1..a23907e 100644
--- a/src/views/Conversations/Components/ExpireTimeClock.jsx
+++ b/src/views/Conversations/Components/ExpireTimeClock.jsx
@@ -12,23 +12,33 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(relativeTime);
 
-const ExpireTimeClock = () => {
-  const currentConversation = useConversationStore((state) => state.currentConversation);
+const ExpireTimeClock = ({ expireTime }) => {
+  // const expireTime = useConversationStore((state) => state.currentConversation.conversation_expiretime);
 
-  const [customerDateTime, setCustomerDateTime] = useState();
+  const [customerDateTime, setCustomerDateTime] = useState('');
+  const [isExpired, setIsExpired] = useState(false);
 
   useEffect(() => {
     const intervalId = setInterval(() => {
-      setCustomerDateTime(dayjs(currentConversation.conversation_expireTime).tz('Asia/Shanghai').fromNow());
-    }, 1000); // Update every second
+      // .tz('Asia/Shanghai') UTC 时间转换成 Asia/Shanghai 时区时间 GMT+8
+      setCustomerDateTime(dayjs(expireTime).add(8, 'hours').fromNow());
+    }, 1000);
     return () => clearInterval(intervalId);
-  }, []);
+  }, [expireTime]);
 
-  return currentConversation.conversation_expireTime ? (
+  useEffect(() => {
+    const _ago = customerDateTime.slice(-3) === 'ago';
+    setIsExpired(_ago);
+
+    return () => {};
+  }, [customerDateTime]);
+
+
+  return expireTime && !isExpired ? (
     <>
-      <Typography.Text className='text-primary'>
+      <Typography.Text className={'text-primary'}>
         <ClockCircleOutlined className='px-1' />
-        Expire {customerDateTime}
+        {isExpired ? 'Expired' : 'Expire'} {customerDateTime}
       </Typography.Text>
     </>
   ) : null;
diff --git a/src/views/Conversations/Components/InputComposer.jsx b/src/views/Conversations/Components/InputComposer.jsx
index af1bcc3..3b1e26c 100644
--- a/src/views/Conversations/Components/InputComposer.jsx
+++ b/src/views/Conversations/Components/InputComposer.jsx
@@ -216,10 +216,10 @@ const InputComposer = ({ mobile }) => {
     <div>
       {referenceMsg.id && (
         <Flex justify='space-between' className='reply-to bg-gray-100 p-1 rounded-none text-slate-500'>
-          <div className='referrer-msg border-l-3 border-y-0 border-r-0 border-slate-300 border-solid pl-2 pr-1 py-1'>
+          <div className='flex flex-col referrer-msg border-l-3 border-y-0 border-r-0 border-slate-300 border-solid pl-2 pr-1 py-1'>
             <span className=' text-primary pr-1 italic align-top'>{referenceMsg.senderName}</span>
             {referenceMsg.type === 'photo' && <Image width={100} src={referenceMsg.data.uri} />}
-            <span className='px-1'>{referenceMsg.originText}</span>
+            <span className='px-1 whitespace-pre-wrap'>{referenceMsg.originText}</span>
           </div>
           <Button type='text' title='取消引用' className=' rounded-none text-slate-500' icon={<CloseCircleOutlined />} size={'middle'} onClick={() => setReferenceMsg({})} />
         </Flex>
@@ -278,7 +278,7 @@ const InputComposer = ({ mobile }) => {
           <Button type='text' className='' icon={<FilePdfOutlined />} size={'middle'} /> */}
         </Flex>
         <Flex gap={4} align={'center'}>
-          <ExpireTimeClock />
+          <ExpireTimeClock expireTime={currentConversation.conversation_expiretime} />
           <Button key={'send-btn'} onClick={handleSendText} type='primary' size='middle' icon={<SendOutlined />} disabled={!textabled || pastedUploading}>
             Send
           </Button>
diff --git a/src/views/Conversations/Components/MessagesHeader.jsx b/src/views/Conversations/Components/MessagesHeader.jsx
index c9b2aca..72d15aa 100644
--- a/src/views/Conversations/Components/MessagesHeader.jsx
+++ b/src/views/Conversations/Components/MessagesHeader.jsx
@@ -54,7 +54,7 @@ const MessagesHeader = () => {
             <Spin spinning={msgListLoading} />
           </Flex>
           <Flex vertical={true} justify='space-between'>
-            <Typography.Text><ExpireTimeClock /></Typography.Text>
+            <Typography.Text><ExpireTimeClock expireTime={currentConversation.conversation_expiretime} /></Typography.Text>
             {/* <Typography.Text>{customerDateTime}</Typography.Text> */}
           </Flex>
         </Flex>