use Poll model with relations API in poll rendering (#9877)

* 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

* strict fix

* more strict fix

res/css/views/messages/_MPollBody.pcss

@@ -150,8 +150,16 @@ limitations under the License.
     }
 
     .mx_MPollBody_totalVotes {
+        display: flex;
+        flex-direction: inline;
+        justify-content: start;
         color: $secondary-content;
         font-size: $font-12px;
+
+        .mx_Spinner {
+            flex: 0;
+            margin-left: $spacing-8;
+        }
     }
 }
 

src/components/views/context_menus/MessageContextMenu.tsx

@@ -195,7 +195,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         return (
             M_POLL_START.matches(mxEvent.getType()) &&
             this.state.canRedact &&
-            !isPollEnded(mxEvent, MatrixClientPeg.get(), this.props.getRelationsForEvent)
+            !isPollEnded(mxEvent, MatrixClientPeg.get())
         );
     }
 

src/components/views/dialogs/EndPollDialog.tsx

@@ -35,26 +35,34 @@ interface IProps extends IDialogProps {
 }
 
 export default class EndPollDialog extends React.Component<IProps> {
-    private onFinished = (endPoll: boolean): void => {
-        const topAnswer = findTopAnswer(this.props.event, this.props.matrixClient, this.props.getRelationsForEvent);
+    private onFinished = async (endPoll: boolean): Promise<void> => {
+        if (endPoll) {
+            const room = this.props.matrixClient.getRoom(this.props.event.getRoomId());
+            const poll = room?.polls.get(this.props.event.getId()!);
 
-        const message =
-            topAnswer === ""
-                ? _t("The poll has ended. No votes were cast.")
-                : _t("The poll has ended. Top answer: %(topAnswer)s", { topAnswer });
+            if (!poll) {
+                throw new Error("No poll instance found in room.");
+            }
 
-        if (endPoll) {
-            const endEvent = PollEndEvent.from(this.props.event.getId(), message).serialize();
+            try {
+                const responses = await poll.getResponses();
+                const topAnswer = findTopAnswer(this.props.event, responses);
+
+                const message =
+                    topAnswer === ""
+                        ? _t("The poll has ended. No votes were cast.")
+                        : _t("The poll has ended. Top answer: %(topAnswer)s", { topAnswer });
+
+                const endEvent = PollEndEvent.from(this.props.event.getId()!, message).serialize();
 
-            this.props.matrixClient
-                .sendEvent(this.props.event.getRoomId(), endEvent.type, endEvent.content)
-                .catch((e: any) => {
-                    console.error("Failed to submit poll response event:", e);
-                    Modal.createDialog(ErrorDialog, {
-                        title: _t("Failed to end poll"),
-                        description: _t("Sorry, the poll did not end. Please try again."),
-                    });
+                await this.props.matrixClient.sendEvent(this.props.event.getRoomId()!, endEvent.type, endEvent.content);
+            } catch (e) {
+                console.error("Failed to submit poll response event:", e);
+                Modal.createDialog(ErrorDialog, {
+                    title: _t("Failed to end poll"),
+                    description: _t("Sorry, the poll did not end. Please try again."),
                 });
+            }
         }
         this.props.onFinished(endPoll);
     };