Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 1683 Rev 1684
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useState } from 'react'
2 
import { Link } from 'react-router-dom'
 2 
import { Link } from 'react-router-dom'
3 
import { axios } from '../../utils'
 3 
import { axios } from '../../utils'
4 
import { useForm } from 'react-hook-form'
 4 
import { useForm } from 'react-hook-form'
5 
import { useDispatch } from 'react-redux'
 5 
import { useDispatch } from 'react-redux'
6 
import { addNotification } from '../../redux/notification/notification.actions'
 6 
import { addNotification } from '../../redux/notification/notification.actions'
Línea 8... Línea 8...
8 
import SendIcon from '@mui/icons-material/Send'
 8 
import SendIcon from '@mui/icons-material/Send'
9 
import IconButton from '@mui/material/IconButton'
 9 
import IconButton from '@mui/material/IconButton'
10 
import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 10 
import ArrowBackIcon from '@mui/icons-material/ArrowBack'
11 
import AttachFileIcon from '@mui/icons-material/AttachFile'
 11 
import AttachFileIcon from '@mui/icons-material/AttachFile'
12 
import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon'
 12 
import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon'
13 
import { Inbox } from '@mui/icons-material'
 - 
 
Línea 14... Línea 13...
14 
 
 13 
 
15 
import Options from '../UI/Option'
 14 
import Options from '../UI/Option'
16 
import Emojione from './emojione/Emojione'
 15 
import Emojione from './emojione/Emojione'
17 
import FileModal from '../modals/FileModal'
 - 
 
18 
import LoaderContainer from '../UI/LoaderContainer'
 - 
 
19 
import Spinner from '../UI/Spinner'
 - 
 
20 
import Paraphrase from '../UI/Paraphrase'
 - 
 
21 
import useNearScreen from '@app/hooks/useNearScreen'
 - 
 
Línea 22... Línea 16...
22 
import EmptySection from '../UI/EmptySection'
 16 
import FileModal from '../modals/FileModal'
23 
 
 17 
 
24 
const ChatContainer = styled.div`
 18 
const ChatContainer = styled.div`
25 
  background-color: var(--bg-color);
 19 
  background-color: var(--bg-color);
Línea 64... Línea 58...
64 
  @media (min-width: 768px) {
 58 
  @media (min-width: 768px) {
65 
    max-width: 30ch;
 59 
    max-width: 30ch;
66 
  }
 60 
  }
67 
`
 61 
`
Línea 68... Línea -...
68 
 
 - 
 
69 
const StyledMessageList = styled.div`
 - 
 
70 
  gap: 0.5rem;
 - 
 
71 
  display: flex;
 - 
 
72 
  flex-direction: column-reverse;
 - 
 
73 
  height: -webkit-fill-available;
 - 
 
74 
  padding: 0.5rem 0;
 - 
 
75 
  overflow: auto;
 - 
 
76 
`
 - 
 
77 
 
 - 
 
78 
const StyledMessage = styled.div`
 - 
 
79 
  box-shadow: var(--light-shadow);
 - 
 
80 
  display: inline-flex;
 - 
 
81 
  flex-direction: column;
 - 
 
82 
  gap: 0.5rem;
 - 
 
83 
  margin-bottom: 0.5rem;
 - 
 
84 
  max-width: 70%;
 - 
 
85 
  min-width: 4rem;
 - 
 
86 
  padding: 0.5rem;
 - 
 
87 
  position: relative;
 - 
 
88 
 
 - 
 
89 
  & > p {
 - 
 
90 
    color: var(--chat-color);
 - 
 
91 
    max-width: 100%;
 - 
 
92 
    overflow: hidden;
 - 
 
93 
    text-overflow: ellipsis;
 - 
 
94 
    word-break: break-word;
 - 
 
95 
  }
 - 
 
96 
 
 - 
 
97 
  & > img,
 - 
 
98 
  & > video {
 - 
 
99 
    max-width: 250px;
 - 
 
100 
    max-height: 250px;
 - 
 
101 
    object-fit: contain;
 - 
 
102 
  }
 - 
 
103 
 
 - 
 
104 
  &:first-child {
 - 
 
105 
    margin-top: 0.5rem;
 - 
 
106 
  }
 - 
 
107 
 
 - 
 
108 
  .time {
 - 
 
109 
    color: var(--subtitle-color);
 - 
 
110 
    font-size: 0.8rem;
 - 
 
111 
  }
 - 
 
112 
 
 - 
 
113 
  .emojione {
 - 
 
114 
    width: 1rem;
 - 
 
115 
    height: 1rem;
 - 
 
116 
  }
 - 
 
117 
 
 - 
 
118 
  ${(props) => {
 - 
 
119 
    if (props.send) {
 - 
 
120 
      return css`
 - 
 
