2024 version

.eslintrc.cjs

@@ -3,73 +3,13 @@ module.exports = {
   env: { browser: true, es2020: true },
   extends: [
     'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
+    'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
+  parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
-    'semi': ['error', 'never'],
-    'prefer-const': [
-      'warn',
-      {
-        'destructuring': 'any',
-        'ignoreReadBeforeAssign': false
-      }
-    ],
-    'getter-return': ['error'],
-    'no-async-promise-executor': ['warn'],
-    'no-cond-assign': ['warn', 'except-parens'],
-    'no-dupe-keys': ['error'],
-    'no-empty': ['warn'],
-    'no-ex-assign': ['error'],
-    'no-extra-boolean-cast': [
-      'error',
-      {
-        'enforceForLogicalOperands': true
-      }
-    ],
-    'no-extra-parens': ['warn', 'all'],
-    'no-func-assign': ['error'],
-    'no-import-assign': ['error'],
-    'no-inner-declarations': ['error', 'both'],
-    'no-obj-calls': ['error'],
-    'no-promise-executor-return': ['error'],
-    'no-sparse-arrays': ['error'],
-    'no-template-curly-in-string': ['error'],
-    'no-unreachable': ['error'],
-    'no-unreachable-loop': ['error'],
-    'no-unsafe-optional-chaining': ['error'],
-    'require-atomic-updates': ['error'],
-    'use-isnan': ['error'],
-    'block-scoped-var': ['error'],
-    'consistent-return': ['error'],
-    'default-param-last': ['warn'],
-    'no-alert': ['error'],
-    'no-caller': ['error'],
-    'no-constructor-return': ['error'],
-    'no-global-assign': ['error'],
-    'no-lone-blocks': ['warn'],
-    'no-multi-spaces': ['warn'],
-    'no-new': ['warn'],
-    'no-param-reassign': ['error'],
-    'no-proto': ['warn'],
-    'no-redeclare': ['error'],
-    'no-return-assign': ['error'],
-    'no-return-await': ['warn'],
-    'no-self-assign': ['error'],
-    'no-sequences': ['warn'],
-    'no-useless-catch': ['warn'],
-    'no-useless-return': ['error'],
-    'no-void': ['error'],
-    'no-with': ['error'],
-    'no-undef': ['off'],
-    'react/display-name': ['off'],
-    'react/jsx-uses-react': 'off',
-    'react/react-in-jsx-scope': 'off',
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },

.github/workflows/build.yml

@@ -11,11 +11,11 @@ jobs:
     steps:
     - uses: actions/checkout@v4
     - name: Use Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version-file: '.nvmrc'
     - name: Cache node modules
-      uses: actions/cache@v3
+      uses: actions/cache@v4
       with:
         path: ~/.npm
         key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -27,8 +27,7 @@ jobs:
     - run: npm run build --if-present
     - name: Run the tests and generate coverage report
       run: npm test -- --coverage
-    - name: Adding coverage badge
-      uses: demyanets/angular-coverage-badges-action@v1
+    - name: Upload coverage reports to Codecov
+      uses: codecov/codecov-action@v4.5.0
       with:
-        coverage-summary-path: ./coverage/coverage-summary.json
-        github_token: ${{ secrets.GITHUB_TOKEN }}
+        token: ${{ secrets.CODECOV_TOKEN }} 

.gitignore

@@ -1,26 +1,27 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
 # VSC - Git Lens
-.history
+.history

README.md

@@ -1,8 +1,8 @@
 # Ejemplo de Mails
 
-[![Build React App](https://github.com/uqbar-project/eg-mails-react/actions/workflows/build.yml/badge.svg?branch=master)](https://github.com/uqbar-project/eg-mails-react/actions/workflows/build.yml) ![coverage](./badges/coverage/coverage.svg)
+[![Build React App](https://github.com/uqbar-project/eg-mails-react/actions/workflows/build.yml/badge.svg?branch=master)](https://github.com/uqbar-project/eg-mails-react/actions/workflows/build.yml) [![codecov](https://codecov.io/gh/uqbar-project/eg-mails-react/graph/badge.svg?token=KLIY60RFSY)](https://codecov.io/gh/uqbar-project/eg-mails-react)
 
-![demo](./video/demoNew.gif)
+![demo](./video/demo2024.gif)
 
 En este ejemplo podemos ver
 
@@ -18,8 +18,6 @@ La aplicación cuenta con tres componentes React desarrollados por nosotros:
 - **MailsSummary**: el que nos permite detectar cuántos mails sin leer y cuántos mails recientes tenemos en base a los filtros seleccionados
 - **MailsGrid**: el componente que muestra la lista de mails, permite ordenarlos y marcar como leídos aquellos que están sin leer.
 
-![componentes mails](./images/componentes.png)
-
 ## MailReader
 
 MailReader tiene como estado:

index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>