Skip to content

Commit

Permalink
Adds liking and disliking sections
Browse files Browse the repository at this point in the history
  • Loading branch information
@jedwardmook
jedwardmook committed Oct 22, 2024
1 parent ad03cbd commit 4ca7699
Showing 1 changed file with 111 additions and 9 deletions.
120 changes: 111 additions & 9 deletions src/js/common/components/PositionItem/VoterPositionEntryAndDisplay.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import styled from 'styled-components';
import CreateOutlinedIcon from '@mui/icons-material/CreateOutlined';
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
import { ThumbDownAltRounded } from '@mui/icons-material';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import { Popover } from '@mui/material';
import DesignTokenColors from '../Style/DesignTokenColors';

Expand All @@ -20,8 +21,12 @@ function VoterPositionEntryAndDisplay () {
const opinion = {
opinion_body: 'Holly can get the job done',
opinion_time_created: new Date(),
opinion_likes: [],
opinion_dislike: [],
opinion_likes: ['Blair H', 'Malena H', 'Anusha K', 'Ayobami B', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H'],
opinion_dislikes: ['Enrique C'],
};

const handleVoterEditClick = () => {
console.log('Edit voter logic will go here');
};

const formatNewDate = (date) => new Intl.DateTimeFormat('en-US', { month: '2-digit', day: 'numeric', year: '2-digit' }).format(date);
Expand All @@ -41,6 +46,26 @@ function VoterPositionEntryAndDisplay () {
const open = Boolean(anchorEl);
const id = open ? 'simple-popover' : undefined;

const formatLikesDislikes = (arr) => {
if (arr.length > 4) {
const firstFourNames = arr.slice(0, 4).join(', ');
const remainder = arr.length - 4;
return (
<p>
{firstFourNames}
{' '}
and
{' '}
{remainder}
{' '}
others
</p>
);
} else {
return <p>{arr.join(', ')}</p>;
}
};

return (
<VoterPositionContainer>
<VoterAvatarDisplayContainer>
Expand All @@ -58,7 +83,7 @@ function VoterPositionEntryAndDisplay () {
</>
)}
</VoterAvatar>
<VoterEdit>
<VoterEdit onClick={handleVoterEditClick}>
<EditIcon />
</VoterEdit>
</VoterAvatarDisplayContainer>
Expand All @@ -85,20 +110,37 @@ function VoterPositionEntryAndDisplay () {
anchorEl={anchorEl}
onClose={handleEditCommentClose}
anchorReference="anchorPosition"
anchorPosition={{ top: 20, left: 290 }}
anchorPosition={{ top: 0, left: 220 }}
>
<p>The popover is open</p>
<EditDeleteCommentContainer>
<EditCommentClick type="button">
<EditIconLrg />
Edit opinion
</EditCommentClick>
<DeleteCommentClick type="button">
<DeleteIcon />
Delete opinion
</DeleteCommentClick>
</EditDeleteCommentContainer>
</Popover>
</CommentDetailsContainer>
<CommentLikeDislikeContainer>
<CommentLikeContainer>
<CommentLikeIconContainer>
<CommentLikeIcon />
</CommentLikeIconContainer>
<CommentLikesDislikesNamesContainer>
{formatLikesDislikes(opinion.opinion_likes)}
</CommentLikesDislikesNamesContainer>
</CommentLikeContainer>
<CommentDislikeIconContainer>
<CommentDislikeIcon />
</CommentDislikeIconContainer>
<CommentDislikeContainer>
<CommentDislikeIconContainer>
<CommentDislikeIcon />
</CommentDislikeIconContainer>
<CommentLikesDislikesNamesContainer>
{formatLikesDislikes(opinion.opinion_dislikes)}
</CommentLikesDislikesNamesContainer>
</CommentDislikeContainer>
</CommentLikeDislikeContainer>
</VoterOpinionContainer>
) :
Expand Down Expand Up @@ -228,6 +270,53 @@ const EditCommentPopoverClick = styled('button')`
}
`;

const EditDeleteCommentContainer = styled('div')`
display: flex;
flex-direction: column;
`;

const EditCommentClick = styled('button')`
background-color: white;
color: ${DesignTokenColors.neutral900};
border-radius: 5px 5px 0 0;
border: 1px solid ${DesignTokenColors.neutral100};
width: 201px;
height: 42px;
text-align: left;
font-size: 16px;
&:hover {
background-color: ${DesignTokenColors.neutral100};
}
`;

const EditIconLrg = styled(CreateOutlinedIcon)`
margin: 0 5px 0 10px;
color: ${DesignTokenColors.neutral400};
`;

const DeleteCommentClick = styled('button')`
background-color: white;
color: ${DesignTokenColors.neutral900};
border-radius: 0 0 5px 5px;
border-top: none;
border-right: 1px solid ${DesignTokenColors.neutral100};
border-bottom: 1px solid ${DesignTokenColors.neutral100};
border-left: 1px solid ${DesignTokenColors.neutral100};
width: 201px;
height: 42px;
text-align: left;
&:hover {
background-color: ${DesignTokenColors.neutral100};
}
`;

const DeleteIcon = styled(DeleteOutlinedIcon)`
margin: 0 5px 0 10px;
color: ${DesignTokenColors.neutral400};
`;

const ThreeDotsIcon = styled(MoreHorizIcon)`
color: ${DesignTokenColors.neutral400}
`;
Expand All @@ -251,11 +340,18 @@ const LeaveOpinionText = styled('span')`
const CommentLikeDislikeContainer = styled('div')`
display: flex;
flex-direction: column;
margin-top: 5px;
`;

const CommentLikeContainer = styled('div')`
display: flex;
margin-bottom: 8px;
cursor: pointer;
`;

const CommentDislikeContainer = styled('div')`
display: flex;
cursor: pointer;
margin: -5px 0 -15px 0;
`;

const CommentLikeIconContainer = styled('div')`
Expand All @@ -274,6 +370,12 @@ const CommentLikeIcon = styled(ThumbDownAltRounded)`
color: white;
`;

const CommentLikesDislikesNamesContainer = styled('div')`
display: flex;
font-size: 12px;
margin-left: 5px;
`;

const CommentDislikeIconContainer = styled('div')`
display: flex;
justify-content: center;
Expand Down

0 comments on commit 4ca7699

Please sign in to comment.