feat: ajout du nombre de vote total

components/versions/version-comparison.js

@@ -2,20 +2,50 @@ import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import Paper from '@mui/material/Paper'
 import Grid from '@mui/material/Grid'
+import Chip from '@mui/material/Chip'
 import PropTypes from 'prop-types'
 import Snackbar from '@mui/material/Snackbar'
 import Alert from '@mui/material/Alert'
-import {useState} from 'react'
+import ThumbUpIcon from '@mui/icons-material/ThumbUp'
+import ThumbDownIcon from '@mui/icons-material/ThumbDown'
+import {useState, useEffect} from 'react'
+import {useSession} from 'next-auth/react'
 import MarkdownRenderer from '../markdown-renderer/index.js'
 import VoteButtons from './vote-buttons.js'
 import CopyButton from './copy-button.js'
 import {formatDate} from '@/lib/format.js'
+import {getVoteCounts} from '@/lib/directus.js'
 
 export default function VersionComparison({versionData, versionCompare, voteRefreshKey = 0, onVoteResult}) {
+  const {data: session} = useSession()
   const {current, main, outdated} = versionCompare
   const [snackbar, setSnackbar] = useState({open: false, message: '', severity: 'success'})
+  const [voteCounts, setVoteCounts] = useState({positive: 0, negative: 0, total: 0})
+
+  useEffect(() => {
+    async function fetchVoteCounts() {
+      if (session?.user?.accessToken && versionCompare?.versionId) {
+        const counts = await getVoteCounts({
+          accessToken: session.user.accessToken,
+          versionId: versionCompare.versionId
+        })
+        setVoteCounts(counts)
+      }
+    }
+
+    fetchVoteCounts()
+  }, [session?.user?.accessToken, versionCompare?.versionId, voteRefreshKey])
+
+  const handleVoteResult = async result => {
+    if (result.success && session?.user?.accessToken && versionCompare?.versionId) {
+      const counts = await getVoteCounts({
+        accessToken: session.user.accessToken,
+        versionId: versionCompare.versionId
+      })
+
+      setVoteCounts(counts)
+    }
 
-  const handleVoteResult = result => {
     if (onVoteResult) {
       // Use the parent's vote result handler if provided
       onVoteResult(result)
@@ -108,7 +138,7 @@ export default function VersionComparison({versionData, versionCompare, voteRefr
               </Typography>
             </Box>
             <Box sx={{
-              display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 1
+              display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 1, flexWrap: 'wrap', gap: 1
             }}
             >
               <Box sx={{display: 'flex', alignItems: 'center', gap: 1}}>
@@ -123,12 +153,33 @@ export default function VersionComparison({versionData, versionCompare, voteRefr
                   hasSnackbarVisible={false}
                 />
               </Box>
-              <VoteButtons
-                key={`vote-comparison-${voteRefreshKey}`}
-                versionId={versionCompare.versionId}
-                isDisabled={isVoteDisabled}
-                onVoteResult={handleVoteResult}
-              />
+              <Box sx={{display: 'flex', alignItems: 'center', gap: 1}}>
+                <VoteButtons
+                  key={`vote-comparison-${voteRefreshKey}`}
+                  versionId={versionCompare.versionId}
+                  isDisabled={isVoteDisabled}
+                  onVoteResult={handleVoteResult}
+                />
+                <Chip
+                  icon={<ThumbUpIcon />}
+                  label={voteCounts.positive}
+                  size='small'
+                  color='success'
+                  variant='outlined'
+                />
+                <Chip
+                  icon={<ThumbDownIcon />}
+                  label={voteCounts.negative}
+                  size='small'
+                  color='error'
+                  variant='outlined'
+                />
+                <Chip
+                  label={`Total: ${voteCounts.total >= 0 ? '+' : ''}${voteCounts.total}`}
+                  size='small'
+                  color={voteCounts.total > 0 ? 'success' : (voteCounts.total < 0 ? 'error' : 'default')}
+                />
+              </Box>
             </Box>
           </Paper>
         </Grid>