Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2459 Rev 2477
Línea -... Línea 1...
- 
 
 1 
/* eslint-disable no-undef */
1 
import React, { useState } from 'react'
 2 
import React, { useLayoutEffect } from 'react'
2 
import { Link } from 'react-router-dom'
 3 
import { useSelector } from 'react-redux'
- 
 
 4 
import './chat.css'
- 
 
 5 
 
3 
import { useForm } from 'react-hook-form'
 6 
export function Chat() {
4 
import styled from 'styled-components'
 7 
  const { xmpp_hostname, xmpp_username, xmpp_password, xmpp_domain } =
5 
import SendIcon from '@mui/icons-material/Send'
 8 
    useSelector((state) => state.auth)
- 
 
 9 
 
- 
 
 10 
  useLayoutEffect(() => {
6 
import IconButton from '@mui/material/IconButton'
 11 
    if (!xmpp_hostname || !xmpp_password || !xmpp_username) return
- 
 
 12 
 
- 
 
 13 
    converse.initialize({
7 
import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 14 
      bosh_service_url: `https://${xmpp_hostname}:17443/http-bind/`,
- 
 
 15 
      authentication: 'login',
8 
import AttachFileIcon from '@mui/icons-material/AttachFile'
 16 
      jid: `${xmpp_username}@${xmpp_domain}.com`,
- 
 
 17 
      password: xmpp_password,
9 
import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon'
 18 
      discover_connection_methods: false,
- 
 
 19 
      allow_registration: false,
- 
 
 20 
      allow_logout: true,
- 
 
 21 
      auto_login: true,
- 
 
 22 
      auto_reconnect: true,
- 
 
 23 
      debug: false,
- 
 
 24 
      view_mode: 'overlayed',
- 
 
 25 
      i18n: 'es',
- 
 
 26 
      theme: 'dracula'
- 
 
 27 
    })
Línea 10... Línea -...
10 
 
 - 
 
11 
import Options from '../UI/Option'
 - 
 
12 
import Emojione from './emojione/Emojione'
 - 
 
13 
import FileModal from '../modals/FileModal'
 - 
 
14 
 
 - 
 
15 
const ChatContainer = styled.div`
 - 
 
16 
  background-color: var(--bg-color);
 - 
 
17 
  border-radius: var(--border-radius);
 - 
 
18 
  border: 1px solid var(--border-primary);
 - 
 
19 
  height: 80vh;
 - 
 
20 
  display: flex;
 - 
 
21 
  flex-direction: column;
 - 
 
22 
  flex-grow: 1;
 - 
 
23 
  padding: 0px 0px !important;
 - 
 
24 
`
 - 
 
25 
 
 - 
 
26 
const StyledChatHeader = styled.div`
 - 
 
27 
  align-items: center;
 - 
 
28 
  border-bottom: 1px solid var(--border-primary);
 - 
 
29 
  display: flex;
 - 
 
30 
  justify-content: center;
 - 
 
31 
  padding: 1rem 0.5rem;
 - 
 
32 
  position: relative;
 - 
 
33 
 
 - 
 
34 
  & > button:first-child {
 - 
 
35 
    position: absolute;
 28 
 
36 
    left: 1rem;
 - 
 
37 
    top: 50%;
 29 
    return () => {
38 
    transform: translateY(-50%);
 - 
 
39 
    display: inline-flex;
 - 
 
40 
 
 - 
 
41 
    @media (min-width: 768px) {
 - 
 
42 
      display: none;
 30 
      converse.connection.disconnect()
43 
    }
 - 
 
44 
  }
 - 
 
45 
`
 - 
 
46 
 
 - 
 
47 
const StyledTitle = styled.h2`
 - 
 
48 
  font-size: 16px;
 - 
 
49 
  font-weight: 600;
 - 
 
50 
  width: fit-content;
 - 
 
51 
  max-width: 20ch;
 - 
 
52 
  text-align: center;
 - 
 
53 
  color: #1d315c;
 - 
 
54 
 
 - 
 
55 
  @media (min-width: 768px) {
 - 
 
56 
    max-width: 30ch;
 - 
 
57 
  }
 - 
 
58 
`
 - 
 
59 
 
 - 
 
60 
const StyledForm = styled.form`
 - 
 
61 
  border-top: 1px solid var(--border-primary);
 - 
 
62 
  padding: 0.5rem;
 - 
 
63 
  position: relative;
 - 
 
64 
  display: flex;
 - 
 
65 
  justify-content: center;
 - 
 
66 
  align-items: center;
 - 
 
67 
  gap: 0.5rem;
 - 
 
68 
`
 - 
 
69 
 
 - 
 
70 
const StyledInput = styled.input`
 - 
 
71 
  border: none;
 - 
 
72 
  outline: none;
 - 
 
73 
  width: 100%;
 - 
 
74 
  padding: 0.5rem 1rem;
 - 
 
75 
  border-radius: 30px;
 - 
 
76 
  background: var(--bg-color-secondary);
 - 
 
77 
 
 - 
 
78 
  &:focus {
 - 
 
79 
    background: var(--bg-color-secondary);
 - 
 
80 
  }
 - 
 
81 
`
 - 
 
82 
 
 - 
 
83 
const Header = ({ children, options = [], onClose }) => {
 - 
 
84 
  return (
 - 
 
85 
    <StyledChatHeader>
 - 
 
86 
      <IconButton onClick={onClose}>
 - 
 
87 
        <ArrowBackIcon />
 - 
 
88 
      </IconButton>
 - 
 
89 
      {children}
 - 
 
90 
      {!!options.length && <Options options={options} right='1rem' />}
 - 
 
91 
    </StyledChatHeader>
 - 
 
92 
  )
 - 
 
93 
}
 - 
 
94 
 
 - 
 
95 
const Title = ({ children, url }) => {
 - 
 
96 
  if (!url) {
 31 
    }
97 
    return <StyledTitle>{children}</StyledTitle>
 - 
 
Línea 98... Línea -...
98 
  }
 - 
 
99 
 
 - 
 
100 
  return (
 32 
  }, [xmpp_hostname, xmpp_password, xmpp_username])
101 
    <Link to={url} style={{ width: 'fit-content' }}>
 - 
 
102 
      <StyledTitle>{children}</StyledTitle>
 - 
 
103 
    </Link>
 33 
 
104 
  )
 - 
 
105 
}
 - 
 
