Global-sales/src/views/Conversations/ConversationProvider.jsx

import { useContext, useReducer, useEffect } from 'react';
import { ConversationContext, ConversationStateContext, ConversationDispatchContext } from '@/stores/Conversations/ConversationContext';
import ConversationReducer from '@/stores/Conversations/ConversationReducer';
import {
  initWebsocket,
  addError,
  fetchConversationsList,
  fetchTemplates,
  receivedConversationList,
  receivedTemplates,
  setActiveConversations,
  updateMessageItem,
  receivedNewMessage,
} from '@/stores/Conversations/ConversationActions';
import initialState from '@/stores/Conversations/initialState';

import { AuthContext } from '@/stores/AuthContext';

import { RealTimeAPI } from '@/lib/realTimeAPI';
import { receivedMsgTypeMapped } from '@/lib/msgUtils';
import { isEmpty } from '@/utils/utils';

// const WS_URL = 'ws://202.103.68.144:8888/whatever/';
// const WS_URL = 'ws://120.79.9.217:10022/whatever/';
const WS_URL = 'wss://p9axztuwd7x8a7.mycht.cn/whatsapp_callback'; // prod:

const ConversationProvider = ({ children }) => {
  const { loginUser } = useContext(AuthContext);
  const { userId } = loginUser;
  console.log('====', loginUser);

  const realtimeAPI = new RealTimeAPI({ url: `${WS_URL}?opisn=${userId || ''}&_spam=${Date.now().toString()}`, protocol: 'WhatsApp' });
  const [state, dispatch] = useReducer(ConversationReducer, { ...initialState, websocket: null });

  console.log('ConversationProvider', state, dispatch);

  useEffect(() => {
    console.log('invoke provider');

    realtimeAPI.onError(() => dispatch(addError('Error')));
    realtimeAPI.onMessage(handleMessage);
    realtimeAPI.onCompletion(() => dispatch(addError('Connection broken')));

    dispatch(initWebsocket(realtimeAPI));
    return () => {
      realtimeAPI.disconnect();
    };
  }, []);

  useEffect(() => {
    fetchConversationsList(userId).then((data) => {
      console.log(data, 'llllllllllllllllllllllll');
      const dataMapped = data.reduce((r, v) => ({ ...r, [`${v.sn}`]: [] }), {});
      dispatch(receivedConversationList(data));
      dispatch(setActiveConversations(dataMapped));
    }); // todo: 和刷新订单会话页面有冲突

    fetchTemplates().then((data) => dispatch(receivedTemplates(data)));

    return () => {};
  }, []);
  const handleMessage = (data) => {
    console.log('handleMessage------------------');
    console.log(data);
    const { errcode, errmsg, result } = data;

    if (!result) {
      return false;
    }
    let resultType = result?.action || result.type;
    if (errcode !== 0) {
      // addError('Error Connecting to Server');
      resultType = 'error';
    }
    console.log(resultType, 'result.type');
    const msgObj = receivedMsgTypeMapped[resultType].getMsg(result);
    const msgRender = receivedMsgTypeMapped[resultType].contentToRender(msgObj);
    const msgUpdate = receivedMsgTypeMapped[resultType].contentToUpdate(msgObj);
    console.log('msgRender msgUpdate', msgRender, msgUpdate);
    if (['whatsapp.message.updated', 'message', 'error'].includes(resultType)) {
      dispatch(updateMessageItem(msgUpdate));
      // return false;
    }
    if (!isEmpty(msgRender)) {
      dispatch(receivedNewMessage(msgRender.conversationid, msgRender));
    }
    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>
  // );
};

export default ConversationProvider;