client_panel/app/components/FilesEditor/index.tsx

"use client";

import { formatDistanceToNow } from "date-fns";
import React, { useEffect, useState, useCallback } from "react";
import DocumentIcon from "@/components/Icons/Document";
import FolderIcon from "@/components/Icons/Folder";
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";
import { useSearchParams } from "next/navigation";

interface FileAttributes {
  name: string;
  modified_at: string;
  size: number;
  is_file: boolean;
}

interface FileProps {
  attributes: FileAttributes;
}

interface ContextMenuState {
  show: boolean;
  x: number;
  y: number;
  file: FileProps | null;
}

interface RenamePopupState {
  show: boolean;
}

const initialContextMenuState: ContextMenuState = {
  show: false,
  x: 0,
  y: 0,
  file: null,
};

const initialRenamePopupState: RenamePopupState = {
  show: false,
};

const Index = () => {
  const [apiKey, setApiKey] = useState<string>("");
  const [fileList, setFileList] = useState<FileProps[]>([]);
  const [contextMenu, setContextMenu] = useState<ContextMenuState>(
    initialContextMenuState
  );
  const [renamePopup, setRenamePopup] = useState<RenamePopupState>(
    initialRenamePopupState
  );
  const [selectedFile, setSelectedFile] = useState<FileProps | null>(null);
  const [ptero, setPtero] = useState<Pterodactyl | null>(null);
  const [path, setPath] = useState<string>("/");
  const urlParams = useSearchParams();
  const serverId = urlParams.get("serverid");

  const setCredentials = useCallback(() => {
    setApiKey("ptlc_N77A2hEczFmSwGXm4cEXh4Gw3ZP0Ygr5NaBkGlE7pjU");
  }, []);

  const showRenamePopup = useCallback(() => {
    setContextMenu(initialContextMenuState);
    setRenamePopup({ show: true });
  }, []);

  const closeRenamePopup = useCallback(() => {
    setRenamePopup(initialRenamePopupState);
  }, []);

  const fetchFiles = useCallback(async (ptero: Pterodactyl) => {
    const files = await ptero.files.fetchFiles();
    setFileList(files);
  }, []);

  const handleRenameFile = useCallback(
    async (file: FileProps, newName: string) => {
      if (ptero) {
        await ptero.files.rename(file, newName);
        await fetchFiles(ptero);
        setRenamePopup(initialRenamePopupState);
      }
    },
    [ptero, fetchFiles]
  );

  const handleClickContextMenu = useCallback(
    (e: React.MouseEvent<HTMLDivElement>, file: FileProps) => {
      e.preventDefault();
      setContextMenu({ show: true, x: e.pageX - 100, y: e.pageY, file });
    },
    []
  );

  const handleContextMenuClose = useCallback(() => {
    setContextMenu(initialContextMenuState);
  }, []);

  const changeDirectory = useCallback(
    (newPath: string) => {
      if (ptero) {
        ptero.helpers.setWorkingDirectory(newPath);
        fetchFiles(ptero);
        setPath(newPath);
      }
    },
    [ptero, fetchFiles]
  );

  useEffect(() => {
    const setupApplication = async () => {
      await setCredentials();
      if (apiKey && serverId) {
        const pteroInstance = new Pterodactyl(serverId, apiKey);
        pteroInstance.helpers.setWorkingDirectory(path);
        setPtero(pteroInstance);
        await fetchFiles(pteroInstance);
      }
    };

    setupApplication();
  }, [apiKey, serverId, setCredentials, path, fetchFiles]);

  return (
    <>
      {renamePopup.show && (
        <RenamePopup
          file={selectedFile}
          renameCallback={handleRenameFile}
          closeRemapFunction={closeRenamePopup}
        />
      )}
      {contextMenu.show && (
        <ContextMenuContainer
          x={contextMenu.x}
          y={contextMenu.y}
          closeContextMenu={handleContextMenuClose}
          renameFunction={showRenamePopup}
          setFile={setSelectedFile}
          file={contextMenu.file}
        />
      )}

      {serverId && (
        <div className="flex p-4 gap-4">
          <BreadCrumbs
            serverId={serverId}
            path={path}
            changeDirectory={changeDirectory}
          />
        </div>
      )}

      {serverId &&
        fileList.map((file: FileProps) => (
          <div
            className="flex justify-between gap-4 bg-content mb-1 hover:bg-neutral-content pl-4 pr-4 pt-1 pb-1 rounded-md"
            key={file.attributes.name}
          >
            <div className="w-10">
              {file.attributes.is_file ? <DocumentIcon /> : <FolderIcon />}
            </div>
            <div className="w-64 text-left">
              {file.attributes.is_file ? (
                <a href="#">{file.attributes.name}</a>
              ) : (
                <a
                  onClick={() =>
                    changeDirectory(`${path}/${file.attributes.name}`)
                  }
                >
                  {file.attributes.name}
                </a>
              )}
            </div>
            <div className="w-48 text-right">
              {file.attributes.is_file ? `${file.attributes.size} bytes` : ""}
            </div>
            <div
              title={file.attributes.modified_at}
              className="w-60 text-right"
            >
              {formatDistanceToNow(new Date(file.attributes.modified_at), {
                addSuffix: true,
              })}
            </div>
            <div onClick={(e) => handleClickContextMenu(e, file)}>
              <MenuIcon />
            </div>
          </div>
        ))}
    </>
  );
};

export default Index;