[FEATURE] Basic Text Editor

src/components/files/FilePreview.jsx

@@ -27,11 +27,14 @@ export default function FilePreview(props) {
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
 
-  const { previewData, open, dialogToggle, onModifiedFile } = props;
-  const { fileData, name } = previewData ?? {};
+  const { previewData, open, dialogToggle, server: serverId } = props;
+  const { fileData, name, filePath } = previewData ?? {};
   const ext = name ? name.split(".").pop() : null;
   const isTextFile = textFileTypes.includes(ext);
 
+  useEffect(() => {
+    onPreviewChange();
+  }, [fileData]);
   const editorChange = (v) => setModifiedText(v);
 
   async function onPreviewChange() {
@@ -41,13 +44,18 @@ export default function FilePreview(props) {
   }
 
   async function onSave() {
-    console.log(modifiedText);
+    const formData = new FormData();
+    const blob = new Blob([modifiedText], { type: "plain/text" });
+    formData.append("file", blob, name);
+    formData.append("id", serverId);
+    formData.append("path", filePath);
+    await fetch("/api/files/upload", {
+      method: "POST",
+      body: formData,
+    });
+    dialogToggle();
   }
 
-  useEffect(() => {
-    onPreviewChange();
-  }, [fileData]);
-
   return (
     <Dialog
       sx={

src/components/files/MineclusterFiles.jsx

@@ -105,7 +105,7 @@ export default function MineclusterFiles(props) {
     const formData = new FormData();
     formData.append("file", file);
     formData.append("id", serverId);
-    formData.append("path", [...dirStack, name].join("/"));
+    formData.append("path", [...dirStack, file.name].join("/"));
     await fetch("/api/files/upload", {
       method: "POST",
       body: formData,
@@ -125,7 +125,8 @@ export default function MineclusterFiles(props) {
   function previewFile(file) {
     const { name } = file;
     previewServerItem(serverId, [...dirStack, name].join("/")).then(
-      (fileData) => changePreview(name, fileData),
+      (fileData) =>
+        changePreview(name, fileData, [...dirStack, name].join("/")),
     );
   }
 

src/pages/Files.jsx

@@ -1,8 +1,6 @@
 import { useState, useEffect } from "react";
 import { useSearchParams, useNavigate } from "react-router-dom";
 import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import Toolbar from "@mui/material/Toolbar";
 import FilePreview, {
   useFilePreview,
 } from "@mcl/components/files/FilePreview.jsx";
@@ -18,14 +16,15 @@ export default function Files() {
     if (!currentServer) nav("/");
   }, [currentServer]);
 
-  function changePreview(name, fileData) {
-    setPreviewData({ name, fileData });
+  function changePreview(name, fileData, filePath) {
+    setPreviewData({ name, fileData, filePath });
     dialogToggle();
   }
 
   return (
     <Box className="edit" sx={{ height: "100%" }}>
       <FilePreview
+        server={currentServer}
         open={open}
         dialogToggle={dialogToggle}
         previewData={previewData}

src/util/queries.js

@@ -52,7 +52,7 @@ export const deleteServerItem = async (serverId, path, isDir) =>
 
 export async function previewServerItem(serverId, path) {
   const resp = await fetchApiCore("/files/item", { id: serverId, path });
-  if (!resp.status === 200) return console.log("AHHHH");
+  if (resp.status !== 200) return console.log("AHHHH");
   const blob = await resp.blob();
   return blob;
 }