refactor: utilise VoteButtons dans VersionComparison

components/versions/version-comparison.js

@@ -3,63 +3,23 @@ import Typography from '@mui/material/Typography'
 import Paper from '@mui/material/Paper'
 import Grid from '@mui/material/Grid2'
 import PropTypes from 'prop-types'
-import IconButton from '@mui/material/IconButton'
-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 Snackbar from '@mui/material/Snackbar'
 import Alert from '@mui/material/Alert'
+import {useState} from 'react'
 import MarkdownRenderer from '../markdown-renderer/index.js'
-import {handleVote, getUserVote} from '../../lib/directus.js'
+import VoteButtons from './vote-buttons.js'
 import {formatDate} from '@/lib/format.js'
 
 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 handleVoteResult = result => {
-    const fetchVote = async () => {
-      if (session?.user && versionCompare.versionId) {
-        try {
-          const vote = await getUserVote({
-            accessToken: session.user.accessToken,
-            userId: session.user.userId,
-            versionId: versionCompare.versionId
-          })
-          setCurrentVote(vote)
-        } catch (error) {
-          console.error('Error fetching vote:', error)
-        }
-      }
-    }
-
-    fetchVote()
-  }, [session, versionCompare.versionId])
-
-  const handleVoteClick = async voteValue => {
-    try {
-      const newVoteValue = await handleVote({
-        accessToken: session.user.accessToken,
-        userId: session.user.userId,
-        versionId: versionCompare.versionId,
-        voteValue
-      })
-      setCurrentVote(newVoteValue)
     setSnackbar({
       open: true,
-        message: newVoteValue === null ? 'Vote annulé' : 'Vote enregistré avec succès',
+      message: result.message,
-        severity: 'success'
+      severity: result.success ? 'success' : 'error'
     })
-    } catch (error) {
-      setSnackbar({
-        open: true,
-        message: `Erreur lors du vote: ${error}`,
-        severity: 'error'
-      })
-    }
   }
 
   const handleCloseSnackbar = () => {
@@ -131,7 +91,7 @@ export default function VersionComparison({versionData, versionCompare}) {
                 @{versionData.user_created?.split('-')[0] || 'Système'}
               </Typography>
             </Box>
-            {!outdated && session?.user && (
+            {!outdated && (
               <Box sx={{
                 display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 1
               }}
@@ -143,24 +103,7 @@ export default function VersionComparison({versionData, versionCompare}) {
                     </Typography>
                   )}
                 </Box>
-                <Box sx={{display: 'flex', justifyContent: 'flex-end'}}>
+                <VoteButtons versionId={versionCompare.versionId} isDisabled={isVoteDisabled} onVoteResult={handleVoteResult} />
-                  <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>
@@ -219,6 +162,7 @@ export default function VersionComparison({versionData, versionCompare}) {
           </Grid>
         </Grid>
       </Box>
+
       <Snackbar
         open={snackbar.open}
         autoHideDuration={6000}