Xeewy/TravelMate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement message management features including sending, deleting, updating, and reacting to messages

Browse Source
This commit is contained in:
Dayron
2025-10-20 17:34:09 +02:00
parent 3d902ffa74
commit a2e366e1ce
9 changed files with 1354 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

638
lib/components/group/chat_group_content.dart Normal file
View File

@@ -0,0 +1,638 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../blocs/user/user_bloc.dart';
import '../../blocs/user/user_state.dart' as user_state;
import '../../blocs/message/message_bloc.dart';
import '../../blocs/message/message_event.dart';
import '../../blocs/message/message_state.dart';
import '../../data/models/group.dart';
import '../../data/models/message.dart';
class ChatGroupContent extends StatefulWidget {
final Group group;
const ChatGroupContent({
super.key,
required this.group,
});
@override
State<ChatGroupContent> createState() => _ChatGroupContentState();
}
class _ChatGroupContentState extends State<ChatGroupContent> {
final _messageController = TextEditingController();
final _scrollController = ScrollController();
Message? _editingMessage;
@override
void initState() {
super.initState();
// Charger les messages au démarrage
context.read<MessageBloc>().add(LoadMessages(widget.group.id));
}
@override
void dispose() {
_messageController.dispose();
_scrollController.dispose();
super.dispose();
}
void _sendMessage(user_state.UserModel currentUser) {
final messageText = _messageController.text.trim();
if (messageText.isEmpty) return;
if (_editingMessage != null) {
// Mode édition
context.read<MessageBloc>().add(
UpdateMessage(
groupId: widget.group.id,
messageId: _editingMessage!.id,
newText: messageText,
),
);
_cancelEdit();
} else {
// Mode envoi
context.read<MessageBloc>().add(
SendMessage(
groupId: widget.group.id,
text: messageText,
senderId: currentUser.id,
senderName: currentUser.prenom,
),
);
}
_messageController.clear();
}
void _editMessage(Message message) {
setState(() {
_editingMessage = message;
_messageController.text = message.text;
});
}
void _cancelEdit() {
setState(() {
_editingMessage = null;
_messageController.clear();
});
}
void _deleteMessage(String messageId) {
context.read<MessageBloc>().add(
DeleteMessage(
groupId: widget.group.id,
messageId: messageId,
),
);
}
void _reactToMessage(String messageId, String userId, String reaction) {
context.read<MessageBloc>().add(
ReactToMessage(
groupId: widget.group.id,
messageId: messageId,
userId: userId,
reaction: reaction,
),
);
}
void _removeReaction(String messageId, String userId) {
context.read<MessageBloc>().add(
RemoveReaction(
groupId: widget.group.id,
messageId: messageId,
userId: userId,
),
);
}
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
return BlocBuilder<UserBloc, user_state.UserState>(
builder: (context, userState) {
if (userState is! user_state.UserLoaded) {
return Scaffold(
appBar: AppBar(title: Text(widget.group.name)),
body: const Center(child: Text('Utilisateur non connecté')),
);
}
final currentUser = userState.user;
return Scaffold(
appBar: AppBar(
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(widget.group.name, style: const TextStyle(fontSize: 18)),
Text(
'${widget.group.members.length} membre${widget.group.members.length > 1 ? 's' : ''}',
style: const TextStyle(fontSize: 12, fontWeight: FontWeight.normal),
),
],
),
actions: [
IconButton(
icon: const Icon(Icons.people),
onPressed: () => _showMembersDialog(context),
),
],
),
body: Column(
children: [
// Liste des messages
Expanded(
child: BlocConsumer<MessageBloc, MessageState>(
listener: (context, state) {
if (state is MessageError) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(state.message),
backgroundColor: Colors.red,
),
);
} else if (state is MessageSent || state is MessageUpdated) {
// Scroller vers le bas après l'envoi
WidgetsBinding.instance.addPostFrameCallback((_) {
if (_scrollController.hasClients) {
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 300),
curve: Curves.easeOut,
);
}
});
}
},
builder: (context, state) {
if (state is MessageLoading) {
return const Center(child: CircularProgressIndicator());
}
if (state is MessagesLoaded) {
if (state.messages.isEmpty) {
return _buildEmptyState();
}
// Scroller automatiquement vers le bas au chargement
WidgetsBinding.instance.addPostFrameCallback((_) {
if (_scrollController.hasClients) {
_scrollController.jumpTo(
_scrollController.position.maxScrollExtent,
);
}
});
return ListView.builder(
controller: _scrollController,
padding: const EdgeInsets.all(16),
itemCount: state.messages.length,
itemBuilder: (context, index) {
final message = state.messages[index];
final isMe = message.senderId == currentUser.id;
final showDate = index == 0 ||
!_isSameDay(
state.messages[index - 1].timestamp,
message.timestamp,
);
return Column(
children: [
if (showDate) _buildDateSeparator(message.timestamp),
_buildMessageBubble(message, isMe, isDark, currentUser.id),
],
);
},
);
}
return _buildEmptyState();
},
),
),
// Barre d'édition si un message est en cours de modification
if (_editingMessage != null)
Container(
color: isDark ? Colors.blue[900] : Colors.blue[100],
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
const Icon(Icons.edit, size: 20),
const SizedBox(width: 8),
const Expanded(
child: Text('Modification du message'),
),
IconButton(
icon: const Icon(Icons.close),
onPressed: _cancelEdit,
),
],
),
),
// Zone de saisie
Container(
decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor,
border: Border(
top: BorderSide(
color: isDark ? Colors.grey[800]! : Colors.grey[300]!,
width: 1,
),
),
),
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
child: SafeArea(
child: Row(
children: [
Expanded(
child: TextField(
controller: _messageController,
decoration: InputDecoration(
hintText: _editingMessage != null
? 'Modifier le message...'
: 'Écrire un message...',
filled: true,
fillColor: isDark ? Colors.grey[850] : Colors.grey[100],
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(24),
borderSide: BorderSide.none,
),
contentPadding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
),
maxLines: null,
textCapitalization: TextCapitalization.sentences,
),
),
const SizedBox(width: 8),
BlocBuilder<MessageBloc, MessageState>(
builder: (context, state) {
if (state is MessageSending || state is MessageUpdating) {
return Container(
width: 48,
height: 48,
padding: const EdgeInsets.all(12),
child: const CircularProgressIndicator(strokeWidth: 2),
);
}
return IconButton(
onPressed: () => _sendMessage(currentUser),
icon: Icon(_editingMessage != null ? Icons.check : Icons.send),
style: IconButton.styleFrom(
backgroundColor: Theme.of(context).colorScheme.primary,
foregroundColor: Colors.white,
padding: const EdgeInsets.all(12),
),
);
},
),
],
),
),
),
],
),
);
},
);
}
Widget _buildEmptyState() {
return Center(
child: Padding(
padding: const EdgeInsets.all(32),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.chat_bubble_outline,
size: 80,
color: Colors.grey[400],
),
const SizedBox(height: 16),
const Text(
'Aucun message',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
'Commencez la conversation !',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
color: Colors.grey[600],
),
),
],
),
),
);
}
Widget _buildMessageBubble(Message message, bool isMe, bool isDark, String currentUserId) {
final Color bubbleColor;
final Color textColor;
if (isMe) {
bubbleColor = isDark ? const Color(0xFF1E3A5F) : const Color(0xFF90CAF9);
textColor = isDark ? Colors.white : Colors.black87;
} else {
bubbleColor = isDark ? Colors.grey[800]! : Colors.grey[200]!;
textColor = isDark ? Colors.white : Colors.black87;
}
return Align(
alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
child: GestureDetector(
onLongPress: () => _showMessageOptions(context, message, isMe, currentUserId),
child: Container(
margin: const EdgeInsets.symmetric(vertical: 4),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
),
decoration: BoxDecoration(
color: bubbleColor,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(16),
topRight: const Radius.circular(16),
bottomLeft: Radius.circular(isMe ? 16 : 4),
bottomRight: Radius.circular(isMe ? 4 : 16),
),
),
child: Column(
crossAxisAlignment: isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
children: [
if (!isMe) ...[
Text(
message.senderName,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: isDark ? Colors.grey[400] : Colors.grey[700],
),
),
const SizedBox(height: 4),
],
Text(
message.text,
style: TextStyle(fontSize: 15, color: textColor),
),
const SizedBox(height: 4),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
_formatTime(message.timestamp),
style: TextStyle(
fontSize: 11,
color: textColor.withValues(alpha: 0.7),
),
),
if (message.isEdited) ...[
const SizedBox(width: 4),
Text(
'(modifié)',
style: TextStyle(
fontSize: 10,
fontStyle: FontStyle.italic,
color: textColor.withValues(alpha: 0.6),
),
),
],
],
),
// Afficher les réactions
if (message.reactions.isNotEmpty)
Padding(
padding: const EdgeInsets.only(top: 4),
child: Wrap(
spacing: 4,
children: _buildReactionChips(message, currentUserId),
),
),
],
),
),
),
);
}
List<Widget> _buildReactionChips(Message message, String currentUserId) {
final reactionCounts = <String, List<String>>{};
// Grouper les réactions par emoji
message.reactions.forEach((userId, emoji) {
reactionCounts.putIfAbsent(emoji, () => []).add(userId);
});
return reactionCounts.entries.map((entry) {
final emoji = entry.key;
final userIds = entry.value;
final hasReacted = userIds.contains(currentUserId);
return GestureDetector(
onTap: () {
if (hasReacted) {
_removeReaction(message.id, currentUserId);
} else {
_reactToMessage(message.id, currentUserId, emoji);
}
},
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: hasReacted
? Colors.blue.withValues(alpha: 0.3)
: Colors.grey.withValues(alpha: 0.3),
borderRadius: BorderRadius.circular(12),
border: hasReacted
? Border.all(color: Colors.blue, width: 1)
: null,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(emoji, style: const TextStyle(fontSize: 12)),
const SizedBox(width: 2),
Text(
'${userIds.length}',
style: const TextStyle(fontSize: 10, fontWeight: FontWeight.bold),
),
],
),
),
);
}).toList();
}
void _showMessageOptions(BuildContext context, Message message, bool isMe, String currentUserId) {
showModalBottomSheet(
context: context,
builder: (context) => SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Réactions rapides
Padding(
padding: const EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: ['👍', '❤️', '😂', '😮', '😢', '🔥'].map((emoji) {
return GestureDetector(
onTap: () {
Navigator.pop(context);
_reactToMessage(message.id, currentUserId, emoji);
},
child: Text(emoji, style: const TextStyle(fontSize: 32)),
);
}).toList(),
),
),
const Divider(height: 1),
if (isMe) ...[
ListTile(
leading: const Icon(Icons.edit),
title: const Text('Modifier'),
onTap: () {
Navigator.pop(context);
_editMessage(message);
},
),
ListTile(
leading: const Icon(Icons.delete, color: Colors.red),
title: const Text('Supprimer', style: TextStyle(color: Colors.red)),
onTap: () {
Navigator.pop(context);
_showDeleteConfirmation(context, message.id);
},
),
],
ListTile(
leading: const Icon(Icons.close),
title: const Text('Annuler'),
onTap: () => Navigator.pop(context),
),
],
),
),
);
}
void _showDeleteConfirmation(BuildContext context, String messageId) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('Supprimer le message'),
content: const Text('Êtes-vous sûr de vouloir supprimer ce message ?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Annuler'),
),
TextButton(
onPressed: () {
Navigator.pop(context);
_deleteMessage(messageId);
},
style: TextButton.styleFrom(foregroundColor: Colors.red),
child: const Text('Supprimer'),
),
],
),
);
}
// Helpers pour les dates
bool _isSameDay(DateTime date1, DateTime date2) {
return date1.year == date2.year &&
date1.month == date2.month &&
date1.day == date2.day;
}
String _formatTime(DateTime date) {
final hour = date.hour.toString().padLeft(2, '0');
final minute = date.minute.toString().padLeft(2, '0');
return '$hour:$minute';
}
String _formatDate(DateTime date) {
final now = DateTime.now();
final today = DateTime(now.year, now.month, now.day);
final yesterday = today.subtract(const Duration(days: 1));
final messageDate = DateTime(date.year, date.month, date.day);
if (messageDate == today) {
return 'Aujourd\'hui';
} else if (messageDate == yesterday) {
return 'Hier';
} else {
return '${date.day}/${date.month}/${date.year}';
}
}
Widget _buildDateSeparator(DateTime date) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Center(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: Colors.grey.withValues(alpha: 0.3),
borderRadius: BorderRadius.circular(12),
),
child: Text(
_formatDate(date),
style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
),
),
),
);
}
void _showMembersDialog(BuildContext context) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Membres (${widget.group.members.length})'),
content: SizedBox(
width: double.maxFinite,
child: ListView.builder(
shrinkWrap: true,
itemCount: widget.group.members.length,
itemBuilder: (context, index) {
final member = widget.group.members[index];
return ListTile(
leading: CircleAvatar(
child: Text(member.pseudo.substring(0, 1).toUpperCase()),
),
title: Text(member.pseudo),
);
},
),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Fermer'),
),
],
),
);
}
}