fix: axios security advisory, update deps (#20)

* chore: update deps, bump node to 22

* chore: fixes for new TS checks

* chore: update version to 3.3.3

* chore: more dependency updates

.eslintrc.cjs

@@ -39,5 +39,7 @@ module.exports = {
     "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error",
+    "@typescript-eslint/only-throw-error": "warn", // until Tanstack Query upgrades its packages
+    "@typescript-eslint/unbound-method": "warn", // react-i18next typing issue at 15.0.1
   },
 };

.nvmrc

@@ -1 +1 @@
-v20
+v22

package.json

@@ -1,6 +1,6 @@
 {
     "name": "bmc-ui",
-    "version": "3.3.2",
+    "version": "3.3.3",
     "private": true,
     "type": "module",
     "scripts": {
@@ -10,9 +10,9 @@
         "preview": "vite preview",
         "test": "echo \"Error: no test specified\" && exit 0"
     },
-    "packageManager": "npm@10.2.0",
+    "packageManager": "npm@10.8.2",
     "dependencies": {
-        "@fontsource/inter": "^5.0.19",
+        "@fontsource/inter": "^5.0.20",
         "@radix-ui/react-avatar": "^1.1.0",
         "@radix-ui/react-checkbox": "^1.1.1",
         "@radix-ui/react-dialog": "^1.1.1",
@@ -24,43 +24,43 @@
         "@radix-ui/react-switch": "^1.1.0",
         "@radix-ui/react-toast": "^1.2.1",
         "@radix-ui/react-tooltip": "^1.1.2",
-        "@tanstack/react-query": "^5.51.15",
-        "@tanstack/react-router": "^1.45.11",
-        "axios": "^1.7.2",
+        "@tanstack/react-query": "^5.51.24",
+        "@tanstack/react-router": "^1.48.4",
+        "axios": "^1.7.4",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "filesize": "^10.1.4",
-        "i18next": "^23.12.2",
+        "i18next": "^23.14.0",
         "i18next-browser-languagedetector": "^8.0.0",
         "javascript-time-ago": "^2.5.10",
-        "lucide-react": "^0.416.0",
+        "lucide-react": "^0.428.0",
         "next-themes": "^0.3.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-i18next": "^15.0.0",
-        "tailwind-merge": "^2.4.0",
+        "react-i18next": "^15.0.1",
+        "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7",
         "vaul": "^0.9.1"
     },
     "devDependencies": {
-        "@tanstack/react-query-devtools": "^5.51.15",
-        "@tanstack/router-devtools": "^1.45.11",
-        "@tanstack/router-vite-plugin": "^1.45.8",
-        "@types/node": "^20.14.12",
+        "@tanstack/react-query-devtools": "^5.51.24",
+        "@tanstack/router-devtools": "^1.48.4",
+        "@tanstack/router-vite-plugin": "^1.48.3",
+        "@types/node": "^22.4.1",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
-        "@typescript-eslint/eslint-plugin": "^7.17.0",
-        "@typescript-eslint/parser": "^7.17.0",
+        "@typescript-eslint/eslint-plugin": "^8.1.0",
+        "@typescript-eslint/parser": "^8.1.0",
         "@vitejs/plugin-react-swc": "^3.7.0",
-        "autoprefixer": "^10.4.19",
+        "autoprefixer": "^10.4.20",
         "eslint": "^8.57.0",
         "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-react-refresh": "^0.4.9",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "eslint-plugin-tailwindcss": "^3.17.4",
-        "postcss": "^8.4.40",
-        "tailwindcss": "^3.4.7",
-        "vite": "^5.3.5",
+        "postcss": "^8.4.41",
+        "tailwindcss": "^3.4.10",
+        "vite": "^5.4.1",
         "vite-plugin-svgr": "^4.2.0"
     }
 }

src/app.tsx

@@ -3,7 +3,7 @@ import "@/i18n.ts";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ThemeProvider } from "next-themes";
 import { StrictMode } from "react";
