Upgrade frontend dependencies

web/eslint.config.js

@@ -0,0 +1,38 @@
+// eslint.config.js
+
+import js from '@eslint/js';
+import reactHooks from 'eslint-plugin-react-hooks';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import tseslint from 'typescript-eslint';
+import globals from "globals";
+
+const config = [
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    linterOptions: {
+      reportUnusedDisableDirectives: 'error',
+    },
+    plugins: {
+      '@typescript-eslint': tseslint.plugin,
+      'react-hooks': reactHooks,
+      'simple-import-sort': simpleImportSort,
+    },
+    rules: {
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+    },
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+      globals: {
+        ...globals.browser,
+      },
+    },
+  },
+];
+
+export default config;

web/package.json

@@ -3,49 +3,55 @@
   "version": "0.0.1",
   "description": "CLOTributor makes it easier to discover great opportunities to become a Cloud Native contributor.",
   "license": "Apache-2.0",
+  "type": "module",
   "dependencies": {
     "classnames": "^2.5.1",
-    "clo-ui": "https://github.com/cncf/clo-ui.git#v0.2.3",
+    "clo-ui": "https://github.com/cncf/clo-ui.git#v0.2.4",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^5.0.1",
-    "react-router-dom": "^6.22.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.0",
+    "react-router-dom": "^6.23.1",
     "source-map-explorer": "^2.5.3"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@eslint/js": "^9.2.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.24",
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
+    "@types/lodash": "^4.17.1",
+    "@types/node": "^20.12.10",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^9.2.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-simple-import-sort": "^12.0.0",
-    "postcss": "^8.4.35",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
+    "globals": "^15.2.0",
+    "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "react-scripts": "5.0.1",
-    "sass": "^1.71.1",
+    "sass": "^1.77.1",
     "shx": "^0.3.4",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.8.0"
   },
   "resolutions": {
-    "react-scripts/**/core-js-pure": "3.36.0"
+    "react-scripts/**/core-js-pure": "3.37.0"
   },
   "scripts": {
     "copy:static": "shx rm -rf src/static && shx mkdir src/static && shx cp -r public/static/* src",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "start": "yarn copy:static && DANGEROUSLY_DISABLE_HOST_CHECK=true react-scripts start",
-    "build": "yarn copy:static && INLINE_RUNTIME_CHUNK=false IMAGE_INLINE_SIZE_LIMIT=0 react-scripts build && shx cp -r build/static/* build && shx rm -rf build/static",
+    "start": "yarn copy:static && DANGEROUSLY_DISABLE_HOST_CHECK=true DISABLE_ESLINT_PLUGIN=true react-scripts start",
+    "build": "yarn copy:static && INLINE_RUNTIME_CHUNK=false IMAGE_INLINE_SIZE_LIMIT=0 DISABLE_ESLINT_PLUGIN=true react-scripts build && shx cp -r build/static/* build && shx rm -rf build/static",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
-    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx src --fix",
+    "lint": "eslint src --max-warnings 0",
+    "lint:fix": "eslint src --max-warnings 0 --fix",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "format:diff": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
   },

web/src/api/index.ts

