konstitisyon.nu/components/konstitisyon/list-comments.js

/* eslint-disable camelcase */
import React, {useEffect, useState, useRef} from 'react'
import PropTypes from 'prop-types'
import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'
import ListItemText from '@mui/material/ListItemText'
import DialogTitle from '@mui/material/DialogTitle'
import Dialog from '@mui/material/Dialog'
import Typography from '@mui/material/Typography'
import Pagination from '@mui/material/Pagination'
import Divider from '@mui/material/Divider'
import Box from '@mui/material/Box'
import CircularProgress from '@mui/material/CircularProgress'
import {readItems, withToken} from '@directus/sdk'
import SessionExpired from '../session/session-expired.js'
import {directusClient, handleUserStatus} from '@/lib/directus.js'
import {formatDate} from '@/lib/format.js'

const commentsPerPage = process.env.NEXT_PUBLIC_COMMENTS_PER_PAGE || 2

export default function ListComments({session, selectedTitre, isOpen, setIsOpen, setError, setIsErrorAlertOpen}) {
  const countdownRef = useRef()
  const [comments, setComments] = useState([])
  const [isLoading, setIsLoading] = useState(false)
  const [page, setPage] = useState(1)

  const pageCount = Math.ceil(comments.length / commentsPerPage)

  const startIndex = (page - 1) * commentsPerPage
  const selectedComments = comments.slice(startIndex, startIndex + commentsPerPage)

  useEffect(() => {
    setComments([])
    setPage(1)
  }, [selectedTitre?.id])

  useEffect(() => {
    async function fetchComments() {
      setIsLoading(true)

      try {
        await handleUserStatus(session.user.accessToken, session.user.userId)

        const result = await directusClient.request(withToken(
          session.user.accessToken,
          readItems('commentaires', {
            filter: {
              titre: selectedTitre.id,
              status: {
                _eq: 'published'
              }
            },
            sort: '-date_created'
          }))
        )

        setComments(result)
      } catch (error) {
        if (error?.errors[0]?.message === 'Token expired.') {
          countdownRef.current.startCountdown()
        } else {
          console.log(error?.errors[0]?.message)
          setError(error?.errors[0]?.message)
          setIsErrorAlertOpen(true)
        }
      } finally {
        setIsLoading(false)
      }
    }

    if (isOpen) {
      fetchComments()
    }
  }, [isOpen, selectedTitre, setError, setIsErrorAlertOpen, session])

  const handleClose = () => {
    setIsOpen(false)
  }

  const handleChange = (event, value) => {
    setPage(value)
  }

  return (
    <>
      <Dialog open={isOpen} onClose={handleClose}>
        <DialogTitle>Commentaires</DialogTitle>
        {isLoading ? (
          <Box sx={{display: 'flex', justifyContent: 'center', p: 4}}>
            <CircularProgress />
          </Box>
        ) : (
          <>
            <List sx={{width: '100%', maxWidth: 360, bgcolor: 'background.paper'}}>
              {selectedComments && selectedComments.length > 0 ? selectedComments.map(({id, date_created, contenu, user_created}) => (
                <React.Fragment key={id}>
                  <ListItem alignItems='flex-start'>
                    <ListItemText
                      primary={
                        <Typography sx={{textDecoration: 'underline'}} component='span' variant='body2'>
                          @{user_created.split('-')[0]}
                        </Typography>
                      }
                      secondary={
                        <>
                          <Typography
                            sx={{display: 'inline'}}
                            component='span'
                            variant='body2'
                            color='text.primary'
                          >
                            {contenu}
                          </Typography>
                          <br />
                          {formatDate(date_created, 'PPPPpp')}
                        </>
                      }
                    />
                  </ListItem>

                  <Divider component='li' />
                </React.Fragment>
              )) : (
                <Typography textAlign='center' sx={{p: 2}}>Aucun commentaire</Typography>
              )}
            </List>
            {pageCount > 1 && (
              <Box sx={{display: 'flex', justifyContent: 'center'}}>
                <Pagination size='small' sx={{marginBlock: 3}} color='success' count={pageCount} page={page} onChange={handleChange} />
              </Box>
            )}
          </>
        )}
      </Dialog>
      <SessionExpired ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
    </>
  )
}

ListComments.propTypes = {
  session: PropTypes.object,
  selectedTitre: PropTypes.object.isRequired,
  isOpen: PropTypes.bool.isRequired,
  setIsOpen: PropTypes.func.isRequired,
  setError: PropTypes.func.isRequired,
  setIsErrorAlertOpen: PropTypes.func.isRequired
}