poll: Support vote/unvote for polls

Visually, this does not change the appearence of the vote count box.

This does not implement local echoing for voting. Instead, we rely on
the submessage events to get the updates after voting.

For accessbility, the touch target is larger than the button.
See also:
  https://chat.zulip.org/#narrow/stream/48-mobile/topic/Poll.20vote.2Funvote.20UI/near/1952724

We add a TODO for pending poll votes visual indicator.  This would also apply
to emoji reaction pills.
See also:
  #939 (review)

Fixes: #166

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

lib/widgets/content.dart

@@ -266,7 +266,7 @@ class MessageContent extends StatelessWidget {
         style: ContentTheme.of(context).textStylePlainParagraph,
         child: switch (content) {
           ZulipContent() => BlockContentList(nodes: content.nodes),
-          PollContent()  => PollWidget(poll: content.poll),
+          PollContent()  => PollWidget(messageId: message.id, poll: content.poll),
         }));
   }
 }

lib/widgets/poll.dart

@@ -1,14 +1,18 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
 
 import '../api/model/submessage.dart';
+import '../api/route/submessage.dart';
 import 'content.dart';
 import 'store.dart';
 import 'text.dart';
 
 class PollWidget extends StatefulWidget {
-  const PollWidget({super.key, required this.poll});
+  const PollWidget({super.key, required this.messageId, required this.poll});
 
+  final int messageId;
   final Poll poll;
 
   @override
@@ -44,6 +48,16 @@ class _PollWidgetState extends State<PollWidget> {
     });
   }
 
