Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */

/* eslint-disable react/prop-types */

import React, { useEffect, useRef, useState } from 'react'

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

import { Modal } from 'react-bootstrap'

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

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

import { getMessages } from '../../../redux/conversation/conversation.actions'

import { useDispatch, useSelector } from 'react-redux'

import styled from 'styled-components'

import Datetime from 'react-datetime'

import SearchIcon from '@mui/icons-material/Search'

import Emojione from './emojione/Emojione'

import SendFileModal from './send-file-modal/SendFileModal'

import MessageTemplate from './messageTemplate/MessageTemplate'

import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'

import EmptySection from '../../../shared/empty-section/EmptySection'

import FormErrorFeedback from '../../../shared/form-error-feedback/FormErrorFeedback'

import 'react-datetime/css/react-datetime.css'

const StyledShowOptions = styled.div`

  height: 342px;

  flex-direction: column;

  gap: 0.5rem;

  overflow-y: auto;

  position: relative;

  &.show {

    display: flex;

  }

  &.hide {

    display: none;

  }

  .optionBack {

    margin: 1rem 0 0.5rem 1rem;

    cursor: pointer;

  }

  .optionsTab {

    &__option {

      padding: 0.5rem;

      border-bottom: 1px solid #e2e2e2;

      cursor: pointer;

      &:hover {

        background-color: #e2e2e2;

      }

      &__icon {

        margin-right: 0.3rem;

      }

    }

  }

  .addPersonToGroupTab {

    display: flex;

    flex-direction: column;

    &__person {

      display: flex;

      justify-content: space-between;

      align-items: center;

      padding: 0.2rem 0.5rem;

      border-bottom: 1px solid #e2e2e2;

    }

  }

`

const OPTIONS = {

  GROUP: 'group',

  CONFERENCE: 'conference',

  ADD_CONTACTS: 'addContacts',

  LIST_CONTACTS: 'listContacts',

  INITIAL: null

}

