refactor: use HandleComments to read & write comments

2024-06-19 14:44:49 +04:00
parent f4eb07c9a3
commit 1e587b5d6b
4 changed files with 79 additions and 40 deletions
@@ -0,0 +1,121 @@
+/* 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
+}