106 
 
 - 
 
107 
const SubmitForm = ({ onSend }) => {
 - 
 
108 
  const [showEmojione, setShowEmojione] = useState(false)
 - 
 
109 
  const [isShowFileModal, setIsShowFileModal] = useState(false)
 - 
 
110 
  const [isSending, setIsSending] = useState(false)
 - 
 
111 
 
 - 
 
112 
  const { handleSubmit, setValue, register, reset, getValues } = useForm()
 - 
 
113 
 
 - 
 
114 
  const onSubmit = handleSubmit(({ message }) => {
 - 
 
115 
    onSend(message)
 - 
 
116 
    reset()
 - 
 
117 
  })
 - 
 
118 
 
 - 
 
119 
  const sendFile = (file) => {
 - 
 
120 
    setIsSending(true)
 - 
 
121 
    onSend(file)
 - 
 
122 
  }
 - 
 
123 
 
 - 
 
124 
  const toggleEmojione = () => {
 - 
 
125 
    setShowEmojione(!showEmojione)
 - 
 
126 
  }
 - 
 
127 
 
 - 
 
128 
  const toggleFileModal = () => {
 - 
 
129 
    setIsShowFileModal(!isShowFileModal)
 - 
 
130 
  }
 - 
 
131 
 
 - 
 
132 
  const onClickEmoji = (event) => {
 - 
 
133 
    const shortname = event.currentTarget.dataset.shortname
 - 
 
134 
    const currentMessage = getValues('message')
 - 
 
135 
    // eslint-disable-next-line no-undef
 - 
 
136 
    const unicode = emojione.shortnameToUnicode(shortname)
 - 
 
137 
    setValue('message', `${currentMessage}${unicode}`)
 - 
 
138 
  }
 - 
 
139 
 
 - 
 
140 
  return (
 - 
 
141 
    <>
 - 
 
142 
      <StyledForm onSubmit={onSubmit}>
 - 
 
143 
        {showEmojione && <Emojione onClickEmoji={onClickEmoji} />}
 - 
 
144 
        <IconButton onClick={toggleFileModal}>
 - 
 
145 
          <AttachFileIcon />
 - 
 
146 
        </IconButton>
 - 
 
147 
        <IconButton onClick={toggleEmojione}>
 - 
 
148 
          <InsertEmoticonIcon />
 - 
 
149 
        </IconButton>
 - 
 
150 
        <StyledInput
 - 
 
151 
          type='text'
 - 
 
152 
          name='message'
 - 
 
153 
          placeholder='Escribe un mensaje'
 - 
 
154 
          ref={register({ required: true })}
 - 
 
155 
        />
 - 
 
156 
        <IconButton type='submit'>
 - 
 
157 
          <SendIcon />
 - 
 
158 
        </IconButton>
 - 
 
159 
      </StyledForm>
 - 
 
160 
      <FileModal
 - 
 
161 
        isShow={isShowFileModal}
 - 
 
162 
        onHide={toggleFileModal}
 - 
 
163 
        onComplete={sendFile}
 - 
 
164 
        loading={isSending}
 - 
 
165 
      />
 - 
 
166 
    </>
 - 
 
167 
  )
 - 
 
168 
}
 - 
 
169 
 
 - 
 
170 
ChatContainer.Header = Header
 - 
 
171 
ChatContainer.Title = Title
 - 
 
172 
 
 - 
 
173 
ChatContainer.SubmitForm = SubmitForm
 -