Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useRef, useState } from 'react'
import { axios, scrollToBottom } from '../../utils'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import IconButton from '@mui/material/IconButton'
import MoreVertIcon from '@mui/icons-material/MoreVert'
import ArrowBackIcon from '@mui/icons-material/ArrowBack'
import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded'

import MessageBox from './MessageBox'
import MessageTemplate from './MessageTemplate'
import EmptySection from '../../shared/empty-section/EmptySection'
import ConfirmModal from '../../shared/confirm-modal/ConfirmModal'
import LoaderContainer from '../../app/components/UI/LoaderContainer'
import Spinner from '../../shared/loading-spinner/Spinner'
import { getMessagesDifferences } from '../../services/chat'

const DEFAULT_PAGES = { current: 1, last: 1 }

const Chatmail = ({
  messagesUrl = '',
  selectedConversation = null,
  setConversation = () => null,
}) => {
  const [oldMessages, setOldMessages] = useState([])
  const [messages, setMessages] = useState([])
  const [pages, setPages] = useState(DEFAULT_PAGES)
  const [loading, setLoading] = useState(false)
  const [isGetting, setIsGetting] = useState(false)
  const [isShowConfirm, setIsShowConfirm] = useState(false)
  const messagesList = useRef(null)
  const dispatch = useDispatch()

  const getMessages = () => {
    try {
      const controller = new AbortController()
      const query = (url = '', page = pages.current) =>
        axios
          .get(`${url}?page=${page}`, {
            signal: controller.signal,
          })
          .then((response) => response.data)

      return { query, controller }
    } catch (error) {
      dispatch(addNotification({ style: 'danger', message: 'Error: ' + error }))
      throw new Error(error)
    }
  }

  const getMoreMessages = () => {
    setLoading(true)

    const { query } = getMessages()
    query(messagesUrl, pages.current)
      .then(({ success, data, pagination }) => {
        if (!success) {
          const errorMessage = data ?? 'Ha ocurrido un error'
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
          return
        }

        if (pagination.current > 1) {
          setOldMessages((prevOldMessages) => [
            ...data.reverse(),
            ...prevOldMessages,
          ])
        }

        setPages((prevPages) => ({
          ...prevPages,
          last: pagination.last,
        }))
      })
      .catch((error) => {
        const errorMessage = 'Error: ' + error
        dispatch(addNotification({ style: 'danger', message: errorMessage }))
        throw new Error(error)
      })
      .finally(() => setLoading(false))
  }

  const hearbeat = () => {
    setIsGetting(true)
    const { query } = getMessages()

    query(messagesUrl, 1)
      .then(({ success, data, pagination }) => {
        if (!success) {
          const errorMessage = data ?? 'Ha ocurrido un error'
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
          return
        }

        const newMessages = getMessagesDifferences(messages, data)

        console.log(newMessages)
        if (newMessages.length) {
          setMessages((prevMessages) => [
            ...prevMessages,
            ...newMessages.reverse(),
          ])
        }

        setPages((prevPages) => ({
          ...prevPages,
          last: pagination.last,
        }))
      })
      .catch((err) => {
        const errorMessage = 'Error: ' + err
        dispatch(addNotification({ style: 'danger', message: errorMessage }))
        throw new Error(err)
      })
      .finally(() => setIsGetting(false))
  }

  const loadMore = () => {
    setLoading(true)
    setPages((prevPages) => ({ ...prevPages, current: prevPages.current + 1 }))
  }

  const toggleConfirmModal = () => {
    setIsShowConfirm(!isShowConfirm)
  }

  const sendMessage = async (sendUrl = '', message = {}) => {
    try {
      const formData = new FormData()

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

      await axios.post(sendUrl, formData)

      scrollToBottom(messagesList)
    } catch (error) {
      const errorMessage = new Error(error)
      dispatch(addNotification({ style: 'danger', msg: errorMessage.message }))
    }
  }

  const deleteConversation = () => {
    axios.post(selectedConversation.delete_link).then(({ data: response }) => {
      const { success, data } = response

      if (!success) {
        dispatch(addNotification({ style: 'danger', msg: data }))
        return
      }

      dispatch(addNotification({ style: 'success', msg: data }))
      toggleConfirmModal()
      setConversation(null)
    })
  }

  useEffect(() => {
    getMoreMessages()
  }, [pages.current])

  useEffect(() => {
    setMessages([])
    setOldMessages([])
    setPages(DEFAULT_PAGES)
  }, [selectedConversation])

  useEffect(() => {
    if (isGetting) return

    const messagesInterval = setTimeout(() => {
      hearbeat()
    }, 2000)

    return () => {
      clearTimeout(messagesInterval)
    }
  }, [isGetting])

  return (
    <>
      <div className="chat">
        <Chatmail.Header
          name={selectedConversation.name}
          profile={selectedConversation.profile}
          options={[
            {
              url: selectedConversation.delete_link,
              label: 'Borrar convesación',
              action: toggleConfirmModal,
            },
          ]}
          changeTab={() => setConversation(null)}
        />
        {![...messages, ...oldMessages].length ? (
          <EmptySection
            message="No hay mensajes en esta conversación"
            Icon={<QuestionAnswerRoundedIcon />}
          />
        ) : (
          <Chatmail.List
            isLastPage={pages.current >= pages.last}
            messages={[...oldMessages, ...messages]}
            onIntersection={loadMore}
            scrollRef={messagesList}
            isLoading={loading}
          />
        )}
        <MessageBox
          onSend={sendMessage}
          sendUrl={selectedConversation.send_link}
        />
      </div>
      <ConfirmModal
        show={isShowConfirm}
        onClose={toggleConfirmModal}
        onAccept={deleteConversation}
        acceptLabel="Aceptar"
      />
    </>
  )
}

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(null)

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && !isLoading) {
        onIntersection()
      }
    })

    if (loadMoreEl.current === null) {
      return
    }

    observer.observe(loadMoreEl.current)

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

  return (
    <div className="messages_container" ref={scrollRef}>
      <div className="message_wrapper">
        {!isLastPage && <p ref={loadMoreEl}>Cargando...</p>}
        {isLoading && (
          <LoaderContainer>
            <Spinner />
          </LoaderContainer>
        )}
        {messages.map((message, index) => (
          <MessageTemplate message={message} key={JSON.stringify(message)} />
        ))}
      </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>
  )
}

Chatmail.Header = Header
Chatmail.List = List
Header.Options = Options

export default Chatmail