[FEATURE] Migrated to new loading sequence (#6)

Co-authored-by: Dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.dev/elysium/minecluster/pulls/6

src/components/files/MineclusterFiles.jsx

@@ -17,8 +17,9 @@ import {
   deleteServerItem,
   getServerItem,
 } from "@mcl/queries";
+import { previewServerItem } from "../../util/queries";
 
-import "@mcl/css/header.css";
+import { supportedFileTypes } from "./FilePreview.jsx";
 
 export default function MineclusterFiles(props) {
   // Chonky configuration
@@ -33,17 +34,23 @@ export default function MineclusterFiles(props) {
     ],
     [],
   );
-  const { server: serverName } = props;
+  const { server: serverId, changePreview } = props;
   const inputRef = useRef(null);
   const [dirStack, setDirStack] = useState(["."]);
   const [files, setFiles] = useState([]);
 
   const updateFiles = () => {
     const dir = dirStack.join("/");
-    getServerFiles(serverName, dir).then((f) => {
-      const files = f.map((fi) => ({ ...fi, id: `${dir}/${fi.name}` }));
-      setFiles(files ?? []);
-    });
+    getServerFiles(serverId, dir)
+      .then((f) => {
+        const files = f.map((fi) => ({ ...fi, id: `${dir}/${fi.name}` }));
+        setFiles(files ?? []);
+      })
+      .catch(() =>
+        console.error(
+          "Couldn't update files, server likely hasn't started yet",
+        ),
+      );
   };
 
   useEffect(() => {
@@ -61,22 +68,25 @@ export default function MineclusterFiles(props) {
 
   const openParentFolder = () => setDirStack(dirStack.slice(0, -1));
 
-  function openFolder(payload) {
+  function openItem(payload) {
     const { targetFile: file } = payload;
     if (file && file.isDir) return setDirStack(file.id.split("/"));
-    if (file && !file.isDir) return downloadFiles([file]);
+    if (!file || file.isDir) return; // Ensure file exists or is dir
+    if (supportedFileTypes.includes(file.name.split(".").pop()))
+      return previewFile(file);
+    return downloadFiles([file]);
   }
 
   function createFolder() {
     const name = prompt("What is the name of the new folder?");
     const path = [...dirStack, name].join("/");
-    createServerFolder(serverName, path).then(updateFiles);
+    createServerFolder(serverId, path).then(updateFiles);
   }
 
   function deleteItems(files) {
     Promise.all(
       files.map((f) =>
-        deleteServerItem(serverName, [...dirStack, f.name].join("/"), f.isDir),
+        deleteServerItem(serverId, [...dirStack, f.name].join("/"), f.isDir),
       ),
     )
       .catch((e) => console.error("Error deleting some files!", e))
@@ -94,7 +104,7 @@ export default function MineclusterFiles(props) {
   async function uploadFile(file) {
     const formData = new FormData();
     formData.append("file", file);
-    formData.append("name", serverName);
+    formData.append("id", serverId);
     formData.append("path", [...dirStack, name].join("/"));
     await fetch("/api/files/upload", {
       method: "POST",
@@ -105,13 +115,20 @@ export default function MineclusterFiles(props) {
   async function downloadFiles(files) {
     Promise.all(
       files.map((f) =>
-        getServerItem(serverName, f.name, [...dirStack, f.name].join("/")),
+        getServerItem(serverId, f.name, [...dirStack, f.name].join("/")),
       ),
     )
       .then(() => console.log("Done downloading files!"))
       .catch((e) => console.error("Error Downloading files!", e));
   }
 
+  function previewFile(file) {
+    const { name } = file;
+    previewServerItem(serverId, [...dirStack, name].join("/")).then(
+      (fileData) => changePreview(name, fileData),
+    );
+  }
+
   function fileClick(chonkyEvent) {
     const { id: clickEvent, payload } = chonkyEvent;
     if (clickEvent === "open_parent_folder") return openParentFolder();
@@ -122,7 +139,7 @@ export default function MineclusterFiles(props) {
     if (clickEvent === "delete_files")
       return deleteItems(chonkyEvent.state.selectedFilesForAction);
     if (clickEvent !== "open_files") return; // console.log(clickEvent);
-    openFolder(payload);
+    openItem(payload);
   }
   return (
     <Box className="minecluster-files" sx={{ height: "calc(100vh - 6rem)" }}>
@@ -134,7 +151,6 @@ export default function MineclusterFiles(props) {
         onChange={uploadFileSelection}
         multiple
       />
-
       <FileBrowser
         files={files}
         folderChain={getFolderChain()}
@@ -144,6 +160,7 @@ export default function MineclusterFiles(props) {
       >
         <FileNavbar />
         <FileToolbar />
+
         <FileList />
         <FileContextMenu />
       </FileBrowser>