Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15761 | Rev 15766 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 15761 Rev 15765
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useState } from 'react'
 2 
import React, { useEffect, useState } from "react";
3 
import { axios } from '../../utils'
 3 
import { axios } from "../../utils";
4 
import { FiMaximize2 } from 'react-icons/fi'
 4 
import { FiMaximize2 } from "react-icons/fi";
5 
import AddIcon from '@mui/icons-material/Add'
 5 
import AddIcon from "@mui/icons-material/Add";
Línea 6... Línea 6...
6 
 
 6 
 
7 
// Components
 7 
// Components
8 
import NotificationAlert from '../../shared/notification/NotificationAlert'
 8 
import NotificationAlert from "../../shared/notification/NotificationAlert";
9 
import PersonalChat from './personal-chat/PersonalChat'
 9 
import PersonalChat from "./personal-chat/PersonalChat";
10 
import ContactsModal from './components/ContactsModal'
 10 
import ContactsModal from "./components/ContactsModal";
11 
import ContactsFilters from './components/contactsFilters'
 11 
import ContactsFilters from "./components/contactsFilters";
12 
 
 12 
 
13 
const notifyAudio = new Audio('/audio/chat.mp3')
 13 
const notifyAudio = new Audio("/audio/chat.mp3");
14 
 
 14 
 
