✨ Post reactions

2024-05-19 20:30:50 +08:00 · 2024-05-19 20:30:50 +08:00 · 1c7077225e
commit 1c7077225e
parent 803cbd8c4b
10 changed files with 290 additions and 78 deletions
--- a/lib/main.dart
+++ b/lib/main.dart
@ -29,14 +29,8 @@ class SolianApp extends StatelessWidget {
        Get.lazyPut(() => AuthProvider());
      },
      builder: (context, child) {
-        return Overlay(
-          initialEntries: [
-            OverlayEntry(
-              builder: (context) => ScaffoldMessenger(
-                child: child ?? Container(),
-              ),
-            ),
-          ],
+        return ScaffoldMessenger(
+          child: child ?? Container(),
        );
      },
    );
--- a/lib/models/post.dart
+++ b/lib/models/post.dart
@ -24,7 +24,7 @@ class Post {
  Account author;
  int replyCount;
  int reactionCount;
-  dynamic reactionList;
+  Map<String, int> reactionList;

  Post({
    required this.id,
@ -53,54 +53,59 @@ class Post {
  });

  factory Post.fromJson(Map<String, dynamic> json) => Post(
-    id: json["id"],
-    createdAt: DateTime.parse(json["created_at"]),
-    updatedAt: DateTime.parse(json["updated_at"]),
-    deletedAt: json["deleted_at"] != null ? DateTime.parse(json['deleted_at']) : null,
-    alias: json["alias"],
-    content: json["content"],
-    tags: json["tags"],
-    categories: json["categories"],
-    reactions: json["reactions"],
-    replies: json["replies"],
-    attachments: json["attachments"] != null ? List<String>.from(json["attachments"]) : null,
-    replyId: json["reply_id"],
-    repostId: json["repost_id"],
-    realmId: json["realm_id"],
-    replyTo: json["reply_to"] == null ? null : Post.fromJson(json["reply_to"]),
-    repostTo: json["repost_to"],
-    realm: json["realm"],
-    publishedAt: json["published_at"],
-    authorId: json["author_id"],
-    author: Account.fromJson(json["author"]),
-    replyCount: json["reply_count"],
-    reactionCount: json["reaction_count"],
-    reactionList: json["reaction_list"],
-  );
+        id: json["id"],
+        createdAt: DateTime.parse(json["created_at"]),
+        updatedAt: DateTime.parse(json["updated_at"]),
+        deletedAt: json["deleted_at"] != null ? DateTime.parse(json['deleted_at']) : null,
+        alias: json["alias"],
+        content: json["content"],
+        tags: json["tags"],
+        categories: json["categories"],
+        reactions: json["reactions"],
+        replies: json["replies"],
+        attachments: json["attachments"] != null ? List<String>.from(json["attachments"]) : null,
+        replyId: json["reply_id"],
+        repostId: json["repost_id"],
+        realmId: json["realm_id"],
+        replyTo: json["reply_to"] == null ? null : Post.fromJson(json["reply_to"]),
+        repostTo: json["repost_to"],
+        realm: json["realm"],
+        publishedAt: json["published_at"],
+        authorId: json["author_id"],
+        author: Account.fromJson(json["author"]),
+        replyCount: json["reply_count"],
+        reactionCount: json["reaction_count"],
+        reactionList: json["reaction_list"] != null
+            ? json["reaction_list"]
+                .map((key, value) =>
+                    MapEntry(key, int.tryParse(value.toString()) ?? (value is double ? value.toInt() : null)))
+                .cast<String, int>()
+            : {},
+      );

  Map<String, dynamic> toJson() => {
-    "id": id,
-    "created_at": createdAt.toIso8601String(),
-    "updated_at": updatedAt.toIso8601String(),
-    "deleted_at": deletedAt,
-    "alias": alias,
-    "content": content,
-    "tags": tags,
-    "categories": categories,
-    "reactions": reactions,
-    "replies": replies,
-    "attachments": attachments,
-    "reply_id": replyId,
-    "repost_id": repostId,
-    "realm_id": realmId,
-    "reply_to": replyTo?.toJson(),
-    "repost_to": repostTo,
-    "realm": realm,
-    "published_at": publishedAt,
-    "author_id": authorId,
-    "author": author.toJson(),
-    "reply_count": replyCount,
-    "reaction_count": reactionCount,
-    "reaction_list": reactionList,
-  };
-}
+        "id": id,
+        "created_at": createdAt.toIso8601String(),
+        "updated_at": updatedAt.toIso8601String(),
+        "deleted_at": deletedAt,
+        "alias": alias,
+        "content": content,
+        "tags": tags,
+        "categories": categories,
+        "reactions": reactions,
+        "replies": replies,
+        "attachments": attachments,
+        "reply_id": replyId,
+        "repost_id": repostId,
+        "realm_id": realmId,
+        "reply_to": replyTo?.toJson(),
+        "repost_to": repostTo,
+        "realm": realm,
+        "published_at": publishedAt,
+        "author_id": authorId,
+        "author": author.toJson(),
+        "reply_count": replyCount,
+        "reaction_count": reactionCount,
+        "reaction_list": reactionList,
+      };
+}
--- a/lib/models/reaction.dart
+++ b/lib/models/reaction.dart
@ -13,4 +13,26 @@ final Map<String, ReactInfo> reactions = {
  'confuse': ReactInfo(icon: '🧐', attitude: 0),
  'retard': ReactInfo(icon: '🤪', attitude: 0),
  'clap': ReactInfo(icon: '👏', attitude: 1),
+  'heart': ReactInfo(icon: '❤️', attitude: 1),
+  'laugh': ReactInfo(icon: '😂', attitude: 1),
+  'angry': ReactInfo(icon: '😡', attitude: 2),
+  'surprise': ReactInfo(icon: '😲', attitude: 0),
+  'party': ReactInfo(icon: '🎉', attitude: 1),
+  'wink': ReactInfo(icon: '😉', attitude: 1),
+  'scream': ReactInfo(icon: '😱', attitude: 0),
+  'sleep': ReactInfo(icon: '😴', attitude: 0),
+  'thinking': ReactInfo(icon: '🤔', attitude: 0),
+  'blush': ReactInfo(icon: '😊', attitude: 1),
+  'cool': ReactInfo(icon: '😎', attitude: 1),
+  'frown': ReactInfo(icon: '☹️', attitude: 2),
+  'nauseated': ReactInfo(icon: '🤢', attitude: 2),
+  'facepalm': ReactInfo(icon: '🤦', attitude: 0),
+  'shrug': ReactInfo(icon: '🤷', attitude: 0),
+  'joy': ReactInfo(icon: '🤣', attitude: 1),
+  'relieved': ReactInfo(icon: '😌', attitude: 0),
+  'disappointed': ReactInfo(icon: '😞', attitude: 2),
+  'smirk': ReactInfo(icon: '😏', attitude: 1),
+  'astonished': ReactInfo(icon: '😮', attitude: 0),
+  'hug': ReactInfo(icon: '🤗', attitude: 1),
+  'pray': ReactInfo(icon: '🙏', attitude: 1),
 };
