feat: implement like/unlike and refactor posts
This commit is contained in:
parent
037bdf64b8
commit
e4ab34b97f
@ -30,6 +30,7 @@ class Post {
|
||||
final int likes;
|
||||
final int comments;
|
||||
final DateTime creationDate;
|
||||
final bool liked;
|
||||
|
||||
Post({
|
||||
required this.id,
|
||||
@ -39,6 +40,7 @@ class Post {
|
||||
required this.likes,
|
||||
required this.comments,
|
||||
required this.creationDate,
|
||||
this.liked = false,
|
||||
});
|
||||
|
||||
factory Post.fromJson(Map<String, dynamic> json) {
|
||||
@ -50,6 +52,7 @@ class Post {
|
||||
likes: int.tryParse(json['likes']?.toString() ?? '0') ?? 0,
|
||||
comments: int.tryParse(json['comments']?.toString() ?? '0') ?? 0,
|
||||
creationDate: DateTime.parse(json['creationDate'] ?? DateTime.now().toIso8601String()),
|
||||
liked: json['liked'] == true,
|
||||
);
|
||||
}
|
||||
|
||||
@ -62,8 +65,31 @@ class Post {
|
||||
'likes': likes,
|
||||
'comments': comments,
|
||||
'creationDate': creationDate.toIso8601String(),
|
||||
'liked': liked,
|
||||
};
|
||||
}
|
||||
|
||||
Post copyWith({
|
||||
String? id,
|
||||
String? creatorId,
|
||||
PostCreator? creator,
|
||||
String? body,
|
||||
int? likes,
|
||||
int? comments,
|
||||
DateTime? creationDate,
|
||||
bool? liked,
|
||||
}) {
|
||||
return Post(
|
||||
id: id ?? this.id,
|
||||
creatorId: creatorId ?? this.creatorId,
|
||||
creator: creator ?? this.creator,
|
||||
body: body ?? this.body,
|
||||
likes: likes ?? this.likes,
|
||||
comments: comments ?? this.comments,
|
||||
creationDate: creationDate ?? this.creationDate,
|
||||
liked: liked ?? this.liked,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class CreatePostRequest {
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:share_plus/share_plus.dart';
|
||||
import '../create_post_screen.dart';
|
||||
import '../../services/post_service.dart';
|
||||
import '../../models/post_models.dart';
|
||||
import '../../utils/invitation_utils.dart';
|
||||
import '../../widgets/posts_list.dart';
|
||||
|
||||
class FeedPage extends StatefulWidget {
|
||||
@override
|
||||
@ -11,98 +9,8 @@ class FeedPage extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _FeedPageState extends State<FeedPage> {
|
||||
bool _isRefreshing = false;
|
||||
bool _isLoading = true;
|
||||
List<Post> _posts = [];
|
||||
String _errorMessage = '';
|
||||
final GlobalKey<PostsListState> _postsListKey = GlobalKey<PostsListState>();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_loadPosts();
|
||||
}
|
||||
|
||||
Future<void> _loadPosts() async {
|
||||
setState(() {
|
||||
_isLoading = true;
|
||||
_errorMessage = '';
|
||||
});
|
||||
|
||||
try {
|
||||
final result = await PostService.getAllPosts();
|
||||
setState(() {
|
||||
if (result['success']) {
|
||||
_posts = result['posts'];
|
||||
} else {
|
||||
_errorMessage = result['message'] ?? 'Failed to load posts';
|
||||
}
|
||||
_isLoading = false;
|
||||
});
|
||||
} catch (e) {
|
||||
setState(() {
|
||||
_errorMessage = 'Network error: $e';
|
||||
_isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
final List<Map<String, dynamic>> mockPosts = [
|
||||
{
|
||||
'id': '1',
|
||||
'user': {
|
||||
'displayName': 'Abu Khalid (Aqeel)',
|
||||
'avatar': 'A',
|
||||
'avatar_color': Color(0xFF32B0A5),
|
||||
},
|
||||
'content': 'Free hasawi khalas dates! Drop by my office to grab some 😉',
|
||||
'timestamp': '42 minutes ago',
|
||||
'likes': 12,
|
||||
'comments': 3,
|
||||
'isLiked': false,
|
||||
},
|
||||
{
|
||||
'id': '2',
|
||||
'user': {
|
||||
'displayName': 'Sarah Khalid',
|
||||
'avatar': 'S',
|
||||
'avatar_color': Color(0xFF4600B9),
|
||||
},
|
||||
'content':
|
||||
'Alhamdulillah, I am happy to tell you I have been blessed with a baby ❤️',
|
||||
'timestamp': '4 hours ago',
|
||||
'likes': 28,
|
||||
'comments': 7,
|
||||
'isLiked': true,
|
||||
},
|
||||
{
|
||||
'id': '3',
|
||||
'user': {
|
||||
'displayName': 'Omar Hassan',
|
||||
'avatar': 'O',
|
||||
'avatar_color': Color(0xFF6A4C93),
|
||||
},
|
||||
'content':
|
||||
'The sunset view from my balcony tonight is absolutely breathtaking. Sometimes you just need to pause and appreciate the beauty around us.',
|
||||
'timestamp': '1 day ago',
|
||||
'likes': 45,
|
||||
'comments': 12,
|
||||
'isLiked': false,
|
||||
},
|
||||
{
|
||||
'id': '4',
|
||||
'user': {
|
||||
'displayName': 'Fatima Al-Zahra',
|
||||
'avatar': 'F',
|
||||
'avatar_color': Color(0xFF32B0A5),
|
||||
},
|
||||
'content':
|
||||
'Finished reading an incredible book today. "The Seven Habits of Highly Effective People" - highly recommend it to anyone looking for personal development!',
|
||||
'timestamp': '2 days ago',
|
||||
'likes': 19,
|
||||
'comments': 5,
|
||||
'isLiked': true,
|
||||
},
|
||||
];
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@ -119,15 +27,18 @@ class _FeedPageState extends State<FeedPage> {
|
||||
automaticallyImplyLeading: false,
|
||||
actions: [
|
||||
IconButton(
|
||||
onPressed: _loadPosts,
|
||||
onPressed: () => _postsListKey.currentState?.refreshPosts(),
|
||||
icon: Icon(Icons.refresh),
|
||||
tooltip: 'Refresh',
|
||||
),
|
||||
],
|
||||
),
|
||||
body: RefreshIndicator(
|
||||
onRefresh: _refreshFeed,
|
||||
child: _buildBody(),
|
||||
body: PostsList(
|
||||
key: _postsListKey,
|
||||
fetchPosts: PostService.getAllPosts,
|
||||
emptyStateTitle: 'Nothing here..',
|
||||
emptyStateSubtitle: 'Create the first post!',
|
||||
showRefreshIndicator: true,
|
||||
),
|
||||
floatingActionButton: FloatingActionButton(
|
||||
onPressed: _navigateToCreatePost,
|
||||
@ -137,101 +48,6 @@ class _FeedPageState extends State<FeedPage> {
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBody() {
|
||||
if (_isLoading) {
|
||||
return Center(
|
||||
child: CircularProgressIndicator(
|
||||
valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF6A4C93)),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (_errorMessage.isNotEmpty) {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline,
|
||||
size: 64,
|
||||
color: Colors.grey[400],
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
Text(
|
||||
_errorMessage,
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
color: Colors.grey[600],
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
ElevatedButton(
|
||||
onPressed: _loadPosts,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Color(0xFF6A4C93),
|
||||
foregroundColor: Colors.white,
|
||||
),
|
||||
child: Text('Try Again'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (_posts.isEmpty) {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.post_add,
|
||||
size: 64,
|
||||
color: Colors.grey[400],
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
Text(
|
||||
'Nothing here..',
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.grey[600],
|
||||
),
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Text(
|
||||
'Create the first post!',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.grey[500],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return ListView.builder(
|
||||
padding: EdgeInsets.symmetric(vertical: 8),
|
||||
itemCount: _posts.length,
|
||||
itemBuilder: (context, index) {
|
||||
return PostCard(
|
||||
post: _posts[index],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _refreshFeed() async {
|
||||
await _loadPosts();
|
||||
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text('Feed refreshed!'),
|
||||
backgroundColor: Color(0xFF6A4C93),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _navigateToCreatePost() async {
|
||||
final result = await Navigator.push(
|
||||
@ -241,180 +57,8 @@ class _FeedPageState extends State<FeedPage> {
|
||||
|
||||
// If post was created successfully, refresh the feed
|
||||
if (result == true) {
|
||||
_loadPosts();
|
||||
_postsListKey.currentState?.refreshPosts();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class PostCard extends StatefulWidget {
|
||||
final Post post;
|
||||
|
||||
const PostCard({Key? key, required this.post})
|
||||
: super(key: key);
|
||||
|
||||
@override
|
||||
_PostCardState createState() => _PostCardState();
|
||||
}
|
||||
|
||||
class _PostCardState extends State<PostCard> {
|
||||
Color _getAvatarColor(String displayName) {
|
||||
final colors = [
|
||||
Color(0xFF32B0A5),
|
||||
Color(0xFF4600B9),
|
||||
Color(0xFF6A4C93),
|
||||
Color(0xFFFF6347),
|
||||
Color(0xFF32CD32),
|
||||
Color(0xFF9932CC),
|
||||
];
|
||||
|
||||
int hash = displayName.hashCode;
|
||||
return colors[hash.abs() % colors.length];
|
||||
}
|
||||
|
||||
String _getAvatarLetter(String displayName) {
|
||||
return displayName.isNotEmpty ? displayName[0].toUpperCase() : '?';
|
||||
}
|
||||
|
||||
void _sharePost(Post post) {
|
||||
final shareText = '${post.creator.displayName} posted on Wesal.online:\n\n${post.body}';
|
||||
Share.share(shareText);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final creator = widget.post.creator;
|
||||
final avatarColor = _getAvatarColor(creator.displayName);
|
||||
final avatarLetter = _getAvatarLetter(creator.displayName);
|
||||
final relativeTime = InvitationUtils.getRelativeTime(widget.post.creationDate);
|
||||
|
||||
return Container(
|
||||
margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.05),
|
||||
blurRadius: 10,
|
||||
offset: Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 20,
|
||||
backgroundColor: avatarColor,
|
||||
child: Text(
|
||||
avatarLetter,
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
creator.displayName,
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 16,
|
||||
color: Colors.black87,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 2),
|
||||
Text(
|
||||
relativeTime,
|
||||
style: TextStyle(color: Colors.grey[600], fontSize: 12),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text('More options pressed')),
|
||||
);
|
||||
},
|
||||
icon: Icon(Icons.more_horiz, color: Colors.grey[600]),
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 12),
|
||||
Text(
|
||||
widget.post.body,
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
height: 1.4,
|
||||
color: Colors.black87,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
Row(
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text('Like feature coming soon!')),
|
||||
);
|
||||
},
|
||||
icon: Icon(
|
||||
Icons.favorite_border,
|
||||
color: Colors.grey[600],
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'${widget.post.likes}',
|
||||
style: TextStyle(
|
||||
color: Colors.grey[700],
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
SizedBox(width: 16),
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text('Comments feature coming soon!')),
|
||||
);
|
||||
},
|
||||
icon: Icon(
|
||||
Icons.chat_bubble_outline,
|
||||
color: Colors.grey[600],
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'${widget.post.comments}',
|
||||
style: TextStyle(
|
||||
color: Colors.grey[700],
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
Spacer(),
|
||||
IconButton(
|
||||
onPressed: () => _sharePost(widget.post),
|
||||
icon: Icon(
|
||||
Icons.share_outlined,
|
||||
color: Colors.grey[600],
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,6 +5,7 @@ import '../../services/user_service.dart';
|
||||
import '../../services/auth_service.dart';
|
||||
import '../../services/post_service.dart';
|
||||
import '../../models/post_models.dart';
|
||||
import '../../widgets/posts_list.dart';
|
||||
|
||||
class ProfilePage extends StatefulWidget {
|
||||
@override
|
||||
@ -17,16 +18,15 @@ class _ProfilePageState extends State<ProfilePage> {
|
||||
bool isLoading = false;
|
||||
Map<String, dynamic>? userData;
|
||||
bool isLoadingUser = true;
|
||||
List<Post> userPosts = [];
|
||||
bool isLoadingPosts = true;
|
||||
int totalLikes = 0;
|
||||
int totalPosts = 0;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_loadFCMToken();
|
||||
_loadUserData();
|
||||
_loadUserPosts();
|
||||
_loadUserStats();
|
||||
}
|
||||
|
||||
@override
|
||||
@ -74,22 +74,17 @@ class _ProfilePageState extends State<ProfilePage> {
|
||||
});
|
||||
}
|
||||
|
||||
Future<void> _loadUserPosts() async {
|
||||
setState(() {
|
||||
isLoadingPosts = true;
|
||||
});
|
||||
|
||||
Future<void> _loadUserStats() async {
|
||||
final result = await PostService.getUserPosts();
|
||||
|
||||
setState(() {
|
||||
isLoadingPosts = false;
|
||||
if (result['success'] == true) {
|
||||
userPosts = result['posts'] as List<Post>;
|
||||
totalLikes = userPosts.fold(0, (sum, post) => sum + post.likes);
|
||||
final posts = result['posts'] as List<Post>;
|
||||
totalPosts = posts.length;
|
||||
totalLikes = posts.fold(0, (sum, post) => sum + post.likes);
|
||||
} else {
|
||||
userPosts = [];
|
||||
totalPosts = 0;
|
||||
totalLikes = 0;
|
||||
_showErrorAlert(result['message'] ?? 'Failed to load posts');
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -128,21 +123,6 @@ class _ProfilePageState extends State<ProfilePage> {
|
||||
).push(MaterialPageRoute(builder: (context) => SettingsPage()));
|
||||
}
|
||||
|
||||
String _formatTimestamp(DateTime dateTime) {
|
||||
final now = DateTime.now();
|
||||
final difference = now.difference(dateTime);
|
||||
|
||||
if (difference.inDays > 0) {
|
||||
return '${difference.inDays}d ago';
|
||||
} else if (difference.inHours > 0) {
|
||||
return '${difference.inHours}h ago';
|
||||
} else if (difference.inMinutes > 0) {
|
||||
return '${difference.inMinutes}m ago';
|
||||
} else {
|
||||
return 'Just now';
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
@ -234,7 +214,7 @@ class _ProfilePageState extends State<ProfilePage> {
|
||||
Column(
|
||||
children: [
|
||||
Text(
|
||||
'${userPosts.length}',
|
||||
'$totalPosts',
|
||||
style: TextStyle(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.bold,
|
||||
@ -281,169 +261,16 @@ class _ProfilePageState extends State<ProfilePage> {
|
||||
margin: EdgeInsets.symmetric(horizontal: 16),
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
if (isLoadingPosts)
|
||||
Container(
|
||||
padding: EdgeInsets.all(32),
|
||||
child: Center(
|
||||
child: CircularProgressIndicator(
|
||||
valueColor: AlwaysStoppedAnimation<Color>(
|
||||
Color(0xFF6A4C93),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
else if (userPosts.isEmpty)
|
||||
Container(
|
||||
padding: EdgeInsets.all(32),
|
||||
child: Center(
|
||||
child: Column(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.post_add,
|
||||
size: 64,
|
||||
color: Colors.grey[400],
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
Text(
|
||||
'No posts yet',
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
color: Colors.grey[600],
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Text(
|
||||
'Start sharing your thoughts!',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.grey[500],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
else
|
||||
ListView.builder(
|
||||
shrinkWrap: true,
|
||||
physics: NeverScrollableScrollPhysics(),
|
||||
padding: EdgeInsets.symmetric(horizontal: 16),
|
||||
itemCount: userPosts.length,
|
||||
itemBuilder: (context, index) {
|
||||
final post = userPosts[index];
|
||||
return Container(
|
||||
margin: EdgeInsets.only(bottom: 16),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.05),
|
||||
blurRadius: 10,
|
||||
offset: Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 16,
|
||||
backgroundColor: Color(0xFF6A4C93),
|
||||
child: Text(
|
||||
post.creator.displayName.isNotEmpty
|
||||
? post.creator.displayName
|
||||
.substring(0, 1)
|
||||
.toUpperCase()
|
||||
: 'U',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
post.creator.displayName.isNotEmpty
|
||||
? post.creator.displayName
|
||||
: 'Unknown User',
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
color: Colors.black87,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
_formatTimestamp(post.creationDate),
|
||||
style: TextStyle(
|
||||
color: Colors.grey[600],
|
||||
fontSize: 12,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 12),
|
||||
Text(
|
||||
post.body,
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
height: 1.4,
|
||||
color: Colors.black87,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 12),
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.favorite_border,
|
||||
color: Colors.grey[600],
|
||||
size: 20,
|
||||
),
|
||||
SizedBox(width: 4),
|
||||
Text(
|
||||
'${post.likes}',
|
||||
style: TextStyle(
|
||||
color: Colors.grey[700],
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
SizedBox(width: 16),
|
||||
Icon(
|
||||
Icons.chat_bubble_outline,
|
||||
color: Colors.grey[600],
|
||||
size: 20,
|
||||
),
|
||||
SizedBox(width: 4),
|
||||
Text(
|
||||
'${post.comments}',
|
||||
style: TextStyle(
|
||||
color: Colors.grey[700],
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
ProfilePostsList(
|
||||
fetchPosts: PostService.getUserPosts,
|
||||
onStatsUpdate: (posts, likes) {
|
||||
setState(() {
|
||||
totalPosts = posts;
|
||||
totalLikes = likes;
|
||||
});
|
||||
},
|
||||
),
|
||||
],
|
||||
SizedBox(height: 24),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
@ -95,4 +95,64 @@ class PostService {
|
||||
return {'success': false, 'message': 'Network error: $e', 'post': null};
|
||||
}
|
||||
}
|
||||
|
||||
static Future<Map<String, dynamic>> likePost(String postId) async {
|
||||
try {
|
||||
final response = await HttpService.post(
|
||||
'/posts/like',
|
||||
{'postId': postId},
|
||||
);
|
||||
|
||||
final responseData = jsonDecode(response.body);
|
||||
|
||||
if (response.statusCode == 200) {
|
||||
return {
|
||||
'success': responseData['status'] ?? false,
|
||||
'message': responseData['message'] ?? '',
|
||||
'post': responseData['data'] != null
|
||||
? Post.fromJson(responseData['data'])
|
||||
: null,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
'success': false,
|
||||
'message': responseData['message'] ?? 'Failed to like post',
|
||||
'post': null,
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
print('Error liking post: $e');
|
||||
return {'success': false, 'message': 'Network error: $e', 'post': null};
|
||||
}
|
||||
}
|
||||
|
||||
static Future<Map<String, dynamic>> unlikePost(String postId) async {
|
||||
try {
|
||||
final response = await HttpService.post(
|
||||
'/posts/unlike',
|
||||
{'postId': postId},
|
||||
);
|
||||
|
||||
final responseData = jsonDecode(response.body);
|
||||
|
||||
if (response.statusCode == 200) {
|
||||
return {
|
||||
'success': responseData['status'] ?? false,
|
||||
'message': responseData['message'] ?? '',
|
||||
'post': responseData['data'] != null
|
||||
? Post.fromJson(responseData['data'])
|
||||
: null,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
'success': false,
|
||||
'message': responseData['message'] ?? 'Failed to unlike post',
|
||||
'post': null,
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
print('Error unliking post: $e');
|
||||
return {'success': false, 'message': 'Network error: $e', 'post': null};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
577
frontend/lib/widgets/posts_list.dart
Normal file
577
frontend/lib/widgets/posts_list.dart
Normal file
@ -0,0 +1,577 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:share_plus/share_plus.dart';
|
||||
import '../models/post_models.dart';
|
||||
import '../services/post_service.dart';
|
||||
import '../utils/invitation_utils.dart';
|
||||
|
||||
class PostsList extends StatefulWidget {
|
||||
final Future<Map<String, dynamic>> Function() fetchPosts;
|
||||
final String emptyStateTitle;
|
||||
final String emptyStateSubtitle;
|
||||
final bool showRefreshIndicator;
|
||||
final Widget? floatingActionButton;
|
||||
|
||||
const PostsList({
|
||||
Key? key,
|
||||
required this.fetchPosts,
|
||||
this.emptyStateTitle = 'Nothing here..',
|
||||
this.emptyStateSubtitle = 'Create the first post!',
|
||||
this.showRefreshIndicator = true,
|
||||
this.floatingActionButton,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
PostsListState createState() => PostsListState();
|
||||
}
|
||||
|
||||
class PostsListState extends State<PostsList> {
|
||||
bool _isLoading = true;
|
||||
List<Post> _posts = [];
|
||||
String _errorMessage = '';
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_loadPosts();
|
||||
}
|
||||
|
||||
Future<void> _loadPosts() async {
|
||||
setState(() {
|
||||
_isLoading = true;
|
||||
_errorMessage = '';
|
||||
});
|
||||
|
||||
try {
|
||||
final result = await widget.fetchPosts();
|
||||
setState(() {
|
||||
if (result['success']) {
|
||||
_posts = result['posts'];
|
||||
} else {
|
||||
_errorMessage = result['message'] ?? 'Failed to load posts';
|
||||
}
|
||||
_isLoading = false;
|
||||
});
|
||||
} catch (e) {
|
||||
setState(() {
|
||||
_errorMessage = 'Network error: $e';
|
||||
_isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _refreshPosts() async {
|
||||
await _loadPosts();
|
||||
|
||||
if (widget.showRefreshIndicator) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text('Posts refreshed!'),
|
||||
backgroundColor: Color(0xFF6A4C93),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
Widget body = _buildBody();
|
||||
|
||||
if (widget.showRefreshIndicator) {
|
||||
body = RefreshIndicator(
|
||||
onRefresh: _refreshPosts,
|
||||
child: body,
|
||||
);
|
||||
}
|
||||
|
||||
return body;
|
||||
}
|
||||
|
||||
Widget _buildBody() {
|
||||
if (_isLoading) {
|
||||
return Center(
|
||||
child: CircularProgressIndicator(
|
||||
valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF6A4C93)),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (_errorMessage.isNotEmpty) {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline,
|
||||
size: 64,
|
||||
color: Colors.grey[400],
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
Text(
|
||||
_errorMessage,
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
color: Colors.grey[600],
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
ElevatedButton(
|
||||
onPressed: _loadPosts,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Color(0xFF6A4C93),
|
||||
foregroundColor: Colors.white,
|
||||
),
|
||||
child: Text('Try Again'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (_posts.isEmpty) {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.post_add,
|
||||
size: 64,
|
||||
color: Colors.grey[400],
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
Text(
|
||||
widget.emptyStateTitle,
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.grey[600],
|
||||
),
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Text(
|
||||
widget.emptyStateSubtitle,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.grey[500],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return ListView.builder(
|
||||
padding: EdgeInsets.symmetric(vertical: 8),
|
||||
itemCount: _posts.length,
|
||||
itemBuilder: (context, index) {
|
||||
return PostCard(
|
||||
post: _posts[index],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
void refreshPosts() {
|
||||
_loadPosts();
|
||||
}
|
||||
}
|
||||
|
||||
class PostCard extends StatefulWidget {
|
||||
final Post post;
|
||||
|
||||
const PostCard({Key? key, required this.post})
|
||||
: super(key: key);
|
||||
|
||||
@override
|
||||
_PostCardState createState() => _PostCardState();
|
||||
}
|
||||
|
||||
class _PostCardState extends State<PostCard> {
|
||||
late Post _currentPost;
|
||||
bool _isLiking = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_currentPost = widget.post;
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(PostCard oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
// Update current post if the widget's post changed
|
||||
if (oldWidget.post.id != widget.post.id) {
|
||||
_currentPost = widget.post;
|
||||
}
|
||||
}
|
||||
|
||||
Color _getAvatarColor(String displayName) {
|
||||
final colors = [
|
||||
Color(0xFF32B0A5),
|
||||
Color(0xFF4600B9),
|
||||
Color(0xFF6A4C93),
|
||||
Color(0xFFFF6347),
|
||||
Color(0xFF32CD32),
|
||||
Color(0xFF9932CC),
|
||||
];
|
||||
|
||||
int hash = displayName.hashCode;
|
||||
return colors[hash.abs() % colors.length];
|
||||
}
|
||||
|
||||
String _getAvatarLetter(String displayName) {
|
||||
return displayName.isNotEmpty ? displayName[0].toUpperCase() : '?';
|
||||
}
|
||||
|
||||
void _sharePost(Post post) {
|
||||
final shareText = '${post.creator.displayName} posted on Wesal.online:\n\n${post.body}';
|
||||
Share.share(shareText);
|
||||
}
|
||||
|
||||
Future<void> _toggleLike() async {
|
||||
if (_isLiking) return; // Prevent multiple simultaneous requests
|
||||
|
||||
setState(() {
|
||||
_isLiking = true;
|
||||
// Optimistic update - immediately change UI
|
||||
_currentPost = _currentPost.copyWith(
|
||||
liked: !_currentPost.liked,
|
||||
likes: _currentPost.liked ? _currentPost.likes - 1 : _currentPost.likes + 1,
|
||||
);
|
||||
});
|
||||
|
||||
try {
|
||||
Map<String, dynamic> result;
|
||||
if (widget.post.liked) {
|
||||
result = await PostService.unlikePost(widget.post.id);
|
||||
} else {
|
||||
result = await PostService.likePost(widget.post.id);
|
||||
}
|
||||
|
||||
if (result['success'] && result['post'] != null) {
|
||||
// Update with server response
|
||||
setState(() {
|
||||
_currentPost = result['post'];
|
||||
_isLiking = false;
|
||||
});
|
||||
} else {
|
||||
// Revert optimistic update on failure
|
||||
setState(() {
|
||||
_currentPost = widget.post;
|
||||
_isLiking = false;
|
||||
});
|
||||
|
||||
// Show error message
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(result['message'] ?? 'Failed to update like'),
|
||||
backgroundColor: Colors.red,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// Revert optimistic update on error
|
||||
setState(() {
|
||||
_currentPost = widget.post;
|
||||
_isLiking = false;
|
||||
});
|
||||
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text('Network error occurred'),
|
||||
backgroundColor: Colors.red,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final creator = _currentPost.creator;
|
||||
final avatarColor = _getAvatarColor(creator.displayName);
|
||||
final avatarLetter = _getAvatarLetter(creator.displayName);
|
||||
final relativeTime = InvitationUtils.getRelativeTime(_currentPost.creationDate);
|
||||
|
||||
return Container(
|
||||
margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.05),
|
||||
blurRadius: 10,
|
||||
offset: Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 20,
|
||||
backgroundColor: avatarColor,
|
||||
child: Text(
|
||||
avatarLetter,
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
creator.displayName,
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 16,
|
||||
color: Colors.black87,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 2),
|
||||
Text(
|
||||
relativeTime,
|
||||
style: TextStyle(color: Colors.grey[600], fontSize: 12),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text('More options pressed')),
|
||||
);
|
||||
},
|
||||
icon: Icon(Icons.more_horiz, color: Colors.grey[600]),
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 12),
|
||||
Text(
|
||||
_currentPost.body,
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
height: 1.4,
|
||||
color: Colors.black87,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
Row(
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: _toggleLike,
|
||||
icon: Icon(
|
||||
_currentPost.liked ? Icons.favorite : Icons.favorite_border,
|
||||
color: _currentPost.liked ? Colors.red : Colors.grey[600],
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'${_currentPost.likes}',
|
||||
style: TextStyle(
|
||||
color: Colors.grey[700],
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
SizedBox(width: 16),
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text('Comments feature coming soon!')),
|
||||
);
|
||||
},
|
||||
icon: Icon(
|
||||
Icons.chat_bubble_outline,
|
||||
color: Colors.grey[600],
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'${_currentPost.comments}',
|
||||
style: TextStyle(
|
||||
color: Colors.grey[700],
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
Spacer(),
|
||||
IconButton(
|
||||
onPressed: () => _sharePost(_currentPost),
|
||||
icon: Icon(
|
||||
Icons.share_outlined,
|
||||
color: Colors.grey[600],
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ProfilePostsList extends StatefulWidget {
|
||||
final Future<Map<String, dynamic>> Function() fetchPosts;
|
||||
final Function(int posts, int likes)? onStatsUpdate;
|
||||
|
||||
const ProfilePostsList({
|
||||
Key? key,
|
||||
required this.fetchPosts,
|
||||
this.onStatsUpdate,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
_ProfilePostsListState createState() => _ProfilePostsListState();
|
||||
}
|
||||
|
||||
class _ProfilePostsListState extends State<ProfilePostsList> {
|
||||
bool _isLoading = true;
|
||||
List<Post> _posts = [];
|
||||
String _errorMessage = '';
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_loadPosts();
|
||||
}
|
||||
|
||||
Future<void> _loadPosts() async {
|
||||
setState(() {
|
||||
_isLoading = true;
|
||||
_errorMessage = '';
|
||||
});
|
||||
|
||||
try {
|
||||
final result = await widget.fetchPosts();
|
||||
setState(() {
|
||||
if (result['success']) {
|
||||
_posts = result['posts'];
|
||||
// Update parent stats
|
||||
if (widget.onStatsUpdate != null) {
|
||||
final totalLikes = _posts.fold(0, (sum, post) => sum + post.likes);
|
||||
widget.onStatsUpdate!(_posts.length, totalLikes);
|
||||
}
|
||||
} else {
|
||||
_errorMessage = result['message'] ?? 'Failed to load posts';
|
||||
}
|
||||
_isLoading = false;
|
||||
});
|
||||
} catch (e) {
|
||||
setState(() {
|
||||
_errorMessage = 'Network error: $e';
|
||||
_isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (_isLoading) {
|
||||
return Container(
|
||||
padding: EdgeInsets.all(32),
|
||||
child: Center(
|
||||
child: CircularProgressIndicator(
|
||||
valueColor: AlwaysStoppedAnimation<Color>(
|
||||
Color(0xFF6A4C93),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (_errorMessage.isNotEmpty) {
|
||||
return Container(
|
||||
padding: EdgeInsets.all(32),
|
||||
child: Center(
|
||||
child: Column(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline,
|
||||
size: 64,
|
||||
color: Colors.grey[400],
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
Text(
|
||||
_errorMessage,
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
color: Colors.grey[600],
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
ElevatedButton(
|
||||
onPressed: _loadPosts,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Color(0xFF6A4C93),
|
||||
foregroundColor: Colors.white,
|
||||
),
|
||||
child: Text('Try Again'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (_posts.isEmpty) {
|
||||
return Container(
|
||||
padding: EdgeInsets.all(32),
|
||||
child: Center(
|
||||
child: Column(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.post_add,
|
||||
size: 64,
|
||||
color: Colors.grey[400],
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
Text(
|
||||
'No posts yet',
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
color: Colors.grey[600],
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Text(
|
||||
'Start sharing your thoughts!',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.grey[500],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
..._posts.map((post) =>
|
||||
Container(
|
||||
margin: EdgeInsets.only(bottom: 16, left: 16, right: 16),
|
||||
child: PostCard(post: post),
|
||||
)
|
||||
),
|
||||
SizedBox(height: 24),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user