15 
const Chat = ({ emojiOnePath, timezones }) => {
 15 
const Chat = ({ emojiOnePath, timezones = {} }) => {
16 
  const [contacts, setContacts] = useState([])
 16 
  const [contacts, setContacts] = useState([]);
17 
  const [activeChats, setActiveChats] = useState([])
 17 
  const [activeChats, setActiveChats] = useState([]);
18 
  const [isChatOpen, setIsChatOpen] = useState(false)
 18 
  const [isChatOpen, setIsChatOpen] = useState(false);
19 
  const [isMuted, setIsMuted] = useState(false)
 19 
  const [isMuted, setIsMuted] = useState(false);
20 
  const [showModal, setShowModal] = useState(false)
 20 
  const [showModal, setShowModal] = useState(false);
Línea 21... Línea 21...
21 
  const [loading, setLoading] = useState(false)
 21 
  const [loading, setLoading] = useState(false);
Línea 22... Línea 22...
22 
 
 22 
 
23 
  const [pendingConversation, setPendingConversation] = useState('')
 23 
  const [pendingConversation, setPendingConversation] = useState("");
24 
 
 24 
 
25 
  const handleEntities = (entities) => {
 25 
  const handleEntities = (entities) => {
26 
    entities.map((entity) => {
 26 
    entities.map((entity) => {
27 
      if (entity.not_received_messages) handleNewMessage(entity)
 27 
      if (entity.not_received_messages) handleNewMessage(entity);
28 
      if (entity.not_seen_messages) handleNotSeenMessage(entity)
 28 
      if (entity.not_seen_messages) handleNotSeenMessage(entity);
29 
      if (entity.is_open) handleOpenConversation(entity, false)
 29 
      if (entity.is_open) handleOpenConversation(entity, false);
30 
      if (entity.type === 'user') handleUpdateOnline(entity)
 30 
      if (entity.type === "user") handleUpdateOnline(entity);
Línea 31... Línea 31...
31 
    })
 31 
    });
32 
    setContacts(entities)
 32 
    setContacts(entities);
33 
  }
 33 
  };
34 
 
 34 
 
35 
  const heartBeat = async () => {
 35 
  const heartBeat = async () => {
36 
    try {
 36 
    try {
37 
      setLoading(true)
 37 
      setLoading(true);
38 
      const { data } = await axios.get('/chat/heart-beat')
 38 
      const { data } = await axios.get("/chat/heart-beat");
39 
      if (data.success) handleEntities(data.data)
 39 
      if (data.success) handleEntities(data.data);
40 
      setLoading(false)
 40 
      setLoading(false);
41 
      return data.data
 41 
      return data.data;
Línea 42... Línea 42...
42 
    } catch (error) {
 42 
    } catch (error) {
43 
      console.log('>>: chat error > ', error)
 43 
      console.log(">>: chat error > ", error);
44 
    }
 44 
    }
45 
  }
 45 
  };
46 
 
 46 
 
47 
  const handleUpdateOnline = (entity) => {
 47 
  const handleUpdateOnline = (entity) => {
48 
    const existingChatId = activeChats.findIndex(
 48 
    const existingChatId = activeChats.findIndex(
49 
      (activeChat) => activeChat.id === entity.id
 49 
      (activeChat) => activeChat.id === entity.id
50 
    )
 50 
    );
51 
    if (existingChatId >= 0) {
 51 
    if (existingChatId >= 0) {
52 
      if (activeChats[existingChatId].online !== entity.online) {
 52 
      if (activeChats[existingChatId].online !== entity.online) {
53 
        const newActiveChats = [...activeChats]
 53 
        const newActiveChats = [...activeChats];
Línea 54... Línea 54...
54 
        newActiveChats[existingChatId].online = entity.online
 54 
        newActiveChats[existingChatId].online = entity.online;
55 
        setActiveChats(newActiveChats)
 55 
        setActiveChats(newActiveChats);
56 
      }
 56 
      }
57 
    }
 57 
    }
58 
  }
 58 
  };
59 
 
 59 
 
60 
  const handleNewMessage = async (unseeEntity) => {
 60 
  const handleNewMessage = async (unseeEntity) => {
61 
    await axios.post(unseeEntity.url_mark_received)
 61 
    await axios.post(unseeEntity.url_mark_received);
62 
    if (!activeChats.some((activeChat) => activeChat.id === unseeEntity.id)) {
 62 
    if (!activeChats.some((activeChat) => activeChat.id === unseeEntity.id)) {
63 
      setActiveChats([...activeChats, { ...unseeEntity, minimized: false }])
 63 
      setActiveChats([...activeChats, { ...unseeEntity, minimized: false }]);
64 
      playNotifyAudio()
 64 
      playNotifyAudio();
65 
    } else {
 65 
    } else {
66 
      const existingChatId = activeChats.findIndex(
 66 
      const existingChatId = activeChats.findIndex(
67 
        (activeChat) => activeChat.id === unseeEntity.id
 67 
        (activeChat) => activeChat.id === unseeEntity.id
68 
      )
 68 
      );
69 
      if (!activeChats[existingChatId].unsee_messages) {
 69 
      if (!activeChats[existingChatId].unsee_messages) {
70 
        const newActiveChats = [...activeChats]
 70 
        const newActiveChats = [...activeChats];
Línea 71... Línea 71...
71 
        newActiveChats[existingChatId].unsee_messages = true
 71 
        newActiveChats[existingChatId].unsee_messages = true;
72 
        setActiveChats(newActiveChats)
 72 
        setActiveChats(newActiveChats);
73 
        playNotifyAudio(newActiveChats[existingChatId].minimized)
 73 
        playNotifyAudio(newActiveChats[existingChatId].minimized);
74 
      }
 74 
      }
75 
    }
 75 
    }
76 
  }
 76 
  };
77 
 
 77 
 
Línea 78... Línea 78...
78 
  const handleCloseConversation = async (entity) => {
 78 
  const handleCloseConversation = async (entity) => {
79 
    const { data } = await axios.post(entity.url_close)
 79 
    const { data } = await axios.post(entity.url_close);
80 
    if (!data.success) console.log('Error in entity close')
 80 
    if (!data.success) console.log("Error in entity close");
81 
    setActiveChats(
 81 
    setActiveChats(
Línea 82... Línea 82...
82 
      activeChats.filter((prevActiveChats) => prevActiveChats.id !== entity.id)
 82 
      activeChats.filter((prevActiveChats) => prevActiveChats.id !== entity.id)
83 
    )
 83 
    );
84 
  }
 84 
  };
85 
 
 85 
 
86 
  const handleOpenConversation = async (entity, minimized = false) => {
 86 
  const handleOpenConversation = async (entity, minimized = false) => {
87 
    if (activeChats.some((el) => el.id === entity.id)) {
 87 
    if (activeChats.some((el) => el.id === entity.id)) {
88 
      return null
 88 
      return null;
89 
    }
 89 
    }
Línea 90... Línea 90...
90 
 
 90 
 
91 
    if (activeChats.length >= 3) {
 91 
    if (activeChats.length >= 3) {
92 
      await handleCloseConversation(activeChats[0])
 92 
      await handleCloseConversation(activeChats[0]);
93 
      setActiveChats((prevActiveChats) => [
 93 
      setActiveChats((prevActiveChats) => [
94 
        ...prevActiveChats,
 94 
        ...prevActiveChats,
Línea 95... Línea 95...
95 
        { ...entity, minimized },
 95 
        { ...entity, minimized },
96 
      ])
 96 
      ]);
97 
      return
 97 
      return;
98 
    }
 98 
    }
99 
 
 99 
 
100 
    setActiveChats((prevActiveChats) => [
 100 
    setActiveChats((prevActiveChats) => [
101 
      ...prevActiveChats,
 101 
      ...prevActiveChats,
102 
      { ...entity, minimized },
 102 
      { ...entity, minimized },
103 
    ])
 103 
    ]);
104 
  }
 104 
  };
105 
 
 105 
 
106 
  const handleReadConversation = async (entity) => {
 106 
  const handleReadConversation = async (entity) => {
107 
    try {
 107 
    try {
108 
      const { data } = await axios.post(entity.url_mark_seen)
 108 
      const { data } = await axios.post(entity.url_mark_seen);
109 
      if (!data.success) console.log('Ha ocurrido un error')
 109 
      if (!data.success) console.log("Ha ocurrido un error");
Línea 110... Línea 110...
110 
      setActiveChats((prevActiveChats) =>
 110 
      setActiveChats((prevActiveChats) =>
111 
        [...prevActiveChats].map((chat) => {
 111 
        [...prevActiveChats].map((chat) => {
112 
          if (entity.id === chat.id)
 112 
          if (entity.id === chat.id)
113 
            return { ...chat, not_seen_messages: false }
 113 
            return { ...chat, not_seen_messages: false };
114 
          return chat
 114 
          return chat;
115 
        })
 115 
        })
116 
      )
 116 
      );
117 
    } catch (error) {
 117 
    } catch (error) {
118 
      console.log(`Error: ${error}`)
 118 
      console.log(`Error: ${error}`);
Línea 119... Línea 119...
119 
    }
 119 
    }
120 
  }
 120 
  };
Línea 121... Línea 121...
121 
 
 121 
 
122 
  const handleMinimizeConversation = (entity, minimized = null) => {
 122 
  const handleMinimizeConversation = (entity, minimized = null) => {
123 
    return setActiveChats((prevActiveChats) =>
 123 
    return setActiveChats((prevActiveChats) =>
124 
      [...prevActiveChats].map((chat) => {
 124 
      [...prevActiveChats].map((chat) => {
125 
        if (entity.id === chat.id)
 125 
        if (entity.id === chat.id)
126 
          return { ...chat, minimized: minimized ?? !chat.minimized }
 126 
          return { ...chat, minimized: minimized ?? !chat.minimized };
127 
        return chat
 127 
        return chat;
128 
      })
 128 
      })
129 
    )
 129 
    );
130 
  }
 130 
  };
131 
 
 131 
 
132 
  const handleNotSeenMessage = (entity) => {
 132 
  const handleNotSeenMessage = (entity) => {
133 
    const index = activeChats.findIndex((chat) => chat.id === entity.id)
 133 
    const index = activeChats.findIndex((chat) => chat.id === entity.id);
134 
 
 134 
 
Línea 135... Línea 135...
135 
    if (index !== -1) {
 135 
    if (index !== -1) {
136 
      setActiveChats((prev) =>
 136 
      setActiveChats((prev) =>
137 
        [...prev].map((chat) => {
 137 
        [...prev].map((chat) => {
138 
          if (chat.id === entity.id) {
 138 
          if (chat.id === entity.id) {
139 
            return {
 139 
            return {
Línea 140... Línea 140...
140 
              ...chat,
 140 
              ...chat,
141 
              not_seen_messages: entity.not_seen_messages,
 141 
              not_seen_messages: entity.not_seen_messages,
142 
            }
 142 
            };
143 
          }
 143 
          }
144 
          return chat
 144 
          return chat;
145 
        })
 145 
        })
Línea 146... Línea 146...
146 
      )
 146 
      );
147 
    }
 147 
    }
148 
  }
 148 
  };
Línea 149... Línea 149...
149 
 
 149 
 
150 
  const playNotifyAudio = (minimized = true) => {
 150 
  const playNotifyAudio = (minimized = true) => {
151 
    if (!isMuted && minimized) {
 151 
    if (!isMuted && minimized) {
152 
      notifyAudio.play()
 152 
      notifyAudio.play();
153 
    }
 153 
    }
Línea 154... Línea 154...
154 
  }
 154 
  };
155 
 
 155 
 
156 
  const handleMute = () => {
 156 
  const handleMute = () => {
157 
    setIsMuted(!isMuted)
 157 
    setIsMuted(!isMuted);
158 
    if (isMuted) {
 158 
    if (isMuted) {
159 
      notifyAudio.play()
 159 
      notifyAudio.play();
Línea 160... Línea 160...
160 
    }
 160 
    }
161 
  }
 161 
  };
162 
 
 162 
 
163 
  useEffect(() => {
 163 
  useEffect(() => {
164 
    if (!loading) setTimeout(() => heartBeat(), 2000)
 164 
    if (!loading) setTimeout(() => heartBeat(), 2000);
165 
  }, [loading])
 165 
  }, [loading]);
Línea 166... Línea 166...
166 
 
 166 
 
167 
  useEffect(() => {
 167 
  useEffect(() => {
Línea 168... Línea 168...
168 
    if (pendingConversation) {
 168 
    if (pendingConversation) {
169 
      const pendingChat = contacts.find(
 169 
      const pendingChat = contacts.find(
170 
        (contact) => contact.url_send === pendingConversation
 170 
        (contact) => contact.url_send === pendingConversation
171 
      )
 171 
      );
Línea 202... Línea 202...
202 
          </a>
 202 
          </a>
Línea 203... Línea 203...
203 
 
 203 
 
204 
          <div className="subpanel_title-icons">
 204 
          <div className="subpanel_title-icons">
205 
            <i
 205 
            <i
206 
              className={`icon ${
 206 
              className={`icon ${
207 
                isMuted ? 'icon-volume-off' : 'icon-volume-2'
 207 
                isMuted ? "icon-volume-off" : "icon-volume-2"
208 
              } text-20`}
 208 
              } text-20`}
209 
              onClick={handleMute}
 209 
              onClick={handleMute}
210 
            />
 210 
            />
211 
            <i
 211 
            <i
212 
              className={`fa ${
 212 
              className={`fa ${
213 
                isChatOpen ? 'fa-angle-down' : 'fa-angle-up'
 213 
                isChatOpen ? "fa-angle-down" : "fa-angle-up"
214 
              } text-20`}
 214 
              } text-20`}
215 
              onClick={() => setIsChatOpen(!isChatOpen)}
 215 
              onClick={() => setIsChatOpen(!isChatOpen)}
216 
            />
 216 
            />
217 
          </div>
 217 
          </div>
Línea 246... Línea 246...
246 
        ))}
 246 
        ))}
247 
      </div>
 247 
      </div>
248 
      <ContactsModal show={showModal} onClose={() => setShowModal(false)} />
 248 
      <ContactsModal show={showModal} onClose={() => setShowModal(false)} />
249 
      <NotificationAlert />
 249 
      <NotificationAlert />
250 
    </>
 250 
    </>
251 
  )
 251 
  );
252 
}
 252 
};
Línea 253... Línea 253...
253 
 
 253