update

app/components/FilesEditor/AddDocument/index.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import React from "react";
+import AddDocumentIcon from "@/components/Icons/AddDocument";
+import Popup from "@/components/Popup";
+import { useState } from "react";
+import Pterodactyl from "@/components/Pterodactyl";
+import { useSearchParams } from "next/navigation";
+
+const Index = () => {
+  const [showPopup, setShowPopup] = useState(false);
+  const [fileName, setFileName] = useState("");
+  const urlParams = useSearchParams();
+  const serverId = urlParams.get("serverid") || "";
+  const pathParam = urlParams.get("path") || "/";
+  const apiKey = `${process.env.NEXT_PUBLIC_API_KEY}`;
+
+  const pterodactyl = new Pterodactyl();
+
+  function togglePopup() {
+    setShowPopup(!showPopup);
+  }
+
+  function handleOk() {
+    console.log({ fileName });
+    if (fileName) {
+      pterodactyl.setApiKey(apiKey);
+      pterodactyl.setServerId(serverId);
+      pterodactyl.helpers.setWorkingDirectory(pathParam);
+      pterodactyl.files.createFile(fileName);
+    }
+    setShowPopup(false);
+  }
+
+  return (
+    <>
+      <Popup
+        title="New file name"
+        show={showPopup}
+        onClickClose={togglePopup}
+        onClickOk={handleOk}
+      >
+        <div>
+          <input
+            type="text"
+            className="input input-sm input-bordered mb-4 text-base-content"
+            placeholder="File name"
+            value={fileName}
+            onChange={(e) => setFileName(e.target.value)}
+          />
+        </div>
+      </Popup>
+      <button
+        onClick={() => {
+          setFileName("");
+          togglePopup();
+        }}
+        className="btn btn-sm"
+      >
+        <AddDocumentIcon />
+        Add Document
+      </button>
+    </>
+  );
+};
+
+export default Index;

app/components/FilesEditor/index.tsx

@@ -11,6 +11,7 @@ import RenamePopup from "./ContextMenu/rename";
 import Pterodactyl from "@/components/Pterodactyl";
 import BreadCrumbs from "@/components/BreadCrumbs";
 import { useSearchParams } from "next/navigation";
+import AddDocument from "./AddDocument";
 
 interface FileAttributes {
   name: string;
@@ -23,6 +24,12 @@ interface FileProps {
   attributes: FileAttributes;
 }
 
+interface NewDocumentState {
+  show: boolean;
+  x: number;
+  y: number;
+}
+
 interface ContextMenuState {
   show: boolean;
   x: number;
@@ -34,6 +41,12 @@ interface RenamePopupState {
   show: boolean;
 }
 
+const initialNewDocumentState: NewDocumentState = {
+  show: false,
+  x: 0,
+  y: 0,
+};
+
 const initialContextMenuState: ContextMenuState = {
   show: false,
   x: 0,
@@ -72,7 +85,6 @@ const Index = () => {
   }, []);
 
   const fetchFiles = useCallback(async () => {
-    console.log("chwytam pliki");
     const files = await pterodactyl.files.fetchFiles();
     setFileList(files);
   }, [pterodactyl]);
@@ -168,20 +180,7 @@ const Index = () => {
               })}
             <li>
               <span className="inline-flex items-center gap-2">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  className="h-4 w-4 stroke-current"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                  ></path>
-                </svg>
-                Add Document
+                <AddDocument />
               </span>
             </li>
           </BreadCrumbs>