🚨 Update linter config

eslint.config.mjs

@@ -0,0 +1,35 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  ...compat.extends(
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ),
+  {
+    plugins: {
+      "@typescript-eslint": typescriptEslint,
+      "simple-import-sort": simpleImportSort,
+    },
+    rules: {
+      // Sorting imports and exports
+      "simple-import-sort/imports": "error",
+      "simple-import-sort/exports": "error",
+    },
+  },
+];

package.json

@@ -32,9 +32,12 @@
     "dev:debug": "NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
     "start": "next start",
-    "eslint": "next lint",
-    "lint": "prettier --check .",
-    "format": "prettier --write ."
+    "lint:prettier": "prettier --check src docs .github *.json *.md *.mjs",
+    "format:prettier": "prettier --write src docs .github *.json *.md *.mjs",
+    "lint:eslint": "eslint src",
+    "format:eslint": "eslint --fix src",
+    "lint": "yarn lint:prettier && yarn lint:eslint",
+    "format": "yarn format:prettier && yarn format:eslint"
   },
   "engines": {
     "node": "22.x"
@@ -58,6 +61,15 @@
     ]
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.16.0",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
+    "eslint": "^9.16.0",
+    "eslint-config-next": "^15.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "prettier": "^2.5.1",
     "typescript": "^5.7.2"
   }

src/components/Error.tsx

@@ -1,5 +1,6 @@
 import { FunctionComponent } from "react";
 import { Alert } from "react-bootstrap";
+
 import { ErrorType } from "../context/error";
 
 interface ErrorProps extends ErrorType {

src/components/Errors.tsx

@@ -1,4 +1,5 @@
 import { useContext } from "react";
+
 import { ErrorContext } from "../context/error";
 import Error from "./Error";
 

src/components/Header.tsx

@@ -1,5 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Container, Nav, Navbar } from "react-bootstrap";
+
 import { useIsLoggedIn } from "../utils/hooks";
 import Login from "./Login";
 import Logout from "./Logout";

src/components/Home.tsx

