Untitled

// @flow
import { Grid } from "@mui/material";
import React, { useCallback, useEffect, useState } from "react";
import { useMutation, useQuery } from "react-query";
import { getConversation, sendTextMessage } from "../../api/requests";
import useUserData from "../../hooks/user/useUserData";
import ChatMessenger from "./Messenger/chatMessenger";
import ChatMessagesContainer from "./chatMessagesContainer";
import ChatMessagesContainerHeader from "./chatMessagesContainerHeader";
import ChatSideBar from "./chatSidebar";

const mockUserList = [
  {
    id: 'user1_id',
    name: 'John',
    surname: 'Doe',
    unreadMessages: 2,
    lastMessageDate: '2022-03-01',
    lastMessage: 'Hello, how are you?',
  },
  {
    id: 'user2_id',
    name: 'Jane',
    surname: 'Doe',
    unreadMessages: 0,
    lastMessageDate: '2022-03-02',
    lastMessage: 'I am fine, thank you. And you?',
  },
  {
    id: 'user3_id',
    name: 'Bob',
    surname: 'Smith',
    unreadMessages: 5,
    lastMessageDate: '2022-03-03',
    lastMessage: 'I am doing well, thank you.',
  },
  {
    id: 'user4_id',
    name: 'Alice',
    surname: 'Cooper',
    unreadMessages: 1,
    lastMessageDate: '2022-03-04',
    lastMessage: 'That is good to hear.',
  },
];
const mockMessages = [
  {
    id: 'msg1',
    messageText: 'Hello',
    messageDate: new Date(),
    name: 'John',
    isSender: false,
  },
  {
    id: 'msg2',
    messageText: 'Hi',
    messageDate: new Date(),
    name: 'Jane',
    isSender: true
  },
  {
    id: 'msg3',
    messageText: 'How are you?',
    messageDate: new Date(),
    name: 'John',
    isSender: false,
  },
  {
    id: 'msg4',
    messageText: 'I am fine',
    messageDate: new Date(),
    name: 'Jane',
    isSender: true
  }
]

const ChatContainer = () => {

  console.log("ChatContainer-rendered..");
  const [messages, setMessages] = useState([]);
  const [userConversations, setUserConversations] = useState([]);

  const [selectedMsgReceiverId, setSelecteMsgReceiverId] = useState([]);
  const [triggerSendMsgSrc, setTriggerSendMsgSrc] = useState(null); //src from which we are trying to open 'chat-card' | 'new-chat-button'

  const handleNewChatClicked = useCallback(() => {
    console.log("[ChatContainer][handleNewChat]");
    setTriggerSendMsgSrc("new-chat-button-clicked");
    //todo somehow configure that this event is coming from the newChatButton click when navigating to the chat
  }, []);

  const handleMsgCardClicked = useCallback(() => {
    console.log("[ChatContainer][handleMsgCardClick]");
    setTriggerSendMsgSrc("card-clicked");

    //todo somehow configure that this event is coming from the clicking a card that exists already in the chat sidebar
  }, []);

  const handleNewMsgReceiverSelected = (event) => {
    const {
      target: { value },
    } = event;
    console.log("[chatContainer][handleNewMsgReceiverSelected-value]->", value);
    setSelecteMsgReceiverId(value);
  };

  const { accessCode } = useUserData();
  const { data: conversationData, isLoading: isConversationLoading } = useQuery(
    ["getConversation", accessCode, selectedMsgReceiverId],
    getConversation,
    {
      enabled: true,
      refetchInterval: 30000, // Refetch every 30 seconds
    } // Initially disabled
  );

  const { mutate: sendTextMessageAction } = useMutation({
    mutationFn: sendTextMessage,
    onSuccess: (data, variables, context) => {
      console.log("[sendTextMessage][onSuccess]data->", data);
    },
  });

  const handleSendMessage = useCallback((message) => {
    console.log('handleSendMessage-selectedMsgReceiverId', selectedMsgReceiverId);

    sendTextMessageAction(
      ["sendTextMessage",
        accessCode,
        selectedMsgReceiverId,
        message]
    );
  }, [selectedMsgReceiverId]);

  console.log('chatContainer-selectedMsgReceiverId', selectedMsgReceiverId);

  useEffect(() => {
    setUserConversations(mockUserList);
    setMessages(mockMessages);
  }, []);

  const ChatListSideBar = <ChatSideBar
    userConversations={userConversations}
    setUserConversations={setUserConversations}
    onNewChatClicked={handleNewChatClicked}
    onMsgCardClicked={handleMsgCardClicked}
  />

  return (
    <Grid container spacing={1} sx={{ height: "calc(100% - 60px)" }}>
      <Grid item xs={3} md={3} lg={3} sx={{ borderRight: "1px solid #ECECEC" }}>
        {ChatListSideBar}
      </Grid>
      <Grid item xs={9} md={9} lg={9}>
        <ChatMessagesContainerHeader
          triggerSrc={triggerSendMsgSrc}
          selectedMsgReceiverId={selectedMsgReceiverId}
          onNewReceiversSelected={handleNewMsgReceiverSelected}
        />
        <ChatMessagesContainer conversationData={conversationData} />
        <ChatMessenger {...{ messages, submitMessage: handleSendMessage }} />
        {/* <ChatMessagesContainerSendMsgBar onSendMessage={handleSendMessage} /> */}
      </Grid>
    </Grid>
  );
};

export default ChatContainer;