From e8231872a97231b3bd052d3e4cb6b734ba463221 Mon Sep 17 00:00:00 2001 From: Anil Karaniya Date: Fri, 15 Mar 2024 18:49:19 +0530 Subject: [PATCH] Improved commments to show the reply on the same --- .../lib/models/public_article_model.dart | 35 +-- .../public_article_canonical.dart | 222 +++++++++++------- .../view/article_discription_appbar.dart | 7 +- 3 files changed, 163 insertions(+), 101 deletions(-) diff --git a/bakliwal_news/lib/models/public_article_model.dart b/bakliwal_news/lib/models/public_article_model.dart index 6758a7c..db294a9 100644 --- a/bakliwal_news/lib/models/public_article_model.dart +++ b/bakliwal_news/lib/models/public_article_model.dart @@ -49,25 +49,28 @@ class PublicComments { }); factory PublicComments.fromJson(Map json) { - List children = []; - List childerenData = json['children']; - for (var element in childerenData) { - children.add( - PublicComments( - commentId: element['id_code'].toString(), - commentBody: element['body_html'].toString(), - createdAt: DateTime.parse(element['created_at'].toString()), - user: PublicUser.fromJson(element['user']), - children: [], - ), - ); + List sortComments(List childerenData) { + List comments = []; + for (var element in childerenData) { + comments.add( + PublicComments( + commentId: element['id_code'].toString(), + commentBody: element['body_html'].toString(), + createdAt: DateTime.parse(element['created_at'].toString()), + user: PublicUser.fromJson(element['user']), + children: sortComments(element['children']), + ), + ); + } + return comments; } + return PublicComments( commentId: json['id_code'].toString(), commentBody: json['body_html'].toString(), createdAt: DateTime.parse(json['created_at'].toString()), user: PublicUser.fromJson(json['user']), - children: children, + children: sortComments(json['children']), ); } } @@ -126,7 +129,7 @@ class PublicArticleCanonicalModel { final DateTime? publishedTimestamp; final String? coverImage; final String? readingTimeMinutes; - final String? tags; + final List? tags; final String? bodyHtml; final PublicUser user; final List comments; @@ -149,6 +152,8 @@ class PublicArticleCanonicalModel { factory PublicArticleCanonicalModel.fromJson( Map json, List comments) { + List tags = []; + tags = json['tag_list'].toString().split(','); return PublicArticleCanonicalModel( articleId: json['id'].toString(), title: json['title'].toString(), @@ -159,7 +164,7 @@ class PublicArticleCanonicalModel { publishedTimestamp: DateTime.parse(json['published_timestamp']), coverImage: json['cover_image'].toString(), readingTimeMinutes: json['reading_time_minutes'].toString(), - tags: json['tag_list'].toString(), + tags: tags, bodyHtml: json['body_html'], user: PublicUser.fromJson(json['user']), comments: comments, diff --git a/bakliwal_news/lib/screens/secondary_screens/public_article_canonical.dart b/bakliwal_news/lib/screens/secondary_screens/public_article_canonical.dart index 72230cf..cccd87e 100644 --- a/bakliwal_news/lib/screens/secondary_screens/public_article_canonical.dart +++ b/bakliwal_news/lib/screens/secondary_screens/public_article_canonical.dart @@ -1,3 +1,5 @@ +import 'dart:math' as math; + // ignore_for_file: use_build_context_synchronously import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; @@ -172,6 +174,34 @@ class MainDescriptionContent extends StatelessWidget { }, ), ), + const SizedBox( + height: 15, + ), + Wrap( + // spacing: 5, + runSpacing: 5, + children: [ + if (newsArticle.tags![0].hashCode != 1) + ...newsArticle.tags!.map((e) { + return Card( + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(8))), + color: const Color.fromARGB(255, 37, 37, 37), + child: Padding( + padding: const EdgeInsets.symmetric( + vertical: 5, horizontal: 10), + child: Text( + "#${e.toString().trim()}", + style: const TextStyle( + color: Color.fromARGB(255, 180, 188, 207), + fontWeight: FontWeight.bold, + ), + ), + ), + ); + }) + ], + ), const SizedBox( height: 25, ), @@ -207,6 +237,7 @@ class MainDescriptionContent extends StatelessWidget { return ArticleComments( comment: comment, newsArticle: newsArticle, + commentReplyPadding: 25, ); }), ], @@ -223,16 +254,49 @@ class ArticleComments extends StatefulWidget { super.key, required this.comment, required this.newsArticle, + required this.commentReplyPadding, }); final PublicComments comment; PublicArticleCanonicalModel newsArticle; + double commentReplyPadding; @override State createState() => _ArticleCommentsState(); } class _ArticleCommentsState extends State { + @override + Widget build(BuildContext context) { + // ignore: avoid_unnecessary_containers + return Container( + child: Column( + children: [ + CommentCard(comment: widget.comment), + if (widget.comment.children.isNotEmpty) + Container( + padding: EdgeInsets.only(left: widget.commentReplyPadding), + child: Column( + children: [ + ...widget.comment.children.map((element) { + return ArticleComments( + comment: element, + newsArticle: widget.newsArticle, + commentReplyPadding: 10, + ); + }).toList(), + ], + ), + ), + ], + ), + ); + } +} + +class CommentCard extends StatelessWidget { + const CommentCard({super.key, required this.comment}); + String _parseHtmlString(String htmlString) { final document = parse(htmlString); final String parsedString = @@ -241,99 +305,93 @@ class _ArticleCommentsState extends State { return parsedString; } + final PublicComments comment; + @override Widget build(BuildContext context) { - // ignore: avoid_unnecessary_containers - return Container( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Container( - height: 40.0, - width: 40.0, - decoration: const BoxDecoration( - color: Colors.blue, - borderRadius: BorderRadius.all( - Radius.circular(7), - ), + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Container( + height: 40.0, + width: 40.0, + decoration: const BoxDecoration( + color: Colors.blue, + borderRadius: BorderRadius.all( + Radius.circular(7), ), - child: widget.comment.user.profileImage == null || - widget.comment.user.profileImage!.isEmpty - ? ClipRRect( - borderRadius: BorderRadius.circular(7), - child: const Image( - fit: BoxFit.cover, - image: AssetImage( - "assets/images/profilePlaceholder.jpeg", - ), + ), + child: comment.user.profileImage == null || + comment.user.profileImage!.isEmpty + ? ClipRRect( + borderRadius: BorderRadius.circular(7), + child: const Image( + fit: BoxFit.cover, + image: AssetImage( + "assets/images/profilePlaceholder.jpeg", ), - ) - : ClipRRect( - borderRadius: BorderRadius.circular(7), - child: Image( - fit: BoxFit.cover, - image: NetworkImage( - widget.comment.user.profileImage!, - ), + ), + ) + : ClipRRect( + borderRadius: BorderRadius.circular(7), + child: Image( + fit: BoxFit.cover, + image: NetworkImage( + comment.user.profileImage!, ), ), - ), - const SizedBox( - width: 10, - ), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - widget.comment.user.username!, - style: const TextStyle(color: Colors.white), - ), - Text( - DateFormat("MMMd").format( - widget.comment.createdAt, - ), - style: TextStyle( - fontSize: 15, - color: Colors.blueGrey[200], ), + ), + const SizedBox( + width: 10, + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + comment.user.username!, + style: const TextStyle(color: Colors.white), + ), + Text( + DateFormat("MMMd").format( + comment.createdAt, ), - ], - ), - ], - ), - ], - ), - Container( - width: double.infinity, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - color: Colors.grey[900], - ), - margin: const EdgeInsets.symmetric(vertical: 10), - padding: const EdgeInsets.all(15), - child: Text( - _parseHtmlString(widget.comment.commentBody).trim(), - style: const TextStyle( - fontSize: 18, - color: Colors.white, - ), + style: TextStyle( + fontSize: 15, + color: Colors.blueGrey[200], + ), + ), + ], + ), + ], ), + ], + ), + Container( + width: double.infinity, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + color: Colors.grey[900], ), - const SizedBox( - height: 10, + margin: const EdgeInsets.symmetric(vertical: 10), + padding: const EdgeInsets.all(15), + child: Text( + _parseHtmlString(comment.commentBody).trim(), + style: const TextStyle( + fontSize: 18, + color: Colors.white, + ), ), - // Row( - // children: [ - // IconButton(onPressed: () {}, icon: const Icon(Icons.add)) - // ], - // ) - ], - ), + ), + const SizedBox( + height: 10, + ), + ], ); } } diff --git a/bakliwal_news/lib/widget/view/article_discription_appbar.dart b/bakliwal_news/lib/widget/view/article_discription_appbar.dart index a454f7d..fd0c71a 100644 --- a/bakliwal_news/lib/widget/view/article_discription_appbar.dart +++ b/bakliwal_news/lib/widget/view/article_discription_appbar.dart @@ -152,7 +152,7 @@ class ArticleDiscriptionAppBar extends StatelessWidget { publicArticle != null ? Row( children: [ - publicArticle!.user.twitterUsername != null + publicArticle!.user.twitterUsername != "null" ? InkWell( onTap: () async { launchUrl( @@ -167,13 +167,12 @@ class ArticleDiscriptionAppBar extends StatelessWidget { ), ) : Container(), - publicArticle!.user.twitterUsername != null + publicArticle!.user.twitterUsername != "null" ? const SizedBox( width: 10, ) : Container(), - publicArticle!.user.githubUsername != null || - publicArticle!.user.githubUsername!.isNotEmpty + publicArticle!.user.githubUsername != "null" ? InkWell( onTap: () async { launchUrl(