refactor entire frontend

frontend/lib/chat_screen.dart

@@ -1,56 +1,133 @@
 import 'package:flutter/material.dart';
-import 'chat.dart'; // Import the new Chat class
+import 'app_menu.dart';
+import 'styles.dart';
+import 'backend.dart';
+import 'dart:async';
+
+class Message {
+  final String sender;
+  final String text;
+  final bool isFromUser;
+
+  Message({required this.sender, required this.text}) : isFromUser = sender == "user";
+
+  Alignment get alignment => isFromUser ? Alignment.centerRight : Alignment.centerLeft;
+  EdgeInsets get padding => isFromUser ? EdgeInsets.zero : const EdgeInsets.only(left: 10);
+}
 
 class ChatScreen extends StatefulWidget {
-  const ChatScreen({super.key});
+  final int chatId;
+
+  ChatScreen({required this.chatId});
+
+  static Future<List<Message>> getChatMessages(int chatId) async {
+    final response = await Backend.sendAction("get-chat-messages", {'chatId': chatId});
+    print("get-chat-messages response: $response");
+    List<dynamic> messageObjects = response['messages'];
+    List<Message> messages = messageObjects.map((msg) => Message(sender: msg['sender'], text: msg['content'] as String)).toList();
+    return messages;
+  }
 
   @override
-  State<ChatScreen> createState() => _ChatScreenState();
+  _ChatScreenState createState() => _ChatScreenState();
 }
 
 class _ChatScreenState extends State<ChatScreen> {
-  final Chat _chat = Chat('chat1'); // Create an instance of Chat
-  final TextEditingController _controller = TextEditingController();
+  List<Message> _messages = [];
+  final TextEditingController _textController = TextEditingController();
+  StreamSubscription? _chatSubscription;
 
-  void _sendMessage() {
-    if (_controller.text.isNotEmpty) {
+  @override
+  void initState() {
+    super.initState();
+    _loadInitialMessages();
+    _chatSubscription = Backend.chatMessages(widget.chatId).listen((data) {
+      final message = Message(sender: data['sender'], text: data['content']);
+      if (!message.isFromUser) {
+        addMessage(message);
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    Backend.removeChatListener(widget.chatId);
+    super.dispose();
+  }
+
+  Future<void> _loadInitialMessages() async {
+    final initialMessages = await ChatScreen.getChatMessages(widget.chatId);
+    setState(() {
+      _messages.addAll(initialMessages);
+    });
+  }
+
+  void _handleNewMessage(Map<String, dynamic> message) {
+    final newMessage = Message(sender: message['sender'], text: message['content'] as String);
+    if (newMessage.sender!= "user") {
       setState(() {
-        _chat.addUserMessage(_controller.text); // Use the Chat instance to add the message
-        _controller.clear();
+        _messages.add(newMessage);
       });
     }
   }
 
+  void addMessage(Message message) {
+    setState(() {
+      _messages.add(message);
+    });
+  }
+
+  void sendMessage(String content) {
+    _textController.clear();
+    final newMessage = Message(sender: "user", text: content);
+    Backend.sendAction("send-chat-message", {'chatId': widget.chatId, 'content': content}).then((response) {
+      if (response['error'] != null) {
+        print("Error sending chat message: ${response['error']}");
+      }
+    });
+    addMessage(newMessage);
+  }
+
+  Color getMessageColor(BuildContext context) {
+    final backgroundColor = Theme.of(context).scaffoldBackgroundColor;
+    final messageColor = Color.alphaBlend(Colors.white.withOpacity(0.1), backgroundColor);
+    return messageColor;
+  }
+
   @override
   Widget build(BuildContext context) {
-    final width = MediaQuery.of(context).size.width; 
-    final isBigScreen = width > 600; // Define threshold for small screens
+    final isWideScreen = MediaQuery.of(context).size.width > 600;
 
     return Scaffold(
       appBar: AppBar(
-        title: const Text('Chat'),
+        title: Text('Chat Room ${widget.chatId}'),
+        actions: [
+          IconButton(icon: Icon(Icons.settings), onPressed: () {
+            Navigator.push(context, MaterialPageRoute(builder: (_) => AppMenu()));
+          }),
+        ],
       ),
       body: Column(
         children: [
           Expanded(
             child: ListView.builder(
-              itemCount: _chat.messages.length,
+              itemCount: _messages.length,
               itemBuilder: (context, index) {
-                final message = _chat.messages[index];
-                // Align all messages to left for big screens
-                final align = message.sender == 'user' && !isBigScreen ? CrossAxisAlignment.end : CrossAxisAlignment.start;
-                return Row(
-                  mainAxisAlignment: align == CrossAxisAlignment.end ? MainAxisAlignment.end : MainAxisAlignment.start,
-                  children: [
-                    Container(
-                      padding: const EdgeInsets.all(8.0),
-                      margin: const EdgeInsets.symmetric(vertical: 4.0),
-                      child: Text(
-                        '${message.content}',
-                        style: const TextStyle(color: Colors.white),
+                final message = _messages[index];
+                return Padding(
+                  padding: isWideScreen ? message.padding : EdgeInsets.zero,
+                  child: Align(
+                    alignment: isWideScreen ? Alignment.centerLeft : message.alignment,
+                    child: Container(
+                      margin: EdgeInsets.symmetric(vertical: 2, horizontal: 8),
+                      padding: EdgeInsets.all(10),
+                      decoration: BoxDecoration(
+                        color: getMessageColor(context),
+                        borderRadius: BorderRadius.circular(12),
                       ),
+                      child: Text(message.text),
                     ),
-                  ],
+                  ),
                 );
               },
             ),
@@ -61,14 +138,17 @@ class _ChatScreenState extends State<ChatScreen> {
               children: [
                 Expanded(
                   child: TextField(
-                    controller: _controller,
-                    decoration: const InputDecoration(hintText: 'Send a message'),
-                    onSubmitted: (_) => _sendMessage(),
+                    controller: _textController,
+                    decoration: inputDecoration(),
+                    onSubmitted: sendMessage, // Send message on Enter key
                   ),
                 ),
-                IconButton(
-                  icon: const Icon(Icons.send),
-                  onPressed: _sendMessage,
+                SizedBox(width: 8),
+                ElevatedButton(
+                  onPressed: () {
+                    sendMessage(_textController.text);
+                  },
+                  child: Text('Send'),
                 ),
               ],
             ),