added breadcrumbs

app/components/FilesEditor/index.tsx

@@ -8,6 +8,7 @@ import MenuIcon from "@/components/Icons/Menu";
 import ContextMenuContainer from "./ContextMenu/container";
 import RenamePopup from "./ContextMenu/rename";
 import Pterodactyl from "@/components/Pterodactyl";
+import BreadCrumbs from "./BreadCrumbs";
 
 interface FileAttributes {
   name: string;
@@ -53,11 +54,11 @@ const Index = () => {
   );
   const [selectedFile, setSelectedFile] = useState<FileProps | null>(null);
   const [ptero, setPtero] = useState<Pterodactyl | null>(null);
-  const [serverId, setServerId] = useState<string>("");
+  const [serverId, setServerId] = useState<string>("ec46691a");
+  const [path, setPath] = useState<string>("/world");
 
-  const setCredentials = useCallback(async () => {
+  const setCredentials = useCallback(() => {
     setApiKey("ptlc_N77A2hEczFmSwGXm4cEXh4Gw3ZP0Ygr5NaBkGlE7pjU");
-    setServerId("ec46691a");
   }, []);
 
   const showRenamePopup = useCallback(() => {
@@ -69,21 +70,20 @@ const Index = () => {
     setRenamePopup(initialRenamePopupState);
   }, []);
 
-  const formateDate = (isoDate: string) => {
-    const date = new Date(isoDate);
-    return formatDistanceToNow(date, { addSuffix: true });
-  };
+  const fetchFiles = useCallback(async (ptero: Pterodactyl) => {
+    const files = await ptero.files.fetchFiles();
+    setFileList(files);
+  }, []);
 
   const handleRenameFile = useCallback(
-    (file: FileProps, newName: string) => {
+    async (file: FileProps, newName: string) => {
       if (ptero) {
-        ptero.files.rename(file, newName).then(() => {
-          ptero.files.fetchFiles().then(setFileList); // Pobierz zaktualizowaną listę plików po zmianie nazwy
-        });
+        await ptero.files.rename(file, newName);
+        await fetchFiles(ptero);
+        setRenamePopup(initialRenamePopupState);
       }
-      setRenamePopup(initialRenamePopupState);
     },
-    [ptero]
+    [ptero, fetchFiles]
   );
 
   const handleClickContextMenu = useCallback(
@@ -98,24 +98,30 @@ const Index = () => {
     setContextMenu(initialContextMenuState);
   }, []);
 
-  const formatDate = useCallback((isoDate: string) => {
-    return formatDistanceToNow(new Date(isoDate), { addSuffix: true });
-  }, []);
+  const changeDirectory = useCallback(
+    (newPath: string) => {
+      if (ptero) {
+        ptero.helpers.setWorkingDirectory(newPath);
+        fetchFiles(ptero);
+        setPath(newPath);
+      }
+    },
+    [ptero, fetchFiles]
+  );
 
   useEffect(() => {
     const setupApplication = async () => {
       await setCredentials();
-      while (!apiKey) {
-        await new Promise((r) => setTimeout(r, 200));
+      if (apiKey) {
+        const pteroInstance = new Pterodactyl(serverId, apiKey);
+        pteroInstance.helpers.setWorkingDirectory(path);
+        setPtero(pteroInstance);
+        await fetchFiles(pteroInstance);
       }
-      const pterodactylInstance = new Pterodactyl(serverId, apiKey);
-      setPtero(pterodactylInstance);
-      const files = await pterodactylInstance.files.fetchFiles();
-      setFileList(files);
     };
 
     setupApplication();
-  }, [apiKey, serverId, setCredentials]);
+  }, [apiKey, serverId, setCredentials, path, fetchFiles]);
 
   return (
     <>
@@ -136,6 +142,13 @@ const Index = () => {
           file={contextMenu.file}
         />
       )}
+      <div className="flex p-4 gap-4">
+        <BreadCrumbs
+          serverId={serverId}
+          path={path}
+          changeDirectory={changeDirectory}
+        />
+      </div>
 
       {fileList.map((file: FileProps) => (
         <div
@@ -147,10 +160,12 @@ const Index = () => {
           </div>
           <div className="w-64 text-left">{file.attributes.name}</div>
           <div className="w-48 text-right">
-            {file.attributes.is_file ? file.attributes.size + " bytes" : ""}
+            {file.attributes.is_file ? `${file.attributes.size} bytes` : ""}
           </div>
           <div title={file.attributes.modified_at} className="w-60 text-right">
-            {formateDate(file.attributes.modified_at)}
+            {formatDistanceToNow(new Date(file.attributes.modified_at), {
+              addSuffix: true,
+            })}
           </div>
           <div onClick={(e) => handleClickContextMenu(e, file)}>
             <MenuIcon />