Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5254 Rev 5601
Línea 8... Línea 8...
8 
import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded'
 8 
import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded'
9 
import SpeakerNotesOffRoundedIcon from '@mui/icons-material/SpeakerNotesOffRounded'
 9 
import SpeakerNotesOffRoundedIcon from '@mui/icons-material/SpeakerNotesOffRounded'
10 
import EmptySection from '../../shared/empty-section/EmptySection'
 10 
import EmptySection from '../../shared/empty-section/EmptySection'
11 
import MessageBox from './MessageBox'
 11 
import MessageBox from './MessageBox'
12 
import MessageTemplate from './MessageTemplate'
 12 
import MessageTemplate from './MessageTemplate'
- 
 
 13 
import ConfirmModal from '../../shared/confirm-modal/ConfirmModal'
Línea 13... Línea 14...
13 
 
 14 
 
Línea 14... Línea 15...
14 
const DEFAULT_PAGES = { current: 1, last: 1 }
 15 
const DEFAULT_PAGES = { current: 1, last: 1 }
15 
 
 16 
 
16 
const Chatmail = ({
 17 
const Chatmail = ({
17 
  selectedConversation = null,
 18 
  selectedConversation = null,
18 
  setConversation = () => null
 19 
  setConversation = () => null,
19 
}) => {
 20 
}) => {
20 
  const [oldMessages, setOldMessages] = useState([])
 21 
  const [oldMessages, setOldMessages] = useState([])
21 
  const [messages, setMessages] = useState([])
 22 
  const [messages, setMessages] = useState([])
- 
 
 23 
  const [pages, setPages] = useState(DEFAULT_PAGES)
- 
 
 24 
  const [loading, setLoading] = useState(false)
22 
  const [pages, setPages] = useState(DEFAULT_PAGES)
 25 
  const [displayOptions, setDisplayOptions] = useState(false)
23 
  const [loading, setLoading] = useState(false)
 26 
  const [isShowConfirm, setIsShowConfirm] = useState(false)
24 
  const lastMessage = useRef(null)
 27 
  const lastMessage = useRef(null)
Línea 25... Línea 28...
25 
  const messagesList = useRef(null)
 28 
  const messagesList = useRef(null)
Línea 30... Línea 33...
30 
      setLoading(true)
 33 
      setLoading(true)
31 
      const response = await fetchMessages(url, page)
 34 
      const response = await fetchMessages(url, page)
32 
      if (!response.success) {
 35 
      if (!response.success) {
33 
        const errorMessage = response.data
 36 
        const errorMessage = response.data
Línea -... Línea 37...
- 
 
 37 
 
34 
 
 38 
        dispatch(
- 
 
 39 
          addNotification({ style: 'danger', msg: errorMessage.message })
35 
        dispatch(addNotification({ style: 'danger', msg: errorMessage.message }))
 40 
        )
36 
        return
 41 
        return
Línea 37... Línea 42...
37 
      }
 42 
      }
38 
 
 43 
 
- 
 
 44 
      if (response.pagination.current > 1) {
- 
 
 45 
        setOldMessages((prevOldMessages) => [
- 
 
 46 
          ...prevOldMessages,
39 
      if (response.pagination.current > 1) {
 47 
          ...response.data,
- 
 
 48 
        ])
- 
 
 49 
      }
40 
        setOldMessages((prevOldMessages) => [...prevOldMessages, ...response.data])
 50 
      setPages((prevPages) => ({
- 
 
 51 
        ...prevPages,
Línea 41... Línea 52...
41 
      }
 52 
        last: response.pagination.last,
42 
      setPages((prevPages) => ({ ...prevPages, last: response.pagination.last }))
 53 
      }))
43 
 
 54 
 
44 
      return
 55 
      return
Línea 51... Línea 62...
51 
  }
 62 
  }
Línea 52... Línea 63...
52 
 
 63 
 
