add functional context menu

app/components/FilesEditor/index.tsx

@@ -5,29 +5,42 @@ import React, { useEffect, useState, useRef } from "react";
 import DocumentIcon from "@/components/Icons/Document";
 import FolderIcon from "@/components/Icons/Folder";
 import MenuIcon from "@/components/Icons/Menu";
-import MenuContext from "@/components/FilesEditor/MenuContext";
+import ContextMenuContainer from "./ContextMenu/container";
+
+const initialContextMenu = {
+  show: false,
+  x: 0,
+  y: 0,
+  file: null,
+};
+
+interface FileProps {
+  attributes: {
+    name: string;
+    modified_at: string;
+    size: number;
+    is_file: boolean;
+  };
+}
 
 const Index = () => {
   const [apiKey, setApiKey] = useState("");
   const [fileList, setFileList] = useState([]);
+  const [contextMenu, setContextMenu] = useState(initialContextMenu);
 
-  const [menuVisible, setMenuVisible] = useState(false);
-  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
-  const buttonRef = useRef<HTMLButtonElement>(null);
+  const handleClickContextMenu = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    file: any
+  ) => {
+    e.preventDefault();
+    console.log("Right Clicked", file, e);
 
-  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault(); // zapobiega domyślnemu działaniu
-    const rect = buttonRef.current?.getBoundingClientRect();
-    setMenuPosition({
-      x: rect?.left || 0,
-      y: (rect?.bottom || 0) + window.scrollY,
-    });
-    setMenuVisible(true);
+    const { pageX, pageY } = e;
+    setContextMenu({ show: true, x: pageX, y: pageY, file });
   };
 
-  const handleSelect = (item: string) => {
-    console.log(`Wybrano: ${item}`);
-    setMenuVisible(false);
+  const handleContextMenuClose = () => {
+    setContextMenu(initialContextMenu);
   };
 
   const setCredentials = async () => {
@@ -46,7 +59,7 @@ const Index = () => {
         {
           method: "GET",
           headers: {
-            Authorization: "Bearer " + apiKey.toString(),
+            Authorization: `Bearer ${apiKey.toString()}`,
             "Content-Type": "application/json",
           },
         }
@@ -62,15 +75,30 @@ const Index = () => {
   };
 
   useEffect(() => {
-    setCredentials();
-    fetchFiles(apiKey);
+    const fetchData = async () => {
+      await setCredentials();
+      while (apiKey === "") {
+        await new Promise((r) => setTimeout(r, 200));
+      }
+      await fetchFiles(apiKey);
+    };
+
+    fetchData();
   }, [apiKey]);
 
   return (
     <>
-      {fileList.map((file) => (
+      {contextMenu.show && (
+        <ContextMenuContainer
+          x={contextMenu.x}
+          y={contextMenu.y}
+          closeContextMenu={handleContextMenuClose}
+          file={contextMenu.file}
+        />
+      )}
+      {fileList.map((file: FileProps) => (
         <div
-          isFile={file.attributes.is_file}
+          isfile={file.attributes.is_file.toString()}
           className="flex justify-between gap-4 bg-slate-400 mb-1 hover:bg-slate-500 pl-4 pr-4 pt-1 pb-1 rounded-md"
           key={file.attributes.name}
         >
@@ -84,11 +112,7 @@ const Index = () => {
           <div title={file.attributes.modified_at} className="w-60 text-right">
             {formateDate(file.attributes.modified_at)}
           </div>
-          <div
-            ref={buttonRef}
-            onClick={handleButtonClick}
-            className="w-6 justify-center text-center justify-items-center"
-          >
+          <div onClick={(e) => handleClickContextMenu(e, file)}>
             <MenuIcon />
           </div>
         </div>