Files
client_panel/app/components/FilesEditor/AddDocument/index.tsx

75 lines
1.9 KiB
TypeScript

"use client";
import React, { useState, useRef } from "react";
import AddDocumentIcon from "@/components/Icons/AddDocument";
import Popup from "@/components/Popup";
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 inputRef = useRef<HTMLInputElement>(null);
const pterodactyl = new Pterodactyl();
function togglePopup() {
setShowPopup(!showPopup);
if (!showPopup) {
// set focus on input
setTimeout(() => {
inputRef.current?.focus();
}, 100);
}
}
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
ref={inputRef}
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;