53 
  const hearBeat = async () => {
 64 
  const hearBeat = async () => {
54 
    try {
 65 
    try {
- 
 
 66 
      setLoading(true)
55 
      setLoading(true)
 67 
      const response = await fetchMessages(
- 
 
 68 
        selectedConversation.messages_link,
- 
 
 69 
        1
Línea 56... Línea 70...
56 
      const response = await fetchMessages(selectedConversation.messages_link, 1)
 70 
      )
57 
 
 71 
 
Línea -... Línea 72...
- 
 
 72 
      if (!response.success) {
58 
      if (!response.success) {
 73 
        const errorMessage = response.data
- 
 
 74 
 
59 
        const errorMessage = response.data
 75 
        dispatch(
60 
 
 76 
          addNotification({ style: 'danger', msg: errorMessage.message })
Línea 61... Línea 77...
61 
        dispatch(addNotification({ style: 'danger', msg: errorMessage.message }))
 77 
        )
Línea 69... Línea 85...
69 
        scrollToBottom()
 85 
        scrollToBottom()
70 
      } else {
 86 
      } else {
71 
        setMessages(response.data)
 87 
        setMessages(response.data)
72 
      }
 88 
      }
Línea -... Línea 89...
- 
 
 89 
 
- 
 
 90 
      setPages((prevPages) => ({
73 
 
 91 
        ...prevPages,
- 
 
 92 
        last: response.pagination.last,
74 
      setPages((prevPages) => ({ ...prevPages, last: response.pagination.last }))
 93 
      }))
75 
    } catch (error) {
 94 
    } catch (error) {
76 
      const errorMessage = new Error(error)
 95 
      const errorMessage = new Error(error)
77 
      console.log('Request canceled', errorMessage)
 96 
      console.log('Request canceled', errorMessage)
78 
    } finally {
 97 
    } finally {
Línea 82... Línea 101...
82 
 
 101 
 
83 
  const handleSend = async (sendUrl = '', message = {}) => {
 102 
  const handleSend = async (sendUrl = '', message = {}) => {
84 
    try {
 103 
    try {
Línea 85... Línea 104...
85 
      const formData = new FormData()
 104 
      const formData = new FormData()
- 
 
 105 
 
- 
 
 106 
      Object.entries(message).forEach(([key, value]) =>
Línea 86... Línea 107...
86 
 
 107 
        formData.append(key, value)
87 
      Object.entries(message).forEach(([key, value]) => formData.append(key, value))
 108 
      )
88 
 
 109 
 
89 
      const { data: response } = await axios.post(sendUrl, formData)
 110 
      const { data: response } = await axios.post(sendUrl, formData)
90 
      setMessages(prev => [response.data, ...prev])
 111 
      setMessages((prev) => [response.data, ...prev])
91 
    } catch (error) {
 112 
    } catch (error) {
92 
      const errorMessage = new Error(error)
 113 
      const errorMessage = new Error(error)
Línea 93... Línea 114...
93 
      dispatch(addNotification({ style: 'danger', msg: errorMessage.message }))
 114 
      dispatch(addNotification({ style: 'danger', msg: errorMessage.message }))
94 
    }
 115 
    }
95 
  }
 116 
  }
Línea -... Línea 117...
- 
 
 117 
 
- 
 
 118 
  const loadMore = async () => {
- 
 
 119 
    setPages((prevPages) => ({ ...prevPages, current: prevPages.current + 1 }))
- 
 
 120 
  }
- 
 
 121 
 
- 
 
 122 
  const toggleConfirmModal = () => {
- 
 
 123 
    setIsShowConfirm(!isShowConfirm)
- 
 
 124 
  }
- 
 
 125 
 
- 
 
 126 
  const deleteConversation = (url) => {
- 
 
 127 
    axios.post(url).then(({ data: response }) => {
- 
 
 128 
      const { success, data } = response
- 
 
 129 
 
- 
 
 130 
      if (!success) {
- 
 
 131 
        dispatch(addNotification({ style: 'danger', msg: data }))
- 
 
 132 
        return
- 
 
 133 
      }
96 
 
 134 
 
97 
  const loadMore = async () => {
 135 
      dispatch(addNotification({ style: 'success', msg: data }))
98 
    setPages((prevPages) => ({ ...prevPages, current: prevPages.current + 1 }))
 136 
    })
Línea 99... Línea 137...
99 
  }
 137 
  }
Línea 107... Línea 145...
107 
    scrollToBottom(messagesList)
 145 
    scrollToBottom(messagesList)
108 
    setPages(DEFAULT_PAGES)
 146 
    setPages(DEFAULT_PAGES)
109 
  }, [selectedConversation])
 147 
  }, [selectedConversation])
Línea 110... Línea 148...
110 
 
 148 
 
- 
 
 149 
  useEffect(() => {
111 
  useEffect(() => {
 150 
    if (selectedConversation)
112 
    if (selectedConversation) getMoreMessages(selectedConversation?.messages_link, pages.current)
 151 
      getMoreMessages(selectedConversation?.messages_link, pages.current)
Línea 113... Línea 152...
113 
  }, [pages.current])
 152 
  }, [pages.current])
114 
 
 153 
 
115 
  useEffect(() => {
 154 
  useEffect(() => {
Línea 123... Línea 162...
123 
      observer.observe(lastMessage.current)
 162 
      observer.observe(lastMessage.current)
124 
    }
 163 
    }
125 
  }, [messages])
 164 
  }, [messages])