@@ -9,7 +9,7 @@ interface FetchOptions {
   headers?: {
     [key: string]: string;
   };
-  body?: any;
+  body?: string;
 }
 
 interface APIFetchProps {
@@ -24,9 +24,11 @@ class API_CLASS {
     pagination: 'Pagination-Total-Count',
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private getHeadersValue(res: any, params?: string[]): any {
     if (!isUndefined(params) && params.length > 0) {
-      let headers: any = {};
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const headers: any = {};
       params.forEach((param: string) => {
         if (res.headers.has(param)) {
           headers[param] = res.headers.get(param);
@@ -37,8 +39,10 @@ class API_CLASS {
     return null;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private async processFetchOptions(opts?: FetchOptions): Promise<FetchOptions | any> {
-    let options: FetchOptions | any = opts || {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const options: FetchOptions | any = opts || {};
     if (opts && ['DELETE', 'POST', 'PUT'].includes(opts.method)) {
       return {
         ...options,
@@ -50,13 +54,14 @@ class API_CLASS {
     return options;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private async handleErrors(res: any) {
     if (!res.ok) {
       let error: Error;
       switch (res.status) {
         default:
           try {
-            let text = await res.json();
+            const text = await res.json();
             error = {
               kind: ErrorKind.Other,
               message: text.message !== '' ? text.message : undefined,
@@ -72,31 +77,35 @@ class API_CLASS {
     return res;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private async handleContent(res: any, headers?: string[]) {
-    let response = res;
+    const response = res;
+    let content;
+    let tmpHeaders;
 
     switch (response.headers.get('Content-Type')) {
       case 'text/plain; charset=utf-8':
       case 'csv':
-        const text = await response.text();
-        return text;
+        content = await response.text();
+        return content;
       case 'application/json':
-        let json = await response.json();
-        const tmpHeaders = this.getHeadersValue(res, headers);
+        content = await response.json();
+        tmpHeaders = this.getHeadersValue(res, headers);
         if (!isNull(tmpHeaders)) {
-          if (isArray(json)) {
-            json = { items: json };
+          if (isArray(content)) {
+            content = { items: content };
           }
-          json = { ...json, ...tmpHeaders };
+          content = { ...content, ...tmpHeaders };
         }
-        return json;
+        return content;
       default:
         return response;
     }
   }
 
   private async apiFetch(props: APIFetchProps) {
-    let options: FetchOptions | any = await this.processFetchOptions(props.opts);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const options: FetchOptions | any = await this.processFetchOptions(props.opts);
 
     return fetch(props.url, options)
       .then(this.handleErrors)

web/src/context/AppContextProvider.tsx

@@ -25,6 +25,7 @@ type Action =
 
 export const AppContext = createContext<{
   ctx: AppState;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   dispatch: Dispatch<any>;
 }>({
   ctx: initialState,
@@ -56,9 +57,10 @@ export function updateActiveStyleSheet(current: string) {
 
 export function appReducer(state: AppState, action: Action) {
   let prefs;
+  let effective;
   switch (action.type) {
     case 'updateTheme':
-      const effective = action.theme === 'automatic' ? detectActiveThemeMode() : action.theme;
+      effective = action.theme === 'automatic' ? detectActiveThemeMode() : action.theme;
       prefs = {
         ...state.prefs,
         theme: {
@@ -138,7 +140,7 @@ function AppContextProvider(props: Props) {
         : activeProfilePrefs.theme.configured || activeProfilePrefs.theme.effective; // Use effective theme if configured is undefined
     updateActiveStyleSheet(theme);
     setActiveInitialTheme(theme);
-  }, []); /* eslint-disable-line react-hooks/exhaustive-deps */
+  }, []);
 
   useSystemThemeMode(ctx.prefs.theme.configured === 'automatic', dispatch);
 

web/src/layout/common/Card.tsx

@@ -98,7 +98,7 @@ const Card = (props: Props) => {
     }
 
     cleanTopics();
-  }, []); /* eslint-disable-line react-hooks/exhaustive-deps */
+  }, []);
 
   return (
     <CardWrapper className={styles.card} wrapperClassName={styles.cardWrapper} hoverable={false}>

web/src/layout/home/index.tsx

@@ -37,7 +37,7 @@ const Home = () => {
       }
     }
     getLatestOpportunities();
-  }, []); /* eslint-disable-line react-hooks/exhaustive-deps */
+  }, []);
 
   return (
     <>

web/src/layout/search/Filters.tsx

@@ -21,7 +21,7 @@ interface Props {
 
 const Filters = (props: Props) => {
   const getActiveFiltersForOther = (): string[] => {
-    let otherFilters = [];
+    const otherFilters = [];
     if (props.mentorAvailable) {
       otherFilters.push('mentor_available');
     }

web/src/layout/search/FiltersInLine.module.css

@@ -51,6 +51,13 @@
   color: var(--color-font) !important;
 }
 
+[data-theme='dark'] .btn:disabled,
+[data-theme='dark'] .btn.disabled,
+[data-theme='dark'] fieldset:disabled .btn {
+  background-color: rgba(255, 255, 255, 0.15);
+  opacity: 0.5;
+}
+
 [data-theme='dark'] .dropdown {
   background-color: var(--bg-color);
 }

web/src/layout/search/FiltersInLine.tsx

@@ -78,7 +78,7 @@ const Filters = (props: FiltersProps) => {
 
 const FiltersInLine = (props: Props) => {
   const getActiveFiltersForOther = (): string[] => {
-    let otherFilters = [];
+    const otherFilters = [];
     if (props.mentorAvailable) {
       otherFilters.push('mentor_available');
     }

web/src/layout/search/index.tsx

@@ -140,7 +140,7 @@ const Search = () => {
     });
   };
 
-  const updateCurrentPage = (searchChanges: any) => {
+  const updateCurrentPage = (searchChanges: object) => {
     navigate({
       pathname: '/search',
       search: prepareQueryString({
@@ -166,7 +166,7 @@ const Search = () => {
   };
 
   const prepareFilters = (foundation: Foundation, allFilters?: FilterSection[], extra?: FiltersExtra) => {
-    let currentFilters = !isUndefined(allFilters) ? [...allFilters] : [];
+    const currentFilters = !isUndefined(allFilters) ? [...allFilters] : [];
     if (foundation && !isUndefined(extra)) {
       [FilterKind.Maturity, FilterKind.Project].forEach((k: FilterKind) => {
         const kind = k as FilterKind.Project | FilterKind.Maturity;
@@ -182,7 +182,7 @@ const Search = () => {
   };
 
   const cleanFullFilters = (f: FilterSection[]): FilterSection[] => {
-    let tmpFilters = [...f];
+    const tmpFilters = [...f];
     [FilterKind.Maturity, FilterKind.Project].forEach((k: FilterKind) => {
       const objIndex = tmpFilters.findIndex((f: FilterSection) => (f.key || f.title) === k);
       tmpFilters[objIndex] = { ...tmpFilters[objIndex], options: [] };
@@ -212,7 +212,7 @@ const Search = () => {
       }
     }
     getIssuesFilters();
-  }, []); /* eslint-disable-line react-hooks/exhaustive-deps */
+  }, []);
 
   useEffect(() => {
     const formattedParams = buildSearchParams(searchParams);
@@ -268,11 +268,7 @@ const Search = () => {
     } else {
       searchIssues();
     }
-
-    // prettier-ignore
-    /* eslint-disable react-hooks/exhaustive-deps */
   }, [searchParams, limit, sort.by]);
-  /* eslint-enable react-hooks/exhaustive-deps */
 
   return (
     <>

web/src/utils/buildSearchParams.ts

@@ -17,7 +17,7 @@ const WHITELISTED_FILTER_KEYS = [
 ];
 
 const buildSearchParams = (p: URLSearchParams): SearchFiltersURL => {
-  let filters: F = {};
+  const filters: F = {};
 
   p.forEach((value, key) => {
     if (WHITELISTED_FILTER_KEYS.includes(key as FilterKind)) {

web/src/utils/localStoragePreferences.ts

@@ -90,7 +90,7 @@ export class LocalStoragePreferences {
   }
 
   public setPrefs(prefs: Prefs) {
-    let preferences = { ...this.savedPreferences, guest: prefs };
+    const preferences = { ...this.savedPreferences, guest: prefs };
     this.savedPreferences = preferences;
 
     try {
@@ -101,11 +101,10 @@ export class LocalStoragePreferences {
   }
 
   public getPrefs(): Prefs {
-    let prefs: Prefs = {
+    return {
       ...DEFAULT_PREFS,
       ...this.savedPreferences.guest,
     };
-    return prefs;
   }
 }