add functionality and refactor the code

app/components/FilesEditor/ContextMenu/rename.tsx

@@ -2,11 +2,12 @@ import React from "react";
 
 interface Props {
   closeRemapFunction: () => void;
+  renameCallback: (file: any, newName: string) => void;
   file: any;
 }
 
 const Rename = (props: Props) => {
-  const { closeRemapFunction, file } = props;
+  const { closeRemapFunction, file, renameCallback } = props;
   const [newName, setNewName] = React.useState(file.attributes.name);
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
@@ -19,9 +20,9 @@ const Rename = (props: Props) => {
   };
 
   const handleRename = (event: React.MouseEvent) => {
-    // console.log("rename");
-    console.log("Renaming file:", file?.attributes.name, "to", newName);
-    console.log(file);
+    // use from parent function named putRenameFile
+    // renameFunction(file, newName);
+    renameCallback(file, newName);
   };
 
   const ref = React.useRef<HTMLDivElement>(null);

app/components/FilesEditor/index.tsx

@@ -1,111 +1,128 @@
 "use client";
 
 import { formatDistanceToNow } from "date-fns";
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import DocumentIcon from "@/components/Icons/Document";
 import FolderIcon from "@/components/Icons/Folder";
 import MenuIcon from "@/components/Icons/Menu";
 import ContextMenuContainer from "./ContextMenu/container";
 import RenamePopup from "./ContextMenu/rename";
+import Pterodactyl from "@/components/Pterodactyl";
 
-const initialContextMenu = {
+interface FileAttributes {
+  name: string;
+  modified_at: string;
+  size: number;
+  is_file: boolean;
+}
+
+interface FileProps {
+  attributes: FileAttributes;
+}
+
+interface ContextMenuState {
+  show: boolean;
+  x: number;
+  y: number;
+  file: FileProps | null;
+}
+
+interface RenamePopupState {
+  show: boolean;
+}
+
+const initialContextMenuState: ContextMenuState = {
   show: false,
   x: 0,
   y: 0,
   file: null,
 };
 
-const renamePopupProps = {
+const initialRenamePopupState: RenamePopupState = {
   show: false,
 };
 
-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 [renamePopup, setRenamePopup] = useState(renamePopupProps);
-  const [file, setFile] = useState<FileProps | null>(null);
+  const [apiKey, setApiKey] = useState<string>("");
+  const [fileList, setFileList] = useState<FileProps[]>([]);
+  const [contextMenu, setContextMenu] = useState<ContextMenuState>(
+    initialContextMenuState
+  );
+  const [renamePopup, setRenamePopup] = useState<RenamePopupState>(
+    initialRenamePopupState
+  );
+  const [selectedFile, setSelectedFile] = useState<FileProps | null>(null);
+  const [ptero, setPtero] = useState<Pterodactyl | null>(null);
+  const [serverId, setServerId] = useState<string>("");
 
-  const showRenamePopup = () => {
-    console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
-    setContextMenu(initialContextMenu);
+  const setCredentials = useCallback(async () => {
+    setApiKey("ptlc_N77A2hEczFmSwGXm4cEXh4Gw3ZP0Ygr5NaBkGlE7pjU");
+    setServerId("ec46691a");
+  }, []);
+
+  const showRenamePopup = useCallback(() => {
+    setContextMenu(initialContextMenuState);
     setRenamePopup({ show: true });
-  };
+  }, []);
 
-  const closeRenamePopup = () => {
-    setRenamePopup(renamePopupProps);
-  };
-
-  const handleClickContextMenu = (
-    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
-    file: any
-  ) => {
-    e.preventDefault();
-
-    const { pageX, pageY } = e;
-    setContextMenu({ show: true, x: pageX, y: pageY, file });
-  };
-
-  const handleContextMenuClose = () => {
-    setContextMenu(initialContextMenu);
-  };
-
-  const setCredentials = async () => {
-    setApiKey("ptlc_aDGU4VHNQuN5t6dyxNzVon3UZLR5ehuySmdR7xsUbMm");
-  };
+  const closeRenamePopup = useCallback(() => {
+    setRenamePopup(initialRenamePopupState);
+  }, []);
 
   const formateDate = (isoDate: string) => {
     const date = new Date(isoDate);
     return formatDistanceToNow(date, { addSuffix: true });
   };
 
-  const fetchFiles = async (apiKey: string) => {
-    try {
-      const response = await fetch(
-        "https://ptero.przeqpiciel.com/api/client/servers/0bf192ab/files/list",
-        {
-          method: "GET",
-          headers: {
-            Authorization: `Bearer ${apiKey.toString()}`,
-            "Content-Type": "application/json",
-          },
-        }
-      );
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
+  const handleRenameFile = useCallback(
+    (file: FileProps, newName: string) => {
+      if (ptero) {
+        ptero.files.rename(file, newName);
       }
-      const data = await response.json();
-      setFileList(data.data);
-    } catch (error) {
-      console.error("Error fetching data:", error);
-    }
-  };
+      setRenamePopup(initialRenamePopupState);
+    },
+    [ptero]
+  );
+
+  const handleClickContextMenu = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>, file: FileProps) => {
+      e.preventDefault();
+      setContextMenu({ show: true, x: e.pageX, y: e.pageY, file });
+    },
+    []
+  );
+
+  const handleContextMenuClose = useCallback(() => {
+    setContextMenu(initialContextMenuState);
+  }, []);
+
+  const formatDate = useCallback((isoDate: string) => {
+    return formatDistanceToNow(new Date(isoDate), { addSuffix: true });
+  }, []);
 
   useEffect(() => {
-    const fetchData = async () => {
+    const setupApplication = async () => {
       await setCredentials();
-      while (apiKey === "") {
+      while (!apiKey) {
         await new Promise((r) => setTimeout(r, 200));
       }
-      await fetchFiles(apiKey);
+      const pterodactylInstance = new Pterodactyl(serverId, apiKey);
+      setPtero(pterodactylInstance);
+      const files = await pterodactylInstance.files.fetchFiles();
+      setFileList(files);
     };
 
-    fetchData();
-  }, [apiKey]);
+    setupApplication();
+  }, [apiKey, serverId, setCredentials]);
 
   return (
     <>
       {renamePopup.show && (
-        <RenamePopup file={file} closeRemapFunction={closeRenamePopup} />
+        <RenamePopup
+          file={selectedFile}
+          renameCallback={handleRenameFile}
+          closeRemapFunction={closeRenamePopup}
+        />
       )}
       {contextMenu.show && (
         <ContextMenuContainer
@@ -113,10 +130,11 @@ const Index = () => {
           y={contextMenu.y}
           closeContextMenu={handleContextMenuClose}
           renameFunction={showRenamePopup}
-          setFile={setFile}
+          setFile={setSelectedFile}
           file={contextMenu.file}
         />
       )}
+
       {fileList.map((file: FileProps) => (
         <div
           className="flex justify-between gap-4 bg-content mb-1 hover:bg-neutral-content pl-4 pr-4 pt-1 pb-1 rounded-md"