121 
        align-self: flex-end;
 - 
 
122 
        background-color: #eee;
 - 
 
123 
        border-radius: 10px 0px 10px 10px;
 - 
 
124 
        margin-right: 0.5rem;
 - 
 
125 
        color: #393939;
 - 
 
126 
      `
 - 
 
127 
    }
 - 
 
128 
    return css`
 - 
 
129 
      align-self: flex-start;
 - 
 
130 
      background-color: var(--chat-received);
 - 
 
131 
      border-radius: 0 10px 10px 10px;
 - 
 
132 
      margin-left: 0.5rem;
 - 
 
133 
    `
 - 
 
134 
  }}
 - 
 
135 
`
 - 
 
136 
 
 62 
 
137 
const StyledForm = styled.form`
 63 
const StyledForm = styled.form`
138 
  border-top: 1px solid var(--border-primary);
 64 
  border-top: 1px solid var(--border-primary);
139 
  padding: 0.5rem;
 65 
  padding: 0.5rem;
140 
  position: relative;
 66 
  position: relative;
Línea 179... Línea 105...
179 
      <StyledTitle>{children}</StyledTitle>
 105 
      <StyledTitle>{children}</StyledTitle>
180 
    </Link>
 106 
    </Link>
181 
  )
 107 
  )
182 
}
 108 
}
Línea 183... Línea -...
183 
 
 - 
 
184 
const List = ({
 - 
 
185 
  messages = [],
 - 
 
186 
  onPagination,
 - 
 
187 
  onReport,
 - 
 
188 
  scrollRef,
 - 
 
189 
  loading
 - 
 
190 
}) => {
 - 
 
191 
  const [isIntercepting, ref] = useNearScreen({
 - 
 
192 
    once: false,
 - 
 
193 
    rootMargin: '0px'
 - 
 
194 
  })
 - 
 
195 
 
 - 
 
196 
  useEffect(() => {
 - 
 
197 
    if (isIntercepting) {
 - 
 
198 
      onPagination()
 - 
 
199 
    }
 - 
 
200 
  }, [isIntercepting])
 - 
 
201 
 
 - 
 
202 
  if (!messages.length) {
 - 
 
203 
    return (
 - 
 
204 
      <EmptySection
 - 
 
205 
        Icon={<Inbox />}
 - 
 
206 
        message='No hay mensajes en esta conversación'
 - 
 
207 
        align='center'
 - 
 
208 
      />
 - 
 
209 
    )
 - 
 
210 
  }
 - 
 
211 
 
 - 
 
212 
  return (
 - 
 
213 
    <StyledMessageList ref={scrollRef}>
 - 
 
214 
      {messages.map((message) => (
 - 
 
215 
        <List.Message onReport={onReport} message={message} key={message.id} />
 - 
 
216 
      ))}
 - 
 
217 
 
 - 
 
218 
      <p ref={ref}>Loading</p>
 - 
 
219 
    </StyledMessageList>
 - 
 
220 
  )
 - 
 
221 
}
 - 
 
222 
 
 - 
 