const PersonalChat = ({ entity, onClose, onMinimize, onRead, not_seen_messages, minimized, timezones }) => {

  const {

    id,

    image,

    name,

    online,

    type,

    url_get_all_messages,

    url_send,

    url_upload,

    profile,

    url_leave,

    url_delete,

    url_add_user_to_group,

    url_get_contact_group_list,

    url_get_contacts_availables_for_group,

    url_zoom

  } = entity

  const { messages, currentPage, lastPage, loading } = useSelector((state) => state.conversation)

  const dispatch = useDispatch()

  const [optionTab, setOptionTab] = useState(OPTIONS.INITIAL)

  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([])

  const [groupContactsList, setGroupContactsList] = useState([])

  const [confirmModalShow, setConfirmModalShow] = useState(false)

  const [showEmojiTab, setShowEmojiTab] = useState(false)

  const [shareFileModalShow, setShareFileModalShow] = useState(false)

  const [showConferenceModal, setShowConferenceModal] = useState(false)

  const [search, setSearch] = useState('')

  const filtredGroupList = groupContactsList.filter((conversation) => conversation.name.toLowerCase().includes(search.toLowerCase()))

  // refs

  const conversationListEl = useRef(null)

  const loader = useRef(null)

  const modalActionUrl = useRef('')

  const textAreaEl = useRef(null)

  const handleActive = () => {

    onRead(entity)

    onMinimize(entity)

  }

  const handleGetMessages = async () => {

    dispatch(getMessages(url_get_all_messages))

    scrollToBottom()

  }

  const handleLoadMore = async () => {

    await axios.get(`${url_get_all_messages}?page=${currentPage}`)

      .then((response) => {

        const resData = response.data

        if (resData.success) {

          if (resData.data.page > 1) {

            const updatedOldMessages = [...resData.data.items].reverse()

            // setOldMessages([...updatedOldMessages, ...oldMessages])

            /* scrollDownBy(100); */

          }

        }

      })

  }

  const handleCloseChat = () => onClose(entity)

  const handleChatBoxKeyDown = async (e) => {

    if (e.key === 'Enter') {

      e.preventDefault()

      const message = e.target.value

      const formData = new FormData()

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

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

        const resData = response.data

        if (resData.success) {

          let newMessage = resData.data

          online

            ? newMessage = { ...newMessage, not_received: false }

            : newMessage = { ...newMessage, not_received: true }

          // setMessages([...messages, newMessage])

        }

      })

      e.target.value = ''

      /* await handleGetMessages(); */

      setShowEmojiTab(false)

      // setResponseMessage(null)

    }

  }

  const showOptions = (tab = OPTIONS.INITIAL) => {

    onMinimize(entity, false)

    setOptionTab(tab)

  }

  const handleAddPersonToGroup = async (id) => {

    const formData = new FormData()

    formData.append('uid', id)

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

      const resData = response.data

      if (resData.success) {

        loadPersonsAvailable()

      }

    })

  }

  const handleConfirmModalAction = async () => {

    try {

      const { data } = await axios.post(modalActionUrl.current)

      if (!data.success) console.log('Error in confirm modal action')

      handleConfirmModalShow()

      onClose(entity)

      return

    } catch (error) {

      console.log(error)

    }

  }

  const handleObserver = (entities) => {

    const target = entities[0]

    if (target.isIntersecting) {

      // setCurrentPage((prevState) => prevState + 1)

    }

  }

  const scrollToBottom = () => {

    if (conversationListEl.current) {

      conversationListEl.current.scrollTop =

        conversationListEl.current.scrollHeight * 9

    }

  }

  const handleShowEmojiTab = () => {

    setShowEmojiTab(!showEmojiTab)

    // smiley_tpl(`${id}`);

  }

  const handleClickEmoji = (e) => {

    const shortname = e.currentTarget.dataset.shortname

    const currentText = textAreaEl.current.value

    const cursorPosition = textAreaEl.current.selectionStart

    const textBehind = currentText.substring(0, cursorPosition)

    const textForward = currentText.substring(cursorPosition)

    const unicode = emojione.shortnameToUnicode(shortname)

    textAreaEl.current.value = `${textBehind}${unicode}${textForward}`

    textAreaEl.current.focus()

    textAreaEl.current.setSelectionRange(

      cursorPosition + unicode.length,

      cursorPosition + unicode.length

    )

  }

  const handleConfirmModalShow = () => setConfirmModalShow(!confirmModalShow)

  const handleConfirmModalAccept = () => handleConfirmModalAction()

  const handleShareFileModalShow = () => {

    setShareFileModalShow(!shareFileModalShow)

  }

  /* const handleResponseMessage = (element) => {

    element.mtype === 'text'

      ? setResponseMessage(element)

      : setResponseMessage({ ...element, m: 'Archivo adjunto' })

    textAreaEl.current && textAreaEl.current.focus()

  } */

  const displayConferenceModal = () => setShowConferenceModal(!showConferenceModal)

  const messagesRender = () => {

    return (

      <>

        {currentPage < lastPage ? <li ref={loader}>Cargando...</li> : ''}

        {messages.map((message) => (

          <MessageTemplate

            time={message.time}

            key={message.id}

            message={message} />

        ))}

      </>

    )

  }

  const loadPersonsAvailable = async () => {

    await axios.get(url_get_contacts_availables_for_group).then((response) => {

      const resData = response.data

      if (resData.success) {

        setAvailableContactsToAdd(resData.data)

      }

    })

  }

  const loadGroupContacts = async () => {

    await axios.get(url_get_contact_group_list).then((response) => {

      const resData = response.data

      if (resData.success) {

        setGroupContactsList(resData.data)

      }

    })

  }

  const handleDeletePersonFromGroup = async (urlDeletePersonFromGroup) => {

    await axios.post(urlDeletePersonFromGroup).then((response) => {

      const resData = response.data

      if (resData.success) {

        loadGroupContacts()

      }

    })

  }

  const tabsOptions = {

    group:

      <ul>

        {url_get_contact_group_list &&

          <li className="optionsTab__option" onClick={() => showOptions(OPTIONS.LIST_CONTACTS)}>

            <span className="optionsTab__option__icon">

              <i className="fa fa-group" />

              Integrantes

            </span>

          </li>

        }

        {url_add_user_to_group &&

          <li className="optionsTab__option" onClick={() => showOptions(OPTIONS.ADD_CONTACTS)}>

            <span className="optionsTab__option__icon">

              <i className="fa fa-user-plus"></i>

            </span>

            {CHAT_LABELS.ADD_CONTACTS}

          </li>

        }

        {url_zoom &&

          <li

            className="optionsTab__option"

            onClick={displayConferenceModal}

          >

            <span className="optionsTab__option__icon">

              <i className="fa fa-user-plus" />

            </span>

            {CHAT_LABELS.CREATE_CONFERENCE}

          </li>

        }

        {url_delete &&

          <li

            className="optionsTab__option"

            style={{ color: 'red' }}

            onClick={() => {

              handleConfirmModalShow()

              modalActionUrl.current = url_delete

            }}

          >

            <span className="optionsTab__option__icon">

              <i className="fa fa-trash"></i>

            </span>

            Eliminar grupo

          </li>

        }

        {!!url_leave &&

          <li

            className="optionsTab__option"

            style={{ color: 'red' }}

            onClick={() => {

              handleConfirmModalShow()

              modalActionUrl.current = url_leave

            }}

          >

            <span className="optionsTab__option__icon">

              <i className="fa fa-user-times"></i>

            </span>

            Dejar grupo

          </li>

        }

      </ul>,

    conference:

      <ul>

        <li className="optionsTab__option" onClick={displayConferenceModal}>

          <span className="optionsTab__option__icon">

            <i className="fa fa-user-plus" />

          </span>

          {CHAT_LABELS.CREATE_CONFERENCE}

        </li>

      </ul>,

    addContacts:

      <>

        {availableContactsToAdd.length

          ? <EmptySection message={CHAT_LABELS.NOT_CONTACTS} align='left' />

          : availableContactsToAdd.map(({ image, name, id }) =>

            <div className="addPersonToGroupTab__person" key={id}>

              <div className="d-inline-flex" style={{ gap: '5px' }}>

                <img

                  className="chat-image img-circle pull-left"

                  height="36"

                  width="36"

                  src={image}

                  alt="image-image"

                />

                <div className="name">{name}</div>

              </div>

              <span className='cursor-pointer' onClick={() => handleAddPersonToGroup(id)}>

                <i className="fa fa-plus-circle" />

              </span>

            </div>

          )}

      </>,

    listContacts:

      <>

        <div className='group__search'>

          <SearchIcon />

          <input

            type='text'

            placeholder={CHAT_LABELS.SEARCH}

            onChange={(e) => setSearch(e.target.value)}

          />

        </div>

        {filtredGroupList.length

          ? filtredGroupList.map(({ image, name, url_remove_from_group, id }) => {

            return (

              <div className="addPersonToGroupTab__person" key={id}>

                <div style={{ display: 'flex', alignItems: 'center' }}>

                  <img

                    className="chat-image img-circle pull-left"

                    height="36"

                    width="36"

                    src={image}

                    alt="image-image"

                  />

                  <div className="name">{name}</div>

                </div>

                {url_remove_from_group &&

                  <span className="cursor-pointer" onClick={() => handleDeletePersonFromGroup(url_remove_from_group)}>

                    <i className="fa fa-user-times" />

                  </span>

                }

              </div>

            )

          })

          : <div className="addPersonToGroupTab__person">{CHAT_LABELS.NOT_CONTACTS}</div>

        }

      </>

  }

  // useEffect(() => {

  //   setMessages([...oldMessages, ...newMessages]);

  // }, [newMessages, oldMessages]);

  // getMessageOnMaximize and subscribe to infinite Loader

  useEffect(async () => {

    const options = {

      root: null,

      rootMargin: '20px',

      treshold: 1.0

    }

    const observer = new IntersectionObserver(handleObserver, options)

    if (!minimized) {

      await handleGetMessages()

      // loader observer

      if (loader.current) {

        observer.observe(loader.current)

      }

    }

    return () => {

      if (loader.current) {

        observer.unobserve(loader.current)

      }

    }

  }, [minimized])

  // LoadMore on change page

  useEffect(() => {

    let loadMore = () => handleLoadMore()

    loadMore()

    return () => {

      loadMore = null

    }

  }, [currentPage])

  // getMessagesInterval

  useEffect(() => {

    if (window.location.pathname === '/group/my-groups') {

      const items = document.getElementsByClassName('sc-jSgupP')

      if (items && items.length > 0) { items[0].style.display = 'none' }

    }

  }, [minimized])

  useEffect(() => {

    let timer

    if (!minimized && !loading) {

      timer = setTimeout(() => handleGetMessages(), 1000)

    }

    return () => {

      clearTimeout(timer)

    }

  }, [minimized, loading])

  // useEffect for tabs changing

  useEffect(() => {

    if (optionTab === 'addContacts') loadPersonsAvailable()

    if (optionTab === 'listContacts') loadGroupContacts()

  }, [optionTab])

  return (

    <>

      <div className="personal-chat">

        <div className={`chat-header ${not_seen_messages ? 'notify' : ''}`}>

          <img src={image} alt="avatar-image" />

          <div className="info-content">

            <a href={profile} target="_blank" rel="noreferrer">{name}</a>

            {type === 'user' && <small className={online ? 'online' : 'offline'} >{online ? 'En línea' : 'Desconectado'}</small>}

          </div>

          <div className="options">

            <i className="cursor-pointer fa fa-gear"

              onClick={() => showOptions(type === 'user' ? OPTIONS.CONFERENCE : OPTIONS.GROUP)} />

            <i className={'cursor-pointer fa fa-minus-circle'} onClick={handleActive} />

            <i className="cursor-pointer fa fa-times-circle" onClick={handleCloseChat} />

          </div>

        </div>

        <div className="panel-body" style={{ display: !minimized ? 'block' : 'none' }}>

        {optionTab

          ? <StyledShowOptions>

            <span className="optionBack" onClick={() => showOptions()}>

              <i className="fa icon-arrow-left" />

            </span>

            <div className="optionsTab">

              {tabsOptions[optionTab]}

            </div>

          </StyledShowOptions>

          : <div className="chat-conversation">

            <div className="reverseChatBox" ref={conversationListEl}>

              <ul className="conversation-list chatboxcontent">

                {messagesRender()}

              </ul>

            </div>

            <div className="wchat-footer wchat-chat-footer">

              <div id="chatFrom" className="chatFrom">

                <div className="block-wchat">

                  <button

                    className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"

                    id="uploadFile"

                    onClick={handleShareFileModalShow}

                  ></button>

                  <button

                    className="icon ti-face-smile font-24 btn-emoji"

                    id="toggle-emoji"

                    onClick={handleShowEmojiTab}

                  ></button>

                  <div className="input-container">

                    <div className="input-emoji">

                      <div

                        className="input-placeholder"

                        style={{ visibility: 'hidden', display: 'none' }}

                      >

                        {CHAT_LABELS.WRITE_A_MESSAGE}

                      </div>

                      <textarea

                        className="input chatboxtextarea"

                        id="chatboxtextarea"

                        name="chattxt"

                        style={{ resize: 'none', height: '20px' }}

                        placeholder={CHAT_LABELS.WRITE_A_MESSAGE}

                        onKeyDown={handleChatBoxKeyDown}

                        ref={textAreaEl}

                        onFocus={() => not_seen_messages && onRead(entity)}

                      />

                    </div>

                  </div>

                </div>

                <div className="wchat-box-items-overlay-container">

                  <div className="target-emoji" style={{ display: showEmojiTab ? 'block' : 'none' }} id={`smileyPanel_${id}`}>

                    <Emojione onClickEmoji={handleClickEmoji} />

                  </div>

                </div>

              </div>

            </div>

          </div>

        }

        </div>

      </div>

      <ConfirmModal

        show={confirmModalShow}

        onClose={handleConfirmModalShow}

        onAccept={handleConfirmModalAccept}

      />

      <ConferenceModal

        show={showConferenceModal}

        timezones={timezones}

        zoomUrl={url_zoom}

        onCreate={() => {

          showOptions()

          displayConferenceModal()

        }}

      />

      <SendFileModal

        show={shareFileModalShow}

        onHide={() => setShareFileModalShow(false)}

        urlUpload={url_upload}

      />

    </>

  )

}

