Refactor PollResultsDialog
This commit is contained in:
parent
a5fdd41b03
commit
baabfbcfb9
1 changed files with 39 additions and 23 deletions
|
@ -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,11 +28,28 @@ 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 <AnswerEntry
|
||||||
|
key={answer.id}
|
||||||
|
answer={answer}
|
||||||
|
members={props.members}
|
||||||
|
votes={votes}
|
||||||
|
/>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</BaseDialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AnswerEntry(props: {
|
||||||
|
answer: PollAnswerSubevent;
|
||||||
|
members: RoomMember[];
|
||||||
|
votes: UserVote[];
|
||||||
|
}): JSX.Element {
|
||||||
|
const {answer, members, votes} = props;
|
||||||
return (
|
return (
|
||||||
<div key={answer.id}>
|
<div key={answer.id}>
|
||||||
<div style={{display: "flex", alignItems: "center", marginBottom: "10px"}}>
|
<div style={{display: "flex", alignItems: "center", marginBottom: "10px"}}>
|
||||||
|
@ -41,20 +58,19 @@ export default function PollResultsDialog (props: IProps): JSX.Element {
|
||||||
</div>
|
</div>
|
||||||
{votes.length === 0 && <div>No one voted for this.</div>}
|
{votes.length === 0 && <div>No one voted for this.</div>}
|
||||||
{votes.map((vote) => {
|
{votes.map((vote) => {
|
||||||
const member = props.members.find(m => m.userId === vote.sender);
|
const member = members.find(m => m.userId === vote.sender);
|
||||||
if (!member) return null;
|
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"}}>
|
return <div key={vote.sender} style={{display: "flex", alignItems: "center", marginLeft: "15px"}}>
|
||||||
<div style={{marginRight: "10px"}}>
|
<div style={{marginRight: "10px"}}>
|
||||||
<MemberAvatar member={member} size="36px" aria-hidden="true" />
|
<MemberAvatar member={member} size="36px" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
{member.name}
|
{member.name}
|
||||||
</div>;
|
</div>;
|
||||||
})}
|
|
||||||
{answerIndex < props.pollEvent.answers.length - 1 && <br />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</BaseDialog>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue