feat: synchronisé votes entre header et comparaison

- État voteRefreshKey partagé pour forcer refresh des VoteButtons
- Props onVoteResult passées à VersionComparison
- Clés uniques pour chaque VoteButtons (header/comparison)
- Snackbar local dans VersionComparison si pas de callback parent
This commit is contained in:
2025-07-23 20:13:07 +04:00
parent f00b7c827d
commit db8b5dd1c2
2 changed files with 42 additions and 18 deletions
+32 -17
View File
@@ -11,16 +11,22 @@ import VoteButtons from './vote-buttons.js'
import CopyButton from './copy-button.js' import CopyButton from './copy-button.js'
import {formatDate} from '@/lib/format.js' import {formatDate} from '@/lib/format.js'
export default function VersionComparison({versionData, versionCompare}) { export default function VersionComparison({versionData, versionCompare, voteRefreshKey = 0, onVoteResult}) {
const {current, main, outdated} = versionCompare const {current, main, outdated} = versionCompare
const [snackbar, setSnackbar] = useState({open: false, message: '', severity: 'success'}) const [snackbar, setSnackbar] = useState({open: false, message: '', severity: 'success'})
const handleVoteResult = result => { const handleVoteResult = result => {
setSnackbar({ if (onVoteResult) {
open: true, // Use the parent's vote result handler if provided
message: result.message, onVoteResult(result)
severity: result.success ? 'success' : 'error' } else {
}) // Fallback to local snackbar if no parent handler
setSnackbar({
open: true,
message: result.message,
severity: result.success ? 'success' : 'error'
})
}
} }
const handleCloseSnackbar = () => { const handleCloseSnackbar = () => {
@@ -117,7 +123,12 @@ export default function VersionComparison({versionData, versionCompare}) {
hasSnackbarVisible={false} hasSnackbarVisible={false}
/> />
</Box> </Box>
<VoteButtons versionId={versionCompare.versionId} isDisabled={isVoteDisabled} onVoteResult={handleVoteResult} /> <VoteButtons
key={`vote-comparison-${voteRefreshKey}`}
versionId={versionCompare.versionId}
isDisabled={isVoteDisabled}
onVoteResult={handleVoteResult}
/>
</Box> </Box>
)} )}
</Paper> </Paper>
@@ -177,16 +188,18 @@ export default function VersionComparison({versionData, versionCompare}) {
</Grid> </Grid>
</Box> </Box>
<Snackbar {!onVoteResult && (
open={snackbar.open} <Snackbar
autoHideDuration={6000} open={snackbar.open}
anchorOrigin={{vertical: 'bottom', horizontal: 'center'}} autoHideDuration={6000}
onClose={handleCloseSnackbar} anchorOrigin={{vertical: 'bottom', horizontal: 'center'}}
> onClose={handleCloseSnackbar}
<Alert variant='filled' severity={snackbar.severity} sx={{width: '100%'}} onClose={handleCloseSnackbar}> >
{snackbar.message} <Alert variant='filled' severity={snackbar.severity} sx={{width: '100%'}} onClose={handleCloseSnackbar}>
</Alert> {snackbar.message}
</Snackbar> </Alert>
</Snackbar>
)}
</Box> </Box>
) )
} }
@@ -200,4 +213,6 @@ VersionComparison.propTypes = {
main: PropTypes.object.isRequired, main: PropTypes.object.isRequired,
versionId: PropTypes.string versionId: PropTypes.string
}).isRequired, }).isRequired,
voteRefreshKey: PropTypes.number,
onVoteResult: PropTypes.func
} }
+10 -1
View File
@@ -36,6 +36,7 @@ export default function VersionPage({session, versionId, viewMode}) {
const [error, setError] = useState('') const [error, setError] = useState('')
const [isErrorAlertOpen, setIsErrorAlertOpen] = useState(false) const [isErrorAlertOpen, setIsErrorAlertOpen] = useState(false)
const [snackbar, setSnackbar] = useState({open: false, message: '', severity: 'success'}) const [snackbar, setSnackbar] = useState({open: false, message: '', severity: 'success'})
const [voteRefreshKey, setVoteRefreshKey] = useState(0)
useEffect(() => { useEffect(() => {
async function fetchVersionData() { async function fetchVersionData() {
@@ -88,6 +89,8 @@ export default function VersionPage({session, versionId, viewMode}) {
message: result.message, message: result.message,
severity: result.success ? 'success' : 'error' severity: result.success ? 'success' : 'error'
}) })
// Force refresh of both VoteButtons components by changing the key
setVoteRefreshKey(prev => prev + 1)
} }
const handleCloseSnackbar = () => { const handleCloseSnackbar = () => {
@@ -223,7 +226,11 @@ export default function VersionPage({session, versionId, viewMode}) {
label='Copier le contenu de cette version' label='Copier le contenu de cette version'
/> />
{!isVoteDisabled && ( {!isVoteDisabled && (
<VoteButtons versionId={versionId} onVoteResult={handleVoteResult} /> <VoteButtons
key={`vote-header-${voteRefreshKey}`}
versionId={versionId}
onVoteResult={handleVoteResult}
/>
)} )}
</Box> </Box>
</Box> </Box>
@@ -234,6 +241,8 @@ export default function VersionPage({session, versionId, viewMode}) {
<VersionComparison <VersionComparison
versionData={versionData} versionData={versionData}
versionCompare={versionCompare} versionCompare={versionCompare}
voteRefreshKey={voteRefreshKey}
onVoteResult={handleVoteResult}
/> />
) : ( ) : (
<Paper sx={{p: 3}}> <Paper sx={{p: 3}}>