fix: linting errors + migrate to new config system (#415)

pavanjoshi914 · web-flow · commit b775c40dc543 · 2024-06-12T13:00:17.000+07:00
diff --git a/frontend/.eslintignore b/frontend/.eslintignore
diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
@@ -0,0 +1,83 @@
+import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+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 [
+  {
+    ignores: [
+      "**/dist",
+      "**/node_modules",
+      "**/dist",
+      "src/components/ui/navigation-menu.tsx",
+    ],
+  },
+  ...fixupConfigRules(
+    compat.extends(
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:react-hooks/recommended",
+      "prettier"
+    )
+  ),
+  {
+    plugins: {
+      "react-refresh": reactRefresh,
+      "@typescript-eslint": fixupPluginRules(typescriptEslint),
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+
+      parser: tsParser,
+    },
+    files: ["**/*.ts", "**/*.tsx"],
+    rules: {
+      "react-refresh/only-export-components": [
+        "warn",
+        {
+          allowConstantExport: true,
+        },
+      ],
+
+      "@typescript-eslint/ban-ts-comment": [
+        "error",
+        {
+          "ts-ignore": "allow-with-description",
+        },
+      ],
+
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          args: "none",
+        },
+      ],
+
+      "no-console": [
+        "error",
+        {
+          allow: ["info", "warn", "error"],
+        },
+      ],
+
+      "no-constant-binary-expression": "error",
+      curly: "error",
+    },
+  },
+];
diff --git a/frontend/lint-staged.config.js b/frontend/lint-staged.config.js
@@ -1,5 +1,8 @@
 export default {
-  "src/**/*.{ts,tsx,json}": ["eslint --fix --max-warnings 0","prettier --write"],
+  "src/**/*.{ts,tsx,json}": [
+    "eslint --fix --no-warn-ignored --max-warnings 0",
+    "prettier --write",
+  ],
   "platform_specific/**/*.ts": ["prettier --write"],
   "package.json": ["prettier --write"],
   "src/**/*.ts": () => "tsc --noEmit",
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,8 +11,8 @@
     "prepare:wails": "shx cp ./platform_specific/wails/src/utils/*.ts src/utils/",
     "prepare:http": "shx cp ./platform_specific/http/src/utils/*.ts src/utils/",
     "lint": "yarn lint:js && yarn tsc:compile && yarn format:fix --report-unused-disable-directives --max-warnings 0",
-    "lint:js": "eslint src --ext .js,.ts,.tsx --max-warnings 0",
-    "lint:js:fix": "eslint src --ext .js,.ts,.tsx --fix",
+    "lint:js": "eslint src --max-warnings 0",
+    "lint:js:fix": "eslint src --fix",
     "tsc:compile": "tsc --noEmit",
     "format": "prettier --check '**/*.(md|json)' 'src/**/*.(js|ts|tsx)' '!src/assets/**/*.json' 'platform_specific/**/*.ts'",
     "format:fix": "prettier --loglevel silent --write '**/*.(md|json)' 'src/**/*.(js|ts|tsx)' '!src/assets/**/*.json' 'platform_specific/**/*.ts'",
@@ -59,6 +59,9 @@
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@eslint/compat": "^1.0.3",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.4.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
@@ -71,10 +74,11 @@
     "@typescript-eslint/parser": "^7.11.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.45.0",
+    "eslint": "^9.4.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "globals": "^15.4.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.5",
     "postcss": "^8.4.32",
diff --git a/frontend/src/components/redirects/SetupRedirect.tsx b/frontend/src/components/redirects/SetupRedirect.tsx
@@ -16,7 +16,7 @@ export function SetupRedirect() {
     if (didSetupThisSession) {
       // ensure redirect does not happen as node may still be starting
       // which would then incorrectly redirect to the login page
-      console.log("Skipping setup redirect on initial setup");
+      console.info("Skipping setup redirect on initial setup");
       return;
     }
     if (info.setupCompleted) {
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
@@ -33,4 +33,5 @@ function Badge({ className, variant, ...props }: BadgeProps) {
   );
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export { Badge, badgeVariants };
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 
 import { cn } from "src/lib/utils";
 
@@ -54,4 +54,5 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";
 
+// eslint-disable-next-line react-refresh/only-export-components
 export { Button, buttonVariants };
diff --git a/frontend/src/components/ui/navigation-menu.tsx b/frontend/src/components/ui/navigation-menu.tsx
@@ -1,7 +1,7 @@
-import * as React from "react";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";
+import * as React from "react";
 
 import { cn } from "src/lib/utils";
 
@@ -116,13 +116,13 @@ NavigationMenuIndicator.displayName =
   NavigationMenuPrimitive.Indicator.displayName;
 
 export {
-  navigationMenuTriggerStyle,
   NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
   NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
   NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
   NavigationMenuViewport,
 };
diff --git a/frontend/src/components/ui/theme-provider.tsx b/frontend/src/components/ui/theme-provider.tsx
@@ -62,11 +62,13 @@ export function ThemeProvider({
   );
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const useTheme = () => {
   const context = useContext(ThemeProviderContext);
 
-  if (context === undefined)
+  if (context === undefined) {
     throw new Error("useTheme must be used within a ThemeProvider");
+  }
 
   return context;
 };
diff --git a/frontend/src/components/ui/use-toast.ts b/frontend/src/components/ui/use-toast.ts
@@ -6,7 +6,7 @@ import type { ToastActionElement, ToastProps } from "src/components/ui/toast";
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;
 
-type ToasterToast = ToastProps & {
+export type ToasterToast = ToastProps & {
   id: string;
   title?: React.ReactNode;
   description?: React.ReactNode;
@@ -135,7 +135,7 @@ function dispatch(action: Action) {
   });
 }
 
-type Toast = Omit<ToasterToast, "id">;
+export type Toast = Omit<ToasterToast, "id">;
 
 function toast({ ...props }: Toast) {
   const id = genId();
@@ -188,4 +188,4 @@ function useToast() {
   };
 }
 
-export { useToast, toast };
+export { toast, useToast };
diff --git a/frontend/src/hooks/useRedeemOnchainFunds.ts b/frontend/src/hooks/useRedeemOnchainFunds.ts
@@ -35,7 +35,7 @@ export function useRedeemOnchainFunds() {
           body: JSON.stringify({ toAddress }),
         }
       );
-      console.log("Redeemed onchain funds", response);
+      console.info("Redeemed onchain funds", response);
       if (!response?.txId) {
         throw new Error("No address in response");
       }
diff --git a/frontend/src/screens/peers/ConnectPeer.tsx b/frontend/src/screens/peers/ConnectPeer.tsx
@@ -31,7 +31,7 @@ export default function ConnectPeer() {
       if (!pubkey || !address || !port) {
         throw new Error("connection details missing");
       }
-      console.log(`🔌 Peering with ${pubkey}`);
+      console.info(`🔌 Peering with ${pubkey}`);
       const connectPeerRequest: ConnectPeerRequest = {
         pubkey,
         address,
diff --git a/frontend/src/screens/peers/Peers.tsx b/frontend/src/screens/peers/Peers.tsx
@@ -79,7 +79,7 @@ export default function Peers() {
       ) {
         return;
       }
-      console.log(`Disconnecting from ${peerId}`);
+      console.info(`Disconnecting from ${peerId}`);
 
       await request(`/api/peers/${peerId}`, {
         method: "DELETE",
diff --git a/frontend/src/screens/settings/DebugTools.tsx b/frontend/src/screens/settings/DebugTools.tsx
@@ -58,11 +58,12 @@ export default function DebugTools() {
             const amount = window.prompt("Enter amount in sats:");
             if (amount) {
               const nodeId = window.prompt("Enter node pubkey:");
-              if (nodeId)
+              if (nodeId) {
                 apiRequest("/api/send-spontaneous-payment-probes", "POST", {
                   amount: parseInt(amount) * 1000,
                   nodeId,
                 });
+              }
             }
           }}
         >
@@ -78,7 +79,9 @@ export default function DebugTools() {
           onClick={() => {
             const maxLen = window.prompt("Enter max length (in characters):");
 
-            if (maxLen) apiRequest(`/api/log/app?maxLen=${maxLen}`, "GET");
+            if (maxLen) {
+              apiRequest(`/api/log/app?maxLen=${maxLen}`, "GET");
+            }
           }}
         >
           Get App Logs
@@ -87,7 +90,9 @@ export default function DebugTools() {
           onClick={() => {
             const maxLen = window.prompt("Enter max length (in characters):");
 
-            if (maxLen) apiRequest(`/api/log/node?maxLen=${maxLen}`, "GET");
+            if (maxLen) {
+              apiRequest(`/api/log/node?maxLen=${maxLen}`, "GET");
+            }
           }}
         >
           Get Node Logs
diff --git a/frontend/src/utils/handleRequestError.ts b/frontend/src/utils/handleRequestError.ts
@@ -1,5 +1,13 @@
+import { Toast, ToasterToast } from "src/components/ui/use-toast";
+
+type ToastSignature = (props: Toast) => {
+  id: string;
+  dismiss: () => void;
+  update: (props: ToasterToast) => void;
+};
+
 export function handleRequestError(
-  toast: any,
+  toast: ToastSignature,
   message: string,
   error: unknown
 ) {
diff --git a/frontend/yarn.lock b/frontend/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export function SetupRedirect() {`
`16`	`16`	`if (didSetupThisSession) {`
`17`	`17`	`// ensure redirect does not happen as node may still be starting`
`18`	`18`	`// which would then incorrectly redirect to the login page`
`19`		`- console.log("Skipping setup redirect on initial setup");`
	`19`	`+ console.info("Skipping setup redirect on initial setup");`
`20`	`20`	`return;`
`21`	`21`	`}`
`22`	`22`	`if (info.setupCompleted) {`
Original file line number	Diff line number	Diff line change
`@@ -33,4 +33,5 @@ function Badge({ className, variant, ...props }: BadgeProps) {`
`33`	`33`	`);`
`34`	`34`	`}`
`35`	`35`
	`36`	`+// eslint-disable-next-line react-refresh/only-export-components`
`36`	`37`	`export { Badge, badgeVariants };`