Proyectos de Subversion LeadersLinked - Antes de SPA

import { async } from "postcss-js";

import React, { useCallback } from "react";

import { useState, useEffect } from "react";

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

import Contacts from "./contacts/Contacts";

import Groups from "./groups/Groups";

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

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

const Chat = (props) => {

  // states

  const [fullChats, setFullChats] = useState([]);

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

  const [groups, setGroups] = useState([]);

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

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

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

  const [activeTab, setActiveTab] = useState("user");

  const defaultChatInterval = 1500;

  const [chatInterval, setChatInterval] = useState(defaultChatInterval);

  const [search, setSearch] = useState('');

  const filtredContacts = contacts.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))

  const filtredGroups = groups.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))

  // Time intervals

  let heartBeatInterval;

  const handleEntities = entities => {

    setFullChats([...entities]);

    let newUserContacts = [];

    let newGroups = [];

    entities.map((entity) => {

      if (entity.is_open) {

        handleOpenConversation(entity, true);

      }

      if (entity.not_received_messages) {

        handleNewMessage(entity);

      }

      switch (entity.type) {

        case "user":

          newUserContacts = [...newUserContacts, entity];

          handleUpdateOnline(entity);

          break;

        case "group":

          newGroups = [...newGroups, entity];

          break;

        default:

          break;

      }

    });

    setContacts(newUserContacts);

    setGroups(newGroups);

  }

  const heartBeat = async () => {

    try {

      const res = await axios.get("/chat/heart-beat")

      let entities = [];

      const resData = res.data;

      if (resData.success) {

        entities = resData.data;

        handleEntities(entities);

      }

      return entities;

    } 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).then((response) => {

      ('')

    });

    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 handleOpenConversation = (entity, minimized = false) => {

    if (activeChats.length < 3 && !activeChats.some((el) => el.id === entity.id)) {

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

    }

    if (activeChats.length >= 3 && !activeChats.some((el) => el.id === entity.id)) {

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

        if (index === 0) {

          axios.post(el.url_close)

        }

      })

      const newActiveChats = activeChats.filter((el, index) => index !== 0)

      setActiveChats([...newActiveChats, { ...entity, minimized: minimized }]);

    }

  };

  const handleReadChat = (index) => {

    if (activeChats[index].unsee_messages) {

      const newActiveChats = [...activeChats];

      newActiveChats[index].unsee_messages = false;

      setActiveChats(newActiveChats);

    }

  };

  const handleMinimizeChat = (chatIndex, minimize) => {

    const newActiveChats = [...activeChats];

    switch (minimize) {

      case false:

        newActiveChats[chatIndex].minimized = false;

        break;

      default:

        newActiveChats[chatIndex].minimized =

          !newActiveChats[chatIndex].minimized;

        break;

    }

    setActiveChats(newActiveChats);

  };

  const handleCloseChat = (entityId, url_close) => {

    let newActiveChats = [];

    axios.post(url_close).then((response) => {

      const resData = response.data;

    });

    newActiveChats = activeChats.filter(

      (activeChat) => activeChat.id !== entityId

    );

    setActiveChats(newActiveChats);

  };

  const playNotifyAudio = (minimized = true) => {

    if (!isMuted && minimized) {

      notifyAudio.play();

    }

  };

  const handleMute = () => {

    setIsMuted(!isMuted);

    if (isMuted) {

      notifyAudio.play();

    }

  };

  const handleChangeTab = (tab) => {

    setActiveTab(tab);

  };

  useEffect(() => {

    let entities = [];

    clearInterval(heartBeatInterval);

    heartBeatInterval = setInterval(async () => {

      entities = await heartBeat() || [];

    }, chatInterval);

    if ((entities === fullChats) && (chatInterval !== defaultChatInterval * 2)) {

      clearInterval(heartBeatInterval);

      setChatInterval(defaultChatInterval * 2);

    }

    return () => {

      clearInterval(heartBeatInterval);

    };

  }, [chatInterval, fullChats]);

  useEffect(() => {

    emojione.imageType = "png";

    emojione.sprites = false;

    emojione.ascii = true;

    emojione.imagePathPNG = props.emojiOnePath;

  }, []);

  return window.innerWidth > 1000 ? (

    <React.Fragment>

      <div id="drupalchat-wrapper">

        <div id="drupalchat">

          <div className="item-list" id="chatbox_chatlist">

            <ul id="mainpanel">

              <li id="chatpanel" className="first last">

                <div className="subpanel" style={{ display: "block" }}>

                  <div

                    className="subpanel_title"

                    onClick={(e) => {

                      if (e.currentTarget === e.target)

                        setIsChatOpen(!isChatOpen);

                    }}

                  >

                    <div

                      style={{ width: "89%", height: "100%" }}

                      id="minmaxchatlist"

                      onClick={() => {

                        setIsChatOpen(!isChatOpen);

                      }}

                    >

                      <a

                        href="/chat"

                        className="text-white"

                      >

                        Chat

                      </a>

                    </div>

                    <span

                      className="min localhost-icon-minus-1"

                      id="mute-sound"

                    >

                      <i

                        className={`icon ${isMuted ? "icon-volume-off" : "icon-volume-2"

                          } text-20`}

                        aria-hidden="true"

                        onClick={handleMute}

                      ></i>

                    </span>

                    {/* <span

                      className="min localhost-icon-minus-1"

                      id="new-chat-group"

                      style={{ marginRight: "5%" }}

                      title="Crear grupo"

                    >

                      <i className="fa fa-edit"></i>

                    </span> */}

                  </div>

                  <div

                    id="showhidechatlist"

                    style={{ display: isChatOpen ? "block" : "none" }}

                  >

                    <div

                      className="drupalchat_search_main chatboxinput"

                      style={{ background: "#f9f9f9" }}

                    >

                      <div

                        className="drupalchat_search"

                        style={{ height: "auto" }}

                      >

                        <input

                          className="drupalchat_searchinput live-search-box"

                          id="live-search-box"

                          placeholder="Buscar"

                          size="24"

                          type="text"

                          name='search'

                          value={search}

                          onChange={e => {

                            setSearch(e.target.value || '')

                          }}

                        />

                        <button

                          className="searchbutton"

                          id="searchbutton"

                          title=""

                          style={{

                            height: "30px",

                            border: "none",

                            margin: "0px",

                            paddingRight: "13px",

                            verticalAlign: "middle",

                          }}

                          type="submit"

                        ></button>

                        <div

                          id="search_result"

                          style={{

                            textAlign: "center",

                            fontSize: "11px",

                            display: "none",

                          }}

                        >

                          Sin resultados

                        </div>

                      </div>

                    </div>

                    <div

                      className="drupalchat_search_main chatboxinput"

                      style={{ background: "#f9f9f9" }}

                    >

                      <div

                        style={{

                          width: "50%",

                          float: "left",

                          display: "inline-block",

                          padding: "5px",

                          textAlign: "center",

                          fontSize: "14px",

                        }}

                      >

                        <a

                          href="#"

                          className="blue-color chat-contacts"

                          onClick={(e) => {

                            e.preventDefault();

                            handleChangeTab("user");

                          }}

                        >

                          Contactos

                        </a>

                      </div>

                      <div

                        style={{

                          width: "50%",

                          display: "inline-block",

                          padding: "5px",

                          textAlign: "center",

                          fontSize: "14px",

                        }}

                      >

                        <a

                          href="#"

                          className="chat-groups"

                          onClick={(e) => {

                            e.preventDefault();

                            handleChangeTab("group");

                          }}

                        >

                          Grupos

                        </a>

                      </div>

                    </div>

                    <div

                      className="contact-list chatboxcontent"

                      style={{

                        display: activeTab === "user" ? "block" : "none",

                      }}

                    >

                      <Contacts

                        contacts={filtredContacts}

                        onOpenConversation={handleOpenConversation}

                      />

                    </div>

                    <div

                      className="group-list chatboxcontent"

                      style={{

                        display: activeTab === "group" ? "block" : "none",

                      }}

                    >

                      <ul id="group-list-ul" className="live-search-list-group">

                        <Groups

                          groups={filtredGroups}

                          onOpenConversation={handleOpenConversation}

                        />

                      </ul>

                    </div>

                    <div

                      className="group-contacts-list chatboxcontent"

                      style={{ display: "none" }}

                    >

                      <div style={{ textAlign: "center", fontSize: "13px" }}>

                        Integrantes del grupo

                      </div>

                      <ul

                        id="contact-group-list-ul"

                        className="live-search-list"

                      ></ul>

                    </div>

                  </div>

                </div>

              </li>

            </ul>

          </div>

        </div>

      </div>

      <div style={{ display: "flex" }}>

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

          <PersonalChat

            key={entity.id}

            entity={entity}

            index={index}

            onClose={handleCloseChat}

            onMinimize={handleMinimizeChat}

            onRead={handleReadChat}

          />

        ))}

      </div>

    </React.Fragment>

  ) : (

    ""

  );

};

export default Chat;