[TS] Initial Typescript fix

2024-04-06 20:38:10 -06:00 · 2024-04-06 20:38:10 -06:00 · 813295c857
commit 813295c857
parent 8c15dd6752
36 changed files with 4285 additions and 1951 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,4 @@
 node_modules/
+build
+dist

--- a/index.html
+++ b/index.html
@ -18,6 +18,6 @@
  <body>
    <noscript>You need to enable JavaScript to run Minecluster</noscript>
    <div id="mcl"></div>
-    <script type="module" src="/src/App.jsx"></script>
+    <script type="module" src="/src/App.tsx"></script>
  </body>
 </html>
--- a/lib/app.ts
+++ b/lib/app.ts
@ -1,12 +1,14 @@
-// @ts-nocheck 
+// @ts-nocheck
 import k8s from "@kubernetes/client-node";
 import Minecluster from "./Minecluster.js";
 const mcl = new Minecluster();
 mcl.start();

-async function main(){
-const kc = new k8s.KubeConfig();
-kc.loadFromDefault();
+async function main() {
+  const kc = new k8s.KubeConfig();
+  kc.loadFromDefault();
 }

-main().catch((e)=>{console.error(e)});
+main().catch((e) => {
+  console.error(e);
+});
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -4,13 +4,18 @@
  "description": "Minecraft Server management using Kubernetes",
  "type": "module",
  "scripts": {
-    "build:react": "vite build",
    "start": "node dist/app.js",
-    "dev:server": "nodemon dist/app.js",
-    "dev:react": "vite",
-    "lint": "npx prettier -w src lib vite.config.js",
    "start:dev": "concurrently -k \"MCL_DEV_PORT=52025 npm run dev:server\" \" MCL_VITE_DEV_PORT=52000 MCL_VITE_BACKEND_URL=http://localhost:52025 npm run dev:react\" -n s,v -p -c green,yellow",
-    "start:dev:garden": "concurrently -k \"npm run dev:server\" \"npm run dev:react\" -n s,v -p -c green,yellow"
+    "start:dev:garden": "concurrently -k \"npm run dev:server\" \"npm run dev:react\" -n s,v -p -c green,yellow",
+    "build:react": "vite build",
+    "build:server": "esbuild `find lib \\( -name '*.ts' \\)` --tsconfig=tsconfig.server.json --outdir=build/server && tsc-alias -p tsconfig.server.json",
+    "build:all": "rm -Rf build && concurrently --kill-others-on-fail \"npm run build:react\" \"npm run build:server\" -n s,v -c cyan,yellow",
+    "package:dist": "mkdir -p dist && mv build/server/* dist/ && mv build/vite dist/static && rm -Rf build && cp -R lib/database/migrations dist/database/migrations",
+    "package:full": "rm -Rf dist && npm run build:all && npm run package:dist",
+    "dev:server": "nodemon lib/app.ts",
+    "dev:react": "vite",
+    "format": "npx prettier -w src lib vite.config.ts tsconfig*.json",
+    "tsc": "concurrently --kill-others-on-fail \"tsc --noEmit\" \"tsc -p tsconfig.server.json --noEmit\" -n s,v -c cyan,yellow"
  },
  "keywords": [
    "Minecraft",
@ -22,44 +27,65 @@
  "author": "Dunemask",
  "license": "LGPL-2.1",
  "devDependencies": {
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.9",
-    "@mui/material": "^5.15.9",
-    "@tanstack/react-query": "^5.20.1",
+    "@aperturerobotics/chonky": "^0.2.8",
+    "@aperturerobotics/chonky-icon-fontawesome": "^0.2.8",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/material": "^5.15.15",
+    "@tanstack/react-query": "^5.29.0",
+    "@types/bcrypt": "^5.0.2",
+    "@types/express": "^4.17.21",
+    "@types/jsonwebtoken": "^9.0.6",
+    "@types/node": "^20.12.5",
+    "@types/pg": "^8.11.4",
    "@vitejs/plugin-react": "^4.2.1",
    "chonky": "^2.3.2",
    "chonky-icon-fontawesome": "^2.3.2",
    "concurrently": "^8.2.2",
-    "nodemon": "^3.0.3",
+    "esbuild": "^0.20.2",
+    "nodemon": "^3.1.0",
    "prettier": "^3.2.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-quill": "^2.0.0",
-    "react-router-dom": "^6.22.0",
-    "react-toastify": "^10.0.4",
-    "socket.io-client": "^4.7.4",
-    "vite": "^5.1.1"
+    "react-router-dom": "^6.22.3",
+    "react-toastify": "^10.0.5",
+    "socket.io-client": "^4.7.5",
+    "tsc-alias": "^1.8.8",
+    "tsx": "^4.7.2",
+    "typescript": "^5.4.4",
+    "vite": "^5.2.8",
+    "vite-tsconfig-paths": "^4.3.2"
  },
  "dependencies": {
-    "@aws-sdk/client-s3": "^3.529.1",
-    "@aws-sdk/s3-request-presigner": "^3.529.1",
+    "@aws-sdk/client-s3": "^3.550.0",
+    "@aws-sdk/s3-request-presigner": "^3.550.0",
    "@kubernetes/client-node": "^0.20.0",
-    "basic-ftp": "^5.0.4",
+    "basic-ftp": "^5.0.5",
    "bcrypt": "^5.1.1",
    "chalk": "^5.3.0",
-    "express": "^4.18.2",
+    "express": "^4.19.2",
    "express-bearer-token": "^2.4.0",
    "figlet": "^1.7.0",
    "js-yaml": "^4.1.0",
    "moment": "^2.30.1",
    "multer": "^1.4.5-lts.1",
    "multer-s3": "^3.0.1",
-    "pg-promise": "^11.5.4",
+    "pg-promise": "^11.6.0",
    "postgres-migrations": "^5.3.0",
    "rcon-client": "^4.2.4",
    "react-dropzone": "^14.2.3",
-    "socket.io": "^4.7.4",
+    "socket.io": "^4.7.5",
    "uuid": "^9.0.1"
+  },
+  "nodemonConfig": {
+    "watch": [
+      "lib"
+    ],
+    "ext": "ts",
+    "execMap": {
+      "ts": "tsx --tsconfig tsconfig.server.json"
+    }
  }
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,6 +1,6 @@
 // @ts-nocheck
 import { createRoot } from "react-dom/client";
-import MCL from "./MCL.jsx";
+import MCL from "./MCL.tsx";
 const appRoot = document.getElementById("mcl");
 const root = createRoot(appRoot);

--- a/src/MCL.tsx
+++ b/src/MCL.tsx
@ -1,10 +1,10 @@
 // @ts-nocheck
 // Imports
 import { ThemeProvider } from "@mui/material/styles";
-import mclTheme from "./util/theme.js";
+import mclTheme from "./util/theme.ts";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { SettingsProvider } from "@mcl/settings";
-import Viewport from "./nav/Viewport.jsx";
+import Viewport from "./nav/Viewport.tsx";
 import { BrowserRouter } from "react-router-dom";
 // Create a query client for the app
 const queryClient = new QueryClient();
--- a/src/components/files/FilePreview.tsx
+++ b/src/components/files/FilePreview.tsx
@ -8,8 +8,8 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import Dialog from "@mui/material/Dialog";
 import Toolbar from "@mui/material/Toolbar";
-import TextEditor from "./TextEditor.jsx";
-import { cairoAuthHeader } from "@mcl/util/auth.js";
+import TextEditor from "./TextEditor.tsx";
+import { uploadServerItem } from "@mcl/api/clients/files.ts";

 const textFileTypes = [
  "properties",
@ -61,11 +61,7 @@ export default function FilePreview(props) {
    formData.append("file", blob, name);
    formData.append("id", serverId);
    formData.append("path", filePath);
-    await fetch("/api/files/upload", {
-      method: "POST",
-      body: formData,
-      headers: cairoAuthHeader(),
-    });
+    await uploadServerItem(formData);
    dialogToggle();
  }

--- a/src/components/files/MineclusterFiles.tsx
+++ b/src/components/files/MineclusterFiles.tsx
@ -21,10 +21,10 @@ import {
  getServerItem,
  moveServerItems,
  previewServerItem,
-} from "@mcl/queries";
-import { cairoAuthHeader } from "@mcl/util/auth.js";
+  uploadServerItem,
+} from "@mcl/api/clients/files";

-import { supportedFileTypes } from "./FilePreview.jsx";
+import { supportedFileTypes } from "./FilePreview.tsx";

 export default function MineclusterFiles(props) {
  // Chonky configuration
@ -118,11 +118,7 @@ export default function MineclusterFiles(props) {
    formData.append("id", serverId);
    const path = `${[...dirStack].join("/")}${filePath}`;
    formData.append("path", path);
-    await fetch("/api/files/upload", {
-      method: "POST",
-      body: formData,
-      headers: cairoAuthHeader(),
-    });
+    await uploadServerItem(formData);
  }

  async function downloadFiles(files) {
--- a/src/components/overview/Overview.tsx
+++ b/src/components/overview/Overview.tsx
@ -1,8 +1,8 @@
 // @ts-nocheck
 import { useState, useEffect } from "react";
-import { useSystemAvailable } from "@mcl/queries";
+import { useSystemAvailable } from "@mcl/api/clients/misc";
 import Box from "@mui/material/Box";
-import OverviewVisual from "./OverviewVisual.jsx";
+import OverviewVisual from "./OverviewVisual.tsx";
 export default function Overview(props) {
  const [memory, setMemory] = useState(100);
  const [cpu, setCpu] = useState(100);
--- a/src/components/server-options/VersionOption.tsx
+++ b/src/components/server-options/VersionOption.tsx
@ -2,7 +2,7 @@
 import { useState, useEffect } from "react";
 import TextField from "@mui/material/TextField";
 import MenuItem from "@mui/material/MenuItem";
-import { useVersionList } from "@mcl/queries";
+import { useVersionList } from "@mcl/api/clients/misc";

 export default function VersionOption(props) {
  const { value, onChange } = props;
--- a/src/components/servers/BackupsDialog.tsx
+++ b/src/components/servers/BackupsDialog.tsx
@ -12,7 +12,7 @@ import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import Stack from "@mui/material/Stack";
 import DownloadIcon from "@mui/icons-material/Download";
-import { getBackupUrl, getServerBackups } from "../../util/queries";
+import { getBackupUrl, getServerBackups } from "@mcl/api/clients/backups";

 export function useBackupDialog(isOpen = false) {
  const [open, setOpen] = useState(isOpen);
--- a/src/components/servers/RconDialog.tsx
+++ b/src/components/servers/RconDialog.tsx
@ -8,7 +8,7 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import Dialog from "@mui/material/Dialog";
 import Toolbar from "@mui/material/Toolbar";
-import RconView from "./RconView.jsx";
+import RconView from "./RconView.tsx";

 export function useRconDialog(isOpen = false) {
  const [open, setOpen] = useState(isOpen);
--- a/src/components/servers/RconView.tsx
+++ b/src/components/servers/RconView.tsx
@ -5,7 +5,7 @@ import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import Skeleton from "@mui/material/Skeleton";
 import Typography from "@mui/material/Typography";
-import RconSocket from "./RconSocket.js";
+import RconSocket from "./RconSocket.ts";
 import "@mcl/css/rcon.css";

 function RconLogSkeleton() {
--- a/src/components/servers/ServerCard.tsx
+++ b/src/components/servers/ServerCard.tsx
@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from "react";
-import { useStartServer, useStopServer, useDeleteServer } from "@mcl/queries";
 import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import CardActions from "@mui/material/CardActions";
@ -17,13 +16,14 @@ import EditIcon from "@mui/icons-material/Edit";
 import FolderIcon from "@mui/icons-material/Folder";
 import BackupIcon from "@mui/icons-material/Backup";
 import { Link } from "react-router-dom";
+import { useServerDelete, useServerStart, useServerStop } from "@mcl/api/clients/server";

 export default function ServerCard(props) {
  const { server, openRcon, openBackups } = props;
  const { name, id, metrics, ftpAvailable, serverAvailable, services } = server;
-  const startServer = useStartServer(id);
-  const stopServer = useStopServer(id);
-  const deleteServer = useDeleteServer(id);
+  const startServer = useServerStart(id);
+  const stopServer = useServerStop(id);
+  const deleteServer = useServerDelete(id);
  function toggleRcon() {
    if (!services.includes("server")) return;
    openRcon();
--- a/src/nav/MCLMenu.tsx
+++ b/src/nav/MCLMenu.tsx
@ -4,7 +4,7 @@ import { useState } from "react";
 import { Link, useLocation } from "react-router-dom";

 // Internal Imports
-import pages from "./MCLPages.jsx";
+import pages from "./MCLPages.tsx";

 // Materialui
 import AppBar from "@mui/material/AppBar";
--- a/src/nav/MCLPages.tsx
+++ b/src/nav/MCLPages.tsx
@ -1,8 +1,8 @@
 // @ts-nocheck
-import Home from "@mcl/pages/Home.jsx";
-import Create from "@mcl/pages/Create.jsx";
-import Files from "@mcl/pages/Files.jsx";
-import Edit from "@mcl/pages/Edit.jsx";
+import Home from "@mcl/pages/Home.tsx";
+import Create from "@mcl/pages/Create.tsx";
+import Files from "@mcl/pages/Files.tsx";
+import Edit from "@mcl/pages/Edit.tsx";
 // Go To https://mui.com/material-ui/material-icons/ for more!
 import HomeIcon from "@mui/icons-material/Home";
 import AddIcon from "@mui/icons-material/Add";
--- a/src/nav/MCLPortal.tsx
+++ b/src/nav/MCLPortal.tsx
@ -1,7 +1,7 @@
 // @ts-nocheck
 // Import React
 import { Routes, Route, Navigate } from "react-router-dom";
-import pages from "./MCLPages.jsx";
+import pages from "./MCLPages.tsx";

 const defaultPage = pages[0].path;

--- a/src/nav/Viewport.tsx
+++ b/src/nav/Viewport.tsx
@ -1,11 +1,11 @@
 // @ts-nocheck
 import Toolbar from "@mui/material/Toolbar";
-import MCLPortal from "./MCLPortal.jsx";
+import MCLPortal from "./MCLPortal.tsx";
 // Import Navbar
-/*import Navbar from "./Navbar.jsx";*/
-import { useCairoAuth } from "@mcl/util/auth.js";
-import MCLMenu from "./MCLMenu.jsx";
-import Auth from "@mcl/pages/Auth.jsx";
+/*import Navbar from "./Navbar.tsx";*/
+import { useCairoAuth } from "@mcl/api/auth";
+import MCLMenu from "./MCLMenu.tsx";
+import Auth from "@mcl/pages/Auth.tsx";

 export default function Views() {
  const auth = useCairoAuth();
--- a/src/pages/Create.tsx
+++ b/src/pages/Create.tsx
@ -1,6 +1,6 @@
 // @ts-nocheck
 import Box from "@mui/material/Box";
-import CreateCoreOptions from "./CreateCoreOptions.jsx";
+import CreateCoreOptions from "./CreateCoreOptions.tsx";
 export default function Create() {
  return (
    <Box className="create">
--- a/src/pages/CreateCoreOptions.tsx
+++ b/src/pages/CreateCoreOptions.tsx
@ -7,31 +7,31 @@ import FormControl from "@mui/material/FormControl";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
 import Typography from "@mui/material/Typography";
-import { useCreateServer } from "@mcl/queries";
+import { useServerCreate } from "@mcl/api/clients/server";

 // Core Options
-import NameOption from "@mcl/components/server-options/NameOption.jsx";
-import HostOption from "@mcl/components/server-options/HostOption.jsx";
-import VersionOption from "@mcl/components/server-options/VersionOption.jsx";
+import NameOption from "@mcl/components/server-options/NameOption.tsx";
+import HostOption from "@mcl/components/server-options/HostOption.tsx";
+import VersionOption from "@mcl/components/server-options/VersionOption.tsx";
 import ServerTypeOption, {
  serverTypeOptions,
-} from "@mcl/components/server-options/ServerTypeOption.jsx";
+} from "@mcl/components/server-options/ServerTypeOption.tsx";
 import CpuOption, {
  cpuOptions,
-} from "@mcl/components/server-options/CpuOption.jsx";
+} from "@mcl/components/server-options/CpuOption.tsx";
 import MemoryOption, {
  memoryOptions,
-} from "@mcl/components/server-options/MemoryOption.jsx";
-import ExtraPortsOption from "@mcl/components/server-options/ExtraPortsOption.jsx";
-import StorageOption from "@mcl/components/server-options/StorageOption.jsx";
+} from "@mcl/components/server-options/MemoryOption.tsx";
+import ExtraPortsOption from "@mcl/components/server-options/ExtraPortsOption.tsx";
+import StorageOption from "@mcl/components/server-options/StorageOption.tsx";

-import BackupHostOption from "@mcl/components/server-options/BackupHostOption.jsx";
-import BackupBucketOption from "@mcl/components/server-options/BackupBucketOption.jsx";
-import BackupIdOption from "@mcl/components/server-options/BackupIdOption.jsx";
-import BackupKeyOption from "@mcl/components/server-options/BackupKeyOption.jsx";
+import BackupHostOption from "@mcl/components/server-options/BackupHostOption.tsx";
+import BackupBucketOption from "@mcl/components/server-options/BackupBucketOption.tsx";
+import BackupIdOption from "@mcl/components/server-options/BackupIdOption.tsx";
+import BackupKeyOption from "@mcl/components/server-options/BackupKeyOption.tsx";
 import BackupIntervalOption, {
  backupIntervalDefault,
-} from "@mcl/components/server-options/BackupIntervalOption.jsx";
+} from "@mcl/components/server-options/BackupIntervalOption.tsx";

 const defaultServer = {
  version: "latest",
@ -46,7 +46,7 @@ export default function CreateCoreOptions() {
  const [backupEnabled, setBackupEnabled] = useState(false);
  const [spec, setSpec] = useState(defaultServer);
  const nav = useNavigate();
-  const createServer = useCreateServer(spec);
+  const createServer = useServerCreate(spec);

  const updateSpec = (attr, val) => {
    const s = { ...spec };
--- a/src/pages/CreateOptionsFull.tsx
+++ b/src/pages/CreateOptionsFull.tsx
@ -10,7 +10,7 @@ import Select from "@mui/material/Select";
 import MenuItem from "@mui/material/MenuItem";
 import InputLabel from "@mui/material/InputLabel";
 import FormControl from "@mui/material/FormControl";
-import { useCreateServer, useVersionList } from "@mcl/queries";
+import { useCreateServer, useVersionList } from "@mcl/api/clients/server";

 const defaultServer = {
  version: "latest",
--- a/src/pages/Edit.tsx
+++ b/src/pages/Edit.tsx
@ -1,7 +1,7 @@
 // @ts-nocheck
 import { useSearchParams, useNavigate } from "react-router-dom";
 import Box from "@mui/material/Box";
-import EditCoreOptions from "./EditCoreOptions.jsx";
+import EditCoreOptions from "./EditCoreOptions.tsx";
 export default function Edit() {
  const [searchParams] = useSearchParams();
  const currentServer = searchParams.get("server");
--- a/src/pages/EditCoreOptions.tsx
+++ b/src/pages/EditCoreOptions.tsx
@ -7,37 +7,37 @@ import FormControl from "@mui/material/FormControl";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
 import Typography from "@mui/material/Typography";
-import { useGetServer, useModifyServer } from "@mcl/queries";
+import { useBlueprint, useServerModify } from "@mcl/api/clients/server";

 // Core Options
-import NameOption from "@mcl/components/server-options/NameOption.jsx";
-import HostOption from "@mcl/components/server-options/HostOption.jsx";
-import VersionOption from "@mcl/components/server-options/VersionOption.jsx";
+import NameOption from "@mcl/components/server-options/NameOption.tsx";
+import HostOption from "@mcl/components/server-options/HostOption.tsx";
+import VersionOption from "@mcl/components/server-options/VersionOption.tsx";
 import ServerTypeOption, {
  serverTypeOptions,
-} from "@mcl/components/server-options/ServerTypeOption.jsx";
+} from "@mcl/components/server-options/ServerTypeOption.tsx";
 import CpuOption, {
  cpuOptions,
-} from "@mcl/components/server-options/CpuOption.jsx";
+} from "@mcl/components/server-options/CpuOption.tsx";
 import MemoryOption, {
  memoryOptions,
-} from "@mcl/components/server-options/MemoryOption.jsx";
-import ExtraPortsOption from "@mcl/components/server-options/ExtraPortsOption.jsx";
+} from "@mcl/components/server-options/MemoryOption.tsx";
+import ExtraPortsOption from "@mcl/components/server-options/ExtraPortsOption.tsx";

-import BackupHostOption from "@mcl/components/server-options/BackupHostOption.jsx";
-import BackupBucketOption from "@mcl/components/server-options/BackupBucketOption.jsx";
-import BackupIdOption from "@mcl/components/server-options/BackupIdOption.jsx";
-import BackupKeyOption from "@mcl/components/server-options/BackupKeyOption.jsx";
+import BackupHostOption from "@mcl/components/server-options/BackupHostOption.tsx";
+import BackupBucketOption from "@mcl/components/server-options/BackupBucketOption.tsx";
+import BackupIdOption from "@mcl/components/server-options/BackupIdOption.tsx";
+import BackupKeyOption from "@mcl/components/server-options/BackupKeyOption.tsx";
 import BackupIntervalOption, {
  backupIntervalDefault,
-} from "@mcl/components/server-options/BackupIntervalOption.jsx";
+} from "@mcl/components/server-options/BackupIntervalOption.tsx";

 export default function EditCoreOptions(props) {
  const { serverId } = props;
  const [spec, setSpec] = useState();
-  const modifyServer = useModifyServer(spec);
+  const modifyServer = useServerModify(spec);
  const nav = useNavigate();
-  const { isLoading, data: serverBlueprint } = useGetServer(serverId);
+  const { isLoading, data: serverBlueprint } = useBlueprint(serverId);

  useEffect(() => setSpec(serverBlueprint), [serverBlueprint]);

--- a/src/pages/Files.tsx
+++ b/src/pages/Files.tsx
@ -4,8 +4,8 @@ import { useSearchParams, useNavigate } from "react-router-dom";
 import Box from "@mui/material/Box";
 import FilePreview, {
  useFilePreview,
-} from "@mcl/components/files/FilePreview.jsx";
-import MineclusterFiles from "@mcl/components/files/MineclusterFiles.jsx";
+} from "@mcl/components/files/FilePreview.tsx";
+import MineclusterFiles from "@mcl/components/files/MineclusterFiles.tsx";

 export default function Files() {
  const [open, dialogToggle] = useFilePreview();
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@ -3,16 +3,16 @@ import { Link } from "react-router-dom";
 import { useState, useEffect } from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import ServerCard from "@mcl/components/servers/ServerCard.jsx";
+import ServerCard from "@mcl/components/servers/ServerCard.tsx";
 import RconDialog, {
  useRconDialog,
-} from "@mcl/components/servers/RconDialog.jsx";
-import Overview from "@mcl/components/overview/Overview.jsx";
+} from "@mcl/components/servers/RconDialog.tsx";
+import Overview from "@mcl/components/overview/Overview.tsx";
 import Button from "@mui/material/Button";
 import SpeedDialIcon from "@mui/material/SpeedDialIcon";
 import "@mcl/css/server-card.css";
 import "@mcl/css/overview.css";
-import { useServerInstances } from "@mcl/queries";
+import { useServerInstances } from "@mcl/api/clients/server";
 import BackupDialog, {
  useBackupDialog,
 } from "../components/servers/BackupsDialog";
--- a/src/util/api/auth.ts
+++ b/src/util/api/auth.ts
--- a/src/util/api/clients/backups.ts
+++ b/src/util/api/clients/backups.ts
@ -0,0 +1,15 @@
+import { mclAuthenticatedApiRequest } from "@mcl/api/requests";
+
+export const getServerBackups = (serverId: string) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/s3/backups",
+    json: { id: serverId },
+    jsonify: true,
+  });
+
+export const getBackupUrl = (serverId: string, backupPath: string) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/s3/backup-url",
+    json: { id: serverId, backupPath },
+    jsonify: true,
+  });
--- a/src/util/api/clients/files.ts
+++ b/src/util/api/clients/files.ts
@ -0,0 +1,68 @@
+import { mclAuthenticatedApiRequest } from "@mcl/api/requests";
+
+// ===== API Requests =====
+
+export const getServerFiles = (serverId: string, path: string) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/files/list",
+    json: { id: serverId, path },
+  });
+
+export const createServerFolder = (serverId: string, path: string) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/files/folder",
+    json: { id: serverId, path },
+  });
+
+export const uploadServerItem = (body:FormData) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/files/upload",
+    body,
+  })
+
+export const deleteServerItem = (
+  serverId: string,
+  path: string,
+  isDir: boolean,
+) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/files/item",
+    json: { id: serverId, path, isDir },
+    method: "DELETE",
+  });
+
+export const moveServerItems = (
+  serverId: string,
+  files: string,
+  destination: string,
+  origin: string,
+) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/files/move",
+    json: { id: serverId, files, destination, origin },
+  });
+
+export const previewServerItem = (serverId: string, path: string) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/files/item",
+    json: { id: serverId, path },
+  }).then((res) => res.blob());
+
+export const getServerItem = (serverId: string, name: string, path: string) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/files/item",
+    json: { id: serverId, path },
+  })
+    .then((res) => res.blob())
+    .then((blob) => downloadBlob(blob, name));
+
+async function downloadBlob(blob: Blob, name: string) {
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.style.display = "none";
+  a.href = url;
+  a.download = name;
+  document.body.appendChild(a);
+  a.click();
+  window.URL.revokeObjectURL(url);
+}
--- a/src/util/api/clients/misc.ts
+++ b/src/util/api/clients/misc.ts
@ -0,0 +1,27 @@
+import { useQuery } from "@tanstack/react-query";
+import { mclAuthenticatedApiRequest } from "../requests";
+
+// ===== API Requests =====
+
+export const getSystemAvailable = () =>
+  mclAuthenticatedApiRequest({
+    subPath: "/system/available",
+    jsonify: true,
+  });
+
+// ===== API Queries =====
+
+export const useSystemAvailable = () =>
+  useQuery({
+    queryKey: ["system-available"],
+    queryFn: getSystemAvailable,
+  });
+
+export const useVersionList = () =>
+  useQuery({
+    queryKey: ["minecraft-versions"],
+    queryFn: () =>
+      fetch(
+        "https://piston-meta.mojang.com/mc/game/version_manifest.json",
+      ).then((r) => r.json()),
+  });
--- a/src/util/api/clients/server.ts
+++ b/src/util/api/clients/server.ts
@ -0,0 +1,122 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { mclAuthenticatedApiRequest, useMutator } from "../requests";
+
+// ===== API Utils =====
+
+const useInstanceControl = (apiRequest: (args: any) => Promise<any>) =>
+  useMutator(apiRequest, ["server-instances"]);
+
+const useListControl = (apiRequest: (args: any) => Promise<any>) =>
+  useMutator(apiRequest, ["server-list"]);
+
+// ===== API Requests =====
+
+export const getServerList = () =>
+  mclAuthenticatedApiRequest({
+    subPath: "/server/path",
+    jsonify: true,
+  });
+
+export const getServerInstances = () =>
+  mclAuthenticatedApiRequest({
+    subPath: "/server/instances",
+    jsonify: true,
+  });
+
+export const getServerMetrics = (serverId: string) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/server/metrics",
+    json: { id: serverId },
+    jsonify: true,
+  });
+
+export const getServerStatus = (serverId: string) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/server/status",
+    json: { id: serverId },
+    jsonify: true,
+  });
+
+export const requestServerStart = (serverId: string) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/server/start",
+    json: { id: serverId },
+  });
+
+export const requestServerStop = (serverId: string) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/server/stop",
+    json: { id: serverId },
+  });
+
+export const requestServerDelete = (serverId: string) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/server/delete",
+    json: { id: serverId },
+    method: "DELETE",
+  });
+
+export const requestServerCreate = (serverSpec: any) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/server/create",
+    json: serverSpec,
+  });
+
+export const requestServerModify = (serverSpec: any) =>
+  mclAuthenticatedApiRequest({
+    subPath: "/server/modify",
+    json: serverSpec,
+  });
+
+export const getServerBlueprint = (serverId: string) =>
+  mclAuthenticatedApiRequest({
+      subPath: "/server/blueprint", 
+      json: { id: serverId },
+      jsonify: true
+  })
+
+// ===== API Queries =====
+
+export const useServerList = () =>
+  useQuery({ queryKey: ["server-list"], queryFn: getServerList });
+
+export const useServerInstances = () =>
+  useQuery({
+    queryKey: ["server-instances"],
+    queryFn: getServerInstances,
+    refetchInterval: 5000,
+  });
+
+export const useServerMetrics = (serverId: string) =>
+  useQuery({
+    queryKey: [`server-metrics-${serverId}`],
+    queryFn: () => getServerMetrics(serverId),
+    refetchInterval: 10000,
+  });
+
+export const useServerStatus = (serverId: string) =>
+  useQuery({
+    queryKey: [`server-status-${serverId}`],
+    queryFn: () => getServerStatus(serverId),
+  });
+
+export const useServerStart = (serverId: string) =>
+  useInstanceControl(() => requestServerStart(serverId));
+
+export const useServerStop = (serverId: string) =>
+  useInstanceControl(() => requestServerStop(serverId));
+
+export const useServerDelete = (serverId: string) =>
+  useInstanceControl(() => requestServerDelete(serverId));
+
+export const useServerCreate = (spec: any) =>
+  useListControl(() => requestServerCreate(spec));
+
+export const useServerModify = (spec: any) =>
+  useListControl(() => requestServerModify(spec));
+
+export const useBlueprint = (serverId: string) =>
+  useQuery({
+      queryKey: [`server-blueprint-${serverId}`],
+      queryFn: ()=>getServerBlueprint(serverId),
+  })
--- a/src/util/api/requests.ts
+++ b/src/util/api/requests.ts
@ -0,0 +1,56 @@
+import {
+  useMutation,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { cairoAuthHeader } from "./auth";
+
+declare interface ApiRequestArgs {
+  subPath: string;
+  body?: any | undefined;
+  json?: object | undefined;
+  method?: string;
+  jsonify?: boolean;
+  extraHeaders?: object;
+  handleErrors?: boolean;
+}
+
+async function apiRequest(apiRequestArgs: ApiRequestArgs) {
+  const { subPath, json, body, method, jsonify, extraHeaders, handleErrors } =
+    apiRequestArgs;
+  const headers = extraHeaders ?? {};
+  const requestMethod = method ?? !!json ? "POST" : "GET";
+  const requestBody = body ?? !!json ? JSON.stringify(json) : undefined;
+  if (!!json) headers["Content-Type"] = "application/json";
+  return fetch(`/api${subPath}`, {
+    method: requestMethod,
+    body: requestBody
+  }).then((res) => {
+    if (res.status >= 300 && handleErrors) throw Error(res.statusText);
+    if (jsonify) return res.json();
+    return res;
+  });
+}
+
+export async function mclAuthenticatedApiRequest(
+  apiRequestArgs: ApiRequestArgs,
+) {
+  const extraHeaders = apiRequestArgs.extraHeaders ?? {};
+  const authHeaders = cairoAuthHeader();
+  apiRequestArgs.extraHeaders = { ...extraHeaders, ...authHeaders };
+  return apiRequest(apiRequestArgs);
+}
+
+export async function mclApiRequest(apiRequestArgs: ApiRequestArgs) {
+  return apiRequest(apiRequestArgs);
+}
+
+export const useMutator = async (
+  apiRequest: (args: any) => Promise<any>,
+  invalidate: string[],
+) => {
+  const qc = useQueryClient();
+  useMutation({
+    mutationFn: apiRequest,
+    onSuccess: () => qc.invalidateQueries({ queryKey: invalidate }),
+  });
+};
--- a/src/util/queries.ts
+++ b/src/util/queries.ts
@ -1,145 +0,0 @@
-// @ts-nocheck
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { cairoAuthHeader } from "@mcl/util/auth.js";
-
-const fetchApi = (subPath) => async () =>
-  fetch(`/api${subPath}`, { headers: cairoAuthHeader() }).then((res) =>
-    res.json(),
-  );
-
-const fetchApiCore = async (subPath, json, method = "POST", jsonify = false) =>
-  fetch(`/api${subPath}`, {
-    method,
-    headers: {
-      "Content-Type": "application/json",
-      ...cairoAuthHeader(),
-    },
-    body: JSON.stringify(json),
-  }).then((res) => (jsonify ? res.json() : res));
-
-const fetchApiPost = (subPath, json) => async () =>
-  fetch(`/api${subPath}`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      ...cairoAuthHeader(),
-    },
-    body: JSON.stringify(json),
-  }).then((res) => res.json());
-
-export const useServerStatus = (serverId) =>
-  useQuery({
-    queryKey: [`server-status-${serverId}`],
-    queryFn: fetchApiPost("/server/status", { id: serverId }),
-  });
-export const useServerMetrics = (serverId) =>
-  useQuery({
-    queryKey: [`server-metrics-${serverId}`],
-    queryFn: fetchApiPost("/server/metrics", { id: serverId }),
-    refetchInterval: 10000,
-  });
-export const useStartServer = (serverId) =>
-  postJsonApi("/server/start", { id: serverId }, "server-instances");
-export const useStopServer = (serverId) =>
-  postJsonApi("/server/stop", { id: serverId }, "server-instances");
-export const useDeleteServer = (serverId) =>
-  postJsonApi("/server/delete", { id: serverId }, "server-instances", "DELETE");
-export const useCreateServer = (spec) =>
-  postJsonApi("/server/create", spec, "server-list");
-export const useModifyServer = (spec) =>
-  postJsonApi("/server/modify", spec, "server-list");
-
-export const useGetServer = (serverId) =>
-  useQuery({
-    queryKey: [`server-blueprint-${serverId}`],
-    queryFn: fetchApiPost("/server/blueprint", { id: serverId }),
-  });
-
-export const getServerBackups = (serverId) =>
-  fetchApiCore("/s3/backups", { id: serverId }, "POST", true);
-export const getBackupUrl = (serverId, backupPath) =>
-  fetchApiCore("/s3/backup-url", { id: serverId, backupPath }, "POST", true);
-
-export const getServerFiles = async (serverId, path) =>
-  fetchApiCore("/files/list", { id: serverId, path }, "POST", true);
-export const createServerFolder = async (serverId, path) =>
-  fetchApiCore("/files/folder", {
-    id: serverId,
-    path,
-  });
-export const deleteServerItem = async (serverId, path, isDir) =>
-  fetchApiCore("/files/item", { id: serverId, path, isDir }, "DELETE");
-
-export const moveServerItems = async (serverId, files, destination, origin) =>
-  fetchApiCore(
-    "/files/move",
-    { id: serverId, files, destination, origin },
-    "POST",
-  );
-
-export async function previewServerItem(serverId, path) {
-  const resp = await fetchApiCore("/files/item", { id: serverId, path });
-  if (resp.status !== 200) return console.log("AHHHH");
-  const blob = await resp.blob();
-  return blob;
-}
-
-export const getServerItem = async (serverId, name, path) =>
-  fetchApiCore("/files/item", { id: serverId, path })
-    .then((resp) =>
-      resp.status === 200
-        ? resp.blob()
-        : Promise.reject("something went wrong"),
-    )
-    .then((blob) => {
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.style.display = "none";
-      a.href = url;
-      a.download = name;
-      document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(url);
-    });
-
-export const useInvalidator = () => {
-  const qc = useQueryClient();
-  return (q) => qc.invalidateQueries([q]);
-};
-
-export const useServerList = () =>
-  useQuery({ queryKey: ["server-list"], queryFn: fetchApi("/server/list") });
-export const useServerInstances = () =>
-  useQuery({
-    queryKey: ["server-instances"],
-    queryFn: fetchApi("/server/instances"),
-    refetchInterval: 5000,
-  });
-export const useSystemAvailable = () =>
-  useQuery({
-    queryKey: ["system-available"],
-    queryFn: fetchApi("/system/available"),
-  });
-export const useVersionList = () =>
-  useQuery({
-    queryKey: ["minecraft-versions"],
-    queryFn: () =>
-      fetch(
-        "https://piston-meta.mojang.com/mc/game/version_manifest.json",
-      ).then((r) => r.json()),
-  });
-
-const postJsonApi = (subPath, body, invalidate, method = "POST") => {
-  const qc = useQueryClient();
-  return async () => {
-    const res = await fetch(`/api${subPath}`, {
-      method,
-      headers: {
-        "Content-Type": "application/json",
-        ...cairoAuthHeader(),
-      },
-      body: JSON.stringify(body),
-    });
-    if (invalidate) qc.invalidateQueries([invalidate]);
-  };
-};
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "target": "ESNext",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    /* Vite Compile Options */
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "paths": {
+      /* Common */
+      "@mcl/enums/*": ["./lib/types/enums/*"],
+      "@mcl/types/*": ["./lib/types/*"],
+      "@mcl/logging": ["./lib/util/logging.ts"],
+      /* Vite */
+      "@mcl/settings": ["./src/ctx/SettingsContext.tsx"],
+      "@mcl/api/*": ["./src/util/api/*"],
+      "@mcl/src/util/*": ["./src/util/*"],
+      "@mcl/pages/*": ["./src/pages/*"],
+      "@mcl/components/*": ["./src/components/*"],
+      "@mcl/css/*": ["./src/css/*"],
+      /* Server */
+      "@mcl/db/*": ["./lib/database/*"],
+      "@mcl/controllers/*": ["./lib/controllers/*"],
+      "@mcl/svc/*": ["./lib/services/*"],
+      "@mcl/ClientErrors": ["./lib/router/ClientErrors.ts"]
+    }
+  },
+  "exclude": ["node_modules"],
+  "tsc-alias": {
+    "resolveFullPaths": true,
+    "verbose": false
+  }
+}
--- a/tsconfig.server.json
+++ b/tsconfig.server.json
@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowImportingTsExtensions": false,
+    "isolatedModules": true,
+    "noEmit": false,
+    "resolveJsonModule": true,
+    "outDir": "./build/server",
+    "strict": true,
+    "strictPropertyInitialization": false
+  },
+  "include": ["lib", "lib/**/*.ts"],
+  "exclude": ["src", "node_modules", "old-updater"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,6 +1,6 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import path from "node:path";
+import tsconfigPaths from "vite-tsconfig-paths";

 const { MCL_VITE_BACKEND_URL, MCL_VITE_DEV_PORT } = process.env;
 const backendUrl = MCL_VITE_BACKEND_URL ?? "http://localhost:52000";
@ -8,10 +8,10 @@ const vitePort = MCL_VITE_DEV_PORT ?? 52025;

 export default () => {
  return defineConfig({
-    plugins: [react()],
+    plugins: [react(), tsconfigPaths()],
    server: {
      host: "0.0.0.0",
-      port: vitePort,
+      port: Number(vitePort),
      proxy: {
        "/api": backendUrl,
        "/socket.io": backendUrl,
@ -22,18 +22,8 @@ export default () => {
      },
    },
    build: {
-      outDir: "./build",
+      outDir: "./build/vite",
    },
    base: "/mcl/",
-    resolve: {
-      alias: {
-        "@mcl/css": path.resolve("./src/css"),
-        "@mcl/settings": path.resolve("./src/ctx/SettingsContext.jsx"),
-        "@mcl/pages": path.resolve("./src/pages"),
-        "@mcl/queries": path.resolve("./src/util/queries.js"),
-        "@mcl/components": path.resolve("./src/components"),
-        "@mcl": path.resolve("./src"),
-      },
-    },
  });
 };