fix: issues with build

Author: jaypyles

.eslintrc.js

@@ -1,18 +1,33 @@
 module.exports = {
   env: {
     node: true, // Add this line to specify the Node.js environment
+    browser: true, // Add this line to specify the browser environment
   },
   parser: '@typescript-eslint/parser', // Specifies the ESLint parser
   extends: [
     'eslint:recommended', // Use the recommended rules from ESLint
     'plugin:@typescript-eslint/recommended', // Use the recommended rules from the @typescript-eslint/eslint-plugin
+    'plugin:react/recommended', // Use the recommended rules from eslint-plugin-react
   ],
   parserOptions: {
     ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
     sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+  },
+  plugins: [
+    'react', // Add the react plugin
+  ],
+  settings: {
+    react: {
+      version: 'detect', // Automatically detect the react version
+    },
   },
   rules: {
-    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    'react/jsx-no-useless-fragment': 'warn', // Warns about unnecessary fragments
+    'react/jsx-key': 'error', // Ensures that elements in lists have keys
+    // Place to specify additional ESLint rules. Can be used to overwrite rules specified from the extended configs
     // e.g. "@typescript-eslint/explicit-function-return-type": "off",
   },
   overrides: [

package-lock.json

@@ -42,7 +42,8 @@
     "build": "next build",
     "start": "next start",
     "serve": "serve -s ./dist",
-    "docs": "ts-node ./docs/takeDocsPhotos.ts"
+    "docs": "ts-node ./docs/takeDocsPhotos.ts",
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'"
   },
   "eslintConfig": {
     "extends": [
@@ -65,6 +66,8 @@
   "devDependencies": {
     "@types/qbittorrent-api-v2": "^1.2.3",
     "@types/react-redux": "^7.1.34",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react": "^7.37.4",
     "tailwindcss": "^3.3.5"
   },
   "overrides": {

package.json

@@ -1,3 +1,4 @@
+import React from "react";
 import { useSettings } from "@/lib/hooks/useSettings";
 import { ColorResult, SketchPicker } from "react-color";
 import { useState } from "react";

src/components/dashboard/controls/settings/settings-menu/color-changer/color-changer.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useState } from "react";
 import { JellyfinIntegration } from "./jellyfin-integration/jellyfin-integration";
 import { IntegrationLoader } from "@/components/dashboard/widgets/skeletons";

src/components/dashboard/widgets/external-integrations/external-integration.tsx

@@ -15,21 +15,25 @@ export const UptimeKumaIntegration = ({
   url,
 }: UptimeKumaIntegrationProps) => {
   const Uptimes = () => {
-    return Object.keys(data.uptime).map((key) => (
-      <Tooltip title={key} placement="top" key={key}>
-        <div
-          className={clsx(classes.uptime, {
-            [classes.up as string]:
-              data.uptime[key as string]?.msg.includes("200"),
-            [classes.down as string]:
-              !data.uptime[key as string]?.msg.includes("200"),
-          })}
-        >
-          <div className={classes.circle}></div>
-          <Typography>{data.uptime[key as string]?.ping}ms</Typography>
-        </div>
-      </Tooltip>
-    ));
+    return (
+      <>
+        {Object.keys(data.uptime).map((key) => (
+          <Tooltip title={key} placement="top" key={key}>
+            <div
+              className={clsx(classes.uptime, {
+                [classes.up as string]:
+                  data.uptime[key as string]?.msg.includes("200"),
+                [classes.down as string]:
+                  !data.uptime[key as string]?.msg.includes("200"),
+              })}
+            >
+              <div className={classes.circle}></div>
+              <Typography>{data.uptime[key as string]?.ping}ms</Typography>
+            </div>
+          </Tooltip>
+        ))}
+      </>
+    );
   };
 
   return (

src/components/dashboard/widgets/external-integrations/uptime-kuma-integration/uptime-kuma-integration.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Typography } from "@mui/material";
 import styles from "./ram-overview.module.css";
 import MemoryIcon from "@mui/icons-material/Memory";

src/components/dashboard/widgets/ram-overview/ram-overview.tsx

@@ -120,13 +120,17 @@ export const CommandQueue = ({
             >
               <TableCell component="th" scope="row">
                 {command.commands.map((com) => (
-                  <p className={classes.name}>{com.name}</p>
+                  <p key={com.name} className={classes.name}>
+                    {com.name}
+                  </p>
                 ))}
               </TableCell>
 
               <TableCell component="th" scope="row">
                 {command.commands.map((com) => (
-                  <p>{com.command}</p>
+                  <p key={com.command} className={classes.command}>
+                    {com.command}
+                  </p>
                 ))}
               </TableCell>
 

src/components/host/command-queue/command-queue.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Tooltip } from "@mui/material";
 import { useState } from "react";
 

src/components/shared/cursor-tooltip/cursor-tooltip.tsx

@@ -3,9 +3,10 @@ import { useEffect } from "react";
 export const usePollingEffect = (
   fn: () => void,
   interval: number,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   deps: any[],
-  callOnMount: boolean = true,
-  polling: boolean = true
+  callOnMount = true,
+  polling = true
 ) => {
   useEffect(() => {
     if (callOnMount) {

src/lib/hooks/usePollingEffect.ts

@@ -1 +1 @@
-export type QbittorrentData = {};
+export type QbittorrentData = object;

src/lib/services/external-integrations/qbittorrent/qbittorrent.types.ts

@@ -1,6 +1,6 @@
-import { RadarrResponseType } from "../../../../pages/api/integrations/sonarr/sonarr.types";
+import { SonarrResponseType } from "../../../../pages/api/integrations/sonarr/sonarr.types";
 
-export const getShows = async (): Promise<RadarrResponseType> => {
+export const getShows = async (): Promise<SonarrResponseType> => {
   const response = await fetch("/api/integrations/sonarr/shows", {
     method: "GET",
   });

src/lib/services/external-integrations/sonarr/integration.ts

@@ -1,4 +1,4 @@
-export type Movie = {};
+export type Movie = object;
 
 export type MovieResponseType = {
   movies: Movie[];

src/pages/api/integrations/radarr/radarr.types.ts

@@ -1,12 +1,12 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { RadarrResponseType } from "./sonarr.types";
+import { SonarrResponseType } from "./sonarr.types";
 import { cacheApi } from "@/lib/services/api";
 
 export default async function handler(
   _: NextApiRequest,
-  res: NextApiResponse<RadarrResponseType>
+  res: NextApiResponse<SonarrResponseType>
 ) {
-  const response = await cacheApi.get<RadarrResponseType>(
+  const response = await cacheApi.get<SonarrResponseType>(
     "/integrations/sonarr/shows"
   );
   res.status(200).json(response.data);

src/pages/api/integrations/sonarr/shows.ts

@@ -1,5 +1,5 @@
-export type Show = {};
+export type Show = object;
 
-export type RadarrResponseType = {
+export type SonarrResponseType = {
   shows: Show[];
 };

src/pages/api/integrations/sonarr/sonarr.types.ts

@@ -1 +1 @@
-export type UptimeKumaResponseType = {};
+export type UptimeKumaResponseType = object;

src/pages/api/integrations/uptime-kuma/uptime-kuma.types.ts

@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import { useAppConfig } from "@/lib/hooks/use-app-config";
 
 const IframeComponent = () => {