✨ Post reactions

lib/widgets/posts/post_action.dart

@@ -0,0 +1,115 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:solian/models/post.dart';
+import 'package:solian/models/reaction.dart';
+import 'package:solian/providers/auth.dart';
+import 'package:solian/services.dart';
+import 'package:solian/widgets/posts/post_reaction.dart';
+
+class PostQuickAction extends StatefulWidget {
+  final Post item;
+  final void Function(String symbol, int num) onReact;
+
+  const PostQuickAction({super.key, required this.item, required this.onReact});
+
+  @override
+  State<PostQuickAction> createState() => _PostQuickActionState();
+}
+
+class _PostQuickActionState extends State<PostQuickAction> {
+  bool _isSubmitting = false;
+
+  void showReactMenu() {
+    showModalBottomSheet(
+      useRootNavigator: true,
+      isScrollControlled: true,
+      context: context,
+      builder: (context) => PostReactionPopup(
+        item: widget.item,
+        onReact: (key, value) {
+          doWidgetReact(key, value.attitude);
+        },
+      ),
+    );
+  }
+
+  Future<void> doWidgetReact(String symbol, int attitude) async {
+    final AuthProvider auth = Get.find();
+
+    if (_isSubmitting) return;
+    if (!await auth.isAuthorized) return;
+
+    final client = GetConnect();
+    client.httpClient.baseUrl = ServiceFinder.services['interactive'];
+    client.httpClient.addAuthenticator(auth.reqAuthenticator);
+
+    setState(() => _isSubmitting = true);
+
+    final resp = await client.post('/api/posts/${widget.item.alias}/react', {
+      'symbol': symbol,
+      'attitude': attitude,
+    });
+    if (resp.statusCode == 201) {
+      widget.onReact(symbol, 1);
+      Get.snackbar('', 'reactCompleted'.tr);
+    } else if (resp.statusCode == 204) {
+      widget.onReact(symbol, -1);
+      Get.snackbar('', 'reactUncompleted'.tr);
+    } else {
+      Get.snackbar('errorHappened'.tr, resp.bodyString!);
+    }
+
+    setState(() => _isSubmitting = false);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    const density = VisualDensity(horizontal: -4, vertical: -3);
+
+    return SizedBox(
+      height: 32,
+      width: double.infinity,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          ActionChip(
+            avatar: const Icon(Icons.comment),
+            label: Text(widget.item.replyCount.toString()),
+            visualDensity: density,
+            onPressed: () {},
+          ),
+          const VerticalDivider(thickness: 0.3, width: 0.3, indent: 8, endIndent: 8).paddingOnly(left: 8),
+          Expanded(
+            child: ListView(
+              shrinkWrap: true,
+              scrollDirection: Axis.horizontal,
+              children: [
+                ...widget.item.reactionList.entries.map((x) {
+                  final info = reactions[x.key];
+                  return Padding(
+                    padding: const EdgeInsets.only(right: 8),
+                    child: ActionChip(
+                      avatar: Text(info!.icon),
+                      label: Text(x.value.toString()),
+                      tooltip: ':${x.key}:',
+                      visualDensity: density,
+                      onPressed: _isSubmitting ? null : () => doWidgetReact(x.key, info.attitude),
+                    ),
+                  );
+                }),
+                ActionChip(
+                  avatar: const Icon(Icons.add_reaction, color: Colors.teal),
+                  label: Text('reactAdd'.tr),
+                  visualDensity: density,
+                  onPressed: () => showReactMenu(),
+                ),
+              ],
+            ).paddingOnly(left: 8),
+          )
+        ],
+      ),
+    );
+  }
+}

lib/widgets/posts/post_item.dart

@@ -5,6 +5,7 @@ import 'package:get/get_utils/get_utils.dart';
 import 'package:solian/models/post.dart';
 import 'package:solian/widgets/account/account_avatar.dart';
 import 'package:solian/widgets/attachments/attachment_list.dart';
+import 'package:solian/widgets/posts/post_action.dart';
 import 'package:timeago/timeago.dart' show format;
 
 class PostItem extends StatefulWidget {
@@ -17,30 +18,40 @@ class PostItem extends StatefulWidget {
 }
 
 class _PostItemState extends State<PostItem> {
+  late final Post item;
+
+  @override
+  void initState() {
+    item = widget.item;
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
+    final hasAttachment = item.attachments?.isNotEmpty ?? false;
+
     return Column(
       children: [
         Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            AccountAvatar(content: widget.item.author.avatar),
+            AccountAvatar(content: item.author.avatar),
             Expanded(
               child: Column(
                 children: [
                   Row(
                     children: [
                       Text(
-                        widget.item.author.nick,
+                        item.author.nick,
                         style: const TextStyle(fontWeight: FontWeight.bold),
                       ).paddingOnly(left: 12),
-                      Text(format(widget.item.createdAt, locale: 'en_short')).paddingOnly(left: 4),
+                      Text(format(item.createdAt, locale: 'en_short')).paddingOnly(left: 4),
                     ],
                   ),
                   Markdown(
                     shrinkWrap: true,
                     physics: const NeverScrollableScrollPhysics(),
-                    data: widget.item.content,
+                    data: item.content,
                     padding: const EdgeInsets.all(0),
                   ).paddingOnly(left: 12, right: 8),
                 ],
@@ -49,11 +60,24 @@ class _PostItemState extends State<PostItem> {
           ],
         ).paddingOnly(
           top: 18,
-          bottom: (widget.item.attachments?.isNotEmpty ?? false) ? 10 : 18,
+          bottom: hasAttachment ? 10 : 0,
           right: 16,
           left: 16,
         ),
-        AttachmentList(attachmentsId: widget.item.attachments ?? List.empty()),
+        AttachmentList(attachmentsId: item.attachments ?? List.empty()),
+        PostQuickAction(
+          item: widget.item,
+          onReact: (symbol, changes) {
+            setState(() {
+              item.reactionList[symbol] = (item.reactionList[symbol] ?? 0) + changes;
+            });
+          },
+        ).paddingOnly(
+          top: hasAttachment ? 10 : 6,
+          left: hasAttachment ? 16 : 60,
+          right: 16,
+          bottom: 10,
+        ),
       ],
     );
   }

lib/widgets/posts/post_reaction.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:solian/models/post.dart';
+import 'package:solian/models/reaction.dart';
+
+class PostReactionPopup extends StatelessWidget {
+  final Post item;
+  final void Function(String key, ReactInfo info) onReact;
+
+  const PostReactionPopup({super.key, required this.item, required this.onReact});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: MediaQuery.of(context).size.height * 0.85,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            'postReaction'.tr,
+            style: Theme.of(context).textTheme.headlineSmall,
+          ).paddingOnly(left: 24, right: 24, top: 32, bottom: 16),
+          Expanded(
+            child: SingleChildScrollView(
+              child: Wrap(
+                runSpacing: 4.0,
+                spacing: 8.0,
+                children: reactions.entries.map((e) {
+                  return ActionChip(
+                    avatar: Text(e.value.icon),
+                    label: Row(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Text(e.key, style: const TextStyle(fontFamily: 'monospace')),
+                        const SizedBox(width: 6),
+                        Text('x${item.reactionList[e.key]?.toString() ?? '0'}',
+                            style: const TextStyle(fontWeight: FontWeight.bold)),
+                      ],
+                    ),
+                    onPressed: () {
+                      onReact(e.key, e.value);
+                      Navigator.pop(context);
+                    },
+                  );
+                }).toList(),
+              ).paddingSymmetric(horizontal: 24),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}