fix: ajout d'un cercle circulaire lors du chargement des commentaires

components/konstitisyon/index.js

@@ -116,6 +116,6 @@ export default function Konstitisyon({session, titres, articles}) {
 
 Konstitisyon.propTypes = {
   session: PropTypes.object,
-  titres: PropTypes.object.isRequired,
-  articles: PropTypes.object.isRequired
+  titres: PropTypes.array.isRequired,
+  articles: PropTypes.array.isRequired
 }

components/konstitisyon/list-comments.js

@@ -10,6 +10,7 @@ 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'
@@ -20,6 +21,7 @@ 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)
@@ -27,8 +29,15 @@ export default function ListComments({session, selectedTitre, isOpen, setIsOpen,
   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)
 
@@ -54,6 +63,8 @@ export default function ListComments({session, selectedTitre, isOpen, setIsOpen,
           setError(error?.errors[0]?.message)
           setIsErrorAlertOpen(true)
         }
+      } finally {
+        setIsLoading(false)
       }
     }
 
@@ -74,6 +85,12 @@ export default function ListComments({session, selectedTitre, isOpen, setIsOpen,
     <>
       <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}>
@@ -104,12 +121,16 @@ export default function ListComments({session, selectedTitre, isOpen, setIsOpen,
                   <Divider component='li' />
                 </React.Fragment>
               )) : (
-            <Typography textAlign='center'>Aucun commentaire</Typography>
+                <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} />
     </>

lib/directus.js

@@ -141,9 +141,8 @@ export async function listVersions({
 
     return versions
   } catch (error) {
-    console.log('error', error)
     
-    if (error?.errors[0]?.message === 'Token expired.') {
+    if (error) {
       countdownRef.current.startCountdown()
     } else {
       console.log(error?.errors[0]?.message)