refactor: versionData > versionCompare + Ajout de la date de création d'une version et de l'utilisateur qui l'a créée

components/versions/list-versions.js

@@ -67,7 +67,7 @@ function rowContent({
   setError,
   setIsErrorAlertOpen,
   setIsOpenComparison,
-  setVersionData
+  setVersionCompare
 }) {
   const handleButtonClick = async versionId => {
     const version = await compareVersion({
@@ -80,7 +80,7 @@ function rowContent({
     })
 
     if (version) {
-      setVersionData({...version, versionId})
+      setVersionCompare({...version, versionId})
       setIsOpenComparison(true)
     }
   }
@@ -112,7 +112,9 @@ export default function ListVersions({
   const countdownRef = useRef()
 
   const [isOpenComparison, setIsOpenComparison] = useState(false)
-  const [versionData, setVersionData] = useState(null)
+  const [versionCompare, setVersionCompare] = useState(null)
+
+  const versionData = data.find(({id}) => id === versionCompare?.versionId)
 
   return (
     <>
@@ -126,13 +128,13 @@ export default function ListVersions({
             components={VirtuosoTableComponents}
             fixedHeaderContent={fixedHeaderContent}
             itemContent={(index, row) => rowContent({
-              index, row, accessToken, userId, countdownRef, setError, setIsErrorAlertOpen, setIsOpenComparison, setVersionData
+              index, row, accessToken, userId, countdownRef, setError, setIsErrorAlertOpen, setIsOpenComparison, setVersionCompare
             })}
           />
         </Paper>
       </Box>
       {isOpenComparison && (
-        <VersionDialog versionData={versionData} isOpen={isOpenComparison} setIsOpen={setIsOpenComparison} />
+        <VersionDialog versionData={versionData} versionCompare={versionCompare} isOpen={isOpenComparison} setIsOpen={setIsOpenComparison} />
       )}
       <LogoutCountdown ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
     </>

components/versions/version-comparison.js

@@ -11,21 +11,22 @@ import {useSession} from 'next-auth/react'
 import Snackbar from '@mui/material/Snackbar'
 import Alert from '@mui/material/Alert'
 import {handleVote, getUserVote} from '../../lib/directus.js'
+import {formatDate} from '@/lib/format.js'
 
-export default function VersionComparison({versionData}) {
+export default function VersionComparison({versionData, versionCompare}) {
-  const {current, main, outdated} = versionData
+  const {current, main, outdated} = versionCompare
   const {data: session} = useSession()
   const [snackbar, setSnackbar] = useState({open: false, message: '', severity: 'success'})
   const [currentVote, setCurrentVote] = useState(null)
 
   useEffect(() => {
     const fetchVote = async () => {
-      if (session?.user && versionData.versionId) {
+      if (session?.user && versionCompare.versionId) {
         try {
           const vote = await getUserVote({
             accessToken: session.user.accessToken,
             userId: session.user.userId,
-            versionId: versionData.versionId
+            versionId: versionCompare.versionId
           })
           setCurrentVote(vote)
         } catch (error) {
@@ -35,14 +36,14 @@ export default function VersionComparison({versionData}) {
     }
 
     fetchVote()
-  }, [session, versionData.versionId])
+  }, [session, versionCompare.versionId])
 
   const handleVoteClick = async voteValue => {
     try {
       const newVoteValue = await handleVote({
         accessToken: session.user.accessToken,
         userId: session.user.userId,
-        versionId: versionData.versionId,
+        versionId: versionCompare.versionId,
         voteValue
       })
       setCurrentVote(newVoteValue)
@@ -80,24 +81,41 @@ export default function VersionComparison({versionData}) {
               {current.contenu}
             </Typography>
             {!outdated && session?.user && (
-              <Box sx={{display: 'flex', justifyContent: 'flex-end', mt: 1}}>
+              <>
-                <IconButton
+                <Box>
-                  size='small'
+                  <Typography sx={{textDecoration: 'underline'}} variant='caption' color='primary'>@{versionData.user_created.split('-')[0]}</Typography>
-                  color={currentVote === 1 ? 'success' : 'primary'}
+                </Box>
-                  aria-label='vote positif'
+                <Box sx={{
-                  onClick={() => handleVoteClick(1)}
+                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 1
+                }}
                 >
-                  <ThumbUpIcon />
+                  <Box>
-                </IconButton>
+                    {versionData && (
-                <IconButton
+                      <Typography sx={{fontWeight: 'bold'}} color='primary'>
-                  size='small'
+                        {formatDate(versionData.date_created)}
-                  color={currentVote === -1 ? 'error' : 'primary'}
+                      </Typography>
-                  aria-label='vote négatif'
+                    )}
-                  onClick={() => handleVoteClick(-1)}
+                  </Box>
-                >
+                  <Box sx={{display: 'flex', justifyContent: 'flex-end'}}>
-                  <ThumbDownIcon />
+                    <IconButton
-                </IconButton>
+                      size='small'
-              </Box>
+                      color={currentVote === 1 ? 'success' : 'primary'}
+                      aria-label='vote positif'
+                      onClick={() => handleVoteClick(1)}
+                    >
+                      <ThumbUpIcon />
+                    </IconButton>
+                    <IconButton
+                      size='small'
+                      color={currentVote === -1 ? 'error' : 'primary'}
+                      aria-label='vote négatif'
+                      onClick={() => handleVoteClick(-1)}
+                    >
+                      <ThumbDownIcon />
+                    </IconButton>
+                  </Box>
+                </Box>
+              </>
             )}
           </Paper>
         </Grid>
@@ -170,7 +188,8 @@ export default function VersionComparison({versionData}) {
 }
 
 VersionComparison.propTypes = {
-  versionData: PropTypes.shape({
+  versionData: PropTypes.object,
+  versionCompare: PropTypes.shape({
     outdated: PropTypes.bool.isRequired,
     mainHash: PropTypes.string.isRequired,
     current: PropTypes.object.isRequired,

components/versions/version-dialog.js

@@ -8,7 +8,7 @@ import useMediaQuery from '@mui/material/useMediaQuery'
 import {useTheme} from '@mui/material/styles'
 import VersionComparison from './version-comparison.js'
 
-export default function VersionDialog({versionData, isOpen, setIsOpen}) {
+export default function VersionDialog({versionData, versionCompare, isOpen, setIsOpen}) {
   const theme = useTheme()
   const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
 
@@ -27,7 +27,7 @@ export default function VersionDialog({versionData, isOpen, setIsOpen}) {
         {'Comparaison des versions'}
       </DialogTitle>
       <DialogContent>
-        <VersionComparison versionData={versionData} />
+        <VersionComparison versionData={versionData} versionCompare={versionCompare} />
       </DialogContent>
       <DialogActions>
         <Button autoFocus color='success' onClick={handleClose}>
@@ -39,7 +39,8 @@ export default function VersionDialog({versionData, isOpen, setIsOpen}) {
 }
 
 VersionDialog.propTypes = {
-  versionData: PropTypes.shape({
+  versionData: PropTypes.object,
+  versionCompare: PropTypes.shape({
     outdated: PropTypes.bool.isRequired,
     mainHash: PropTypes.string.isRequired,
     current: PropTypes.object.isRequired,