+  void _toggleVote(PollOption option) async {
+    final store = PerAccountStoreWidget.of(context);
+    final op = option.voters.contains(store.selfUserId)
+      ? PollVoteOp.remove
+      : PollVoteOp.add;
+    unawaited(sendSubmessage(store.connection, messageId: widget.messageId,
+      submessageType: SubmessageType.widget,
+      content: PollVoteEventSubmessage(key: option.key, op: op)));
+  }
+
   @override
   Widget build(BuildContext context) {
     const verticalPadding = 2.5;
@@ -74,24 +88,32 @@ class _PollWidgetState extends State<PollWidget> {
         crossAxisAlignment: CrossAxisAlignment.baseline,
         textBaseline: localizedTextBaseline(context),
         children: [
-          ConstrainedBox(
-            constraints: const BoxConstraints(minWidth: 44, minHeight: 44),
-            child: Padding(
-              padding: const EdgeInsetsDirectional.only(
-                end: 5, top: verticalPadding, bottom: verticalPadding),
-              child: Container(
-                // Inner padding preserves whitespace even when the text's
-                // width approaches the button's min-width (e.g. because
-                // there are more than three digits).
-                padding: const EdgeInsets.symmetric(horizontal: 4),
-                decoration: BoxDecoration(
-                  color: theme.colorPollVoteCountBackground,
-                  border: Border.all(color: theme.colorPollVoteCountBorder),
-                  borderRadius: BorderRadius.circular(3)),
-                child: Center(
-                  child: Text(option.voters.length.toString(),
-                    style: textStyleBold.copyWith(
-                      color: theme.colorPollVoteCountText, fontSize: 20)))))),
+          GestureDetector(
+            // TODO: Implement feedback when the user taps the button
+            onTap: () => _toggleVote(option),
+            behavior: HitTestBehavior.translucent,
+            child: ConstrainedBox(
+              constraints: const BoxConstraints(minWidth: 44, minHeight: 44),
+              child: Padding(
+                // For accessibility, the touch target is padded to be larger
+                // than the vote count box.  Still, we avoid padding at the
+                // start because we want to align all the poll options to the
+                // surrounding messages.
+                padding: const EdgeInsetsDirectional.only(
+                  end: 5, top: verticalPadding, bottom: verticalPadding),
+                child: Container(
+                  // Inner padding preserves whitespace even when the text's
+                  // width approaches the button's min-width (e.g. because
+                  // there are more than three digits).
+                  padding: const EdgeInsets.symmetric(horizontal: 4),
+                  decoration: BoxDecoration(
+                    color: theme.colorPollVoteCountBackground,
+                    border: Border.all(color: theme.colorPollVoteCountBorder),
+                    borderRadius: BorderRadius.circular(3)),
+                  child: Center(
+                    child: Text(option.voters.length.toString(),
+                      style: textStyleBold.copyWith(
+                        color: theme.colorPollVoteCountText, fontSize: 20))))))),
           Expanded(
             child: Padding(
               // This and the padding on the vote count box both extend the row

test/widgets/poll_test.dart

@@ -1,4 +1,7 @@
+import 'dart:convert';
+
 import 'package:checks/checks.dart';
+import 'package:http/http.dart' as http;
 import 'package:flutter/widgets.dart';
 import 'package:flutter_checks/flutter_checks.dart';
 import 'package:flutter_test/flutter_test.dart';
@@ -8,6 +11,8 @@ import 'package:zulip/api/model/submessage.dart';
 import 'package:zulip/model/store.dart';
 import 'package:zulip/widgets/poll.dart';
 
+import '../stdlib_checks.dart';
+import '../api/fake_api.dart';
 import '../example_data.dart' as eg;
 import '../model/binding.dart';
 import '../model/test_store.dart';
@@ -17,6 +22,8 @@ void main() {
   TestZulipBinding.ensureInitialized();
 
   late PerAccountStore store;
+  late FakeApiConnection connection;
+  late Message message;
 
   Future<void> preparePollWidget(
     WidgetTester tester,
@@ -28,13 +35,14 @@ void main() {
     await testBinding.globalStore.add(eg.selfAccount, eg.initialSnapshot());
     store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
     await store.addUsers(users ?? [eg.selfUser, eg.otherUser]);
+    connection = store.connection as FakeApiConnection;
 
-    Message message = eg.streamMessage(
+    message = eg.streamMessage(
       sender: eg.selfUser,
       submessages: [eg.submessage(content: submessageContent)]);
     await store.handleEvent(MessageEvent(id: 0, message: message));
     await tester.pumpWidget(TestZulipApp(accountId: eg.selfAccount.id,
-      child: PollWidget(poll: message.poll!)));
+      child: PollWidget(messageId: message.id, poll: message.poll!)));
     await tester.pump();
 
     for (final (voter, idx) in voterIdxPairs) {
@@ -106,4 +114,41 @@ void main() {
       question: 'title', options: []));
     check(findInPoll(find.text('This poll has no options yet.'))).findsOne();
   });
+
+  void checkVoteRequest(PollOptionKey key, PollVoteOp op) {
+    check(connection.takeRequests()).single.isA<http.Request>()
+      ..method.equals('POST')
+      ..url.path.equals('/api/v1/submessage')
+      ..bodyFields.deepEquals({
+        'message_id': jsonEncode(message.id),
+        'msg_type': 'widget',
+        'content': jsonEncode(PollVoteEventSubmessage(key: key, op: op)),
+      });
+  }
+
+  testWidgets('tap to toggle vote', (tester) async {
+    await preparePollWidget(tester, eg.pollWidgetData(
+      question: 'title', options: ['A']), voterIdxPairs: [(eg.otherUser, 0)]);
+    final optionKey = PollEventSubmessage.optionKey(senderId: null, idx: 0);
+
+    // Because eg.selfUser didn't vote for the option, add their vote.
+    connection.prepare(json: {});
+    await tester.tap(findTextAtRow('1', index: 0));
+    await tester.pump(Duration.zero);
+    checkVoteRequest(optionKey, PollVoteOp.add);
+
+    // We don't local echo right now,
+    // so wait to hear from the server to get the poll updated.
+    await store.handleEvent(
+      eg.submessageEvent(message.id, eg.selfUser.userId,
+        content: PollVoteEventSubmessage(key: optionKey, op: PollVoteOp.add)));
+    // Wait for the poll widget rebuild
+    await tester.pump(Duration.zero);
+
+    // Because eg.selfUser did vote for the option, remove their vote.
+    connection.prepare(json: {});
+    await tester.tap(findTextAtRow('2', index: 0));
+    await tester.pump(Duration.zero);
+    checkVoteRequest(optionKey, PollVoteOp.remove);
+  });
 }