This repository has been archived by the owner on Sep 11, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 833
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Poll history - ended polls list items (#10119)
* wip * remove dupe * use poll model relations in all cases * update mpollbody tests to use poll instance * update poll fetching login in pinned messages card * add pinned polls to room polls state * add spinner while relations are still loading * handle no poll in end poll dialog * strict errors * render a poll body that errors for poll end events * add fetching logic to pollend tile * extract poll testing utilities * test mpollend * strict fix * more strict fix * strict fix for forwardref * add filter component * update poll test utils * add unstyled filter tab group * filtertabgroup snapshot * lint * update test util setupRoomWithPollEvents to allow testing multiple polls in one room * style filter tabs * test error message for past polls * sort polls list by latest * extract poll option display components from pollbody * add ended poll list item component * use named export for polllistitem * test POllListItemEnded * comments * strict fixes * extract poll option display components * strict fixes * strict
- Loading branch information
Kerry
authored
Feb 20, 2023
1 parent
7e5122b
commit a06163e
Showing
15 changed files
with
472 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 60 additions & 0 deletions
60
res/css/components/views/dialogs/polls/_PollListItemEnded.pcss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| /* | ||
| Copyright 2023 The Matrix.org Foundation C.I.C. | ||
| Licensed under the Apache License, Version 2.0 (the "License"); | ||
| you may not use this file except in compliance with the License. | ||
| You may obtain a copy of the License at | ||
| http://www.apache.org/licenses/LICENSE-2.0 | ||
| Unless required by applicable law or agreed to in writing, software | ||
| distributed under the License is distributed on an "AS IS" BASIS, | ||
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| See the License for the specific language governing permissions and | ||
| limitations under the License. | ||
| */ | ||
|
|
||
| .mx_PollListItemEnded { | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| color: $primary-content; | ||
| } | ||
|
|
||
| .mx_PollListItemEnded_title { | ||
| display: grid; | ||
| justify-content: left; | ||
| align-items: center; | ||
| grid-gap: $spacing-8; | ||
| grid-template-columns: min-content 1fr min-content; | ||
| grid-template-rows: auto; | ||
| } | ||
|
|
||
| .mx_PollListItemEnded_icon { | ||
| height: 14px; | ||
| width: 14px; | ||
| color: $quaternary-content; | ||
| padding-left: $spacing-8; | ||
| } | ||
|
|
||
| .mx_PollListItemEnded_date { | ||
| font-size: $font-12px; | ||
| color: $secondary-content; | ||
| } | ||
|
|
||
| .mx_PollListItemEnded_question { | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| .mx_PollListItemEnded_answers { | ||
| display: grid; | ||
| grid-gap: $spacing-8; | ||
| margin-top: $spacing-12; | ||
| } | ||
|
|
||
| .mx_PollListItemEnded_voteCount { | ||
| // 6px to match PollOption padding | ||
| margin: $spacing-8 0 0 6px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
127 changes: 127 additions & 0 deletions
127
src/components/views/dialogs/polls/PollListItemEnded.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| /* | ||
| Copyright 2023 The Matrix.org Foundation C.I.C. | ||
| Licensed under the Apache License, Version 2.0 (the "License"); | ||
| you may not use this file except in compliance with the License. | ||
| You may obtain a copy of the License at | ||
| http://www.apache.org/licenses/LICENSE-2.0 | ||
| Unless required by applicable law or agreed to in writing, software | ||
| distributed under the License is distributed on an "AS IS" BASIS, | ||
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| See the License for the specific language governing permissions and | ||
| limitations under the License. | ||
| */ | ||
|
|
||
| import React, { useEffect, useState } from "react"; | ||
| import { PollAnswerSubevent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent"; | ||
| import { MatrixEvent, Poll, PollEvent } from "matrix-js-sdk/src/matrix"; | ||
| import { Relations } from "matrix-js-sdk/src/models/relations"; | ||
|
|
||
| import { Icon as PollIcon } from "../../../../../res/img/element-icons/room/composer/poll.svg"; | ||
| import { _t } from "../../../../languageHandler"; | ||
| import { formatLocalDateShort } from "../../../../DateUtils"; | ||
| import { allVotes, collectUserVotes, countVotes } from "../../messages/MPollBody"; | ||
| import { PollOption } from "../../polls/PollOption"; | ||
| import { Caption } from "../../typography/Caption"; | ||
|
|
||
| interface Props { | ||
| event: MatrixEvent; | ||
| poll: Poll; | ||
| } | ||
|
|
||
| type EndedPollState = { | ||
| winningAnswers: { | ||
| answer: PollAnswerSubevent; | ||
| voteCount: number; | ||
| }[]; | ||
| totalVoteCount: number; | ||
| }; | ||
| const getWinningAnswers = (poll: Poll, responseRelations: Relations): EndedPollState => { | ||
| const userVotes = collectUserVotes(allVotes(responseRelations)); | ||
| const votes = countVotes(userVotes, poll.pollEvent); | ||
| const totalVoteCount = [...votes.values()].reduce((sum, vote) => sum + vote, 0); | ||
| const winCount = Math.max(...votes.values()); | ||
|
|
||
| return { | ||
| totalVoteCount, | ||
| winningAnswers: poll.pollEvent.answers | ||
| .filter((answer) => votes.get(answer.id) === winCount) | ||
| .map((answer) => ({ | ||
| answer, | ||
| voteCount: votes.get(answer.id) || 0, | ||
| })), | ||
| }; | ||
| }; | ||
|
|
||
| /** | ||
| * Get deduplicated and validated poll responses | ||
| * Will use cached responses from Poll instance when existing | ||
| * Updates on changes to Poll responses (paging relations or from sync) | ||
| * Returns winning answers and total vote count | ||
| */ | ||
| const usePollVotes = (poll: Poll): Partial<EndedPollState> => { | ||
| const [results, setResults] = useState({ totalVoteCount: 0 }); | ||
|
|
||
| useEffect(() => { | ||
| const getResponses = async (): Promise<void> => { | ||
| const responseRelations = await poll.getResponses(); | ||
| setResults(getWinningAnswers(poll, responseRelations)); | ||
| }; | ||
| const onPollResponses = (responseRelations: Relations): void => | ||
| setResults(getWinningAnswers(poll, responseRelations)); | ||
| poll.on(PollEvent.Responses, onPollResponses); | ||
|
|
||
| getResponses(); | ||
|
|
||
| return () => { | ||
| poll.off(PollEvent.Responses, onPollResponses); | ||
| }; | ||
| }, [poll]); | ||
|
|
||
| return results; | ||
| }; | ||
|
|
||
| /** | ||
| * Render an ended poll with the winning answer and vote count | ||
| * @param event - the poll start MatrixEvent | ||
| * @param poll - Poll instance | ||
| */ | ||
| export const PollListItemEnded: React.FC<Props> = ({ event, poll }) => { | ||
| const pollEvent = poll.pollEvent; | ||
| const { winningAnswers, totalVoteCount } = usePollVotes(poll); | ||
| if (!pollEvent) { | ||
| return null; | ||
| } | ||
| const formattedDate = formatLocalDateShort(event.getTs()); | ||
|
|
||
| return ( | ||
| <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItemEnded"> | ||
| <div className="mx_PollListItemEnded_title"> | ||
| <PollIcon className="mx_PollListItemEnded_icon" /> | ||
| <span className="mx_PollListItemEnded_question">{pollEvent.question.text}</span> | ||
| <Caption>{formattedDate}</Caption> | ||
| </div> | ||
| {!!winningAnswers?.length && ( | ||
| <div className="mx_PollListItemEnded_answers"> | ||
| {winningAnswers?.map(({ answer, voteCount }) => ( | ||
| <PollOption | ||
| key={answer.id} | ||
| answer={answer} | ||
| voteCount={voteCount} | ||
| totalVoteCount={totalVoteCount!} | ||
| pollId={poll.pollId} | ||
| displayVoteCount | ||
| isChecked | ||
| isEnded | ||
| /> | ||
| ))} | ||
| </div> | ||
| )} | ||
| <div className="mx_PollListItemEnded_voteCount"> | ||
| <Caption>{_t("Final result based on %(count)s votes", { count: totalVoteCount })}</Caption> | ||
| </div> | ||
| </li> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.