-import ReactDOM from "react-dom/client";
+import { createRoot } from "react-dom/client";
 
 import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -24,7 +24,7 @@ declare module "@tanstack/react-router" {
 // Render the app
 const rootElement = document.getElementById("app")!;
 if (!rootElement.innerHTML) {
-  const root = ReactDOM.createRoot(rootElement);
+  const root = createRoot(rootElement);
   root.render(
     <StrictMode>
       <ThemeProvider attribute="class">

src/components/user-nav.tsx

@@ -44,7 +44,9 @@ export function UserNav() {
       <DropdownMenuTrigger asChild>
         <Button className="relative size-8 rounded-full focus:outline-none">
           <Avatar className="size-12">
-            <AvatarFallback className="text-sm">{username.charAt(0)}</AvatarFallback>
+            <AvatarFallback className="text-sm">
+              {username.charAt(0)}
+            </AvatarFallback>
           </Avatar>
         </Button>
       </DropdownMenuTrigger>

src/contexts/AuthContext.tsx

@@ -1,9 +1,4 @@
-import React, {
-  createContext,
-  type ReactNode,
-  useCallback,
-  useState,
-} from "react";
+import { createContext, type ReactNode, useCallback, useState } from "react";
 
 export interface AuthContext {
   isAuthenticated: boolean;
@@ -48,7 +43,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     window.location.href = "/login";
   }, []);
 
-  const login = React.useCallback(
+  const login = useCallback(
     (username: string, token: string, rememberMe: boolean) => {
       localStorage.setItem("username", username);
       setStoredToken(token, rememberMe);

src/hooks/use-toast.ts

@@ -13,12 +13,12 @@ type ToasterToast = ToastProps & {
   action?: ToastActionElement;
 };
 
-const actionTypes = {
+interface ActionType {
   ADD_TOAST: "ADD_TOAST",
   UPDATE_TOAST: "UPDATE_TOAST",
   DISMISS_TOAST: "DISMISS_TOAST",
   REMOVE_TOAST: "REMOVE_TOAST",
-} as const;
+}
 
 let count = 0;
 
@@ -27,8 +27,6 @@ function genId() {
   return count.toString();
 }
 
-type ActionType = typeof actionTypes;
-
 type Action =
   | {
       type: ActionType["ADD_TOAST"];

src/lib/api/file.ts

@@ -51,7 +51,7 @@ export function useBackupMutation() {
         "content-disposition"
       ] as string;
       const blob = response.data as Blob;
-      const match = contentDisposition?.match(/filename="(.+?)"/);
+      const match = /filename="(.+?)"/.exec(contentDisposition);
       const filename = match ? match[1] : "backup.tar.gz";
       return { blob, filename };
     },
@@ -92,7 +92,7 @@ export function useFirmwareUpdateMutation(
         if (variables.file) formData.append("file", variables.file);
         await api.post(`/bmc/upload/${handle}`, formData, {
           onUploadProgress: (progressEvent) => {
-            progressCallBack && progressCallBack(progressEvent);
+            if (progressCallBack) progressCallBack(progressEvent);
           },
         });
       }
@@ -142,7 +142,7 @@ export function useNodeUpdateMutation(
         if (variables.file) formData.append("file", variables.file);
         await api.post(`/bmc/upload/${handle}`, formData, {
           onUploadProgress: (progressEvent) => {
-            progressCallBack && progressCallBack(progressEvent);
+            if (progressCallBack) progressCallBack(progressEvent);
           },
         });
       }

src/routes/_tabLayout/firmware-upgrade.lazy.tsx

@@ -28,7 +28,7 @@ function FirmwareUpgrade() {
   } = useFlash();
 
   useEffect(() => {
-    _statusMessage && setStatusMessage(_statusMessage);
+    if (_statusMessage) setStatusMessage(_statusMessage);
   }, [_statusMessage]);
 
   const handleSubmit = (e: React.FormEvent) => {

src/routes/_tabLayout/flash-node.lazy.tsx

@@ -49,7 +49,7 @@ function FlashNode() {
   const [statusMessage, setStatusMessage] = useState("");
 
   useEffect(() => {
-    _statusMessage && setStatusMessage(_statusMessage);
+    if (_statusMessage) setStatusMessage(_statusMessage);
   }, [_statusMessage]);
 
   const handleSubmit = () => {