Proyectos de Subversion LeadersLinked - Antes de SPA

import { useEffect, useState } from 'react'
import { axios } from '../utils'

const useMessages = (messagesUrl) => {
  const [oldMessages, setOldMessages] = useState([])
  const [messages, setMessages] = useState([])
  const [currentPage, setCurrentPage] = useState(1)
  const [pages, setPages] = useState(1)
  const [loading, setLoading] = useState(false)
  const [loadingOld, setLoadingOld] = useState(false)

  const getMessages = async () => {
    setLoading(true)
    axios
      .get(messagesUrl)
      .then(({ data: response }) => {
        const { data, success, pagination } = response

        if (!success) {
          return
        }

        const resMessages = data.items ? [...data.items] : [...data]
        const lastPage = pagination ? pagination.last : data.pages

        const newMessages = resMessages.reduce((acum, newMessage) => {
          const messageIndex = newMessage.id
            ? messages.findIndex(({ id }) => id === newMessage.id)
            : messages.findIndex(({ uuid }) => uuid === newMessage.uuid)

          if (messageIndex === -1) {
            acum = [...acum, newMessage]
          }

          return acum
        }, [])

        console.log(newMessages)

        if (!newMessages.length) {
          return
        }

        setMessages((prevMessages) => [...newMessages, ...prevMessages])
        setPages(lastPage)
      })
      .finally(() => setLoading(false))
  }

  const loadOldMessages = () => {
    setLoadingOld(true)
    axios
      .get(`${messagesUrl}?page=${currentPage}`)
      .then(({ data: response }) => {
        const { data, success, pagination } = response

        const page = pagination ? pagination.current : data.page
        const resMessages = data.items
          ? [...data.items.slice()]
          : [...data.slice()]

        if (success && page > 1) {
          setOldMessages([...oldMessages, ...resMessages])
        }
      })
      .finally(() => setTimeout(() => setLoadingOld(false), 1000))
  }

  const onIntersection = (entities) => {
    const target = entities[0]

    if (
      !target.isIntersecting ||
      currentPage >= pages ||
      loadingOld ||
      !pages
    ) {
      return
    }

    setCurrentPage((prevState) => prevState + 1)
    loadOldMessages()
  }

  const reset = () => {
    setMessages([])
    setOldMessages([])
    setCurrentPage(1)
    setPages(1)
  }

  useEffect(() => {
    if (loading || !messagesUrl) return

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

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

  return {
    messages: [...messages, ...oldMessages],
    loading: loadingOld,
    loadMore: onIntersection,
    reset,
  }
}

export default useMessages