Fix the context menu

2026-09-23 03:25:07 +03:00 · 2025-09-04 21:02:27 +03:00
parent 182fe88db4
commit e99efabdb7
7 changed files with 405 additions and 37 deletions
@@ -1,18 +1,119 @@
-export function MessageContextMenu() {
+import { useState } from "react";
+import type { Message } from "../../../core/types";
+import { EditMessageDialog } from "./EditMessageDialog";
+import { ReplyMessageDialog } from "./ReplyMessageDialog";
+
+interface MessageContextMenuProps {
+    message: Message;
+    isAuthor: boolean;
+    onEdit: (message: Message) => void;
+    onReply: (message: Message) => void;
+    onDelete: (message: Message) => void;
+    onClose: () => void;
+    position: { x: number; y: number };
+}
+
+export interface ContextMenuState {
+    isOpen: boolean;
+    message: Message | null;
+    position: { x: number; y: number };
+}
+
+export function MessageContextMenu({ 
+    message, 
+    isAuthor, 
+    onEdit, 
+    onReply, 
+    onDelete, 
+    onClose, 
+    position 
+}: MessageContextMenuProps) {
+    console.log("MessageContextMenu rendered with position:", position, "message:", message.id);
+    
+    // Internal state for dialogs
+    const [editDialogOpen, setEditDialogOpen] = useState(false);
+    const [replyDialogOpen, setReplyDialogOpen] = useState(false);
+    
+    const handleAction = (action: string) => {
+        console.log("Context menu action triggered:", action);
+        switch (action) {
+            case "reply":
+                setReplyDialogOpen(true);
+                break;
+            case "edit":
+                if (isAuthor) {
+                    setEditDialogOpen(true);
+                }
+                break;
+            case "delete":
+                if (isAuthor) {
+                    onDelete(message);
+                    onClose();
+                }
+                break;
+        }
+    };
+
+    const handleEditSave = (messageId: number, newContent: string) => {
+        // Create a temporary message object with the updated content
+        const updatedMessage = { ...message, content: newContent };
+        onEdit(updatedMessage);
+        setEditDialogOpen(false);
+    };
+
+    const handleSendReply = (content: string, replyToId: number) => {
+        // Create a temporary message object with the reply content
+        const replyMessage = { ...message, content, id: replyToId };
+        onReply(replyMessage);
+        setReplyDialogOpen(false);
+    };
+
    return (
-        <div id="message-context-menu" className="context-menu">
-            <div className="context-menu-item" data-action="reply">
-                <span className="material-symbols">reply</span>
-                Reply
+        <>
+            <div 
+                className="context-menu"
+                style={{
+                    position: "fixed",
+                    display: "block",
+                    top: position.y,
+                    left: position.x,
+                    zIndex: 1000
+                }}
+                onClick={(e) => e.stopPropagation()}
+            >
+                <div className="context-menu-item" onClick={() => handleAction("reply")}>
+                    <span className="material-symbols">reply</span>
+                    Reply
+                </div>
+                {isAuthor && (
+                    <>
+                        <div className="context-menu-item" onClick={() => handleAction("edit")}>
+                            <span className="material-symbols">edit</span>
+                            Edit
+                        </div>
+                        <div className="context-menu-item" onClick={() => handleAction("delete")}>
+                            <span className="material-symbols">delete</span>
+                            Delete
+                        </div>
+                    </>
+                )}
            </div>
-            <div className="context-menu-item" data-action="edit">
-                <span className="material-symbols">edit</span>
-                Edit
-            </div>
-            <div className="context-menu-item" data-action="delete">
-                <span className="material-symbols">delete</span>
-                Delete
-            </div>
-        </div>
+            
+            {/* Edit Dialog */}
+            <EditMessageDialog
+                isOpen={editDialogOpen}
+                onOpenChange={setEditDialogOpen}
+                message={message}
+                onSave={handleEditSave}
+            />
+            
+            {/* Reply Dialog */}
+            <ReplyMessageDialog
+                isOpen={replyDialogOpen}
+                onOpenChange={setReplyDialogOpen}
+                replyToMessage={message}
+                onSendReply={handleSendReply}
+            />
+        </>
    );
 }