--- a/lib/screens/auth/signin.dart
+++ b/lib/screens/auth/signin.dart
@ -29,10 +29,7 @@ class _SignInScreenState extends State<SignInScreen> {
      if (messages.last.contains('risk')) {
        final ticketId = RegExp(r'ticketId=(\d+)').firstMatch(messages.last);
        if (ticketId == null) {
-          Get.showSnackbar(GetSnackBar(
-            title: 'errorHappened'.tr,
-            message: 'requested to multi-factor authenticate, but the ticket id was not found',
-          ));
+          Get.snackbar('errorHappened'.tr, 'Requested to multi-factor authenticate, but the ticket id was not found');
        }
        showDialog(
          context: context,
--- a/lib/screens/auth/signup.dart
+++ b/lib/screens/auth/signup.dart
@ -28,14 +28,14 @@ class _SignUpScreenState extends State<SignUpScreen> {

    final client = GetConnect();
    client.httpClient.baseUrl = ServiceFinder.services['passport'];
-    final res = await client.post('/api/users', {
+    final resp = await client.post('/api/users', {
      'name': username,
      'nick': nickname,
      'email': email,
      'password': password,
    });

-    if (res.statusCode == 200) {
+    if (resp.statusCode == 200) {
      showDialog(
        context: context,
        builder: (context) {
@ -54,10 +54,7 @@ class _SignUpScreenState extends State<SignUpScreen> {
        AppRouter.instance.replaceNamed('auth.sign-in');
      });
    } else {
-      Get.showSnackbar(GetSnackBar(
-        title: 'errorHappened'.tr,
-        message: res.bodyString,
-      ));
+      Get.snackbar('errorHappened'.tr, resp.bodyString!);
    }
  }

--- a/lib/screens/posts/publish.dart
+++ b/lib/screens/posts/publish.dart
@ -34,10 +34,7 @@ class _PostPublishingScreenState extends State<PostPublishingScreen> {
      'content': _contentController.value.text,
    });
    if (resp.statusCode != 200) {
-      Get.showSnackbar(GetSnackBar(
-        title: 'errorHappened'.tr,
-        message: resp.bodyString,
-      ));
+      Get.snackbar('errorHappened'.tr, resp.bodyString!);
    } else {
      AppRouter.instance.pop(resp.body);
    }
--- a/lib/translations.dart
+++ b/lib/translations.dart
@ -29,6 +29,10 @@ class SolianMessages extends Translations {
          'postPublishing': 'Post a post',
          'postIdentityNotify': 'You will post this post as',
          'postContentPlaceholder': 'What\'s happened?!',
+          'postReaction': 'Reactions of the Post',
+          'reactAdd': 'React',
+          'reactCompleted': 'Your reaction has been added',
+          'reactUncompleted': 'Your reaction has been removed'
        },
        'zh_CN': {
          'next': '下一步',
@ -55,6 +59,10 @@ class SolianMessages extends Translations {
          'postPublishing': '发表帖子',
          'postIdentityNotify': '你将会以本身份发表帖子',
          'postContentPlaceholder': '发生什么事了？！',
+          'postReaction': '帖子的反应',
+          'reactAdd': '作出反应',
+          'reactCompleted': '你的反应已被添加',
+          'reactUncompleted': '你的反应已被移除'
        }
      };
 }
--- a/lib/widgets/posts/post_action.dart
+++ b/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),
+          )
+        ],
+      ),
+    );
+  }
+}
--- a/lib/widgets/posts/post_item.dart
+++ b/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,
+        ),
      ],
    );
  }
--- a/lib/widgets/posts/post_reaction.dart
+++ b/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),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}