leonxie/v2
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Highlight voted button in PostCard

Browse Source
This commit is contained in:
LeonspaceX
2026-01-28 18:33:59 +08:00
parent 3929abf750
commit d787785660
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
front/src/components/PostCard.tsx
View File

@@ -163,6 +163,12 @@ const useStyles = makeStyles({
boxShadow: 'none', boxShadow: 'none',
}, },
}, },
actionButtonActive: {
color: tokens.colorBrandForegroundLink,
'& svg': {
color: tokens.colorBrandForegroundLink,
},
},
modalOverlay: { modalOverlay: {
position: 'fixed', position: 'fixed',
top: 0, top: 0,
@@ -203,6 +209,7 @@ const PostCard = ({
const { dispatchToast } = useToastController(toasterId); const { dispatchToast } = useToastController(toasterId);
const [votes, setVotes] = React.useState({ upvotes, downvotes }); const [votes, setVotes] = React.useState({ upvotes, downvotes });
const [hasVoted, setHasVoted] = React.useState(false); const [hasVoted, setHasVoted] = React.useState(false);
const [voteChoice, setVoteChoice] = React.useState<'up' | 'down' | null>(null);
const [showComments, setShowComments] = React.useState(false); const [showComments, setShowComments] = React.useState(false);
const [showReportModal, setShowReportModal] = React.useState(false); const [showReportModal, setShowReportModal] = React.useState(false);
@@ -239,9 +246,10 @@ const PostCard = ({
<CardFooter> <CardFooter>
<div className={styles.actions}> <div className={styles.actions}>
<Button <Button
icon={<ArrowUp24Regular />} icon={<ArrowUp24Regular primaryFill={voteChoice === 'up' ? tokens.colorBrandForegroundLink : undefined} />}
appearance="transparent" appearance="transparent"
className={styles.actionButton} className={`${styles.actionButton} ${voteChoice === 'up' ? styles.actionButtonActive : ''}`}
style={voteChoice === 'up' ? { color: tokens.colorBrandForegroundLink } : undefined}
onClick={async () => { onClick={async () => {
if (hasVoted) { if (hasVoted) {
dispatchToast( dispatchToast(
@@ -256,6 +264,7 @@ const PostCard = ({
await voteArticle(id, 'up'); await voteArticle(id, 'up');
setVotes(prev => ({ ...prev, upvotes: prev.upvotes + 1 })); setVotes(prev => ({ ...prev, upvotes: prev.upvotes + 1 }));
setHasVoted(true); setHasVoted(true);
setVoteChoice('up');
} catch (error) { } catch (error) {
console.error('Failed to upvote:', error); console.error('Failed to upvote:', error);
dispatchToast( dispatchToast(
@@ -270,9 +279,10 @@ const PostCard = ({
{votes.upvotes} {votes.upvotes}
</Button> </Button>
<Button <Button
icon={<ArrowDown24Regular />} icon={<ArrowDown24Regular primaryFill={voteChoice === 'down' ? tokens.colorBrandForegroundLink : undefined} />}
appearance="transparent" appearance="transparent"
className={styles.actionButton} className={`${styles.actionButton} ${voteChoice === 'down' ? styles.actionButtonActive : ''}`}
style={voteChoice === 'down' ? { color: tokens.colorBrandForegroundLink } : undefined}
onClick={async () => { onClick={async () => {
if (hasVoted) { if (hasVoted) {
dispatchToast( dispatchToast(
@@ -287,6 +297,7 @@ const PostCard = ({
await voteArticle(id, 'down'); await voteArticle(id, 'down');
setVotes(prev => ({ ...prev, downvotes: prev.downvotes + 1 })); setVotes(prev => ({ ...prev, downvotes: prev.downvotes + 1 }));
setHasVoted(true); setHasVoted(true);
setVoteChoice('down');
} catch (error) { } catch (error) {
console.error('Failed to downvote:', error); console.error('Failed to downvote:', error);
dispatchToast( dispatchToast(