223 
const Message = ({ message, onReport }) => {
 - 
 
224 
  const [options, setOptions] = useState([])
 - 
 
225 
 
 - 
 
226 
  const senderName = (message) => {
 - 
 
227 
    if (message.type === 'group' && !message.u === 1) {
 - 
 
228 
      return <span className='user_name'>{message.user_name}</span>
 - 
 
229 
    }
 - 
 
230 
  }
 - 
 
231 
 
 - 
 
232 
  const messagesContent = {
 - 
 
233 
    text: (message.m || message.message) && (
 - 
 
234 
      <Paraphrase>
 - 
 
235 
        {emojione.shortnameToImage(message.m || message.message)}
 - 
 
236 
      </Paraphrase>
 - 
 
237 
    ),
 - 
 
238 
    image: <img src={message.m || message.filename} alt='chat_image' />,
 - 
 
239 
    video: (
 - 
 
240 
      <video src={message.m || message.filename} preload='none' controls />
 - 
 
241 
    ),
 - 
 
242 
    document: (
 - 
 
243 
      <a href={message.m || message.filename} download>
 - 
 
244 
        <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
 - 
 
245 
      </a>
 - 
 
246 
    )
 - 
 
247 
  }
 - 
 
248 
 
 - 
 
249 
  useEffect(() => {
 - 
 
250 
    if (message.url_abuse_report) {
 - 
 
251 
      const reportOption = {
 - 
 
252 
        action: () =>
 - 
 
253 
          onReport({ url: message.url_abuse_report, id: message.id }),
 - 
 
254 
        label: 'Reportar'
 - 
 
255 
      }
 - 
 
256 
      setOptions([...options, reportOption])
 - 
 
257 
    }
 - 
 
258 
  }, [message])
 - 
 
259 
 
 - 
 
260 
  return (
 - 
 
261 
    <>
 - 
 
262 
      {senderName(message)}
 - 
 
263 
      <StyledMessage
 - 
 
264 
        send={message.u ? message.u === 1 : message.side === 'left'}
 - 
 
265 
      >
 - 
 
266 
        {messagesContent[message.mtype || message.type]}
 - 
 
267 
        <label className='time'>
 - 
 
268 
          {!message.not_received && (
 - 
 
269 
            <i
 - 
 
270 
              className='fa fa-check'
 - 
 
271 
              style={message.seen ? { color: 'blue' } : { color: 'gray' }}
 - 
 
272 
            />
 - 
 
273 
          )}
 - 
 
274 
          {message.time || message.date}
 - 
 
275 
        </label>
 - 
 
276 
 
 - 
 
277 
        <Options options={options} right='-2.5rem' />
 - 
 
278 
      </StyledMessage>
 - 
 
279 
    </>
 - 
 
280 
  )
 - 
 
281 
}
 - 
 
282 
 
 109 
 
283 
const SubmitForm = ({ sendUrl, uploadUrl, onSubmit: onComplete }) => {
 110 
const SubmitForm = ({ sendUrl, uploadUrl, onSubmit: onComplete }) => {
284 
  const [showEmojione, setShowEmojione] = useState(false)
 111 
  const [showEmojione, setShowEmojione] = useState(false)
285 
  const [isShowFileModal, setIsShowFileModal] = useState(false)
 112 
  const [isShowFileModal, setIsShowFileModal] = useState(false)
286 
  const [isSending, setIsSending] = useState(false)
 113 
  const [isSending, setIsSending] = useState(false)
Línea 379... Línea 206...
379 
  )
 206 
  )
380 
}
 207 
}
Línea 381... Línea 208...
381 
 
 208 
 
382 
ChatContainer.Header = Header
 209 
ChatContainer.Header = Header
383 
ChatContainer.Title = Title
 - 
 
384 
ChatContainer.List = List
 - 
 
- 
 
 210 
ChatContainer.Title = Title
385 
List.Message = Message
 211 
 
Línea 386... Línea 212...
386 
ChatContainer.SubmitForm = SubmitForm
 212 
ChatContainer.SubmitForm = SubmitForm