konstitisyon.nu/components/konstitisyon/comments/read-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 {readItems, withToken} from '@directus/sdk'
import LogoutCountdown from '../../session/logout-countdown.js'
import {directusClient} from '@/lib/directus.js'
import {formatDate} from '@/lib/format.js'

const commentsPerPage = process.env.NEXT_PUBLIC_COMMENTS_PER_PAGE || 2

export default function ReadComments({session, selectedTitre, isOpen, setIsOpen, setError, setIsErrorAlertOpen}) {
  const countdownRef = useRef()
  const [comments, setComments] = useState([])
  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(() => {
    async function fetchComments() {
      try {
        const result = await directusClient.request(withToken(
          session.user.accessToken,
          readItems('commentaires', {
            filter: {
              titre: selectedTitre.id
            },
            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)
        }
      }
    }

    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>
        <List sx={{width: '100%', maxWidth: 360, bgcolor: 'background.paper'}}>
          {selectedComments && selectedComments.length > 0 ? selectedComments.map(({id, date_created, text, 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'
                      >
                        {text}
                      </Typography>
                      <br />
                      {formatDate(date_created, 'PPPPpp')}
                    </>
                  }
                />
              </ListItem>

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

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