FunctionProject/website/components/FunctionPage/FunctionComments/FunctionComments.jsx

import { useState, useEffect, useContext, useRef, useCallback } from 'react'
import Link from 'next/link'
import { UserContext } from '../../../contexts/UserContext'
import CommentCard from '../CommentCard/CommentCard'
import Loader from '../../Loader'
import api from '../../../utils/api'
import './FunctionComments.css'

const FunctionComments = ({ functionId }) => {
  // State pour poster un commentaire
  const { isAuth, user } = useContext(UserContext)
  const [inputState, setInputState] = useState({})

  // State pour afficher les commentaires
  const [commentsData, setCommentsData] = useState({ hasMore: true, rows: [] })
  const [isLoadingComments, setLoadingComments] = useState(true)
  const [pageComments, setPageComments] = useState(1)

  // Récupère les commentaires si la page change
  useEffect(() => {
    getCommentsData().then(data =>
      setCommentsData({
        hasMore: data.hasMore,
        rows: [...commentsData.rows, ...data.rows]
      })
    )
  }, [pageComments])

  // Permet la pagination au scroll
  const observer = useRef()
  const lastCommentCardRef = useCallback(
    node => {
      if (isLoadingComments) return
      if (observer.current) observer.current.disconnect()
      observer.current = new window.IntersectionObserver(
        entries => {
          if (entries[0].isIntersecting && commentsData.hasMore) {
            setPageComments(pageComments + 1)
          }
        },
        { threshold: 1 }
      )
      if (node) observer.current.observe(node)
    },
    [isLoadingComments, commentsData.hasMore]
  )

  const getCommentsData = async () => {
    setLoadingComments(true)
    const { data } = await api.get(
      `/comments/${functionId}/?page=${pageComments}&limit=10`
    )
    setLoadingComments(false)
    return data
  }

  const handleChange = event => {
    const inputStateNew = { ...inputState }
    inputStateNew[event.target.name] = event.target.value
    setInputState(inputStateNew)
  }

  const handleSubmit = async event => {
    setLoadingComments(true)
    event.preventDefault()
    const token = user.token
    if (isAuth && token != null && inputState.commentPost != null) {
      try {
        const response = await api.post(
          `/comments/${functionId}`,
          { message: inputState.commentPost },
          { headers: { Authorization: token } }
        )
        const comment = {
          ...response.data,
          user: { name: user.name, logo: user.logo }
        }
        setCommentsData({
          hasMore: commentsData.hasMore,
          rows: [comment, ...commentsData.rows]
        })
        setInputState({ commentPost: '' })
      } catch {}
    }
    setLoadingComments(false)
  }

  return (
    <>
      <div className='FunctionComments__post container-fluid'>
        <div className='row FunctionComments__row'>
          <div className='col-24'>
            {isAuth ? (
              <form onSubmit={handleSubmit}>
                <div className='form-group FunctionComments__post-group'>
                  <label className='form-label' htmlFor='commentPost'>
                    Ajouter un commentaire :
                  </label>
                  <textarea
                    className='FunctionComments__textarea form-control'
                    value={inputState.commentPost}
                    onChange={handleChange}
                    name='commentPost'
                    id='commentPost'
                    placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)"
                  />
                </div>
                <div className='form-group' style={{ marginTop: '0.7em' }}>
                  <button type='submit' className='btn btn-dark'>
                    Envoyer
                  </button>
                </div>
              </form>
            ) : (
              <p className='text-center'>
                Vous devez être{' '}
                <Link href='/users/login'>
                  <a>connecté</a>
                </Link>{' '}
                pour poster un commentaire.
              </p>
            )}
          </div>
        </div>
      </div>
      <div className='container-fluid'>
        {isLoadingComments && (
          <div className='row justify-content-center'>
            <Loader />
          </div>
        )}
        <div className='row justify-content-center'>
          {commentsData.rows.map((comment, index) => {
            // Si c'est le dernier élément
            if (commentsData.rows.length === index + 1) {
              return (
                <CommentCard
                  key={comment.id}
                  ref={lastCommentCardRef}
                  {...comment}
                  manageComment={{
                    setCommentsData,
                    commentsData,
                    setLoadingComments
                  }}
                />
              )
            }
            return (
              <CommentCard
                key={comment.id}
                {...comment}
                manageComment={{
                  setCommentsData,
                  commentsData,
                  setLoadingComments
                }}
              />
            )
          })}
        </div>
      </div>
    </>
  )
}

export default FunctionComments