loading file into text editor

app/app/files/edit/page.tsx

@@ -1,21 +1,35 @@
 "use client";
 
-import React, { useCallback } from "react";
-
+import React, { useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import TextEditor from "@/components/TextEditor";
 import BreadCrumbs from "@/components/BreadCrumbs";
 import ServerIcon from "@/components/Icons/Server";
 import FolderIcon from "@/components/Icons/Folder";
+import Pterodactyl from "@/components/Pterodactyl";
+import Panel from "@/components/Panel";
 
 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 changeDirectory = useCallback((path: string) => {
-    console.log("changeDirectory", path);
-  }, []);
+  useEffect(() => {
+    const startupApp = async () => {
+      const panelApp = new Panel();
+
+      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]);
 
   return (
     <>
@@ -54,7 +68,7 @@ function Page() {
             );
           })}
       </BreadCrumbs>
-      <TextEditor />;
+      <TextEditor code={code} />
     </>
   );
 }