拆分reducer; 整理目录

src/reducers/ConversationReducer.js

@@ -1,4 +1,4 @@
-import initialState from '@/stores/Conversations/initialState';
+import initialState from '@/records/ConversationState';
 
 const NAME_SPACE = 'CONVERSATION/';
 

src/views/Conversations/ChatWindow.jsx

@@ -1,14 +1,13 @@
 import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { Layout, Avatar, Flex, Typography, Spin } from 'antd';
+import { Layout, Spin } from 'antd';
+import MessagesHeader from './Components/MessagesHeader';
 import Messages from './Components/Messages';
 import InputBox from './Components/InputBox';
 import ConversationsList from './Components/ConversationsList';
 import CustomerProfile from './Components/CustomerProfile';
-import LocalTimeClock from './Components/LocalTimeClock';
 
-import { useConversationContext } from '@/stores/Conversations/ConversationContext';
-import { sentNewMessage } from '@/stores/Conversations/ConversationActions';
+import { useConversationState, useConversationDispatch } from '@/stores/ConversationContext';
+import { sentNewMessage } from '@/actions/ConversationActions';
 import { sentMsgTypeMapped } from '@/lib/msgUtils';
 
 import './Conversations.css';
@@ -22,7 +21,8 @@ const { Sider, Content, Header, Footer } = Layout;
 const ChatWindow = () => {
   const { loginUser } = useAuthContext();
   const { userId } = loginUser;
-  const { dispatch, websocket, errors, currentConversation } = useConversationContext();
+  const { websocket, errors } = useConversationState();
+  const dispatch = useConversationDispatch();
   console.log(errors, 'errors;;;;;;;;;;;;;;;;;;;;;;;;');
 
   useEffect(() => {
@@ -50,19 +50,7 @@ const ChatWindow = () => {
         <Content style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}>
           <Layout className='h-full'>
             <Header className='ant-layout-sider-light ant-card p-1 h-auto'>
-              <Flex gap={16}>
-                {currentConversation.customer_name && <Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${currentConversation.customer_name}`} />}
-                <Flex flex={'1'} justify='space-between'>
-                  <Flex vertical={true} justify='space-between'>
-                    <Typography.Text strong>{currentConversation.customer_name}</Typography.Text>
-                    <Typography.Text>{currentConversation.whatsapp_phone_number}</Typography.Text>
-                  </Flex>
-                  <Flex vertical={true} justify='space-between'>
-                    <Typography.Text>{/* <LocalTimeClock /> <Typography.Text strong>{order?.location} </Typography.Text> */}</Typography.Text>
-                    {/* <Typography.Text>{customerDateTime}</Typography.Text> */}
-                  </Flex>
-                </Flex>
-              </Flex>
+              <MessagesHeader />
             </Header>
             <Content style={{ maxHeight: '74vh', height: '74vh' }}>
               <div className='h-full overflow-y-auto'>

src/views/Conversations/Components/ConversationsList.jsx

@@ -1,8 +1,8 @@
 import { useRef, useEffect, useState } from 'react';
 import { useParams, useNavigate } from "react-router-dom";
 import { List, Avatar, Flex } from 'antd';
-import { useConversationContext } from '@/stores/Conversations/ConversationContext';
-import { fetchCustomerProfile, receivedCustomerProfile, setCurrentConversation, addConversationList, setActiveConversations } from '@/stores/Conversations/ConversationActions'
+import { useConversationState, useConversationDispatch } from '@/stores/ConversationContext';
+import { fetchCustomerProfile, receivedCustomerProfile, setCurrentConversation, addConversationList, setActiveConversations } from '@/actions/ConversationActions'
 import { ChatList } from 'react-chat-elements';
 import { isEmpty, pick } from '@/utils/utils';
 import { v4 as uuid } from 'uuid';
@@ -12,7 +12,8 @@ import { v4 as uuid } from 'uuid';
 const Conversations = (() => {
 	const { order_sn } = useParams();
   const navigate = useNavigate();
-  const { dispatch, conversationsList, } = useConversationContext();
+  const {conversationsList} = useConversationState();
+  const dispatch = useConversationDispatch();
   const [chatlist, setChatlist] = useState([]);
   useEffect(() => {
     setChatlist(

src/views/Conversations/Components/CustomerProfile.jsx

@@ -1,6 +1,6 @@
 import { Card, Flex, Avatar, Typography, Radio, Button, Table } from 'antd';
 import { useAuthContext } from '@/stores/AuthContext.js';
-import { useConversationContext } from '@/stores/Conversations/ConversationContext';
+import { useConversationState } from '@/stores/ConversationContext';
 import { HomeOutlined, LoadingOutlined, SettingFilled, SmileOutlined, SyncOutlined, PhoneOutlined, MailOutlined, WhatsAppOutlined, SmileTwoTone  } from '@ant-design/icons';
 
 import CreatePayment from './CreatePayment';
@@ -22,7 +22,7 @@ const orderStatus = [
 const { Meta } = Card;
 
 const CustomerProfile = (() => {
-  const { errors, customerOrderProfile: orderInfo } = useConversationContext();
+  const { customerOrderProfile: orderInfo } = useConversationState();
   const { loginUser: currentUser } = useAuthContext();
   const { quotes, contact, last_contact, ...order } = orderInfo;
 

src/views/Conversations/Components/InputBox.jsx

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { Input, Button, Tabs, List, Space, Popover, Flex } from 'antd';
 // import { Input } from 'react-chat-elements';
-import { useConversationContext } from '@/stores/Conversations/ConversationContext';
+import { useConversationState } from '@/stores/ConversationContext';
 import { LikeOutlined, MessageOutlined, StarOutlined, SendOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons';
 import { cloneDeep, getNestedValue, isEmpty } from '@/utils/utils';
 import { v4 as uuid } from 'uuid';
 import { whatsappTemplatesParamMapped } from '@/lib/msgUtils';
 
 const InputBox = ({ onSend }) => {
-  const { dispatch, currentConversation, templates } = useConversationContext();
+  const { currentConversation, templates } = useConversationState();
   const [textContent, setTextContent] = useState('');
 
   const talkabled = !isEmpty(currentConversation.sn);

src/views/Conversations/Components/LocalTimeClock.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Typography } from 'antd';
-import { useConversationContext } from '@/stores/Conversations/ConversationContext';
+import { useConversationState } from '@/stores/ConversationContext';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
@@ -9,7 +9,7 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 
 const LocalTimeClock = ((props) => {
-  const { customerOrderProfile: orderInfo } = useConversationContext();
+  const { customerOrderProfile: orderInfo } = useConversationState();
 
   const [customerDateTime, setCustomerDateTime] = useState();
 

src/views/Conversations/Components/Messages.jsx

@@ -1,10 +1,10 @@
 import { useEffect, useState, useRef } from 'react';
 import { List, Avatar, Timeline, Image } from 'antd';
 import { MessageBox } from 'react-chat-elements';
-import { useConversationContext } from '@/stores/Conversations/ConversationContext';
+import { useConversationState } from '@/stores/ConversationContext';
 
 const Messages = (() => {
-  const { activeConversations, currentConversation } = useConversationContext();
+  const { activeConversations, currentConversation } = useConversationState();
   const messagesList = activeConversations[currentConversation.sn] || [];
   console.log('messagesList----------------------------------------------------', messagesList);
 

src/views/Conversations/Components/MessagesHeader.jsx

@@ -0,0 +1,27 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { useConversationState } from '@/stores/ConversationContext';
+
+import { Flex, Typography, Avatar } from 'antd';
+import LocalTimeClock from './LocalTimeClock';
+
+const MessagesHeader = () => {
+  const { currentConversation } = useConversationState();
+  return (
+    <>
+      <Flex gap={16}>
+        {currentConversation.customer_name && <Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${currentConversation.customer_name}`} />}
+        <Flex flex={'1'} justify='space-between'>
+          <Flex vertical={true} justify='space-between'>
+            <Typography.Text strong>{currentConversation.customer_name}</Typography.Text>
+            <Typography.Text>{currentConversation.whatsapp_phone_number}</Typography.Text>
+          </Flex>
+          <Flex vertical={true} justify='space-between'>
+            <Typography.Text>{/* <LocalTimeClock /> <Typography.Text strong>{order?.location} </Typography.Text> */}</Typography.Text>
+            {/* <Typography.Text>{customerDateTime}</Typography.Text> */}
+          </Flex>
+        </Flex>
+      </Flex>
+    </>
+  );
+};
+export default MessagesHeader;

