Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

import { Link } from 'react-router-dom'

import { axios } from '../../utils'

import { useForm } from 'react-hook-form'

import { useDispatch } from 'react-redux'

import { addNotification } from '../../redux/notification/notification.actions'

import styled from 'styled-components'

import SendIcon from '@mui/icons-material/Send'

import IconButton from '@mui/material/IconButton'

import ArrowBackIcon from '@mui/icons-material/ArrowBack'

import AttachFileIcon from '@mui/icons-material/AttachFile'

import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon'

import Options from '../UI/Option'

import Emojione from './emojione/Emojione'

import FileModal from '../modals/FileModal'

const ChatContainer = styled.div`

  background-color: var(--bg-color);

  border-radius: var(--border-radius);

  border: 1px solid var(--border-primary);

  height: 80vh;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

  padding: 0px 0px !important;

`

const StyledChatHeader = styled.div`

  align-items: center;

  border-bottom: 1px solid var(--border-primary);

  display: flex;

  justify-content: center;

  padding: 1rem 0.5rem;

  position: relative;

  & > button:first-child {

    position: absolute;

    left: 1rem;

    top: 50%;

    transform: translateY(-50%);

    display: inline-flex;

    @media (min-width: 768px) {

      display: none;

    }

  }

`

const StyledTitle = styled.h2`

  font-size: 16px;

  font-weight: 600;

  width: fit-content;

  max-width: 20ch;

  text-align: center;

  color: #1d315c;

  @media (min-width: 768px) {

    max-width: 30ch;

  }

`

const StyledForm = styled.form`

  border-top: 1px solid var(--border-primary);

  padding: 0.5rem;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 0.5rem;

`

const StyledInput = styled.input`

  border: none;

  outline: none;

  width: 100%;

  padding: 0.5rem 1rem;

  border-radius: 30px;

  background: var(--bg-color-secondary);

  &:focus {

    background: var(--bg-color-secondary);

  }

`

const Header = ({ children, options = [], onClose }) => {

  return (

    <StyledChatHeader>

      <IconButton onClick={onClose}>

        <ArrowBackIcon />

      </IconButton>

      {children}

      {!!options.length && <Options options={options} right='1rem' />}

    </StyledChatHeader>

  )

}

const Title = ({ children, url }) => {

  if (!url) {

    return <StyledTitle>{children}</StyledTitle>

  }

  return (

    <Link to={url} style={{ width: 'fit-content' }}>

      <StyledTitle>{children}</StyledTitle>

    </Link>

  )

}

const SubmitForm = ({ sendUrl, uploadUrl, onSubmit: onComplete }) => {

  const [showEmojione, setShowEmojione] = useState(false)

  const [isShowFileModal, setIsShowFileModal] = useState(false)

  const [isSending, setIsSending] = useState(false)

  const dispatch = useDispatch()

  const { handleSubmit, setValue, register, reset, getValues } = useForm()

  const onSubmit = handleSubmit(({ message }) => {

    const formData = new FormData()

    formData.append('message', emojione.toShort(message))

    axios.post(sendUrl, formData).then((response) => {

      const { success, data } = response.data

      if (!success) {

        const errorMessage =

          typeof data === 'string' ? data : 'Ha ocurrido un error'

        setShowEmojione(false)

        dispatch(addNotification({ style: 'danger', msg: errorMessage }))

        return

      }

      setShowEmojione(false)

      onComplete()

      reset()

    })

  })

  const sendFile = (file) => {

    setIsSending(true)

    const formData = new FormData()

    formData.append('file', file)

    axios

      .post(uploadUrl, formData)

      .then(({ data: response }) => {

        const { success, data } = response

        if (!success) {

          const errorMessage =

            typeof data === 'string' ? data : 'Ha ocurrido un error'

          dispatch(addNotification({ style: 'success', msg: errorMessage }))

          return

        }

        toggleFileModal()

        onComplete()

      })

      .finally(() => setIsSending(false))

  }

  const toggleEmojione = () => {

    setShowEmojione(!showEmojione)

  }

  const toggleFileModal = () => {

    setIsShowFileModal(!isShowFileModal)

  }

  const onClickEmoji = (event) => {

    const shortname = event.currentTarget.dataset.shortname

    const currentMessage = getValues('message')

    // eslint-disable-next-line no-undef

    const unicode = emojione.shortnameToUnicode(shortname)

    setValue('message', `${currentMessage}${unicode}`)

  }

  return (

    <>

      <StyledForm onSubmit={onSubmit}>

        {showEmojione && <Emojione onClickEmoji={onClickEmoji} />}

        <IconButton onClick={toggleFileModal}>

          <AttachFileIcon />

        </IconButton>

        <IconButton onClick={toggleEmojione}>

          <InsertEmoticonIcon />

        </IconButton>

        <StyledInput

          type='text'

          name='message'

          placeholder='Escribe un mensaje'

          ref={register({ required: true })}

        />

        <IconButton type='submit'>

          <SendIcon />

        </IconButton>

      </StyledForm>

      <FileModal

        isShow={isShowFileModal}

        onHide={toggleFileModal}

        onComplete={sendFile}

        loading={isSending}

      />

    </>

  )

}

ChatContainer.Header = Header

ChatContainer.Title = Title

ChatContainer.SubmitForm = SubmitForm

export default ChatContainer