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>
+              <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>

lib/directus.js

@@ -369,3 +369,43 @@ export async function getUserVote({
     throw error
   }
 }
+
+export async function getVoteCounts({
+  accessToken,
+  versionId
+}) {
+  try {
+    const votes = await directusClient.request(
+      withToken(
+        accessToken,
+        readItems('votes', {
+          filter: {
+            content_version_id: {_eq: versionId}
+          },
+          fields: ['vote']
+        })
+      )
+    )
+
+    const counts = {
+      positive: 0,
+      negative: 0,
+      total: 0
+    }
+
+    for (const v of votes) {
+      if (v.vote === 1) {
+        counts.positive++
+      } else if (v.vote === -1) {
+        counts.negative++
+      }
+    }
+
+    counts.total = counts.positive - counts.negative
+
+    return counts
+  } catch (error) {
+    console.error('Error fetching vote counts:', error)
+    return {positive: 0, negative: 0, total: 0}
+  }
+}