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,
+  titres: PropTypes.array.isRequired,
-  articles: PropTypes.object.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,42 +85,52 @@ export default function ListComments({session, selectedTitre, isOpen, setIsOpen,
     <>
       <Dialog open={isOpen} onClose={handleClose}>
         <DialogTitle>Commentaires</DialogTitle>
-        <List sx={{width: '100%', maxWidth: 360, bgcolor: 'background.paper'}}>
+        {isLoading ? (
-          {selectedComments && selectedComments.length > 0 ? selectedComments.map(({id, date_created, contenu, user_created}) => (
+          <Box sx={{display: 'flex', justifyContent: 'center', p: 4}}>
-            <React.Fragment key={id}>
+            <CircularProgress />
-              <ListItem alignItems='flex-start'>
+          </Box>
-                <ListItemText
+        ) : (
-                  primary={
+          <>
-                    <Typography sx={{textDecoration: 'underline'}} component='span' variant='body2'>
+            <List sx={{width: '100%', maxWidth: 360, bgcolor: 'background.paper'}}>
-                      @{user_created.split('-')[0]}
+              {selectedComments && selectedComments.length > 0 ? selectedComments.map(({id, date_created, contenu, user_created}) => (
-                    </Typography>
+                <React.Fragment key={id}>
-                  }
+                  <ListItem alignItems='flex-start'>
-                  secondary={
+                    <ListItemText
-                    <>
+                      primary={
-                      <Typography
+                        <Typography sx={{textDecoration: 'underline'}} component='span' variant='body2'>
-                        sx={{display: 'inline'}}
+                          @{user_created.split('-')[0]}
-                        component='span'
+                        </Typography>
-                        variant='body2'
+                      }
-                        color='text.primary'
+                      secondary={
-                      >
+                        <>
-                        {contenu}
+                          <Typography
-                      </Typography>
+                            sx={{display: 'inline'}}
-                      <br />
+                            component='span'
-                      {formatDate(date_created, 'PPPPpp')}
+                            variant='body2'
-                    </>
+                            color='text.primary'
-                  }
+                          >
-                />
+                            {contenu}
-              </ListItem>
+                          </Typography>
+                          <br />
+                          {formatDate(date_created, 'PPPPpp')}
+                        </>
+                      }
+                    />
+                  </ListItem>
 
-              <Divider component='li' />
+                  <Divider component='li' />
-            </React.Fragment>
+                </React.Fragment>
-          )) : (
+              )) : (
-            <Typography textAlign='center'>Aucun commentaire</Typography>
+                <Typography textAlign='center' sx={{p: 2}}>Aucun commentaire</Typography>
-          )}
+              )}
-        </List>
+            </List>
-        <Box sx={{display: 'flex', justifyContent: 'center'}}>
+            {pageCount > 1 && (
-          <Pagination size='small' sx={{marginBlock: 3}} color='success' count={pageCount} page={page} onChange={handleChange} />
+              <Box sx={{display: 'flex', justifyContent: 'center'}}>
-        </Box>
+                <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)