Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useRef, useState } from 'react'
import { axios, scrollToBottom } from '../../../utils'
import { addNotification } from '../../../redux/notification/notification.actions'
import { useDispatch } from 'react-redux'
import SendIcon from '@mui/icons-material/Send'
import IconButton from '@mui/material/IconButton'
import MoreVertIcon from '@mui/icons-material/MoreVert'
import AttachFileIcon from '@mui/icons-material/AttachFile'
import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon'
import ArrowBackIcon from '@mui/icons-material/ArrowBack'

// Components
import Message from '../../../components/chat/Message'
import Emojione from '../emojione/Emojione'
import { ConferenceModal } from '../../../chat/chat/personal-chat/PersonalChat'
import SendFileModal from '../../../chat/chat/personal-chat/send-file-modal/SendFileModal'

const CHAT_TABS = {
  CHAT: 'CHAT',
  DEFAULT: 'DEFAULT',
  GROUP_MEMBERS: 'GROUP_MEMBERS',
  ADD_GROUP_MEMBER: 'ADD_GROUP_MEMBER',
}

const Chat = ({ entity, timezones, changeTab }) => {
  const {
    url_get_all_messages,
    url_mark_received,
    not_received_messages,
    not_seen_messages,
    url_zoom,
    url_send,
    url_upload,
    url_mark_seen,
    url_close,
    url_add_user_to_group, // Group url
    url_delete, // Group url
    url_get_contact_group_list, // Group url
    url_leave, // Group url
    name,
    profile,
    type,
  } = entity

  const [oldMessages, setOldMessages] = useState([])
  const [newMessages, setNewMessages] = useState([])
  const [currentPage, setCurrentPage] = useState(1)
  const [pages, setPages] = useState(1)

  const [showEmojione, setShowEmojione] = useState(false)
  const [isShowFileModal, setIsShowFileModal] = useState(false)
  const [isShowConferenceModal, setisShowConferenceModal] = useState(false)

  const [loading, setLoading] = useState(false)
  const [isSending, setIsSending] = useState(false)
  const [isGetting, setIsGetting] = useState(false)

  const dispatch = useDispatch()

  const scrollRef = useRef(null)
  const inputTextEl = useRef(null)

  // Messages getters
  const getMessages = async () => {
    setLoading(true)
    axios
      .get(url_get_all_messages)
      .then(({ data: response }) => {
        const { data, success } = response

        if (!success) {
          return
        }

        const messageResponse = [...data.items].reverse()
        const updatedMessages = messageResponse.reduce(
          (acum, updatedMessage) => {
            if (
              newMessages.findIndex(
                (message) => message.id === updatedMessage.id
              ) === -1
            ) {
              acum = [...acum, updatedMessage]
            }
            return acum
          },
          []
        )

        if (updatedMessages.length > 0) {
          setNewMessages((prevMessages) => [
            ...prevMessages,
            ...updatedMessages,
          ])
          setPages(data.pages)
          scrollRef.current.scrollBy(0, 200)
        }
      })
      .finally(() => setLoading(false))
  }

  const loadOldMessages = () => {
    setIsGetting(true)
    axios
      .get(`${url_get_all_messages}?page=${currentPage}`)
      .then(({ data: response }) => {
        const { data, success } = response
        if (success && data.page > 1) {
          setOldMessages([...data.items.slice().reverse(), ...oldMessages])
          scrollRef.current.scrollBy(0, 200)
        }
      })
      .finally(() => setIsGetting(false))
  }

  // Sender functions
  const onHandleSubmit = (e) => {
    e.preventDefault()
    const formData = new FormData()
    // eslint-disable-next-line no-undef
    formData.append('message', emojione.toShort(inputTextEl.current.value))
    inputTextEl.current.value = ''

    axios.post(url_send, formData).then(({ data }) => {
      if (!data.success) {
        setShowEmojione(false)
        dispatch(
          addNotification({
            style: 'danger',
            msg:
              typeof data.data === 'string'
                ? data.data
                : 'Ha ocurrido un error',
          })
        )
        return
      }
      setShowEmojione(false)
      scrollToBottom(scrollRef)
    })
  }

  const sendFile = (file) => {
    setIsSending(true)
    const formData = new FormData()
    formData.append('file', file)

    axios
      .post(url_upload, 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()
        scrollToBottom(scrollRef)
      })
      .finally(() => setIsSending(false))
  }

  const handleKeyDown = (e) => {
    if (e.key !== 'Enter') return false
  }

  // Modals handlers
  const toggleFileModal = () => {
    setIsShowFileModal(!isShowFileModal)
  }

  const toggleEmojione = () => {
    setShowEmojione(!showEmojione)
  }

  const toggleConferenceModal = () => {
    setisShowConferenceModal(!isShowConferenceModal)
  }

  // On select emoji
  const onClickEmoji = (event) => {
    const shortname = event.currentTarget.dataset.shortname
    const currentText = inputTextEl.current.value
    const cursorPosition = inputTextEl.current.selectionStart
    const textBehind = currentText.substring(0, cursorPosition)
    const textForward = currentText.substring(cursorPosition)
    // eslint-disable-next-line no-undef
    const unicode = emojione.shortnameToUnicode(shortname)
    inputTextEl.current.value = `${textBehind}${unicode}${textForward}`
    inputTextEl.current.focus()
    inputTextEl.current.setSelectionRange(
      cursorPosition + shortname.length,
      cursorPosition + shortname.length
    )
  }

  // On interception handler
  const onIntersection = (entities) => {
    const target = entities[0]
    if (target.isIntersecting && currentPage < pages) {
      setIsGetting(true)
      setCurrentPage((prevState) => prevState + 1)
    }
  }

  const deleteGroup = async (url) => {
    setLoading(true)
    axios
      .post(url)
      .then(({ data: response }) => {
        const { data, success } = response
        if (!success) {
          const errorMessage =
            typeof data.data === 'string' ? data.data : 'Ha ocurrido un error'
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
          return
        }

        changeTab(CHAT_TABS.DEFAULT)
      })
      .finally(() => setLoading(false))
  }

  const options = [
    {
      url: url_zoom,
      label: 'Crear Conferencia',
      action: toggleConferenceModal,
    },
  ]

  const groupOptions = [
    {
      url: url_zoom,
      label: 'Crear Conferencia',
      action: toggleConferenceModal,
    },
    {
      url: url_get_contact_group_list,
      label: 'Integrantes',
      action: () => changeTab(CHAT_TABS.GROUP_MEMBERS),
    },
    {
      url: url_add_user_to_group,
      label: 'Agregar Contactos',
      action: () => changeTab(CHAT_TABS.ADD_GROUP_MEMBER),
    },
    {
      url: url_delete,
      label: 'Eliminar Grupo',
      action: () => deleteGroup(url_delete),
    },
    {
      url: url_leave,
      label: 'Dejar Grupo',
      action: () => deleteGroup(url_leave),
    },
  ]

  useEffect(() => {
    let getInterval = null
    if (loading) return
    getInterval = setTimeout(() => getMessages(), 2000)

    return () => {
      clearTimeout(getInterval)
    }
  }, [loading])

  useEffect(() => {
    loadOldMessages()
  }, [currentPage])

  useEffect(() => {
    if (not_seen_messages) axios.post(url_mark_seen)
    if (not_received_messages) axios.post(url_mark_received)

    return () => {
      axios.post(url_close)
    }
  }, [])

  useEffect(() => {
    setNewMessages([])
    setOldMessages([])
    setPages(1)
    setCurrentPage(1)
  }, [entity])

  return (
    <>
      <div className="chat">
        <Chat.Header
          name={name}
          profile={profile}
          options={type === 'group' ? groupOptions : options}
          changeTab={() => changeTab(CHAT_TABS.DEFAULT)}
        />
        {![...newMessages, ...oldMessages].length ? (
          <div className="message-select-conversation">
            <div className="msgs-select-container">
              <i className="fas fa-inbox icon" />
              <h3>No hay mensajes en esta conversación</h3>
            </div>
          </div>
        ) : (
          <Chat.List
            isLastPage={currentPage >= pages}
            messages={[...oldMessages, ...newMessages]}
            onIntersection={onIntersection}
            scrollRef={scrollRef}
            isLoading={isGetting}
          />
        )}
        <div className="chat__input-container">
          <form onSubmit={onHandleSubmit}>
            {showEmojione && <Emojione onClickEmoji={onClickEmoji} />}
            <button
              type="button"
              className="icon_btn"
              onClick={toggleFileModal}
            >
              <AttachFileIcon />
            </button>
            <button type="button" className="icon_btn" onClick={toggleEmojione}>
              <InsertEmoticonIcon />
            </button>
            <input
              type="text"
              className="chatInput"
              placeholder="Escribe un mensaje"
              onKeyDown={handleKeyDown}
              ref={inputTextEl}
            />
            <button type="submit" className="send_btn">
              <SendIcon />
            </button>
          </form>
        </div>
        <SendFileModal
          isShow={isShowFileModal}
          onHide={toggleFileModal}
          onComplete={sendFile}
          loading={isSending}
        />
        <ConferenceModal
          show={isShowConferenceModal}
          zoomUrl={url_zoom}
          timezones={timezones}
          onCreate={toggleConferenceModal}
        />
      </div>
    </>
  )
}
const Header = ({ name, profile, options, changeTab }) => {
  return (
    <>
      <div className="chat_header">
        <IconButton onClick={changeTab}>
          <ArrowBackIcon />
        </IconButton>
        <a href={profile}>
          <h2>{name}</h2>
        </a>
        <Header.Options options={options} />
      </div>
    </>
  )
}

