imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor PollResultsDialog

Browse source
This commit is contained in:
Tim Vahlbrock 2024-11-01 00:41:59 +01:00
parent a5fdd41b03
commit baabfbcfb9
No known key found for this signature in database
1 changed files with 39 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/components/views/dialogs/PollResultsDialog.tsx
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details. Please see LICENSE files in the repository root for full details.
*/ */
import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent"; import { PollAnswerSubevent, PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
import { RoomMember } from "matrix-js-sdk/src/matrix"; import { RoomMember } from "matrix-js-sdk/src/matrix";
import React from "react"; import React from "react";
@ -28,33 +28,49 @@ export default function PollResultsDialog (props: IProps): JSX.Element {
onFinished={() => Modal.closeCurrentModal()} onFinished={() => Modal.closeCurrentModal()}
> >
{ {
props.pollEvent.answers.map((answer, answerIndex) => { props.pollEvent.answers.map((answer) => {
const votes = props.votes.get(answer.id) || []; const votes = props.votes.get(answer.id) || [];
if(votes.length === 0) return; if(votes.length === 0) return;
return ( return <AnswerEntry
<div key={answer.id}> key={answer.id}
<div style={{display: "flex", alignItems: "center", marginBottom: "10px"}}> answer={answer}
<span style={{fontWeight: "bolder", flexGrow: 1}}>{answer.text}</span> members={props.members}
<span>{votes.length} votes</span> votes={votes}
</div> />;
{votes.length === 0 && <div>No one voted for this.</div>}
{votes.map((vote) => {
const member = props.members.find(m => m.userId === vote.sender);
if (!member) return null;
return <div key={vote.sender} style={{display: "flex", alignItems: "center", marginLeft: "15px"}}>
<div style={{marginRight: "10px"}}>
<MemberAvatar member={member} size="36px" aria-hidden="true" />
</div>
{member.name}
</div>;
})}
{answerIndex < props.pollEvent.answers.length - 1 && <br />}
</div>
);
}) })
} }
</BaseDialog> </BaseDialog>
); );
} }
function AnswerEntry(props: {
answer: PollAnswerSubevent;
members: RoomMember[];
votes: UserVote[];
}): JSX.Element {
const {answer, members, votes} = props;
return (
<div key={answer.id}>
<div style={{display: "flex", alignItems: "center", marginBottom: "10px"}}>
<span style={{fontWeight: "bolder", flexGrow: 1}}>{answer.text}</span>
<span>{votes.length} votes</span>
</div>
{votes.length === 0 && <div>No one voted for this.</div>}
{votes.map((vote) => {
const member = members.find(m => m.userId === vote.sender);
if(member) return <VoterEntry key={vote.sender} vote={vote} member={member} />;
})}
</div>
);
}
function VoterEntry(props: {vote: UserVote; member: RoomMember}): JSX.Element {
const {vote, member} = props;
return <div key={vote.sender} style={{display: "flex", alignItems: "center", marginLeft: "15px"}}>
<div style={{marginRight: "10px"}}>
<MemberAvatar member={member} size="36px" aria-hidden="true" />
</div>
{member.name}
</div>;
}