@@ -1,7 +1,8 @@
-import { KeyboardEvent, useEffect, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Link from "next/link";
+import { KeyboardEvent, useEffect, useState } from "react";
 import { Button, Card, Form, ListGroup } from "react-bootstrap";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import { isValidFireplace } from "../utils/helpers";
 
 // I suspect there's no API for fetching fireplaces.

src/components/Login.tsx

@@ -1,8 +1,9 @@
+import { signIn } from "edilkamin";
 import React, { useCallback, useContext, useState } from "react";
 import { Button, Form } from "react-bootstrap";
-import { signIn } from "edilkamin";
-import { TokenContext } from "../context/token";
+
 import { ErrorContext, ErrorType } from "../context/error";
+import { TokenContext } from "../context/token";
 import { setTokenLocalStorage } from "../utils/helpers";
 
 const Login = (): JSX.Element => {
@@ -13,7 +14,7 @@ const Login = (): JSX.Element => {
 
   const addErrorCallback = useCallback(
     (error: ErrorType) => addError(error),
-    // eslint-disable-next-line
+
     []
   );
 
@@ -23,7 +24,7 @@ const Login = (): JSX.Element => {
   const onPasswordChange = (e: React.ChangeEvent<HTMLInputElement>): void =>
     setPassword(e.target.value);
 
-  const onLogin = async (e: React.MouseEvent<HTMLElement>): Promise<void> => {
+  const onLogin = async (): Promise<void> => {
     try {
       const token = await signIn(username, password);
       setTokenLocalStorage(token);

src/components/Logout.tsx

@@ -1,10 +1,11 @@
 import { Button } from "react-bootstrap";
+
 import { useLogout } from "../utils/hooks";
 
 const Logout = (): JSX.Element => {
   // TODO: ideally hit the backend to invalidate the token too
   const logout = useLogout();
-  const onLogoutClick = (e: React.MouseEvent<HTMLElement>): void => logout();
+  const onLogoutClick = (): void => logout();
 
   return (
     <Button type="submit" onClick={onLogoutClick}>

src/components/PowerToggle.tsx

@@ -1,6 +1,6 @@
-import { Accordion, ToggleButton, ToggleButtonGroup } from "react-bootstrap";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ToggleButton, ToggleButtonGroup } from "react-bootstrap";
 
 const togglePowerProps = [
   { value: 1, label: "On", icon: "sun" },

src/components/TemperatureAdjuster.tsx

@@ -1,4 +1,4 @@
-import { InputGroup, FormControl } from "react-bootstrap";
+import { FormControl, InputGroup } from "react-bootstrap";
 
 const TemperatureAdjuster = ({
   currentTemperature,

src/context/error.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode, createContext, useState } from "react";
+import { createContext, FunctionComponent, ReactNode, useState } from "react";
 
 interface ErrorType {
   title?: string;

src/context/token.tsx

@@ -1,10 +1,11 @@
 import {
+  createContext,
   FunctionComponent,
   ReactNode,
-  createContext,
   useEffect,
   useState,
 } from "react";
+
 import { getTokenLocalStorage } from "../utils/helpers";
 
 interface TokenContextType {

src/pages/_app.tsx

@@ -1,16 +1,18 @@
-import type { AppProps } from "next/app";
-import Head from "next/head";
-import { Container } from "react-bootstrap";
+import "bootstrap/dist/css/bootstrap.min.css";
+
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { fab } from "@fortawesome/free-brands-svg-icons";
-import { fas } from "@fortawesome/free-solid-svg-icons";
 import { far } from "@fortawesome/free-regular-svg-icons";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import type { AppProps } from "next/app";
+import Head from "next/head";
+import { Container } from "react-bootstrap";
+
 import Errors from "../components/Errors";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
-import { TokenContextProvider } from "../context/token";
 import { ErrorContextProvider } from "../context/error";
-import "bootstrap/dist/css/bootstrap.min.css";
+import { TokenContextProvider } from "../context/token";
 
 library.add(fab, far, fas);
 

src/pages/_document.tsx

@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from "next/document";
+import { Head, Html, Main, NextScript } from "next/document";
 
 const Document = () => (
   <Html>

src/pages/api/proxy/[...params].ts

@@ -1,5 +1,5 @@
-import type { NextApiRequest, NextApiResponse } from "next";
 import { API_URL } from "edilkamin";
+import type { NextApiRequest, NextApiResponse } from "next";
 
 const handler = async (
   req: NextApiRequest,

src/pages/fireplace/[mac].tsx

@@ -1,18 +1,18 @@
-import { NextPage } from "next";
 import axios from "axios";
-import { useCallback, useContext, useEffect, useState } from "react";
+import { configure, DeviceInfoType } from "edilkamin";
+import { NextPage } from "next";
 import { useRouter } from "next/router";
-import { Accordion, ToggleButton, ToggleButtonGroup } from "react-bootstrap";
-import { DeviceInfoType, configure } from "edilkamin";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { TokenContext } from "../../context/token";
-import PowerToggle from "../../components/PowerToggle";
-import DeviceDetails from "../../components/DeviceDetails";
+import { useCallback, useContext, useEffect, useState } from "react";
+import { Accordion } from "react-bootstrap";
+
 import DebugInfo from "../../components/DebugInfo";
+import DeviceDetails from "../../components/DeviceDetails";
+import PowerToggle from "../../components/PowerToggle";
 import TemperatureAdjuster from "../../components/TemperatureAdjuster";
 import { ErrorContext, ErrorType } from "../../context/error";
+import { TokenContext } from "../../context/token";
 
-const Fireplace: NextPage<{}> = () => {
+const Fireplace: NextPage = () => {
   const router = useRouter();
   const mac = router.query.mac as string;
   const [info, setInfo] = useState<DeviceInfoType | null>(null);
@@ -26,7 +26,7 @@ const Fireplace: NextPage<{}> = () => {
 
   const addErrorCallback = useCallback(
     (error: ErrorType) => addError(error),
-    // eslint-disable-next-line
+
     []
   );
 
@@ -40,6 +40,7 @@ const Fireplace: NextPage<{}> = () => {
         setTemperature(data.nvm.user_parameters.enviroment_1_temperature);
         setLoading(false);
       } catch (error: unknown) {
+        console.error(error);
         if (axios.isAxiosError(error) && error?.response?.status === 404) {
           addErrorCallback({
             title: "Device not found",
@@ -76,6 +77,7 @@ const Fireplace: NextPage<{}> = () => {
       await setTargetTemperature(token!, mac!, newTemperature);
       setTemperature(newTemperature);
     } catch (error) {
+      console.error(error);
       addErrorCallback({
         title: "Temperature Update Failed",
         body: "Unable to update the temperature. Please try again.",

src/pages/index.tsx

@@ -1,5 +1,5 @@
 import type { NextPage } from "next";
-import Head from "next/head";
+
 import Home from "../components/Home";
 
 const Index: NextPage = () => <Home />;

src/utils/helpers.ts

@@ -14,8 +14,8 @@ const removeTokenLocalStorage = (): void =>
   localStorage.removeItem(tokenLocalStorageKey);
 
 export {
-  isValidFireplace,
   getTokenLocalStorage,
-  setTokenLocalStorage,
+  isValidFireplace,
   removeTokenLocalStorage,
+  setTokenLocalStorage,
 };

src/utils/hooks.ts

@@ -1,7 +1,8 @@
-import { useContext } from "react";
 import { useRouter } from "next/router";
-import { removeTokenLocalStorage } from "./helpers";
+import { useContext } from "react";
+
 import { TokenContext } from "../context/token";
+import { removeTokenLocalStorage } from "./helpers";
 
 /**
  * Returns: