chore: update react app to lint imports (#40)

Author: gregjopa

client/oneTimePayment/react/eslint.config.js

@@ -1,28 +1,44 @@
 import js from "@eslint/js";
-import globals from "globals";
+import { flatConfigs as pluginImportXFlatConfigs } from "eslint-plugin-import-x";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
 import tseslint from "typescript-eslint";
+import tsParser from "@typescript-eslint/parser";
+import * as tsResolver from "eslint-import-resolver-typescript";
 
 export default tseslint.config(
   { ignores: ["dist"] },
   {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      pluginImportXFlatConfigs.recommended,
+      pluginImportXFlatConfigs.typescript,
+    ],
     files: ["**/*.{ts,tsx}"],
     languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
+      parser: tsParser,
+      ecmaVersion: "latest",
+      sourceType: "module",
     },
     plugins: {
       "react-hooks": reactHooks,
       "react-refresh": reactRefresh,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
+      "import-x/extensions": ["error", "never"],
+      "import-x/default": "off",
       "react-refresh/only-export-components": [
         "warn",
         { allowConstantExport: true },
       ],
     },
+    settings: {
+      "import-x/resolver": {
+        name: "tsResolver",
+        resolver: tsResolver,
+      },
+    },
   },
 );

client/oneTimePayment/react/package.json

@@ -23,6 +23,8 @@
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.21.0",
+    "eslint-import-resolver-typescript": "^4.3.4",
+    "eslint-plugin-import-x": "^4.11.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",

client/oneTimePayment/react/src/App.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
 
-import { PayPalSDKProvider } from "./context/sdkContext.tsx";
+import { PayPalSDKProvider } from "./context/sdkContext";
 import { ErrorBoundary, useErrorBoundary } from "react-error-boundary";
 
-import { getBrowserSafeClientToken } from "./utils.ts";
-import SoccerBall from "./sections/SoccerBall.tsx";
+import { getBrowserSafeClientToken } from "./utils";
+import SoccerBall from "./sections/SoccerBall";
 
 function ErrorFallback({ error }: { error: Error }) {
   const { resetBoundary } = useErrorBoundary();

client/oneTimePayment/react/src/components/PayPalButton.tsx

@@ -17,7 +17,7 @@ const PayPalButton: React.FC<PaymentSessionOptions> = (
         paymentSessionOptions,
       );
     }
-  }, [sdkInstance]);
+  }, [sdkInstance, paymentSessionOptions]);
 
   const payPalOnClickHandler = async () => {
     if (!paypalSession.current) return;

client/oneTimePayment/react/src/components/VenmoButton.tsx

@@ -17,7 +17,7 @@ const VenmoButton: React.FC<PaymentSessionOptions> = (
         paymentSessionOptions,
       );
     }
-  }, [sdkInstance]);
+  }, [sdkInstance, paymentSessionOptions]);
 
   const venmoOnClickHandler = async () => {
     if (!venmoSession.current) return;

client/oneTimePayment/react/src/context/sdkContext.tsx

@@ -47,6 +47,7 @@ interface PayPalSDKProviderProps {
   clientToken?: string;
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const PayPalSDKContext =
   createContext<PayPalSDKContextProps>(initialContext);
 
@@ -77,7 +78,7 @@ export const PayPalSDKProvider: React.FC<PayPalSDKProviderProps> = ({
     };
 
     loadPayPalSDK();
-  }, [clientToken, pageType, components]);
+  });
 
   return (
     <PayPalSDKContext.Provider

client/oneTimePayment/react/src/main.tsx

@@ -1,4 +1,4 @@
 import { createRoot } from "react-dom/client";
-import App from "./App.tsx";
+import App from "./App";
 
 createRoot(document.getElementById("root")!).render(<App />);