const StyleModal = ({

  title = 'Crea una conferencia',

  size = 'md',

  show = false,

  children

}) => {

  const [isShow, setIsShow] = useState(show)

  useEffect(() => {

    setIsShow(show)

  }, [show])

  const closeModal = () => setIsShow(false)

  return (

    <Modal

      show={isShow}

      onHide={closeModal}

      style={{ overflowY: 'scroll' }}

    >

      <Modal.Header closeButton>

        <Modal.Title>{title}</Modal.Title>

      </Modal.Header>

      <Modal.Body>

        {children}

      </Modal.Body>

    </Modal>

  )

}

export const ConferenceModal = ({

  show = false,

  timezones = {},

  zoomUrl = '',

  onCreate = () => null

}) => {

  const dt = new Date()

  const { handleSubmit, register, errors, reset } = useForm({ mode: 'all' })

  const [date, setDate] = useState({

    year: dt.toLocaleString('default', { year: 'numeric' }),

    month: dt.toLocaleString('default', { month: '2-digit' }),

    day: dt.toLocaleString('default', { day: '2-digit' })

  })

  const [time, setTime] = useState(dt.toLocaleString('es', { hour: 'numeric', minute: '2-digit', second: '2-digit' }))

  const [coferenceType, setConferenceType] = useState(1)

  const dispatch = useDispatch()

  const handleChange = (value) => setConferenceType(value)

  const handleDateTime = (value) => {

    setDate({

      ...date,

      year: new Intl.DateTimeFormat('es', { year: 'numeric' }).format(value),

      month: new Intl.DateTimeFormat('es', { month: '2-digit' }).format(value),

      day: new Intl.DateTimeFormat('es', { day: '2-digit' }).format(value)

    })

    setTime(new Intl.DateTimeFormat('es', { hour: 'numeric', minute: '2-digit', second: 'numeric' }).format(value))

  }

  const onSubmit = async (data) => {

    try {

      const formData = new FormData()

      Object.entries(data).forEach(([key, value]) => formData.append(key, value))

      formData.append('date', `${date.year}-${date.month}-${date.day}`)

      formData.append('time', time)

      const { data: response } = await axios.post(zoomUrl, formData)

      if (!response.success && typeof response.data === 'string') {

        dispatch(addNotification({ msg: response.data, style: 'danger' }))

        return

      }

      if (!response.success && typeof response.data === 'object') {

        Object.entries(response.data)

          .forEach(([key, value]) => {

            dispatch(addNotification({ msg: `${key}: ${value[0]}`, style: 'danger' }))

          })

        return

      }

      dispatch(addNotification({ msg: response.data, style: 'success' }))

      onCreate()

      reset()

    } catch (error) {

      console.log(`Error: ${error.message}`)

      return dispatch(addNotification({ msg: 'Ha ocurrido un error', style: 'danger' }))

    }

  }

  return (

    <StyleModal title='Crea una conferencia' show={show}>

      <form onSubmit={handleSubmit(onSubmit)} autoComplete="new-password">

        <div className="form-group">

          <label htmlFor="first_name">Título</label>

          <input

            type="text"

            name="title"

            className="form-control"

            maxLength={128}

            ref={register({ required: 'Por favor ingrese un título' })}

          />

          {errors.title && <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>}

        </div>

        <div className="form-group">

          <label htmlFor="first_name">Descripción</label>

          <input

            type="text"

            name="description"

            className="form-control"

            ref={register({ required: 'Por favor ingrese una descripción' })}

          />

          {errors.description && <FormErrorFeedback>{errors.description.message}</FormErrorFeedback>}

        </div>

        <div className="form-group">

          <label htmlFor="timezone">Tipo de conferencia</label>

          <select

            name="type"

            className="form-control"

            onChange={({ target }) => handleChange(target.value)}

            ref={register}

          >

            <option value='i'>

              Inmediata

            </option>

            <option value='s'>

              Programada

            </option>

          </select>

        </div>

        {

          coferenceType === 's' &&

          <div className="form-group">

            <label htmlFor="timezone">Horario</label>

            <Datetime

              dateFormat="DD-MM-YYYY"

              onChange={(e) => {

                if (e.toDate) {

                  handleDateTime(e.toDate())

                }

              }}

              inputProps={{ className: 'form-control' }}

              initialValue={Date.parse(new Date())}

              closeOnSelect

            />

          </div>

        }

        <div className="form-group">

          <label htmlFor="timezone">Zona horaria</label>

          <select

            className="form-control"

            name="timezone"

            ref={register({ required: 'Por favor elige una Zona horaria' })}

          >

            <option value="" hidden>

              Zona horaria

            </option>

            {Object.entries(timezones).map(([key, value]) => (

              <option value={key} key={key}>

                {value}

              </option>

            ))}

          </select>

          {errors.timezone && <FormErrorFeedback>{errors.timezone.message}</FormErrorFeedback>}

        </div>

        <div className="form-group">

          <label htmlFor="timezone">Duración</label>

          <select

            className="form-control"

            name="duration"

            ref={register}

          >

            <option value={5}>5-min</option>

            <option value={10}>10-min</option>

            <option value={15}>15-min</option>

            <option value={20}>20-min</option>

            <option value={25}>25-min</option>

            <option value={30}>30-min</option>

            <option value={35}>35-min</option>

            <option value={40}>40-min</option>

            <option value={45}>45-min</option>

          </select>

        </div>

        <div className="form-group">

          <label htmlFor="first_name">Contraseña de ingreso</label>

          <input

            type="password"

            name="password"

            className="form-control"

            ref={register({

              required: 'Por favor ingrese una contraseña',

              maxLength: { value: 6, message: 'La contraseña debe tener al menos 6 digitos' }

            })}

          />

          {errors.password && <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>}

        </div>

        <button className="btn btn-primary" type="submit">

          Crear

        </button>

      </form>

    </StyleModal>

  )

}

export default React.memo(PersonalChat)