Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5358 Rev 5773
Línea 16... Línea 16...
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)
- 
 
 21 
  const [loading, setLoading] = useState(false)
Línea 21... Línea 22...
21 
 
 22 
 
Línea 22... Línea 23...
22 
  const [pendingConversation, setPendingConversation] = useState('')
 23 
  const [pendingConversation, setPendingConversation] = useState('')
23 
 
 24 
 
24 
  const handleEntities = entities => {
 25 
  const handleEntities = (entities) => {
25 
    entities.map((entity) => {
 26 
    entities.map((entity) => {
26 
      if (entity.not_received_messages) handleNewMessage(entity)
 27 
      if (entity.not_received_messages) handleNewMessage(entity)
27 
      if (entity.not_seen_messages) handleNotSeenMessage(entity)
 28 
      if (entity.not_seen_messages) handleNotSeenMessage(entity)
Línea 31... Línea 32...
31 
    setContacts(entities)
 32 
    setContacts(entities)
32 
  }
 33 
  }
Línea 33... Línea 34...
33 
 
 34 
 
34 
  const heartBeat = async () => {
 35 
  const heartBeat = async () => {
- 
 
 36 
    try {
35 
    try {
 37 
      setLoading(true)
36 
      const { data } = await axios.get('/chat/heart-beat')
 38 
      const { data } = await axios.get('/chat/heart-beat')
- 
 
 39 
      if (data.success) handleEntities(data.data)
37 
      if (data.success) handleEntities(data.data)
 40 
      setLoading(false)
38 
      return data.data
 41 
      return data.data
39 
    } catch (error) {
 42 
    } catch (error) {
40 
      console.log('>>: chat error > ', error)
 43 
      console.log('>>: chat error > ', error)
41 
    }
 44 
    }
Línea 73... Línea 76...
73 
  }
 76 
  }
Línea 74... Línea 77...
74 
 
 77 
 
75 
  const handleCloseConversation = async (entity) => {
 78 
  const handleCloseConversation = async (entity) => {
76 
    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')
77 
    if (!data.success) console.log('Error in entity close')
 81 
    setActiveChats(
- 
 
 82 
      activeChats.filter((prevActiveChats) => prevActiveChats.id !== entity.id)
78 
    setActiveChats(activeChats.filter(prevActiveChats => prevActiveChats.id !== entity.id))
 83 
    )
Línea 79... Línea 84...
79 
  }
 84 
  }
80 
 
 85 
 
81 
  const handleOpenConversation = async (entity, minimized = false) => {
 86 
  const handleOpenConversation = async (entity, minimized = false) => {
82 
    if (activeChats.some(el => el.id === entity.id)) {
 87 
    if (activeChats.some((el) => el.id === entity.id)) {
Línea 83... Línea 88...
83 
      return null
 88 
      return null
84 
    }
 89 
    }
85 
 
 90 
 
- 
 
 91 
    if (activeChats.length >= 3) {
- 
 
 92 
      await handleCloseConversation(activeChats[0])
- 
 
 93 
      setActiveChats((prevActiveChats) => [
86 
    if (activeChats.length >= 3) {
 94 
        ...prevActiveChats,
87 
      await handleCloseConversation(activeChats[0])
 95 
        { ...entity, minimized },
Línea 88... Línea 96...
88 
      setActiveChats(prevActiveChats => [...prevActiveChats, { ...entity, minimized }])
 96 
      ])
- 
 
 97 
      return
- 
 
 98 
    }
- 
 
 99 
 
89 
      return
 100 
    setActiveChats((prevActiveChats) => [
Línea 90... Línea 101...
90 
    }
 101 
      ...prevActiveChats,
91 
 
 102 
      { ...entity, minimized },
92 
    setActiveChats(prevActiveChats => [...prevActiveChats, { ...entity, minimized }])
 103 
    ])
93 
  }
 104 
  }
- 
 
 105 
 
94 
 
 106 
  const handleReadConversation = async (entity) => {
- 
 
 107 
    try {
95 
  const handleReadConversation = async (entity) => {
 108 
      const { data } = await axios.post(entity.url_mark_seen)
96 
    try {
 109 
      if (!data.success) console.log('Ha ocurrido un error')
- 
 
 110 
      setActiveChats((prevActiveChats) =>
97 
      const { data } = await axios.post(entity.url_mark_seen)
 111 
        [...prevActiveChats].map((chat) => {
98 
      if (!data.success) console.log('Ha ocurrido un error')
 112 
          if (entity.id === chat.id)
99 
      setActiveChats(prevActiveChats => [...prevActiveChats].map(chat => {
 113 
            return { ...chat, not_seen_messages: false }
100 
        if (entity.id === chat.id) return { ...chat, not_seen_messages: false }
 114 
          return chat
101 
        return chat
 115 
        })
Línea 102... Línea 116...
102 
      }))
 116 
      )
103 
    } catch (error) {
 117 
    } catch (error) {
- 
 
 118 
      console.log(`Error: ${error}`)
- 
 
 119 
    }
104 
      console.log(`Error: ${error}`)
 120 
  }
105 
    }
 121 
 
- 
 
 122 
  const handleMinimizeConversation = (entity, minimized = null) => {
106 
  }
 123 
    return setActiveChats((prevActiveChats) =>
107 
 
 124 
      [...prevActiveChats].map((chat) => {
Línea 108... Línea 125...
108 
  const handleMinimizeConversation = (entity, minimized = null) => {
 125 
        if (entity.id === chat.id)
109 
    return setActiveChats(prevActiveChats => [...prevActiveChats].map(chat => {
 126 
          return { ...chat, minimized: minimized ?? !chat.minimized }
Línea 110... Línea 127...
110 
      if (entity.id === chat.id) return { ...chat, minimized: minimized ?? !chat.minimized }
 127 
        return chat
- 
 
 128 
      })
111 
      return chat
 129 
    )
112 
    }))
 130 
  }
113 
  }
 131 
 
114 
 
 132 
  const handleNotSeenMessage = (entity) => {
115 
  const handleNotSeenMessage = (entity) => {
 133 
    const index = activeChats.findIndex((chat) => chat.id === entity.id)
- 
 
 134 
 
116 
    const index = activeChats.findIndex(chat => chat.id === entity.id)
 135 
    if (index !== -1) {
117 
 
 136 
      setActiveChats((prev) =>
118 
    if (index !== -1) {
 137 
        [...prev].map((chat) => {
119 
      setActiveChats(prev => [...prev].map(chat => {
 138 
          if (chat.id === entity.id) {
120 
        if (chat.id === entity.id) {
 139 
            return {
121 
          return {
 140 
              ...chat,
Línea 122... Línea 141...
122 
            ...chat,
 141 
              not_seen_messages: entity.not_seen_messages,
123 
            not_seen_messages: entity.not_seen_messages
 142 
            }
Línea 140... Línea 159...
140 
      notifyAudio.play()
 159 
      notifyAudio.play()
141 
    }
 160 
    }
142 
  }
 161 
  }
Línea 143... Línea 162...
143 
 
 162 
 
- 
 
 163 
  useEffect(() => {
144 
  useEffect(() => {
 164 
    if (loading) return
145 
    setTimeout(() => heartBeat(), 2000)
 165 
    setTimeout(() => heartBeat(), 2000)
Línea 146... Línea 166...
146 
  }, [contacts])
 166 
  }, [contacts])
147 
 
 167 
 
- 
 
 168 
  useEffect(() => {
148 
  useEffect(() => {
 169 
    if (pendingConversation) {
- 
 
 170 
      const pendingChat = contacts.find(
Línea 149... Línea 171...
149 
    if (pendingConversation) {
 171 
        (contact) => contact.url_send === pendingConversation
150 
      const pendingChat = contacts.find(contact => contact.url_send === pendingConversation)
 172 
      )
151 
 
 173 
 
152 
      if (pendingChat) {
 174 
      if (pendingChat) {
Línea 161... Línea 183...
161 
    emojione.sprites = false
 183 
    emojione.sprites = false
162 
    emojione.ascii = true
 184 
    emojione.ascii = true
163 
    emojione.imagePathPNG = emojiOnePath
 185 
    emojione.imagePathPNG = emojiOnePath
164 
  }, [])
 186 
  }, [])
Línea 165... Línea 187...
165 
 
 187 
 
- 
 
 188 
  if (window.innerWidth < 1000 || window.location.pathname === '/chat')
Línea 166... Línea 189...
166 
  if (window.innerWidth < 1000 || window.location.pathname === '/chat') return null
 189 
    return null
167 
 
 190 
 
168 
  return (
 191 
  return (
- 
 
 192 
    <>
- 
 
 193 
      <div className="chat-helper">
- 
 
 194 
        <div
169 
    <>
 195 
          className="subpanel_title"
- 
 
 196 
          onClick={(e) =>
- 
 
 197 
            e.currentTarget === e.target && setIsChatOpen(!isChatOpen)
170 
      <div className="chat-helper">
 198 
          }
171 
        <div className="subpanel_title" onClick={(e) => (e.currentTarget === e.target) && setIsChatOpen(!isChatOpen)}>
 199 
        >
172 
          <a href="/chat" className="text-chat-title">
 200 
          <a href="/chat" className="text-chat-title">
173 
            {CHAT_LABELS.CHAT}
 201 
            {CHAT_LABELS.CHAT}
Línea 174... Línea 202...
174 
            <FiMaximize2 className="ml-3" />
 202 
            <FiMaximize2 className="ml-3" />
175 
          </a>
 203 
          </a>
- 
 
 204 
 
176 
 
 205 
          <div className="subpanel_title-icons">
- 
 
 206 
            <i
177 
          <div className="subpanel_title-icons">
 207 
              className={`icon ${
178 
            <i
 208 
                isMuted ? 'icon-volume-off' : 'icon-volume-2'
179 
              className={`icon ${isMuted ? 'icon-volume-off' : 'icon-volume-2'} text-20`}
 209 
              } text-20`}
- 
 
 210 
              onClick={handleMute}
180 
              onClick={handleMute}
 211 
            />
- 
 
 212 
            <i
181 
            />
 213 
              className={`fa ${
182 
            <i
 214 
                isChatOpen ? 'fa-angle-down' : 'fa-angle-up'
183 
              className={`fa ${isChatOpen ? 'fa-angle-down' : 'fa-angle-up'} text-20`}
 215 
              } text-20`}
184 
              onClick={() => setIsChatOpen(!isChatOpen)}
 216 
              onClick={() => setIsChatOpen(!isChatOpen)}
185 
            />
 217 
            />
186 
          </div>
 218 
          </div>
187 
        </div>
 219 
        </div>
188 
        {isChatOpen &&
 220 
        {isChatOpen && (
189 
          <>
 221 
          <>
190 
            <button className="action-btn" onClick={() => setShowModal(true)}>
 222 
            <button className="action-btn" onClick={() => setShowModal(true)}>
191 
              <AddIcon />
 223 
              <AddIcon />
192 
              {CHAT_LABELS.START_CONVERSATION}
 224 
              {CHAT_LABELS.START_CONVERSATION}
193 
            </button>
 225 
            </button>
194 
            <ContactsFilters
 226 
            <ContactsFilters
195 
              dataset={contacts}
 227 
              dataset={contacts}
196 
              selectConversation={(entity) => handleOpenConversation(entity)}
 228 
              selectConversation={(entity) => handleOpenConversation(entity)}
197 
            />
 229 
            />
Línea 198... Línea 230...
198 
          </>
 230 
          </>
199 
        }
 231 
        )}
200 
      </div>
 232 
      </div>