Línea 126... Línea 165...
126 
 
 165 
 
- 
 
 166 
  if (!selectedConversation) {
- 
 
 167 
    return (
- 
 
 168 
      <EmptySection
127 
  if (!selectedConversation) {
 169 
        message={LABELS.SELECT_CONVERSATION}
- 
 
 170 
        Icon={<QuestionAnswerRoundedIcon />}
- 
 
 171 
      />
128 
    return <EmptySection message={LABELS.SELECT_CONVERSATION} Icon={<QuestionAnswerRoundedIcon />} />
 172 
    )
Línea 129... Línea 173...
129 
  }
 173 
  }
130 
 
 174 
 
131 
  return (
 175 
  return (
132 
    <div className='chat'>
 176 
    <div className="chat">
133 
      <span className='icon-hide' onClick={() => setConversation(null)}>
 177 
      <span className="icon-hide" onClick={() => setConversation(null)}>
134 
        <ArrowLeft />
 178 
        <ArrowLeft />
- 
 
 179 
        {LABELS.RETURN}
135 
        {LABELS.RETURN}
 180 
      </span>
136 
      </span>
 181 
      <div className="d-flex align-items-center justify-content-center position-relative">
137 
      <a href={selectedConversation.profile}>
 182 
        <a href={selectedConversation.profile}>
- 
 
 183 
          <h2 className="chat-header">{selectedConversation.name}</h2>
- 
 
 184 
        </a>
- 
 
 185 
        <div
- 
 
 186 
          className="cursor-pointer d-flex align-items-center"
- 
 
 187 
          style={{ position: 'absolute', right: '1rem' }}
- 
 
 188 
        >
- 
 
 189 
          <img
- 
 
 190 
            src="/images/icons/options.png"
- 
 
 191 
            className="cursor-pointer img-icon options"
- 
 
 192 
            onClick={() => setDisplayOptions(!displayOptions)}
- 
 
 193 
          />
- 
 
 194 
          <div className={`feed-options ${displayOptions ? 'active' : ''}`}>
- 
 
 195 
            <ul>
- 
 
 196 
              <li>
- 
 
 197 
                <button className="option-btn" onClick={toggleConfirmModal}>
- 
 
 198 
                  <i className="fa fa-trash-o mr-1" />
- 
 
 199 
                  Borrar
- 
 
 200 
                </button>
- 
 
 201 
              </li>
- 
 
 202 
            </ul>
- 
 
 203 
          </div>
- 
 
 204 
          <ConfirmModal
- 
 
 205 
            show={isShowConfirm}
- 
 
 206 
            onClose={toggleConfirmModal}
- 
 
 207 
            onAccept={deleteConversation}
- 
 
 208 
            acceptLabel="Aceptar"
- 
 
 209 
          />
138 
        <h2 className='chat-header'>{selectedConversation.name}</h2>
 210 
        </div>
139 
      </a>
 211 
      </div>
140 
      <div className="messages-line" ref={messagesList}>
 212 
      <div className="messages-line" ref={messagesList}>
141 
        {messages.length
 213 
        {messages.length ? (
142 
          ? [...oldMessages, ...messages].map((element, index) =>
 214 
          [...oldMessages, ...messages].map((element, index) => (
143 
            <MessageTemplate
 215 
            <MessageTemplate
144 
              key={index}
 216 
              key={index}
145 
              message={element}
 217 
              message={element}
- 
 
 218 
              date={element.date}
- 
 
 219 
            />
- 
 
 220 
          ))
146 
              date={element.date}
 221 
        ) : (
- 
 
 222 
          <EmptySection
- 
 
 223 
            message={LABELS.NO_MESSAGE_CONVERSATION}
147 
            />)
 224 
            Icon={<SpeakerNotesOffRoundedIcon />}
- 
 
 225 
          />
148 
          : <EmptySection message={LABELS.NO_MESSAGE_CONVERSATION} Icon={<SpeakerNotesOffRoundedIcon />} />
 226 
        )}
- 
 
 227 
        {pages.current < pages.last && (
149 
        }
 228 
          <hr ref={lastMessage} style={{ opacity: 0, margin: 0 }} />
- 
 
 229 
        )}
- 
 
 230 
      </div>
150 
        {pages.current < pages.last && <hr ref={lastMessage} style={{ opacity: 0, margin: 0 }} />}
 231 
      <MessageBox
- 
 
 232 
        onSend={handleSend}
151 
      </div>
 233 
        sendUrl={selectedConversation.send_link}
152 
      <MessageBox onSend={handleSend} sendUrl={selectedConversation.send_link} />
 234 
      />
153 
    </div>
 235 
    </div>
Línea 154... Línea 236...
154 
  )
 236 
  )