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

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}) {
-  const {current, main, outdated} = versionData
+export default function VersionComparison({versionData, versionCompare}) {
+  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
-                  size='small'
-                  color={currentVote === 1 ? 'success' : 'primary'}
-                  aria-label='vote positif'
-                  onClick={() => handleVoteClick(1)}
+              <>
+                <Box>
+                  <Typography sx={{textDecoration: 'underline'}} variant='caption' color='primary'>@{versionData.user_created.split('-')[0]}</Typography>
+                </Box>
+                <Box sx={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 1
+                }}
                 >
-                  <ThumbUpIcon />
-                </IconButton>
-                <IconButton
-                  size='small'
-                  color={currentVote === -1 ? 'error' : 'primary'}
-                  aria-label='vote négatif'
-                  onClick={() => handleVoteClick(-1)}
-                >
-                  <ThumbDownIcon />
-                </IconButton>
-              </Box>
+                  <Box>
+                    {versionData && (
+                      <Typography sx={{fontWeight: 'bold'}} color='primary'>
+                        {formatDate(versionData.date_created)}
+                      </Typography>
+                    )}
+                  </Box>
+                  <Box sx={{display: 'flex', justifyContent: 'flex-end'}}>
+                    <IconButton
+                      size='small'
+                      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,