Skip to content

Commit

Permalink
hashmap and styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramirc5
ramirc5 committed Oct 16, 2023
1 parent a7d8767 commit cc46522
Showing 1 changed file with 28 additions and 25 deletions.
53 changes: 28 additions & 25 deletions src/Components/DOM/VoteStatusButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ const LockIcon = 'https://www.reibase.rs/lock.png';
const UpArrow = 'https://www.reibase.rs/triangle-arrow-up.png';
const DownArrow = 'https://www.reibase.rs/triangle-arrow-down.png';


const ButtonVote = styled.button`
color: white;
width: 80px;
Expand All @@ -22,13 +21,19 @@ const SpanVote = styled.span`
align-items: center;
`;

const LockImg = styled.img`
width: 15px;
height: 15px;
const IconImg = styled.img`
width: 12px;
height: 8px;
margin-right: 3px;
margin-top: 3px;
`;


const iconMap = {
frozen: LockIcon,
upvote: UpArrow,
downvote: DownArrow
};
let iconKey;

export default function VoteStatusButton({
user,
Expand All @@ -46,19 +51,26 @@ export default function VoteStatusButton({
});

const { prData, loading } = useGetVotes(user, repoID, issueID, contributorID, side, socketEvents, clicked);
const totalYesVotes = prData?.voteData?.voteTotals?.totalYesVotes
const totalNoVotes = prData?.voteData?.voteTotals?.totalNoVotes
let icon;
const totalYesVotes = prData?.voteData?.voteTotals?.totalYesVotes;
const totalNoVotes = prData?.voteData?.voteTotals?.totalNoVotes;

if (prData?.state === 'frozen') {

This comment has been minimized.

Sign in to view

Copy link
@jex441

jex441 Oct 17, 2023 •
edited
Loading

This is going in the right direction. It could be simplified further though.

Try instead to have a display icon variable which is a boolean which is false by default. If the prData.state is frozen, open, or pre-open, it is true.

iconMap can look like

{
display: true,
frozen: LockIcon,
pre-open: totalYestVotes >= totalNoVotes ? UpArrow : DownArrow,
open: totalYestVotes >= totalNoVotes ? UpArrow : DownArrow
}

Then in the render it can be

iconMap.display && <IconImg src=iconMap[prData.state] ... />

There is still the repeated code for pre-open and open which would be nice to further optimize. I can't think of how off the top of my head. But it is highly legible and does not have long if else statements. Let me know what you think @ramirc5
iconKey = 'frozen';
} else if ((prData?.state === 'pre-open' || prData?.state === 'open') && totalYesVotes >= totalNoVotes) {
iconKey = 'upvote';
} else if ((prData?.state === 'pre-open' || prData?.state === 'open') && totalYesVotes < totalNoVotes) {
iconKey = 'downvote';
} else {
iconKey = null;
}

const buttonStyle = {
vote: ['#61D25E', 'vote'],
'pre-open': [
totalYesVotes >= totalNoVotes ? '#61D25E' : '#FA4D57',
prData?.voteData?.voteTotals?.totalVotePercent + '%'
],
open: [
totalYesVotes >= totalNoVotes ? '#09AE10' : '#E2222D',
prData?.voteData?.voteTotals?.totalVotePercent + '%'
],
open: [totalYesVotes >= totalNoVotes ? '#09AE10' : '#E2222D', prData?.voteData?.voteTotals?.totalVotePercent + '%'],
frozen: [
totalYesVotes >= totalNoVotes ? '#8ECA8C' : '#E2222D',
prData?.voteData?.voteTotals?.totalVotePercent > 0 ? prData?.voteData?.voteTotals?.totalVotePercent + '%' : 'vote'
Expand All @@ -72,15 +84,6 @@ export default function VoteStatusButton({
if (!loading) {
const buttonColor = buttonStyle[prData.state][0];
const buttonText = buttonStyle[prData.state][1];
if ((prData.state === 'pre-open' || prData.state === 'open') && totalYesVotes >= totalNoVotes){
icon = <img src={UpArrow}/>;
} else if ((prData.state === 'pre-open' || prData.state === 'open') && totalYesVotes < totalNoVotes){
icon = <img src={DownArrow}/>;
} else if (prData.state === 'frozen'){
icon = <img src={LockIcon}/>;
}
icon = <img src={LockIcon}/>;
console.log(icon, 'icon');
setVoteStatusButton({ color: buttonColor, text: buttonText });
}
console.log(voteStatusButton.text);

This comment has been minimized.

Sign in to view

Copy link
@jex441

jex441 Oct 17, 2023

❌
Expand All @@ -97,9 +100,9 @@ export default function VoteStatusButton({

return (
<ButtonVote style={{ background: voteStatusButton.color }} onClick={e => handleClick(e)}>

<SpanVote>
{icon}{voteStatusButton.text}
<SpanVote>
{iconKey && <IconImg src={iconMap[iconKey]} alt={iconKey} />}
{voteStatusButton.text}
</SpanVote>
</ButtonVote>
);
Expand Down

0 comments on commit cc46522

Please sign in to comment.