diff --git a/app/components/FilesEditor/BreadCrumbs/index.tsx b/app/components/FilesEditor/BreadCrumbs/index.tsx new file mode 100644 index 0000000..5f2cc33 --- /dev/null +++ b/app/components/FilesEditor/BreadCrumbs/index.tsx @@ -0,0 +1,77 @@ +import React from "react"; + +import ServerIcon from "@/components/Icons/Server"; +import FolderIcon from "@/components/Icons/Folder"; + +interface Props { + serverId: string; + path: string; + changeDirectory: (path: string) => void; +} + +const index = ({ serverId, path, changeDirectory }: Props) => { + const onClickHandler = (e: React.MouseEvent) => { + const newPath = e.currentTarget.getAttribute("data-custom-attribute"); + if (!newPath) return; + changeDirectory(newPath); + }; + + const elements = path.split("/").filter((p) => p !== ""); + console.log(elements); + return ( +
+
+ +
+
+ ); +}; + +export default index; diff --git a/app/components/FilesEditor/index.tsx b/app/components/FilesEditor/index.tsx index c890d38..09e38fa 100644 --- a/app/components/FilesEditor/index.tsx +++ b/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(null); const [ptero, setPtero] = useState(null); - const [serverId, setServerId] = useState(""); + const [serverId, setServerId] = useState("ec46691a"); + const [path, setPath] = useState("/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} /> )} +
+ +
{fileList.map((file: FileProps) => (
{
{file.attributes.name}
- {file.attributes.is_file ? file.attributes.size + " bytes" : ""} + {file.attributes.is_file ? `${file.attributes.size} bytes` : ""}
- {formateDate(file.attributes.modified_at)} + {formatDistanceToNow(new Date(file.attributes.modified_at), { + addSuffix: true, + })}
handleClickContextMenu(e, file)}> diff --git a/app/components/Icons/Server/index.tsx b/app/components/Icons/Server/index.tsx new file mode 100644 index 0000000..cf51aae --- /dev/null +++ b/app/components/Icons/Server/index.tsx @@ -0,0 +1,24 @@ +import React from "react"; + +const index = () => { + return ( + <> + + + + + ); +}; + +export default index; diff --git a/app/components/Pterodactyl/files.tsx b/app/components/Pterodactyl/files.tsx index d660b4a..864a49c 100644 --- a/app/components/Pterodactyl/files.tsx +++ b/app/components/Pterodactyl/files.tsx @@ -12,7 +12,7 @@ export default function files(pterodactyl: any) { method: "PUT", headers: await pterodactyl.helpers.authHeader(), body: JSON.stringify({ - root: "/", + root: pterodactyl.workingDirectory, files: [ { from: from.attributes.name, @@ -34,7 +34,7 @@ export default function files(pterodactyl: any) { async fetchFiles() { try { const response = await fetch( - `${process.env.NEXT_PUBLIC_URL}/api/client/servers/${pterodactyl.server_id}/files/list`, + `${process.env.NEXT_PUBLIC_URL}/api/client/servers/${pterodactyl.server_id}/files/list?directory=${pterodactyl.workingDirectory}`, { method: "GET", headers: await pterodactyl.helpers.authHeader(), diff --git a/app/components/Pterodactyl/helpers.tsx b/app/components/Pterodactyl/helpers.tsx index 2fbd437..116cb0f 100644 --- a/app/components/Pterodactyl/helpers.tsx +++ b/app/components/Pterodactyl/helpers.tsx @@ -18,5 +18,15 @@ export default function helpers(pterodactyl: any) { async setServerID(serverID: string) { return (pterodactyl.server_id = serverID); }, + + // setter for working directory + async setWorkingDirectory(workingDirectory: string) { + return (pterodactyl.workingDirectory = workingDirectory); + }, + + // getter for working directory + async getWorkingDirectory() { + return pterodactyl.workingDirectory; + }, }; } diff --git a/app/components/Pterodactyl/index.tsx b/app/components/Pterodactyl/index.tsx index d386cca..9d835e1 100644 --- a/app/components/Pterodactyl/index.tsx +++ b/app/components/Pterodactyl/index.tsx @@ -6,6 +6,7 @@ class Pterodactyl { api_key: string; files: any; helpers: any; + workingDirectory: string = "/"; constructor(server_id: string, api_key: string) { this.server_id = server_id;