const List = ({
  messages,
  onIntersection,
  isLastPage,
  scrollRef,
  isLoading,
}) => {
  const loadMoreEl = useRef()

  useEffect(() => {
    const observer = new IntersectionObserver(onIntersection)

    if (loadMoreEl.current) {
      observer.observe(loadMoreEl.current)
    }

    return () => {
      observer.disconnect()
    }
  }, [messages])

  return (
    <div className="messages_container" ref={scrollRef}>
      <div className="message_wrapper">
        {!isLastPage && !isLoading && <p ref={loadMoreEl}>Cargando...</p>}
        {messages.map((message) => (
          <Message message={message} key={message.id} />
        ))}
      </div>
    </div>
  )
}

const Options = ({ options }) => {
  const [isShowMenu, setIsShowMenu] = useState(false)

  const toggleOptions = () => {
    setIsShowMenu(!isShowMenu)
  }

  return (
    <div className="header-options">
      <IconButton onClick={toggleOptions}>
        <MoreVertIcon />
      </IconButton>
      <div className="position-relative">
        <div className={`feed-options ${isShowMenu ? 'active' : ''}`}>
          <ul>
            {options.map((option, index) => {
              if (!option.url) {
                return null
              }

              return (
                <li key={index}>
                  <button
                    className="btn option-btn"
                    onClick={() => {
                      option.action()
                      toggleOptions()
                    }}
                  >
                    {option.label}
                  </button>
                </li>
              )
            })}
          </ul>
        </div>
      </div>
    </div>
  )
}

Chat.Header = Header
Chat.List = List
Header.Options = Options

export default Chat