feat: added eslint and A11y for linting.

nayan458 · nayan458 · commit d28d31dfee4a · 2026-05-08T13:36:56.000+05:30
diff --git a/eslint.config.js b/eslint.config.js
@@ -15,17 +15,22 @@ export default defineConfig([
     extends: [
       js.configs.recommended,
       tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
       jsxA11y.flatConfigs.recommended,
     ],
 
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
 
     rules: {
+      ...reactHooks.configs['recommended-latest'].rules,
+      ...reactRefresh.configs.vite.rules,
       'jsx-a11y/alt-text': 'error',
       'jsx-a11y/anchor-is-valid': 'warn',
       'jsx-a11y/no-autofocus': 'warn',
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@types/js-cookie": "^3.0.6",
     "@vitejs/plugin-react-swc": "^4.3.0",
     "axios": "^1.13.2",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "generate:api": "openapi-typescript http://localhost:8080/v3/api-docs -o src/api/generated/types.ts",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
@@ -1,5 +1,6 @@
 // context/AuthContext.tsx
 import React, { createContext, useState, useEffect, useRef, useCallback } from "react";
+import type { AxiosError } from "axios";
 import { authStore } from "@store/authStore";
 import { authClient } from "@/utils/http/clients/authClient.client";
 import { apiClient } from "@/utils/http/clients/backendApiClientGeneral";
@@ -89,7 +90,9 @@ export const AuthProvider = (props: { children: React.ReactNode }) => {
       try {
         const stack = new Error().stack;
         console.warn("loginSuccess called with undefined token, stack:\n", stack);
-      } catch { }
+      } catch {
+        // intentional empty catch for stack logging
+      }
     }
     setIsAuthenticated(true);
   };
@@ -111,9 +114,9 @@ export const AuthProvider = (props: { children: React.ReactNode }) => {
       return false;
     } catch (error) {
       console.error("Logout failed:", {
-        message: (error as any)?.message,
-        response: (error as any)?.response?.data,
-        status: (error as any)?.response?.status,
+        message: (error as AxiosError)?.message,
+        response: (error as AxiosError)?.response?.data,
+        status: (error as AxiosError)?.response?.status,
       });
       return false;
     }
@@ -146,9 +149,9 @@ export const AuthProvider = (props: { children: React.ReactNode }) => {
         }
       } catch (error) {
         console.error("AuthContext.bootstrap: refresh failed:", {
-          message: (error as any)?.message,
-          response: (error as any)?.response?.data,
-          status: (error as any)?.response?.status,
+          message: (error as AxiosError)?.message,
+          response: (error as AxiosError)?.response?.data,
+          status: (error as AxiosError)?.response?.status,
         });
         // Avoid stale bootstrap failure overriding a successful OAuth callback login.
         if (!hasLoginSucceededRef.current && !authStore.getToken()) {
diff --git a/src/context/LanguageContext.tsx b/src/context/LanguageContext.tsx
@@ -1,26 +1,20 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
+// eslint-disable react-refresh/only-export-components
 
-const LanguageContext = createContext();
+import React, { createContext, useState, useEffect } from 'react';
+import { LanguageContextType } from '../types/language';
 
-export const useLanguage = () => useContext(LanguageContext);
+// eslint-disable-next-line react-refresh/only-export-components
+export const LanguageContext = createContext<LanguageContextType | null>(null);
 
 export const LanguageProvider = ({ children }: { children: React.ReactNode }) => {
-  const [lang, setLang] = useState(sessionStorage.getItem("lang"));
-
-  // Load saved language on mount
-  useEffect(() => {
-    const savedLang = (sessionStorage.getItem("lang") || "en");
-    if (savedLang) {
-      setLang(savedLang);
-    }
-  }, []);
+  const [lang, setLang] = useState<string>(() => sessionStorage.getItem("lang") || "en");
 
   // Save language on change
   useEffect(() => {
-    sessionStorage.setItem("lang", lang || "en");
+    sessionStorage.setItem("lang", lang);
   }, [lang]);
 
-  const changeLanguage = (code) => {
+  const changeLanguage = (code: string) => {
     setLang(code);
   };
 
diff --git a/src/hooks/useLanguage.ts b/src/hooks/useLanguage.ts
@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { LanguageContext } from '../context/LanguageContext';
+
+export const useLanguage = () => {
+  const context = useContext(LanguageContext);
+  if (!context) {
+    throw new Error('useLanguage must be used within a LanguageProvider');
+  }
+  return context;
+};
diff --git a/src/layouts/MainLayout/BaseLayout.tsx b/src/layouts/MainLayout/BaseLayout.tsx
@@ -41,12 +41,12 @@ const BaseLayout: React.FC = () => {
   // const startRef = useRef(null);
   // const NAV_HEIGHT_OFFSET = 60;
 
-  const scrollToSection = (yScrollPosition: number) => {
-    window.scrollTo({
-      top: yScrollPosition,
-      behavior: 'smooth'
-    });
-  };
+  // const scrollToSection = (yScrollPosition: number) => {
+  //   window.scrollTo({
+  //     top: yScrollPosition,
+  //     behavior: 'smooth'
+  //   });
+  // };
 
   return (
     <div className="flex flex-col background">
diff --git a/src/layouts/ProtectedLayOut/ProtectedLayout.tsx b/src/layouts/ProtectedLayOut/ProtectedLayout.tsx
@@ -38,7 +38,7 @@ export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
       <div style={{ minHeight: "62vh" }}>
         <div className='flex flex items-center justify-center w-100% h-110 flex-col gap-4'>
           {/* <FaSpinner className="animate-spin text-4xl text-[#66B0FF]" /> */}
-          <img src={cdacRoundLogo} className="mr-3 mb-4 size-20 cdacSpinner" />
+          <img src={cdacRoundLogo} className="mr-3 mb-4 size-20 cdacSpinner" alt="Loading spinner" />
           <div className="text-[#000000] text-lg">
             Loading...
           </div>
diff --git a/src/services/inputInterceptor.ts b/src/services/inputInterceptor.ts
@@ -2,10 +2,9 @@
    GLOBAL PHONETIC INTERCEPTOR (SPACE BASED)
 ========================================== */
 
-let isApplying: boolean = false;
+import type { TransliterateResponse } from "../types/transliterate";
 
-let currentLang: string =
-  sessionStorage.getItem("aicode") || "en";
+let isApplying: boolean = false;
 
 /* ==========================================
    FIELD SKIP LOGIC
@@ -106,7 +105,7 @@ function phoneticApiPromise(
       })
         .then((res: Response) => res.json())
 
-        .then((data: any) => {
+        .then((data: TransliterateResponse) => {
 
           const converted: string | undefined =
             data?.result?.[lang];
@@ -238,7 +237,7 @@ export function setPhoneticLanguage(
   lang: string
 ): void {
 
-  currentLang = lang;
+  sessionStorage.setItem("aicode", lang);
 
   sessionStorage.setItem(
     "aicode",
diff --git a/src/textTranslation/CustomTranslate.tsx b/src/textTranslation/CustomTranslate.tsx
@@ -1,11 +1,11 @@
 // src/CustomTranslate.tsx
 import { useEffect } from "react";
-import { useLanguage } from "../context/LanguageContext";
+import { useLanguage } from "../hooks/useLanguage";
 import { translateDom } from "./domTranslator.ts";
 import { observeDom } from "./observeDom.ts";
 
 const CustomTranslate: React.FC = () => {
-  const { lang } = useLanguage() as { lang: string };
+  const { lang } = useLanguage();
 
   useEffect(() => {
     if (!lang || lang === "en") return;
diff --git a/src/textTranslation/GoogleTranslate.tsx b/src/textTranslation/GoogleTranslate.tsx
@@ -1,11 +1,20 @@
 import { useEffect } from "react";
-import { useLanguage } from "../context/LanguageContext";
+import { useLanguage } from "../hooks/useLanguage";
 
 // Extend the Window interface to include Google Translate types
 declare global {
   interface Window {
     googleTranslateElementInit: () => void;
-    google: any;
+    google: {
+      translate: {
+        TranslateElement: {
+          InlineLayout: {
+            SIMPLE: unknown;
+          };
+          new (options: unknown, elementId: string): unknown;
+        };
+      };
+    };
   }
 }
 
@@ -30,9 +39,11 @@ const GoogleTranslate: React.FC = () => {
         "google_translate_element"
       );
     };
+  }, []);
 
+  useEffect(() => {
     document.cookie = `googtrans=/auto/${lang};path=/;domain=${window.location.hostname}`;
-  }, []);
+  }, [lang]);
 
   return <div id="google_translate_element"></div>;
 };
diff --git a/src/types/language.ts b/src/types/language.ts
@@ -0,0 +1,4 @@
+export type LanguageContextType = {
+  lang: string;
+  changeLanguage: (code: string) => void;
+};
diff --git a/src/types/transliterate.ts b/src/types/transliterate.ts
@@ -0,0 +1,3 @@
+export type TransliterateResponse = {
+  result: Record<string, string>;
+};
diff --git a/src/utils/http/interceptors/debugAuthInterceptor.interceptor.ts b/src/utils/http/interceptors/debugAuthInterceptor.interceptor.ts
@@ -1,4 +1,4 @@
-import type { AxiosInstance } from "axios";
+import type { AxiosInstance, AxiosError } from "axios";
 
 // Debug interceptor to log requests/responses for the auth client
 export const debugAuthInterceptor = (client: AxiosInstance) => {    
@@ -33,10 +33,10 @@ export const debugAuthInterceptor = (client: AxiosInstance) => {
         },
         (err) => {
             console.error("authClient.response error:", {
-                message: (err as any)?.message,
-                response: (err as any)?.response?.data,
-                status: (err as any)?.response?.status,
-                config: (err as any)?.config,
+                message: (err as AxiosError)?.message,
+                response: (err as AxiosError)?.response?.data,
+                status: (err as AxiosError)?.response?.status,
+                config: (err as AxiosError)?.config,
             });
             return Promise.reject(err);
         }
diff --git a/src/utils/http/interceptors/error.interceptor.ts b/src/utils/http/interceptors/error.interceptor.ts
@@ -8,7 +8,7 @@ export const errorInterceptor = (client: AxiosInstance) => {
         // Dispatch a global event so React context can handle logout and UI updates
         try {
           window.dispatchEvent(new CustomEvent('app:unauthorized'));
-        } catch (e) {
+        } catch {
           // fallback to hard navigation if CustomEvent is not supported
           window.location.href = "/login";
         }
diff --git a/src/utils/http/interceptors/refreshToken.interceptor.ts b/src/utils/http/interceptors/refreshToken.interceptor.ts
@@ -1,6 +1,6 @@
 import { authStore } from "../../../store/authStore";
 import { authClient } from "../clients/authClient.client";
-import { type AxiosInstance } from "axios";
+import { type AxiosInstance, type AxiosError } from "axios";
 
 let isRefreshing = false;
 let pendingQueue: ((token: string) => void)[] = [];
@@ -66,14 +66,14 @@ export const refreshTokenInterceptor = (client: AxiosInstance) => {
           return client(originalRequest);
         } catch (refreshError) {
           console.error("refreshToken.interceptor: refresh failed:", {
-            message: (refreshError as any)?.message,
-            response: (refreshError as any)?.response?.data,
-            status: (refreshError as any)?.response?.status,
+            message: (refreshError as AxiosError)?.message,
+            response: (refreshError as AxiosError)?.response?.data,
+            status: (refreshError as AxiosError)?.response?.status,
           });
           authStore.clear();
           try {
             window.dispatchEvent(new CustomEvent('app:unauthorized'));
-          } catch (e) {
+          } catch {
             window.location.href = "/login";
           }
           return Promise.reject(refreshError);
diff --git a/src/views/Auth/AuthPage.tsx b/src/views/Auth/AuthPage.tsx
@@ -5,7 +5,7 @@ import { setPostLoginRedirect } from "@utils/postLoginRedirect";
 // import { jwtDecode } from "jwt-decode";
 // import { redirect } from "react-router-dom";
 
-const redirectURL = window._env_?.VITE_REDIRECT_URL || import.meta.env.VITE_REDIRECT_URL;
+const redirectURL = import.meta.env.VITE_REDIRECT_URL;
 const OAUTH_CALLBACK_GUARD_KEY = "auth:oauth-callback-processed";
 
 const AuthPage: React.FC = () => {
@@ -116,13 +116,13 @@ const AuthPage: React.FC = () => {
 
         <div className="mt-6 text-sm text-gray-500">
           By continuing, you agree to our{" "}
-          <a href="#" className="text-blue-500 underline">
+          <span className="text-blue-500 underline cursor-pointer">
             Terms of Service
-          </a>{" "}
+          </span>{" "}
           and{" "}
-          <a href="#" className="text-blue-500 underline">
+          <span className="text-blue-500 underline cursor-pointer">
             Privacy Policy
-          </a>
+          </span>
         </div>
       </div>
     </div>
diff --git a/src/views/Auth/OAuthCallBack.tsx b/src/views/Auth/OAuthCallBack.tsx
@@ -1,5 +1,6 @@
 import { useContext, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import type { AxiosError } from "axios";
 import { authClient } from "@/utils/http/clients/authClient.client";
 import AuthContext from "@/context/AuthContext";
 import cdacRoundLogo from '@/assets/cdacroundlogo.png';
@@ -52,8 +53,8 @@ const OAuthCallback = () => {
           } catch (error) {
             lastError = error;
             console.warn(`OAuthCallback: refresh attempt ${attempt} failed`, {
-              message: (error as any)?.message,
-              status: (error as any)?.response?.status,
+              message: (error as AxiosError)?.message,
+              status: (error as AxiosError)?.response?.status,
             });
           }
 
@@ -77,9 +78,9 @@ const OAuthCallback = () => {
         }
       } catch (error) {
         console.error("Error completing OAuth login:", {
-          message: (error as any)?.message,
-          response: (error as any)?.response?.data,
-          status: (error as any)?.response?.status,
+          message: (error as AxiosError)?.message,
+          response: (error as AxiosError)?.response?.data,
+          status: (error as AxiosError)?.response?.status,
         });
         navigateToLoginWithNext();
       }
@@ -92,7 +93,7 @@ const OAuthCallback = () => {
     <div className="min-h-screen bg-secondary-background flex items-center justify-center">
       <div className='flex flex-col items-center'>
         {/* <FaSpinner className="animate-spin text-4xl text-[#66B0FF]" /> */}
-        <img src={cdacRoundLogo} className="mr-3 mb-4 size-20 cdacSpinner" />
+        <img src={cdacRoundLogo} className="mr-3 mb-4 size-20 cdacSpinner" alt="Loading spinner" />
         <div className="text-[#000000] text-lg">Logging in...</div>
       </div>
     </div>
