Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 15766 Rev 16780
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'
Línea 11... Línea 11...
11 
import ContactsFilters from "./components/contactsFilters";
 11 
import ContactsFilters from './components/contactsFilters'
Línea 12... Línea 12...
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)
Línea 19... Línea 19...
19 
  const [isMuted, setIsMuted] = useState(false);
 19 
  const [isMuted, setIsMuted] = useState(false)
Línea 20... Línea 20...
20 
  const [showModal, setShowModal] = useState(false);
 20 
  const [showModal, setShowModal] = useState(false)
21 
  const [loading, setLoading] = useState(false);
 21 
  const [loading, setLoading] = useState(false)
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)
Línea 29... Línea 29...
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)
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)
Línea 40... Línea 40...
40 
      setLoading(false);
 40 
      setLoading(false)
41 
      return data.data;
 41 
      return data.data
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) {
Línea 52... Línea 52...
52 
      if (activeChats[existingChatId].online !== entity.online) {
 52 
      if (activeChats[existingChatId].online !== entity.online) {
53 
        const newActiveChats = [...activeChats];
 53 
        const newActiveChats = [...activeChats]
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 
      )
Línea 69... Línea 69...
69 
      if (!activeChats[existingChatId].unsee_messages) {
 69 
      if (!activeChats[existingChatId].unsee_messages) {
70 
        const newActiveChats = [...activeChats];
 70 
        const newActiveChats = [...activeChats]
- 
 
 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 
  }
Línea 76... Línea 77...
76 
  };
 77 
 
77 
 
 78 
  const handleCloseConversation = async (url) => {
78 
  const handleCloseConversation = async (entity) => {
 79 
    const { data } = await axios.post(url)
79 
    const { data } = await axios.post(entity.url_close);
 80 
    console.log(data)
Línea 80... Línea 81...
80 
    if (!data.success) console.log("Error in entity close");
 81 
    if (!data.success) console.log('Error in entity close')
81 
    setActiveChats(
 82 
    setActiveChats(
82 
      activeChats.filter((prevActiveChats) => prevActiveChats.id !== entity.id)
 83 
      activeChats.filter((prevActiveChats) => prevActiveChats.id !== entity.id)
83 
    );
 84 
    )
84 
  };
 85 
  }
85 
 
 86 
 
86 
  const handleOpenConversation = async (entity, minimized = false) => {
 87 
  const handleOpenConversation = async (entity, minimized = false) => {
87 
    if (activeChats.some((el) => el.id === entity.id)) {
 88 
    if (activeChats.some((el) => el.id === entity.id)) {
Línea 88... Línea 89...
88 
      return null;
 89 
      return null
89 
    }
 90 
    }
90 
 
 91 
 
91 
    if (activeChats.length >= 3) {
 92 
    if (activeChats.length >= 3) {
92 
      await handleCloseConversation(activeChats[0]);
 93 
      await handleCloseConversation(activeChats[0])
Línea 93... Línea 94...
93 
      setActiveChats((prevActiveChats) => [
 94 
      setActiveChats((prevActiveChats) => [
94 
        ...prevActiveChats,
 95 
        ...prevActiveChats,
95 
        { ...entity, minimized },
 96 
        { ...entity, minimized }
96 
      ]);
 97 
      ])
97 
      return;
 98 
      return
98 
    }
 99 
    }
99 
 
 100 
 
100 
    setActiveChats((prevActiveChats) => [
 101 
    setActiveChats((prevActiveChats) => [
101 
      ...prevActiveChats,
 102 
      ...prevActiveChats,
102 
      { ...entity, minimized },
 103 
      { ...entity, minimized }
103 
    ]);
 104 
    ])
104 
  };
 105 
  }
105 
 
 106 
 
106 
  const handleReadConversation = async (entity) => {
 107 
  const handleReadConversation = async (entity) => {
107 
    try {
 108 
    try {
Línea 108... Línea 109...
108 
      const { data } = await axios.post(entity.url_mark_seen);
 109 
      const { data } = await axios.post(entity.url_mark_seen)
109 
      if (!data.success) console.log("Ha ocurrido un error");
 110 
      if (!data.success) console.log('Ha ocurrido un error')
110 
      setActiveChats((prevActiveChats) =>
 111 
      setActiveChats((prevActiveChats) =>
111 
        [...prevActiveChats].map((chat) => {
 112 
        [...prevActiveChats].map((chat) => {
112 
          if (entity.id === chat.id)
 113 
          if (entity.id === chat.id)
113 
            return { ...chat, not_seen_messages: false };
 114 
            return { ...chat, not_seen_messages: false }
114 
          return chat;
 115 
          return chat
115 
        })
 116 
        })
116 
      );
 117 
      )
Línea 117... Línea 118...
117 
    } catch (error) {
 118 
    } catch (error) {
118 
      console.log(`Error: ${error}`);
 119 
      console.log(`Error: ${error}`)
Línea 119... Línea 120...
119 
    }
 120 
    }
120 
  };
 121 
  }
121 
 
 122 
 
122 
  const handleMinimizeConversation = (entity, minimized = null) => {
 123 
  const handleMinimizeConversation = (entity, minimized = null) => {
123 
    return setActiveChats((prevActiveChats) =>
 124 
    return setActiveChats((prevActiveChats) =>
124 
      [...prevActiveChats].map((chat) => {
 125 
      [...prevActiveChats].map((chat) => {
125 
        if (entity.id === chat.id)
 126 
        if (entity.id === chat.id)
126 
          return { ...chat, minimized: minimized ?? !chat.minimized };
 127 
          return { ...chat, minimized: minimized ?? !chat.minimized }
127 
        return chat;
 128 
        return chat
128 
      })
 129 
      })
129 
    );
 130 
    )
130 
  };
 131 
  }
131 
 
 132 
 
132 
  const handleNotSeenMessage = (entity) => {
 133 
  const handleNotSeenMessage = (entity) => {
Línea 133... Línea 134...
133 
    const index = activeChats.findIndex((chat) => chat.id === entity.id);
 134 
    const index = activeChats.findIndex((chat) => chat.id === entity.id)
134 
 
 135 
 
135 
    if (index !== -1) {
 136 
    if (index !== -1) {
136 
      setActiveChats((prev) =>
 137 
      setActiveChats((prev) =>
137 
        [...prev].map((chat) => {
 138 
        [...prev].map((chat) => {
Línea 138... Línea 139...
138 
          if (chat.id === entity.id) {
 139 
          if (chat.id === entity.id) {
139 
            return {
 140 
            return {
140 
              ...chat,
 141 
              ...chat,
141 
              not_seen_messages: entity.not_seen_messages,
 142 
              not_seen_messages: entity.not_seen_messages
142 
            };
 143 
            }
143 
          }
 144 
          }
Línea 144... Línea 145...
144 
          return chat;
 145 
          return chat
145 
        })
 146 
        })
146 
      );
 147 
      )
Línea 147... Línea 148...
147 
    }
 148 
    }
148 
  };
 149 
  }
149 
 
 150 
 
150 
  const playNotifyAudio = (minimized = true) => {
 151 
  const playNotifyAudio = (minimized = true) => {
151 
    if (!isMuted && minimized) {
 152 
    if (!isMuted && minimized) {
Línea 152... Línea 153...
152 
      notifyAudio.play();
 153 
      notifyAudio.play()
153 
    }
 154 
    }
154 
  };
 155 
  }
155 
 
 156 
 
156 
  const handleMute = () => {
 157 
  const handleMute = () => {
157 
    setIsMuted(!isMuted);
 158 
    setIsMuted(!isMuted)
Línea 158... Línea 159...
158 
    if (isMuted) {
 159 
    if (isMuted) {
159 
      notifyAudio.play();
 160 
      notifyAudio.play()
160 
    }
 161 
    }
161 
  };
 162 
  }
162 
 
 163 
 
163 
  useEffect(() => {
 164 
  useEffect(() => {
Línea 164... Línea 165...
164 
    if (!loading) setTimeout(() => heartBeat(), 2000);
 165 
    if (!loading) setTimeout(() => heartBeat(), 2000)
165 
  }, [loading]);
 166 
  }, [loading])
Línea 166... Línea 167...
166 
 
 167 
 
167 
  useEffect(() => {
 168 
  useEffect(() => {
168 
    if (pendingConversation) {
 169 
    if (pendingConversation) {
169 
      const pendingChat = contacts.find(
 170 
      const pendingChat = contacts.find(
Línea 202... Línea 203...
202 
          </a>
 203 
          </a>
Línea 203... Línea 204...
203 
 
 204 
 
204 
          <div className="subpanel_title-icons">
 205 
          <div className="subpanel_title-icons">
205 
            <i
 206 
            <i
206 
              className={`icon ${
 207 
              className={`icon ${
207 
                isMuted ? "icon-volume-off" : "icon-volume-2"
 208 
                isMuted ? 'icon-volume-off' : 'icon-volume-2'
208 
              } text-20`}
 209 
              } text-20`}
209 
              onClick={handleMute}
 210 
              onClick={handleMute}
210 
            />
 211 
            />
211 
            <i
 212 
            <i
212 
              className={`fa ${
 213 
              className={`fa ${
213 
                isChatOpen ? "fa-angle-down" : "fa-angle-up"
 214 
                isChatOpen ? 'fa-angle-down' : 'fa-angle-up'
214 
              } text-20`}
 215 
              } text-20`}
215 
              onClick={() => setIsChatOpen(!isChatOpen)}
 216 
              onClick={() => setIsChatOpen(!isChatOpen)}
216 
            />
 217 
            />
217 
          </div>
 218 
          </div>
Línea 246... Línea 247...
246 
        ))}
 247 
        ))}
247 
      </div>
 248 
      </div>
248 
      <ContactsModal show={showModal} onClose={() => setShowModal(false)} />
 249 
      <ContactsModal show={showModal} onClose={() => setShowModal(false)} />
249 
      <NotificationAlert />
 250 
      <NotificationAlert />
250 
    </>
 251 
    </>
251 
  );
 252 
  )
252 
};
 253 
}
Línea 253... Línea 254...
253 
 
 254