whole lotta eslint fixes

dashboard/.eslintrc.cjs

@@ -10,9 +10,8 @@ module.exports = {
   parser: "@typescript-eslint/parser",
   plugins: ["react-refresh"],
   rules: {
-    "react-refresh/only-export-components": [
-      "warn",
-      { allowConstantExport: true },
-    ],
+    "@typescript-eslint/no-explicit-any": ["off"],
+    "react-refresh/only-export-components": ["off"],
+    "react-hooks/exhaustive-deps": ["off"],
   },
 };

dashboard/package.json

@@ -45,6 +45,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@types/crypto-js": "^4.2.2",
     "@types/node": "^20.11.0",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",

dashboard/src/App.tsx

@@ -1,5 +1,5 @@
 import "./App.css";
-import React, { useReducer } from "react";
+import React from "react";
 import axios from "axios";
 import { MAPACHE_API_URL } from "./consts/config";
 import { Button } from "./components/ui/button";
@@ -11,42 +11,18 @@ import {
   getAxiosErrorMessage,
 } from "./lib/axios-error-handler";
 import { useNavigate } from "react-router-dom";
-import { checkCredentials } from "./lib/auth";
 
 function App() {
   const navigate = useNavigate();
-  const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
-  const [connected, setConnected] = React.useState(false);
-  const [pingResponse, setPingResponse] = React.useState<any>({});
 
   const [loginLoading, setLoginLoading] = React.useState(false);
   const [loginEmail, setLoginEmail] = React.useState("");
   const [loginPassword, setLoginPassword] = React.useState("");
 
   React.useEffect(() => {
     init();
-    checkVpnConnection();
-    const interval = setInterval(() => {
-      // checkVpnConnection();
-    }, 1000);
-
-    return () => clearInterval(interval);
   }, []);
 
-  const checkVpnConnection = async () => {
-    try {
-      const response = await axios.get(`${MAPACHE_API_URL}/ping`);
-      if (response.status == 200) {
-        setConnected(true);
-        setPingResponse(response.data);
-      }
-    } catch (error) {
-      setConnected(false);
-      return;
-    }
-  };
-
   const init = async () => {
     if (
       localStorage.getItem("id") != null &&

dashboard/src/components/DashboardHeader.tsx

@@ -1,11 +1,9 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Separator } from "./ui/separator";
-import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";

dashboard/src/consts/config.tsx

@@ -1,6 +1,6 @@
 import { User, initUser } from "@/models/user";
 
-export var currentUser: User = initUser;
+export const currentUser: User = initUser;
 
 export const MAPACHE_API_URL =
   import.meta.env.VITE_MAPACHE_API_URL ?? "http://localhost:7001";

dashboard/src/lib/auth.ts

@@ -9,7 +9,7 @@ export const checkCredentials = async () => {
     return 1;
   } else if (currentUser.id == "") {
     try {
-      var userId = localStorage.getItem("id");
+      const userId = localStorage.getItem("id");
       const response = await axios.get(`${MAPACHE_API_URL}/users/${userId}`, {
         headers: {
           Authorization: `Bearer ${localStorage.getItem("token")}`,

dashboard/src/models/user.tsx

@@ -9,18 +9,18 @@ export interface User {
   roles: string[];
 }
 
-function setUser(user: User, userInput: any): void {
-  user.id = userInput.id || user.id;
-  user.firstName = userInput.firstName || user.firstName;
-  user.lastName = userInput.lastName || user.lastName;
-  user.email = userInput.email || user.email;
-  user.subteam = userInput.subteam || user.subteam;
-  user.createdAt = userInput.createdAt || user.createdAt;
-  user.updatedAt = userInput.updatedAt || user.updatedAt;
-  user.roles = userInput.roles || user.roles;
-}
+// function setUser(user: User, userInput: any): void {
+//   user.id = userInput.id || user.id;
+//   user.firstName = userInput.firstName || user.firstName;
+//   user.lastName = userInput.lastName || user.lastName;
+//   user.email = userInput.email || user.email;
+//   user.subteam = userInput.subteam || user.subteam;
+//   user.createdAt = userInput.createdAt || user.createdAt;
+//   user.updatedAt = userInput.updatedAt || user.updatedAt;
+//   user.roles = userInput.roles || user.roles;
+// }
 
-export var initUser = {
+export const initUser = {
   id: "",
   firstName: "",
   lastName: "",

dashboard/src/pages/auth/RegisterPage.tsx

@@ -38,7 +38,7 @@ function RegisterPage() {
       navigate("/");
     }
     try {
-      var userId = localStorage.getItem("id");
+      const userId = localStorage.getItem("id");
       const response = await axios.get(`${MAPACHE_API_URL}/users/${userId}`, {
         headers: {
           Authorization: `Bearer ${localStorage.getItem("token")}`,
@@ -81,7 +81,7 @@ function RegisterPage() {
       return;
     setCreateAccountLoading(true);
     try {
-      var userId = localStorage.getItem("id");
+      const userId = localStorage.getItem("id");
       const response = await axios.post(
         `${MAPACHE_API_URL}/users/${userId}`,
         {

dashboard/src/pages/dashboard/DashboardPage.tsx

@@ -1,9 +1,5 @@
 import React from "react";
-import axios from "axios";
 import { Loader2 } from "lucide-react";
-import { useToast } from "@/components/ui/use-toast";
-import { MAPACHE_API_URL, currentUser } from "@/consts/config";
-import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { useNavigate } from "react-router-dom";
 import { checkCredentials } from "@/lib/auth";
@@ -12,7 +8,6 @@ import GR24PedalLiveWidget from "../gr24/pedal/PedalLiveWidget";
 import { Card } from "@/components/ui/card";
 
 function DashboardPage() {
-  const { toast } = useToast();
   const navigate = useNavigate();
   const [loading, setLoading] = React.useState(true);
 
@@ -21,7 +16,7 @@ function DashboardPage() {
   }, []);
 
   const init = async () => {
-    var status = await checkCredentials();
+    const status = await checkCredentials();
     if (status != 0) {
       navigate("/auth/register");
     } else {

dashboard/src/pages/gr24/pedal/PedalDetailsPage.tsx

@@ -1,14 +1,4 @@
-import axios from "axios";
 import { Loader2 } from "lucide-react";
-import { useToast } from "@/components/ui/use-toast";
-import {
-  LineChart,
-  Line,
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-} from "recharts";
 import React, { useCallback } from "react";
 import { checkCredentials } from "@/lib/auth";
 import { useNavigate } from "react-router-dom";
@@ -17,30 +7,22 @@ import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
 
 function PedalDetailsPage() {
-  const { toast } = useToast();
   const navigate = useNavigate();
   const [loading, setLoading] = React.useState(true);
 
-  const [socketUrl, setSocketUrl] = React.useState(
-    "ws://localhost:7001/ws/gr24/pedal",
-  );
-  const [messageHistory, setMessageHistory] = React.useState([]);
+  const [socketUrl] = React.useState("ws://localhost:7001/ws/gr24/pedal");
   const { sendMessage, lastMessage, readyState } = useWebSocket(socketUrl);
 
   const [jsonData, setJsonData] = React.useState([{}]);
 
   React.useEffect(() => {
     init();
     if (lastMessage !== null) {
-      setMessageHistory((prev) => prev.concat(lastMessage));
-      if (messageHistory.length > 999) {
-        setMessageHistory([]);
-      }
       setJsonData((prev) => [
         ...prev.concat(JSON.parse(lastMessage.data)).slice(-100),
       ]);
     }
-  }, [lastMessage, setMessageHistory]);
+  }, [lastMessage]);
 
   const handleClickSendMessage = useCallback(() => sendMessage("Hello"), []);
 
@@ -54,7 +36,7 @@ function PedalDetailsPage() {
 
   const init = async () => {
     const currentRoute = window.location.pathname + window.location.search;
-    var status = await checkCredentials();
+    const status = await checkCredentials();
     if (status != 0) {
       navigate(`/auth/register?route=${currentRoute}`);
     } else {
@@ -133,7 +115,7 @@ function PedalDetailsPage() {
             </div>
             <div className="m-4 w-1/2 text-wrap text-start text-slate-500">
               <h1 className="text-xl text-white">
-                Message Count: {messageHistory.length}
+                Message Count: {jsonData.length}
               </h1>
               {jsonData.reverse().map((message, idx) => (
                 <div key={idx}>{JSON.stringify(message)}</div>

dashboard/src/pages/gr24/pedal/PedalLiveWidget.tsx

@@ -4,28 +4,12 @@ import useWebSocket, { ReadyState } from "react-use-websocket";
 import { Progress } from "@/components/ui/progress";
 import { Separator } from "@/components/ui/separator";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faCircleCheck,
-  faCircleXmark,
-} from "@fortawesome/free-regular-svg-icons";
+import { faCircleXmark } from "@fortawesome/free-regular-svg-icons";
 
 function GR24PedalLiveWidget() {
   const [socketUrl] = React.useState("ws://localhost:7001/ws/gr24/pedal");
   const { lastMessage, readyState } = useWebSocket(socketUrl);
 
-  React.useEffect(() => {
-    if (lastMessage !== null) {
-    }
-  }, [lastMessage]);
-
-  const connectionStatus = {
-    [ReadyState.CONNECTING]: "Connecting",
-    [ReadyState.OPEN]: "Open",
-    [ReadyState.CLOSING]: "Closing",
-    [ReadyState.CLOSED]: "Closed",
-    [ReadyState.UNINSTANTIATED]: "Uninstantiated",
-  }[readyState];
-
   const LoadingComponent = () => {
     if (readyState === ReadyState.CONNECTING) {
       return (