add advanced rules for eslint

.eslintrc.cjs

@@ -1,15 +1,26 @@
 module.exports = {
   parser: "@babel/eslint-parser",
-  extends: ["plugin:react/recommended", "prettier"],
+  extends: ["plugin:react/recommended", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended", "prettier"],
   parserOptions: {
     requireConfigFile: false,
     babelOptions: {
       presets: ["@babel/preset-react"],
     },
   },
-  plugins: ["react", "react-hooks"],
-  rules: {}, // add specific rules here
-  ignorePatterns: ["dist", "tests", ".eslintrc.cjs"],
+  plugins: ["react"],
+  rules: {
+    "prefer-const": "warn",
+    "prefer-arrow-callback": "warn",
+  },
+  overrides: [
+    {
+      files: ["*.js", "*.jsx"], // Target all JSX files
+      rules: {
+        strict: ["error", "global"], // Apply "use strict" globally within src folder
+      },
+    },
+  ],
+  ignorePatterns: ["dist", "tests", "public", ".eslintrc.cjs"],
   settings: {
     react: {
       version: "detect",

package.json

@@ -49,6 +49,7 @@
     "dotenv-safe": "^8.2.0",
     "enzyme": "^3.11.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^9.0.11",

src/App.jsx

@@ -18,7 +18,7 @@ import PropTypes from "prop-types";
 const App = (props) => {
   useEffect(() => {
     document.title = APP_TITLE;
-  }, [APP_TITLE]);
+  }, []);
 
   return (
     <IntlProvider {...props.intl}>

src/actions/index.js

@@ -6,7 +6,7 @@ import { getOidcToken } from "../utils/SecurityUtils";
 import { isUsingOidcAuth } from "../utils/OidcUtils";
 
 // Axios instance for communicating with Backend
-export let axiosBackend = axios.create({
+export const axiosBackend = axios.create({
   withCredentials: true,
 });
 

src/components/HelpIcon.jsx

@@ -1,5 +1,3 @@
-"use strict";
-
 import React from "react";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import PropTypes from "prop-types";

src/components/HorizontalInput.jsx

@@ -1,12 +1,10 @@
-"use strict";
-
 import React, { forwardRef } from "react";
 import { Col, FormCheck, FormControl, FormGroup, FormLabel, FormText, InputGroup } from "react-bootstrap";
 import PropTypes from "prop-types";
 import Row from "react-bootstrap/Row";
 import TypeaheadAnswer from "./record/TypeaheadAnswer";
 
-const HorizontalInput = forwardRef(function HorizontalInputWithRef(props, ref) {
+const HorizontalInput = (props, ref) => {
   const renderInputOnType = () => {
     switch (props.type) {
       case "radio":
@@ -144,7 +142,7 @@ const HorizontalInput = forwardRef(function HorizontalInputWithRef(props, ref) {
   };
 
   return renderInputOnType();
-});
+};
 
 HorizontalInput.propTypes = {
   type: PropTypes.string,
@@ -169,4 +167,4 @@ HorizontalInput.defaultProps = {
   inputOffset: 4,
 };
 
-export default HorizontalInput;
+export default forwardRef(HorizontalInput);

src/components/Input.jsx

@@ -1,10 +1,8 @@
-"use strict";
-
 import React, { forwardRef } from "react";
 import { FormLabel, FormGroup, FormControl, FormText, FormCheck } from "react-bootstrap";
 import PropTypes from "prop-types";
 
-const Input = forwardRef(function InputWithRef(props, ref) {
+const Input = (props, ref) => {
   const renderInputOnType = () => {
     switch (props.type) {
       case "radio":
@@ -80,7 +78,7 @@ const Input = forwardRef(function InputWithRef(props, ref) {
   };
 
   return renderInputOnType();
-});
+};
 
 Input.propTypes = {
   children: PropTypes.node.isRequired,
@@ -96,4 +94,4 @@ Input.defaultProps = {
   type: "text",
 };
 
-export default Input;
+export default forwardRef(Input);

src/components/dashboard/DashboardController.jsx

@@ -1,5 +1,3 @@
-"use strict";
-
 import Dashboard from "./Dashboard";
 import React from "react";
 import { connect } from "react-redux";

src/components/dashboard/DashboardTile.jsx

@@ -1,5 +1,3 @@
-"use strict";
-
 import React from "react";
 import PropTypes from "prop-types";
 

src/components/history/HistoryList.jsx

@@ -34,7 +34,7 @@ class HistoryList extends React.Component {
   };
 
   _handleChange = (e) => {
-    let change = {};
+    const change = {};
     change[e.target.name] = e.target.value;
     this.setState({ searchData: { ...this.state.searchData, ...change }, pageNumber: 1 });
   };

src/components/history/HistoryRow.jsx

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { formatDateWithMilliseconds } from "../../utils/Utils";
 import { useI18n } from "../../hooks/useI18n";
 
-let HistoryRow = (props) => {
+const HistoryRow = (props) => {
   const { i18n } = useI18n();
   const action = props.action;
   const username = action.author ? action.author.username : i18n("history.non-logged");

src/components/institution/Institution.jsx

@@ -38,7 +38,7 @@ class Institution extends React.Component {
   }
 
   _onChange = (e) => {
-    let change = {};
+    const change = {};
     change[e.target.name] = e.target.value;
     this.props.handlers.onChange(change);
   };

src/components/institution/InstitutionMembers.jsx

@@ -89,7 +89,7 @@ class InstitutionMembers extends React.Component {
 
   _renderRows() {
     const { institution, onEditUser, currentUser, userDeleted } = this.props;
-    let rows = [];
+    const rows = [];
     const members = this.props.institutionMembers.members;
     for (let i = 0, len = members.length; i < len; i++) {
       const deletionLoading = !!(

src/components/institution/InstitutionRow.jsx

@@ -5,7 +5,7 @@ import { Button } from "react-bootstrap";
 import { LoaderSmall } from "../Loader";
 import PropTypes from "prop-types";
 
-let InstitutionRow = (props) => {
+const InstitutionRow = (props) => {
   const institution = props.institution;
   return (
     <tr>

src/components/institution/InstitutionTable.jsx

@@ -1,5 +1,3 @@
-"use strict";
-
 import React from "react";
 import { Table } from "react-bootstrap";
 
@@ -82,7 +80,7 @@ class InstitutionTable extends React.Component {
   _renderRows() {
     const { institutions, institutionDeleted } = this.props;
     const onEdit = this.props.handlers.onEdit;
-    let rows = [];
+    const rows = [];
     for (let i = 0, len = institutions.length; i < len; i++) {
       rows.push(
         <InstitutionRow

src/components/institution/InstitutionsController.jsx

@@ -1,5 +1,3 @@
-"use strict";
-
 import React from "react";
 import Routes from "../../constants/RoutesConstants";
 import { transitionToWithOpts } from "../../utils/Routing";

src/components/login/Login.jsx

@@ -1,5 +1,3 @@
-"use strict";
-
 import React, { useEffect, useRef, useState } from "react";
 import { Alert, Button, Form, Card } from "react-bootstrap";
 import HorizontalInput from "../HorizontalInput";

src/components/login/PasswordReset.jsx

@@ -1,5 +1,3 @@
-"use strict";
-
 import React from "react";
 import { Button, Form, Card } from "react-bootstrap";
 import HorizontalInput from "../HorizontalInput";
@@ -31,7 +29,7 @@ class PasswordReset extends React.Component {
   }
 
   onChange = (e) => {
-    let state = this.state;
+    const state = this.state;
     state[e.target.name] = e.target.value;
     this.setState(state);
   };

src/components/login/PasswordToken.jsx

@@ -1,5 +1,3 @@
-"use strict";
-
 import React from "react";
 import { Alert, Button, Form, Card } from "react-bootstrap";
 import HorizontalInput from "../HorizontalInput";
@@ -38,7 +36,7 @@ class PasswordReset extends React.Component {
   }
 
   onChange = (e) => {
-    let state = this.state;
+    const state = this.state;
     state[e.target.name] = e.target.value;
     this.setState(state);
   };

src/components/record/RecordController.jsx

@@ -1,5 +1,3 @@
-"use strict";
-
 import React from "react";
 import { injectIntl } from "react-intl";
 import withI18n from "../../i18n/withI18n";