Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 1675 Rev 1677
Línea 1... Línea 1...
1 
import React, { memo, useEffect, useState } from 'react'
 1 
import React, { useEffect, 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 13... Línea 14...
13 
 
 14 
 
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 Paraphrase from '../UI/Paraphrase'
 20 
import Paraphrase from '../UI/Paraphrase'
- 
 
 21 
import useNearScreen from '@app/hooks/useNearScreen'
Línea 20... Línea 22...
20 
import useNearScreen from '@app/hooks/useNearScreen'
 22 
import EmptySection from '../UI/EmptySection'
21 
 
 23 
 
22 
const ChatContainer = styled.div`
 24 
const ChatContainer = styled.div`
23 
  background-color: var(--bg-color);
 25 
  background-color: var(--bg-color);
Línea 153... Línea 155...
153 
  &:focus {
 155 
  &:focus {
154 
    background: var(--bg-color-secondary);
 156 
    background: var(--bg-color-secondary);
155 
  }
 157 
  }
156 
`
 158 
`
Línea 157... Línea -...
157 
 
 - 
 
158 
function messageAreEqual(oldProps, newProps) {
 - 
 
159 
  return oldProps.message.id
 - 
 
160 
    ? oldProps.message.id === newProps.message.id
 - 
 
161 
    : oldProps.message.uuid === newProps.message.uuid
 - 
 
162 
}
 - 
 
163 
 
 159 
 
164 
const Header = ({ children, options = [], onClose }) => {
 160 
const Header = ({ children, options = [], onClose }) => {
165 
  return (
 161 
  return (
166 
    <StyledChatHeader>
 162 
    <StyledChatHeader>
167 
      <IconButton onClick={onClose}>
 163 
      <IconButton onClick={onClose}>
Línea 183... Línea 179...
183 
      <StyledTitle>{children}</StyledTitle>
 179 
      <StyledTitle>{children}</StyledTitle>
184 
    </Link>
 180 
    </Link>
185 
  )
 181 
  )
186 
}
 182 
}
Línea -... Línea 183...
- 
 
 183 
 
187 
 
 184 
const List = ({
- 
 
 185 
  messages = [],
- 
 
 186 
  onPagination,
- 
 
 187 
  onReport,
- 
 
 188 
  scrollRef,
- 
 
 189 
  loading
188 
const List = ({ messages = [], onPagination, scrollRef, loading }) => {
 190 
}) => {
189 
  const [isIntercepting, ref] = useNearScreen({
 191 
  const [isIntercepting, ref] = useNearScreen({
190 
    once: false,
 192 
    once: false,
191 
    rootMargin: '0px'
 193 
    rootMargin: '0px'
Línea 195... Línea 197...
195 
    if (isIntercepting) {
 197 
    if (isIntercepting) {
196 
      onPagination()
 198 
      onPagination()
197 
    }
 199 
    }
198 
  }, [isIntercepting])
 200 
  }, [isIntercepting])
Línea -... Línea 201...
- 
 
 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 
  }
199 
 
 211 
 
200 
  return (
 212 
  return (
201 
    <StyledMessageList ref={scrollRef}>
 213 
    <StyledMessageList ref={scrollRef}>
202 
      {messages.map((message) => (
 214 
      {messages.map((message) => (
203 
        <List.Message message={message} key={message.id} />
 215 
        <List.Message onReport={onReport} message={message} key={message.id} />
204 
      ))}
 216 
      ))}
205 
      <span ref={ref}>.</span>
 217 
      <span ref={ref}>.</span>
206 
      {loading && (
 218 
      {loading && (
207 
        <LoaderContainer>
 219 
        <LoaderContainer>
Línea 210... Línea 222...
210 
      )}
 222 
      )}
211 
    </StyledMessageList>
 223 
    </StyledMessageList>
212 
  )
 224 
  )
213 
}
 225 
}
Línea 214... Línea 226...
214 
 
 226 
 
- 
 
 227 
const Message = ({ message, onReport }) => {
- 
 
 228 
  const [options, setOptions] = useState([])
215 
const Message = memo(({ message }) => {
 229 
 
216 
  const senderName = (message) => {
 230 
  const senderName = (message) => {
217 
    if (message.type === 'group' && !message.u === 1) {
 231 
    if (message.type === 'group' && !message.u === 1) {
218 
      return <span className='user_name'>{message.user_name}</span>
 232 
      return <span className='user_name'>{message.user_name}</span>
219 
    }
 233 
    }
Línea 234... Línea 248...
234 
        <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
 248 
        <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
235 
      </a>
 249 
      </a>
236 
    )
 250 
    )
237 
  }
 251 
  }
Línea -... Línea 252...
- 
 
 252 
 
- 
 
 253 
  useEffect(() => {
- 
 
 254 
    if (message.url_abuse_report) {
- 
 
 255 
      const reportOption = {
- 
 
 256 
        action: () =>
- 
 
 257 
          onReport({ url: message.url_abuse_report, id: message.id }),
- 
 
 258 
        label: 'Reportar'
- 
 
 259 
      }
- 
 
 260 
      setOptions([...options, reportOption])
- 
 
 261 
    }
- 
 
 262 
  }, [message])
238 
 
 263 
 
239 
  return (
 264 
  return (
240 
    <>
 265 
    <>
241 
      {senderName(message)}
 266 
      {senderName(message)}
242 
      <StyledMessage
 267 
      <StyledMessage
Línea 255... Línea 280...
255 
 
 280 
 
256 
        <Options right='-1.5rem' />
 281 
        <Options right='-1.5rem' />
257 
      </StyledMessage>
 282 
      </StyledMessage>
258 
    </>
 283 
    </>
259 
  )
 284 
  )
Línea 260... Línea 285...
260 
}, messageAreEqual)
 285 
}
261 
 
 286 
 
262 
const SubmitForm = ({ sendUrl, uploadUrl, onSubmit: onComplete }) => {
 287 
const SubmitForm = ({ sendUrl, uploadUrl, onSubmit: onComplete }) => {
263 
  const [showEmojione, setShowEmojione] = useState(false)
 288 
  const [showEmojione, setShowEmojione] = useState(false)