From 25605200e1a95935b4545d0f0cd2c67110fe47b7 Mon Sep 17 00:00:00 2001
From: przeq piciel <przeqpiciel@gmail.com>
Date: Sat, 14 Sep 2024 08:28:09 +0000
Subject: [PATCH] Refactor file loading and code retrieval logic

This commit refactors the code in the `Page` component to improve the file loading and code retrieval logic. It removes the hardcoded initial code value and replaces it with an empty string. It also updates the `useEffect` hook to properly handle the startup of the application and retrieve the code content using the `Pterodactyl` API. Additionally, it updates the rendering of the breadcrumbs and adds a save button to the file editor.

Refactor file directory change functionality

This commit refactors the `changeDirectory` function in the `Index` component of the `FilesEditor` module. The function is removed as it is no longer used and has been replaced with a more efficient approach to handle directory changes.
---
 app/app/files/edit/page.tsx          | 100 ++++++++++++++-------------
 app/components/FilesEditor/index.tsx |  13 +---
 2 files changed, 54 insertions(+), 59 deletions(-)

diff --git a/app/app/files/edit/page.tsx b/app/app/files/edit/page.tsx
index 7cc26f0..2d9f377 100644
--- a/app/app/files/edit/page.tsx
+++ b/app/app/files/edit/page.tsx
@@ -13,61 +13,67 @@ function Page() {
   const searchParams = useSearchParams();
   const serverId = searchParams.get("serverid") || "";
   const path = searchParams.get("path") || "";
-  const [code, setCode] = useState("dupa");
-  const pterodactyl = new Pterodactyl();
+  const [code, setCode] = useState("");
 
-  useEffect(() => {
-    const startupApp = async () => {
-      const panelApp = new Panel();
+  useEffect(
+    function () {
+      async function startupApp() {
+        const panelApp = new Panel();
+        const pterodactyl = new Pterodactyl();
 
-      const credentials = await panelApp.getCredentials();
-      pterodactyl.setApiKey(credentials.api_key);
-      pterodactyl.setServerId(serverId);
-      setCode(await pterodactyl.files.getContent(path));
-    };
+        const credentials = await panelApp.getCredentials();
+        pterodactyl.setApiKey(credentials.api_key);
+        pterodactyl.setServerId(serverId);
+        setCode(await pterodactyl.files.getContent(path));
+      }
 
-    if (serverId && path) {
-      startupApp();
-    }
-  }, [serverId, path]);
+      if (serverId && path) {
+        startupApp();
+      }
+    },
+    [serverId, path]
+  );
 
   return (
     <>
-      <BreadCrumbs>
-        <li>
-          <div className="mr-2">
-            <ServerIcon />
-          </div>
-          {serverId}
-        </li>
-        <li>
-          <a href={`/files?serverid=${serverId}&path=/`}>
+      <div className="flex mb-4">
+        <BreadCrumbs>
+          <li>
             <div className="mr-2">
-              <FolderIcon />
+              <ServerIcon />
             </div>
-            <span>/</span>
-          </a>
-        </li>
-        {path
-          .split("/")
-          .filter((p) => p !== "")
-          .map((element, index) => {
-            const tmp_path = path
-              .split("/")
-              .slice(0, index + 2)
-              .join("/");
-            return (
-              <li key={index}>
-                <a href={`/files?serverid=${serverId}&path=${tmp_path}`}>
-                  <div className="mr-2">
-                    <FolderIcon />
-                  </div>
-                  <span>{element}</span>
-                </a>
-              </li>
-            );
-          })}
-      </BreadCrumbs>
+            {serverId}
+          </li>
+          <li>
+            <a href={`/files?serverid=${serverId}&path=/`}>
+              <div className="mr-2">
+                <FolderIcon />
+              </div>
+              <span>/</span>
+            </a>
+          </li>
+          {path
+            .split("/")
+            .filter((p) => p !== "")
+            .map((element, index) => {
+              const tmp_path = path
+                .split("/")
+                .slice(0, index + 2)
+                .join("/");
+              return (
+                <li key={index}>
+                  <a href={`/files?serverid=${serverId}&path=${tmp_path}`}>
+                    <div className="mr-2">
+                      <FolderIcon />
+                    </div>
+                    <span>{element}</span>
+                  </a>
+                </li>
+              );
+            })}
+        </BreadCrumbs>
+        <button className="ml-auto btn btn-accent">Save</button>
+      </div>
       <TextEditor code={code} />
     </>
   );
diff --git a/app/components/FilesEditor/index.tsx b/app/components/FilesEditor/index.tsx
index ddc1954..061a17c 100644
--- a/app/components/FilesEditor/index.tsx
+++ b/app/components/FilesEditor/index.tsx
@@ -100,17 +100,6 @@ const Index = () => {
     setContextMenu(initialContextMenuState);
   }, []);
 
-  const changeDirectory = useCallback(
-    (newPath: string) => {
-      if (pterodactyl) {
-        pterodactyl.helpers.setWorkingDirectory(newPath);
-        fetchFiles();
-        // setPath(newPath);
-      }
-    },
-    [pterodactyl, fetchFiles]
-  );
-
   useEffect(() => {
     if (!apiKey || !serverId) return; // Upewniamy się, że mamy apiKey i serverId
 
@@ -142,7 +131,7 @@ const Index = () => {
       )}
 
       {serverId && (
-        <div className="flex p-4 gap-4">
+        <div className="flex gap-4">
           <BreadCrumbs>
             <li>
               <div className="mr-2">