Proyectos de Subversion LeadersLinked - Backend

import { axios, useWindowSize } from "../../utils";
import React, { useEffect, useState } from "react";
import AddGroupTab from "./add-group-tab/AddGroupTab";
import AddMember from "./add-member/AddMember";
import Chat from "./chat/Chat";
import Contacts from "./contacts/Contacts";
import GroupMembers from "./group-members/GroupMembers";
import GroupSettings from "./group-settings/GroupSettings";
import DesktopChat from "./desktop-chat/DesktopChat";
import styles from "./mobileChat.module.scss";

const CHAT_TABS = {
  CHAT: "CHAT",
  DEFAULT: "DEFAULT",
  ADDGROUP: "ADDGROUP",
  GROUP_SETTINGS: "GROUP_SETTINGS",
  GROUP_MEMBERS: "GROUP_MEMBERS",
  ADD_GROUP_MEMBER: "ADD_GROUP_MEMBER",
};

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

const MobileChat = (props) => {
  // backendVars Destructuring
  const { emojione_image_path_png, timezones } = props.backendVars;
  // states
  const [chatUsers, setChatUsers] = useState([]);
  const [chatGroups, setChatGroups] = useState([]);
  const [unreadEntities, setUnreadEntities] = useState([]);
  const [activeTab, setActiveTab] = useState(CHAT_TABS.DEFAULT);
  const [activeChat, setActiveChat] = useState(null);
  useEffect(() => {
    const heartBeatInterval = setInterval(heartBeat, 1000);
    heartBeat();
    return () => {
      clearInterval(heartBeatInterval);
    };
  }, []);

  console.log(props);

  // emojione settings
  /* useEffect(() => {
    emojione.imageType = "png";
    emojione.sprites = false;
    emojione.ascii = true;
    emojione.imagePathPNG = emojione_image_path_png;
  }, []); */

  const heartBeat = async () => {
    axios.get("/chat/heart-beat").then((response) => {
      const resData = response.data;
      if (resData.success) {
        const entities = resData.data;
        let updatedChatUsers = [];
        let updatedChatGroups = [];
        let updatedUnreadEntites = [];
        entities.map((entity) => {
          if (entity.not_received_messages) {
            handlePlayNewMessage(entity.url_mark_received);
          }
          if (entity.not_seen_messages) {
            return (updatedUnreadEntites = [...updatedUnreadEntites, entity]);
          }
          switch (entity.type) {
            case "user":
              updatedChatUsers = [...updatedChatUsers, entity];
              break;
            case "group":
              updatedChatGroups = [...updatedChatGroups, entity];
              break;
            default:
              break;
          }
        });
        setChatUsers(updatedChatUsers);
        setChatGroups(updatedChatGroups);
        setUnreadEntities(updatedUnreadEntites);
      }
    });
  };

  const handlePlayNewMessage = async (setReceivedLink) => {
    notifyAudio.play();
    const resData = (await axios.post(setReceivedLink)).data;
    resData;
  };

  const handleOpenChat = (entity) => {
    if (activeTab === CHAT_TABS.CHAT) {
      setActiveTab(CHAT_TABS.DEFAULT);
    }
    setActiveChat(entity);
    setTimeout(() => {
      setActiveTab(CHAT_TABS.CHAT);
    }, 500);
  };

  const handleCloseChat = () => {
    setActiveTab(CHAT_TABS.DEFAULT);
    axios.post(activeChat.url_close).then((response) => {
      const resData = response.data;
      resData;
    });
    setActiveChat(null);
  };

  const handleAddGroup = () => {
    setActiveTab(CHAT_TABS.ADDGROUP);
  };

  const handleDefaultTab = () => {
    setActiveTab(CHAT_TABS.DEFAULT);
  };

  const openGroupMembersTab = () => {
    setActiveTab(CHAT_TABS.GROUP_MEMBERS);
  };

  const openAddMemberTab = () => {
    setActiveTab(CHAT_TABS.ADD_GROUP_MEMBER);
  };

  return (
    <div className={styles.mobileChat}>
      {activeTab === CHAT_TABS.CHAT && (
        <div className={styles.mobileChat__header}>
          <div className={styles.entityHeader}>
            <a
              href="#"
              onClick={(e) => {
                e.preventDefault();
                handleCloseChat();
              }}
              className={styles.entityHeader__backBtn}
            >
              <i className="fa fa-arrow-left"></i>
            </a>
            <img
              src={
                activeChat && activeChat.type === "user"
                  ? activeChat.image
                  : "/images/users-group.png"
              }
              alt=""
            />
            <span className={styles.entityHeader__name}>{activeChat.name}</span>
          </div>
          {activeChat.type === "group" && (
            <i
              className="fa fa-gear"
              onClick={() => {
                setActiveTab(CHAT_TABS.GROUP_SETTINGS);
              }}
            ></i>
          )}
        </div>
      )}
      {(activeTab === CHAT_TABS.ADDGROUP ||
        activeTab === CHAT_TABS.GROUP_SETTINGS ||
        activeTab === CHAT_TABS.GROUP_MEMBERS ||
        activeTab === CHAT_TABS.ADD_GROUP_MEMBER) && (
        <div className={styles.mobileChat__header}>
          <div className={styles.entityHeader}>
            <a
              href="#"
              onClick={(e) => {
                e.preventDefault();
                switch (activeTab) {
                  case CHAT_TABS.ADDGROUP:
                    handleDefaultTab();
                    break;
                  case CHAT_TABS.GROUP_SETTINGS:
                    setActiveTab(CHAT_TABS.CHAT);
                    break;
                  case CHAT_TABS.GROUP_MEMBERS:
                  case CHAT_TABS.ADD_GROUP_MEMBER:
                    setActiveTab(CHAT_TABS.GROUP_SETTINGS);
                    break;
                  default:
                    break;
                }
              }}
              className={styles.entityHeader__backBtn}
            >
              <i className="fa fa-arrow-left"></i>
              <span>Atrás</span>
            </a>
          </div>
        </div>
      )}
      <div className={styles.mainSection}>
        {window.innerWidth >= 768 ? (
          <DesktopChat
            unreadEntities={unreadEntities}
            chatUsers={chatUsers}
            chatGroups={chatGroups}
            timezones={timezones}
          />
        ) : (
          <>
            {activeTab === CHAT_TABS.DEFAULT && (
              <Contacts
                onOpenChat={handleOpenChat}
                unreadEntities={unreadEntities}
                chatUsers={chatUsers}
                chatGroups={chatGroups}
                onAddGroup={handleAddGroup}
              />
            )}
            {activeTab === CHAT_TABS.CHAT && (
              <Chat entity={activeChat} timezones={timezones} />
            )}
          </>
        )}
        {activeTab === CHAT_TABS.ADDGROUP && (
          <AddGroupTab onClose={handleDefaultTab} />
        )}
        {activeTab === CHAT_TABS.GROUP_SETTINGS && (
          <GroupSettings
            group={activeChat}
            onOpenMembersTab={openGroupMembersTab}
            onOpenAddMemberTab={openAddMemberTab}
            f
            onClose={handleCloseChat}
          />
        )}
        {activeTab === CHAT_TABS.GROUP_MEMBERS && (
          <GroupMembers group={activeChat} />
        )}
        {activeTab === CHAT_TABS.ADD_GROUP_MEMBER && (
          <AddMember group={activeChat} />
        )}
      </div>
    </div>
  );
};

export default MobileChat;