add functional context menu

app/components/FilesEditor/ContextMenu/container.tsx

@@ -0,0 +1,43 @@
+import { FC } from "react";
+import { useRef } from "react";
+import useOnclickOutside from "@/hooks/useOnClickOutside";
+
+interface ContextMenuProps {
+  x: number;
+  y: number;
+  closeContextMenu: () => void;
+  file?: any;
+}
+
+const ContextMenuContainer: FC<ContextMenuProps> = ({
+  x,
+  y,
+  closeContextMenu,
+  file,
+}) => {
+  const contextMenuRef = useRef<HTMLDivElement>(null);
+  useOnclickOutside(contextMenuRef, closeContextMenu);
+
+  return (
+    <>
+      <div
+        ref={contextMenuRef}
+        onClick={closeContextMenu}
+        className="bg-primary text-white p-2 rounded-md cursor-pointer"
+        style={{ position: "absolute", top: y, left: x }}
+      >
+        <div
+          onClick={() => {
+            console.log("Option ", file?.attributes.name);
+          }}
+        >
+          {file?.attributes.name}
+        </div>
+        <div>Option 2</div>
+        <div>Option 3</div>
+      </div>
+    </>
+  );
+};
+
+export default ContextMenuContainer;

app/components/FilesEditor/MenuContext/index.tsx

@@ -1,34 +0,0 @@
-import { useState } from "react";
-
-interface ContextMenuProps {
-  items: string[];
-  onSelect: (item: string) => void;
-}
-
-const ContextMenu: React.FC<ContextMenuProps> = ({ items, onSelect }) => {
-  return (
-    <div
-      style={{
-        position: "absolute",
-        border: "1px solid #ccc",
-        backgroundColor: "#fff",
-        boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",
-        zIndex: 1000,
-      }}
-    >
-      <ul style={{ margin: 0, padding: 10, listStyleType: "none" }}>
-        {items.map((item, index) => (
-          <li
-            key={index}
-            style={{ padding: "5px 10px", cursor: "pointer" }}
-            onClick={() => onSelect(item)}
-          >
-            {item}
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-export default ContextMenu;

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>

app/hooks/useOnClickOutside.ts

@@ -0,0 +1,28 @@
+import {RefObject, useEffect} from 'react';
+
+type Event = MouseEvent | TouchEvent;
+
+export default function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+    ref: RefObject<T>,
+    handler: (event: Event) => void
+    ) {
+    useEffect(() => {
+        const listener = (event: Event) => {
+        const el = ref?.current;
+    
+        if (!el || el.contains((event?.target as Node) || null)) {
+            return;
+        }
+    
+        handler(event);
+        };
+    
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+    
+        return () => {
+        document.removeEventListener('mousedown', listener);
+        document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler]);
+    }