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

Fixes: #166

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

Author: PIG208

lib/api/model/submessage.dart

@@ -404,6 +404,9 @@ class Poll extends ChangeNotifier {
   final Set<String> _existingOptionTexts = {};
   final Map<PollOptionKey, PollOption> _options = {};
 
+  bool hasUserVotedFor({required int userId, required PollOptionKey key}) =>
+    _options.containsKey(key) && _options[key]!.voters.contains(userId);
+
   void handleSubmessageEvent(SubmessageEvent event) {
     final PollEventSubmessage? pollEventSubmessage;
     try {

lib/widgets/content.dart

@@ -264,7 +264,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,18 @@ class _PollWidgetState extends State<PollWidget> {
     });
   }
 
+  void _toggleVote(PollOption option) async {
+    final store = PerAccountStoreWidget.of(context);
+    // The poll data in store might be obselete before we get the event
+    // that updates it.  This is fine because the result will be consistent
+    // eventually, regardless of the possible duplicate requests.
+    final op = widget.poll.hasUserVotedFor(userId: store.selfUserId, key: option.key)
+      ? PollVoteOp.remove
+      : PollVoteOp.add;
+    unawaited(sendSubmessage(store.connection, messageId: widget.messageId,
+      content: PollVoteEventSubmessage(key: option.key, op: op)));
+  }
+
   @override
   Widget build(BuildContext context) {
     final zulipLocalizations = ZulipLocalizations.of(context);
@@ -73,25 +89,32 @@ class _PollWidgetState extends State<PollWidget> {
         crossAxisAlignment: CrossAxisAlignment.baseline,
         textBaseline: localizedTextBaseline(context),
         children: [
-          ConstrainedBox(
-            constraints: const BoxConstraints(
-              minWidth: 39 + 5).tighten(height: 39 + verticalPadding * 2),
-            child: Padding(
-              padding: const EdgeInsetsDirectional.only(
-                end: 5, top: verticalPadding, bottom: verticalPadding),
-              child: Container(
-                // This is only in effect
-                // when the vote count has more than 2 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(),
-                    textAlign: TextAlign.center,
-                    style: textStyleBold.copyWith(
-                      color: theme.colorPollVoteCountText, fontSize: 18)))))),
+          GestureDetector(
+            onTap: () => _toggleVote(option),
+            behavior: HitTestBehavior.translucent,
+            child: ConstrainedBox(
+              constraints: const BoxConstraints(
+                minWidth: 39 + 5).tighten(height: 39 + verticalPadding * 2),
+              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(
+                  // This is only in effect
+                  // when the vote count has more than 2 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(),
+                      textAlign: TextAlign.center,
+                      style: textStyleBold.copyWith(
+                        color: theme.colorPollVoteCountText, fontSize: 18))))))),
           Expanded(
             child: Wrap(
               spacing: 5,

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,40 @@ 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.
+    store.handleEvent(
+      eg.submessageEvent(message.id, eg.selfUser.userId,
+        content: PollVoteEventSubmessage(key: optionKey, op: PollVoteOp.add)));
+    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);
+  });
 }