lint warnings introduced by stricter ESLint rules

[armandoschianodicola]

Priority/Impact

Low (minor inconvenience)

Description

Starting the development server currently reports several warnings:

npm start

The warnings are produced while Vite processes and lints application files during development.

Most warnings are related to React lists using array indexes as keys.

For example:

src/components/Calendar/Components/Entries.tsx(97,52):
Do not use item index in the array as its key.
@eslint-react/no-array-index-key

src/components/Calendar/Components/CalendarDayGrid.tsx(31,53):
Do not use item index in the array as its key.
@eslint-react/no-array-index-key

src/components/Routines/widgets/RoutineDetailsCard.tsx(147,30):
Do not use item index in the array as its key.
@eslint-react/no-array-index-key

Array-index keys can cause React to associate component state with the wrong item when a list is reordered or an item is inserted or removed.

Other reported warnings include missing hook dependencies:

src/components/Calendar/Components/CalendarComponent.tsx(136,8):
React Hook useEffect has missing dependencies: 'currentDate' and 'days'.
react-hooks/exhaustive-deps

Unsafe non-null assertions following optional chains:

src/components/Nutrition/widgets/DiaryOverview.tsx(40,55):
Optional chain expressions can return undefined by design.
Using a non-null assertion is unsafe and wrong.
@typescript-eslint/no-non-null-asserted-optional-chain

Undocumented TypeScript suppression comments:

src/components/Nutrition/screens/BmiCalculator.tsx(147,29):
Include a description after the "@ts-ignore" directive to explain why it is necessary.
@typescript-eslint/ban-ts-comment

Overly broad function types:

src/components/Exercises/screens/Detail/Head/index.tsx(31,18):
The `Function` type accepts any function-like value.
Prefer explicitly defining function parameters and the return type.
@typescript-eslint/no-unsafe-function-type

Vite also reports that the English translation file resolves to the public directory:

Assets in the public directory cannot be imported from JavaScript.

If you intend to import that asset, put the file in the src directory.
If you intend to use the URL of that asset, use /locales/en/translation.json?url.

Steps to Reproduce

1. Install the project dependencies.

2. Start the development server:

   npm start

3. Open or navigate through the application.

4. Observe the warnings reported in the development server output.

Proposed Changes

• Replace array-index keys with stable identifiers derived from the rendered data.
• Introduce stable client-side identifiers where the data does not provide a suitable ID.
• Add the missing React hook dependencies.
• Replace unsafe optional-chain assertions with explicit fallback values.
• Remove unnecessary TypeScript suppression comments.
• Add explanations to suppression comments that are still necessary.
• Replace the generic Function type with an explicit function signature.
• Prevent Vite from treating the type-only locale reference as a runtime asset import.
• Add or update tests where appropriate.

Acceptance Criteria

• Starting the application with npm start no longer reports the listed warnings.
• npm run lint completes without warnings.
• npm run typecheck completes successfully.
• npm run build completes successfully.
• Existing list rendering and form behavior remain unchanged.
• React list keys remain stable when items are reordered, inserted, or removed.