Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 517 Rev 679
Línea 1... Línea 1...
1 
import React, { memo, useEffect, useRef, useState } from 'react'
 1 
import React, { memo, useEffect, useRef, useState } from 'react'
- 
 
 2 
import { Link } from 'react-router-dom'
2 
import { axios } from '../../utils'
 3 
import { axios } from '../../utils'
3 
import { useForm } from 'react-hook-form'
 4 
import { useForm } from 'react-hook-form'
4 
import { useDispatch } from 'react-redux'
 5 
import { useDispatch } from 'react-redux'
5 
import { addNotification } from '../../redux/notification/notification.actions'
 6 
import { addNotification } from '../../redux/notification/notification.actions'
6 
import parse from 'html-react-parser'
 7 
import parse from 'html-react-parser'
Línea 14... Línea 15...
14 
import Options from '../UI/Option'
 15 
import Options from '../UI/Option'
15 
import Emojione from './emojione/Emojione'
 16 
import Emojione from './emojione/Emojione'
16 
import FileModal from '../modals/FileModal'
 17 
import FileModal from '../modals/FileModal'
17 
import LoaderContainer from '../UI/LoaderContainer'
 18 
import LoaderContainer from '../UI/LoaderContainer'
18 
import Spinner from '../UI/Spinner'
 19 
import Spinner from '../UI/Spinner'
19 
import { Link } from 'react-router-dom'
 20 
import Paraphrase from '../UI/Paraphrase'
Línea 20... Línea 21...
20 
 
 21 
 
21 
const StyledChatContainer = styled.div`
 22 
const StyledChatContainer = styled.div`
22 
  background-color: var(--bg-color);
 23 
  background-color: var(--bg-color);
23 
  border-radius: var(--border-radius);
 24 
  border-radius: var(--border-radius);
Línea 174... Línea 175...
174 
    <StyledChatHeader>
 175 
    <StyledChatHeader>
175 
      <IconButton onClick={onClose}>
 176 
      <IconButton onClick={onClose}>
176 
        <ArrowBackIcon />
 177 
        <ArrowBackIcon />
177 
      </IconButton>
 178 
      </IconButton>
178 
      {children}
 179 
      {children}
179 
      {!!options.length && <Options options={options} right="1rem" />}
 180 
      {!!options.length && <Options options={options} right='1rem' />}
180 
    </StyledChatHeader>
 181 
    </StyledChatHeader>
181 
  )
 182 
  )
182 
}
 183 
}
Línea 183... Línea 184...
183 
 
 184 
 
Línea 221... Línea 222...
221 
      )}
 222 
      )}
222 
    </StyledMessageList>
 223 
    </StyledMessageList>
223 
  )
 224 
  )
224 
}
 225 
}
Línea 225... Línea -...
225 
 
 - 
 
226 
// eslint-disable-next-line react/display-name
 226 
 
227 
const Message = memo(({ message }) => {
 227 
const Message = memo(({ message }) => {
228 
  const senderName = (message) => {
 228 
  const senderName = (message) => {
229 
    if (message.type === 'group' && !message.u === 1) {
 229 
    if (message.type === 'group' && !message.u === 1) {
230 
      return <span className="user_name">{message.user_name}</span>
 230 
      return <span className='user_name'>{message.user_name}</span>
231 
    }
 231 
    }
Línea 232... Línea 232...
232 
  }
 232 
  }
233 
 
 233 
 
- 
 
 234 
  const messagesContent = {
234 
  const messagesContent = {
 235 
    text: (
235 
    text: (
 236 
      <Paraphrase>
- 
 
 237 
        {message.m && emojione.shortnameToImage(message.m)}
236 
      // eslint-disable-next-line no-undef
 238 
        {message.message && emojione.shortnameToImage(message.message)}
237 
      <p>{parse(emojione.shortnameToImage(message.m || message.message))}</p>
 239 
      </Paraphrase>
238 
    ),
 240 
    ),
239 
    image: <img src={message.m || message.filename} alt="chat_image" />,
 241 
    image: <img src={message.m || message.filename} alt='chat_image' />,
240 
    video: (
 242 
    video: (
241 
      <video src={message.m || message.filename} preload="none" controls />
 243 
      <video src={message.m || message.filename} preload='none' controls />
242 
    ),
 244 
    ),
243 
    document: (
 245 
    document: (
244 
      <a href={message.m || message.filename} download>
 246 
      <a href={message.m || message.filename} download>
245 
        <img className="pdf" src="/images/extension/pdf.png" alt="pdf" />
 247 
        <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
246 
      </a>
 248 
      </a>
Línea 247... Línea 249...
247 
    ),
 249 
    )
248 
  }
 250 
  }
249 
 
 251 
 
250 
  return (
 252 
  return (
251 
    <>
 253 
    <>
252 
      {senderName(message)}
 254 
      {senderName(message)}
253 
      <StyledMessage
 255 
      <StyledMessage
254 
        send={message.u ? message.u === 1 : message.side === 'left'}
 256 
        send={message.u ? message.u === 1 : message.side === 'left'}
255 
      >
 257 
      >
256 
        {messagesContent[message.mtype || message.type]}
 258 
        {messagesContent[message.mtype || message.type]}
257 
        <label className="time">
 259 
        <label className='time'>
258 
          {!message.not_received && (
 260 
          {!message.not_received && (
259 
            <i
 261 
            <i
260 
              className="fa fa-check"
 262 
              className='fa fa-check'
261 
              style={message.seen ? { color: 'blue' } : { color: 'gray' }}
 263 
              style={message.seen ? { color: 'blue' } : { color: 'gray' }}
262 
            />
 264 
            />
Línea 346... Línea 348...
346 
        </IconButton>
 348 
        </IconButton>
347 
        <IconButton onClick={toggleEmojione}>
 349 
        <IconButton onClick={toggleEmojione}>
348 
          <InsertEmoticonIcon />
 350 
          <InsertEmoticonIcon />
349 
        </IconButton>
 351 
        </IconButton>
350 
        <StyledInput
 352 
        <StyledInput
351 
          type="text"
 353 
          type='text'
352 
          name="message"
 354 
          name='message'
353 
          placeholder="Escribe un mensaje"
 355 
          placeholder='Escribe un mensaje'
354 
          ref={register({ required: true })}
 356 
          ref={register({ required: true })}
355 
        />
 357 
        />
356 
        <IconButton type="submit">
 358 
        <IconButton type='submit'>
357 
          <SendIcon />
 359 
          <SendIcon />
358 
        </IconButton>
 360 
        </IconButton>
359 
      </StyledForm>
 361 
      </StyledForm>
360 
      <FileModal
 362 
      <FileModal
361 
        isShow={isShowFileModal}
 363 
        isShow={isShowFileModal}