poll: Support vote/unvote for polls

Visually, the appearence of the polls do not change, except that now
they are clickable.  This does not implement local echoing for voting.
Instead, we rely on the submessage events to get the updates after
voting.

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);
@@ -75,22 +91,30 @@ class _PollWidgetState extends State<PollWidget> {
           crossAxisAlignment: CrossAxisAlignment.baseline,
           textBaseline: localizedTextBaseline(context),
           children: [
-            ConstrainedBox(
-              constraints: const BoxConstraints(minWidth: 44),
-              child: Container(
-                height: 44,
+            OutlinedButton(
+              style: OutlinedButton.styleFrom(
+                minimumSize: const Size.square(44),
+                // The default visual density is platform dependent.
+                // For those whose density defaults to [VisualDensity.compact],
+                // this button would be 8px smaller if we do not override it.
+                //
+                // See also:
+                // * [ThemeData.visualDensity], which provides the default.
+                visualDensity: VisualDensity.standard,
                 // This padding is only in effect
                 // when the vote count has more than one digit.
                 padding: const EdgeInsets.symmetric(horizontal: 15),
-                decoration: BoxDecoration(
-                  color: theme.colorPollVoteCountBackground,
-                  border: Border.all(color: theme.colorPollVoteCountBorder),
+                shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(3)),
-                child: Center(
-                  child: Text(option.voters.length.toString(),
-                    textAlign: TextAlign.center,
-                    style: textStyleBold.copyWith(
-                      color: theme.colorPollVoteCountText, fontSize: 16))))),
+                backgroundColor: theme.colorPollVoteCountBackground,
+                side: BorderSide(color: theme.colorPollVoteCountBorder),
+                splashFactory: NoSplash.splashFactory,
+              ),
+              onPressed: () => _toggleVote(option),
+              child: Text(option.voters.length.toString(),
+                textAlign: TextAlign.center,
+                style: textStyleBold.copyWith(fontSize: 16,
+                  color: theme.colorPollVoteCountText))),
             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 do local echoing 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);
+  });
 }