Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 16290 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
16288 stevensc 1 
import { axios, useWindowSize } from "../../utils";
11347 nelberth 2 
import React, { useEffect, useState } from "react";
3 
import AddGroupTab from "./add-group-tab/AddGroupTab";
4 
import AddMember from "./add-member/AddMember";
5 
import Chat from "./chat/Chat";
6 
import Contacts from "./contacts/Contacts";
7 
import GroupMembers from "./group-members/GroupMembers";
8 
import GroupSettings from "./group-settings/GroupSettings";
9 
import DesktopChat from "./desktop-chat/DesktopChat";
10 
import styles from "./mobileChat.module.scss";
11 
 
12 
const CHAT_TABS = {
13 
  CHAT: "CHAT",
14 
  DEFAULT: "DEFAULT",
15 
  ADDGROUP: "ADDGROUP",
16 
  GROUP_SETTINGS: "GROUP_SETTINGS",
17 
  GROUP_MEMBERS: "GROUP_MEMBERS",
18 
  ADD_GROUP_MEMBER: "ADD_GROUP_MEMBER",
19 
};
20 
 
21 
const notifyAudio = new Audio("/audio/chat.mp3");
22 
 
23 
const MobileChat = (props) => {
24 
  // backendVars Destructuring
16288 stevensc 25 
  const { emojione_image_path_png, timezones } = props.backendVars;
11347 nelberth 26 
  // states
27 
  const [chatUsers, setChatUsers] = useState([]);
28 
  const [chatGroups, setChatGroups] = useState([]);
29 
  const [unreadEntities, setUnreadEntities] = useState([]);
30 
  const [activeTab, setActiveTab] = useState(CHAT_TABS.DEFAULT);
31 
  const [activeChat, setActiveChat] = useState(null);
32 
  useEffect(() => {
33 
    const heartBeatInterval = setInterval(heartBeat, 1000);
34 
    heartBeat();
35 
    return () => {
36 
      clearInterval(heartBeatInterval);
37 
    };
38 
  }, []);
39 
 
16288 stevensc 40 
  console.log(props);
11347 nelberth 41 
 
42 
  // emojione settings
43 
  /* useEffect(() => {
44 
    emojione.imageType = "png";
45 
    emojione.sprites = false;
46 
    emojione.ascii = true;
47 
    emojione.imagePathPNG = emojione_image_path_png;
48 
  }, []); */
49 
 
50 
  const heartBeat = async () => {
51 
    axios.get("/chat/heart-beat").then((response) => {
52 
      const resData = response.data;
53 
      if (resData.success) {
54 
        const entities = resData.data;
55 
        let updatedChatUsers = [];
56 
        let updatedChatGroups = [];
57 
        let updatedUnreadEntites = [];
58 
        entities.map((entity) => {
59 
          if (entity.not_received_messages) {
60 
            handlePlayNewMessage(entity.url_mark_received);
61 
          }
62 
          if (entity.not_seen_messages) {
63 
            return (updatedUnreadEntites = [...updatedUnreadEntites, entity]);
64 
          }
65 
          switch (entity.type) {
66 
            case "user":
67 
              updatedChatUsers = [...updatedChatUsers, entity];
68 
              break;
69 
            case "group":
70 
              updatedChatGroups = [...updatedChatGroups, entity];
71 
              break;
72 
            default:
73 
              break;
74 
          }
75 
        });
76 
        setChatUsers(updatedChatUsers);
77 
        setChatGroups(updatedChatGroups);
78 
        setUnreadEntities(updatedUnreadEntites);
79 
      }
80 
    });
81 
  };
82 
 
83 
  const handlePlayNewMessage = async (setReceivedLink) => {
84 
    notifyAudio.play();
85 
    const resData = (await axios.post(setReceivedLink)).data;
16288 stevensc 86 
    resData;
11347 nelberth 87 
  };
88 
 
89 
  const handleOpenChat = (entity) => {
16288 stevensc 90 
    if (activeTab === CHAT_TABS.CHAT) {
11347 nelberth 91 
      setActiveTab(CHAT_TABS.DEFAULT);
92 
    }
93 
    setActiveChat(entity);
94 
    setTimeout(() => {
95 
      setActiveTab(CHAT_TABS.CHAT);
16288 stevensc 96 
    }, 500);
11347 nelberth 97 
  };
98 
 
99 
  const handleCloseChat = () => {
100 
    setActiveTab(CHAT_TABS.DEFAULT);
101 
    axios.post(activeChat.url_close).then((response) => {
102 
      const resData = response.data;
16288 stevensc 103 
      resData;
11347 nelberth 104 
    });
105 
    setActiveChat(null);
106 
  };
107 
 
108 
  const handleAddGroup = () => {
109 
    setActiveTab(CHAT_TABS.ADDGROUP);
110 
  };
111 
 
112 
  const handleDefaultTab = () => {
113 
    setActiveTab(CHAT_TABS.DEFAULT);
114 
  };
115 
 
116 
  const openGroupMembersTab = () => {
117 
    setActiveTab(CHAT_TABS.GROUP_MEMBERS);
118 
  };
119 
 
120 
  const openAddMemberTab = () => {
121 
    setActiveTab(CHAT_TABS.ADD_GROUP_MEMBER);
122 
  };
123 
 
124 
  return (
125 
    <div className={styles.mobileChat}>
126 
      {activeTab === CHAT_TABS.CHAT && (
127 
        <div className={styles.mobileChat__header}>
128 
          <div className={styles.entityHeader}>
129 
            <a
130 
              href="#"
131 
              onClick={(e) => {
132 
                e.preventDefault();
133 
                handleCloseChat();
134 
              }}
135 
              className={styles.entityHeader__backBtn}
136 
            >
137 
              <i className="fa fa-arrow-left"></i>
138 
            </a>
139 
            <img
140 
              src={
141 
                activeChat && activeChat.type === "user"
142 
                  ? activeChat.image
143 
                  : "/images/users-group.png"
144 
              }
145 
              alt=""
146 
            />
147 
            <span className={styles.entityHeader__name}>{activeChat.name}</span>
148 
          </div>
149 
          {activeChat.type === "group" && (
150 
            <i
151 
              className="fa fa-gear"
152 
              onClick={() => {
153 
                setActiveTab(CHAT_TABS.GROUP_SETTINGS);
154 
              }}
155 
            ></i>
156 
          )}
157 
        </div>
158 
      )}
159 
      {(activeTab === CHAT_TABS.ADDGROUP ||
160 
        activeTab === CHAT_TABS.GROUP_SETTINGS ||
161 
        activeTab === CHAT_TABS.GROUP_MEMBERS ||
162 
        activeTab === CHAT_TABS.ADD_GROUP_MEMBER) && (
163 
        <div className={styles.mobileChat__header}>
164 
          <div className={styles.entityHeader}>
165 
            <a
166 
              href="#"
167 
              onClick={(e) => {
168 
                e.preventDefault();
169 
                switch (activeTab) {
170 
                  case CHAT_TABS.ADDGROUP:
171 
                    handleDefaultTab();
172 
                    break;
173 
                  case CHAT_TABS.GROUP_SETTINGS:
174 
                    setActiveTab(CHAT_TABS.CHAT);
175 
                    break;
176 
                  case CHAT_TABS.GROUP_MEMBERS:
177 
                  case CHAT_TABS.ADD_GROUP_MEMBER:
178 
                    setActiveTab(CHAT_TABS.GROUP_SETTINGS);
179 
                    break;
180 
                  default:
181 
                    break;
182 
                }
183 
              }}
184 
              className={styles.entityHeader__backBtn}
185 
            >
186 
              <i className="fa fa-arrow-left"></i>
187 
              <span>Atrás</span>
188 
            </a>
189 
          </div>
190 
        </div>
191 
      )}
192 
      <div className={styles.mainSection}>
16288 stevensc 193 
        {window.innerWidth >= 768 ? (
194 
          <DesktopChat
195 
            unreadEntities={unreadEntities}
196 
            chatUsers={chatUsers}
197 
            chatGroups={chatGroups}
16291 stevensc 198 
            timezones={timezones}
16288 stevensc 199 
          />
200 
        ) : (
11347 nelberth 201 
          <>
202 
            {activeTab === CHAT_TABS.DEFAULT && (
203 
              <Contacts
204 
                onOpenChat={handleOpenChat}
205 
                unreadEntities={unreadEntities}
206 
                chatUsers={chatUsers}
207 
                chatGroups={chatGroups}
208 
                onAddGroup={handleAddGroup}
209 
              />
210 
            )}
16288 stevensc 211 
            {activeTab === CHAT_TABS.CHAT && (
16290 stevensc 212 
              <Chat entity={activeChat} timezones={timezones} />
11347 nelberth 213 
            )}
214 
          </>
16288 stevensc 215 
        )}
11347 nelberth 216 
        {activeTab === CHAT_TABS.ADDGROUP && (
217 
          <AddGroupTab onClose={handleDefaultTab} />
218 
        )}
219 
        {activeTab === CHAT_TABS.GROUP_SETTINGS && (
220 
          <GroupSettings
221 
            group={activeChat}
222 
            onOpenMembersTab={openGroupMembersTab}
223 
            onOpenAddMemberTab={openAddMemberTab}
16291 stevensc 224 
            f
11347 nelberth 225 
            onClose={handleCloseChat}
226 
          />
227 
        )}
228 
        {activeTab === CHAT_TABS.GROUP_MEMBERS && (
229 
          <GroupMembers group={activeChat} />
230 
        )}
231 
        {activeTab === CHAT_TABS.ADD_GROUP_MEMBER && (
232 
          <AddMember group={activeChat} />
233 
        )}
234 
      </div>
235 
    </div>
236 
  );
237 
};
238 
 
239 
export default MobileChat;