diff --git a/components/versions/version-comparison.js b/components/versions/version-comparison.js index 9eb80c6..05ab972 100644 --- a/components/versions/version-comparison.js +++ b/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 @@ -123,12 +153,33 @@ export default function VersionComparison({versionData, versionCompare, voteRefr hasSnackbarVisible={false} /> - + + + } + label={voteCounts.positive} + size='small' + color='success' + variant='outlined' + /> + } + label={voteCounts.negative} + size='small' + color='error' + variant='outlined' + /> + = 0 ? '+' : ''}${voteCounts.total}`} + size='small' + color={voteCounts.total > 0 ? 'success' : (voteCounts.total < 0 ? 'error' : 'default')} + /> + diff --git a/lib/directus.js b/lib/directus.js index 3f4f2f2..cef8777 100644 --- a/lib/directus.js +++ b/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} + } +}