Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable react/prop-types */

import React, { useEffect, useState } from "react";

import { axios } from "../../utils";

import { FiMaximize2 } from "react-icons/fi";

import AddIcon from "@mui/icons-material/Add";

// Components

import NotificationAlert from "../../shared/notification/NotificationAlert";

import PersonalChat from "./personal-chat/PersonalChat";

import ContactsModal from "./components/ContactsModal";

import ContactsFilters from "./components/contactsFilters";

const notifyAudio = new Audio("/audio/chat.mp3");

const Chat = ({ emojiOnePath, timezones = {} }) => {

  const [contacts, setContacts] = useState([]);

  const [activeChats, setActiveChats] = useState([]);

  const [isChatOpen, setIsChatOpen] = useState(false);

  const [isMuted, setIsMuted] = useState(false);

  const [showModal, setShowModal] = useState(false);

  const [loading, setLoading] = useState(false);

  const [pendingConversation, setPendingConversation] = useState("");

  const handleEntities = (entities) => {

    entities.map((entity) => {

      if (entity.not_received_messages) handleNewMessage(entity);

      if (entity.not_seen_messages) handleNotSeenMessage(entity);

      if (entity.is_open) handleOpenConversation(entity, false);

      if (entity.type === "user") handleUpdateOnline(entity);

    });

    setContacts(entities);

  };

  const heartBeat = async () => {

    try {

      setLoading(true);

      const { data } = await axios.get("/chat/heart-beat");

      if (data.success) handleEntities(data.data);

      setLoading(false);

      return data.data;

    } catch (error) {

      console.log(">>: chat error > ", error);

    }

  };

  const handleUpdateOnline = (entity) => {

    const existingChatId = activeChats.findIndex(

      (activeChat) => activeChat.id === entity.id

    );

    if (existingChatId >= 0) {

      if (activeChats[existingChatId].online !== entity.online) {

        const newActiveChats = [...activeChats];

        newActiveChats[existingChatId].online = entity.online;

        setActiveChats(newActiveChats);

      }

    }

  };

  const handleNewMessage = async (unseeEntity) => {

    await axios.post(unseeEntity.url_mark_received);

    if (!activeChats.some((activeChat) => activeChat.id === unseeEntity.id)) {

      setActiveChats([...activeChats, { ...unseeEntity, minimized: false }]);

      playNotifyAudio();

    } else {

      const existingChatId = activeChats.findIndex(

        (activeChat) => activeChat.id === unseeEntity.id

      );

      if (!activeChats[existingChatId].unsee_messages) {

        const newActiveChats = [...activeChats];

        newActiveChats[existingChatId].unsee_messages = true;

        setActiveChats(newActiveChats);

        playNotifyAudio(newActiveChats[existingChatId].minimized);

      }

    }

  };

  const handleCloseConversation = async (entity) => {

    const { data } = await axios.post(entity.url_close);

    if (!data.success) console.log("Error in entity close");

    setActiveChats(

      activeChats.filter((prevActiveChats) => prevActiveChats.id !== entity.id)

    );

  };

  const handleOpenConversation = async (entity, minimized = false) => {

    if (activeChats.some((el) => el.id === entity.id)) {

      return null;

    }

    if (activeChats.length >= 3) {

      await handleCloseConversation(activeChats[0]);

      setActiveChats((prevActiveChats) => [

        ...prevActiveChats,

        { ...entity, minimized },

      ]);

      return;

    }

    setActiveChats((prevActiveChats) => [

      ...prevActiveChats,

      { ...entity, minimized },

    ]);

  };

  const handleReadConversation = async (entity) => {

    try {

      const { data } = await axios.post(entity.url_mark_seen);

      if (!data.success) console.log("Ha ocurrido un error");

      setActiveChats((prevActiveChats) =>

        [...prevActiveChats].map((chat) => {

          if (entity.id === chat.id)

            return { ...chat, not_seen_messages: false };

          return chat;

        })

      );

    } catch (error) {

      console.log(`Error: ${error}`);

    }

  };

  const handleMinimizeConversation = (entity, minimized = null) => {

    return setActiveChats((prevActiveChats) =>

      [...prevActiveChats].map((chat) => {

        if (entity.id === chat.id)

          return { ...chat, minimized: minimized ?? !chat.minimized };

        return chat;

      })

    );

  };

  const handleNotSeenMessage = (entity) => {

    const index = activeChats.findIndex((chat) => chat.id === entity.id);

    if (index !== -1) {

      setActiveChats((prev) =>

        [...prev].map((chat) => {

          if (chat.id === entity.id) {

            return {

              ...chat,

              not_seen_messages: entity.not_seen_messages,

            };

          }

          return chat;

        })

      );

    }

  };

  const playNotifyAudio = (minimized = true) => {

    if (!isMuted && minimized) {

      notifyAudio.play();

    }

  };

  const handleMute = () => {

    setIsMuted(!isMuted);

    if (isMuted) {

      notifyAudio.play();

    }

  };

  useEffect(() => {

    if (!loading) setTimeout(() => heartBeat(), 2000);

  }, [loading]);

  useEffect(() => {

    if (pendingConversation) {

      const pendingChat = contacts.find(

        (contact) => contact.url_send === pendingConversation

      );

      if (pendingChat) {

        handleOpenConversation(pendingChat);

        setPendingConversation("");

      }

    }

  }, [pendingConversation, contacts]);

  useEffect(() => {

    emojione.imageType = "png";

    emojione.sprites = false;

    emojione.ascii = true;

    emojione.imagePathPNG = emojiOnePath;

  }, []);

  if (window.innerWidth < 1000 || window.location.pathname === "/chat")

    return null;

  return (

    <>

      <div className="chat-helper">

        <div

          className="subpanel_title"

          onClick={(e) =>

            e.currentTarget === e.target && setIsChatOpen(!isChatOpen)

          }

        >

          <a href="/chat" className="text-chat-title">

            {CHAT_LABELS.CHAT}

            <FiMaximize2 className="ml-3" />

          </a>

          <div className="subpanel_title-icons">

            <i

              className={`icon ${

                isMuted ? "icon-volume-off" : "icon-volume-2"

              } text-20`}

              onClick={handleMute}

            />

            <i

              className={`fa ${

                isChatOpen ? "fa-angle-down" : "fa-angle-up"

              } text-20`}

              onClick={() => setIsChatOpen(!isChatOpen)}

            />

          </div>

        </div>

        {isChatOpen && (

          <>

            <button className="action-btn" onClick={() => setShowModal(true)}>

              <AddIcon />

              {CHAT_LABELS.START_CONVERSATION}

            </button>

            <ContactsFilters

              dataset={contacts}

              selectConversation={(entity) => handleOpenConversation(entity)}

            />

          </>

        )}

      </div>

      <div className="active_chats-list">

        {activeChats.map((entity, index) => (

          <PersonalChat

            index={index}

            key={entity.id}

            entity={entity}

            not_seen_messages={entity.not_seen_messages}

            minimized={entity.minimized}

            onClose={handleCloseConversation}

            onMinimize={handleMinimizeConversation}

            onRead={handleReadConversation}

            timezones={timezones}

          />

        ))}

      </div>

      <ContactsModal show={showModal} onClose={() => setShowModal(false)} />

      <NotificationAlert />

    </>

  );

};

export default Chat;