src/views/Conversations/Components/QuotesHistory.jsx

@@ -1,9 +1,9 @@
 import { createContext, useContext, useEffect, useState } from 'react';
 import { Popover, Flex, Button, List, Popconfirm } from 'antd';
-import { useConversationContext } from '@/stores/Conversations/ConversationContext';
+import { useConversationState } from '@/stores/ConversationContext';
 
 const QuotesHistory = ((props) => {
-  const { customerOrderProfile: orderInfo } = useConversationContext();
+  const { customerOrderProfile: orderInfo } = useConversationState();
   const { quotes, ...order } = orderInfo;
 
   const [open, setOpen] = useState(false);

src/views/Conversations/ConversationProvider.jsx

@@ -1,6 +1,6 @@
 import { useContext, useReducer, useEffect } from 'react';
-import { ConversationContext, ConversationStateContext, ConversationDispatchContext } from '@/stores/Conversations/ConversationContext';
-import ConversationReducer from '@/stores/Conversations/ConversationReducer';
+import { ConversationStateContext, ConversationDispatchContext } from '@/stores/ConversationContext';
+import ConversationReducer from '@/reducers/ConversationReducer';
 import {
   initWebsocket,
   addError,
@@ -11,8 +11,8 @@ import {
   setActiveConversations,
   updateMessageItem,
   receivedNewMessage,
-} from '@/stores/Conversations/ConversationActions';
-import initialState from '@/stores/Conversations/initialState';
+} from '@/actions/ConversationActions';
+import initialState from '@/records/ConversationState';
 
 import { AuthContext } from '@/stores/AuthContext';
 
@@ -86,12 +86,12 @@ const ConversationProvider = ({ children }) => {
     }
     console.log('handleMessage*******************');
   };
-  return <ConversationContext.Provider value={{ ...state, dispatch }}>{children}</ConversationContext.Provider>;
-  // return (
-  //   <ConversationDispatchContext.Provider value={dispatch}>
-  //     <ConversationStateContext.Provider value={{...state}}>{children}</ConversationStateContext.Provider>
-  //   </ConversationDispatchContext.Provider>
-  // );
+  // return <ConversationContext.Provider value={{ ...state, dispatch }}>{children}</ConversationContext.Provider>;
+  return (
+    <ConversationStateContext.Provider value={{ ...state }}>
+      <ConversationDispatchContext.Provider value={dispatch}>{children}</ConversationDispatchContext.Provider>
+    </ConversationStateContext.Provider>
+  );
 };
 
 export default ConversationProvider;