Merge pull request #201 from oracle/bump-react-todo-19.0

bump node-react-todo template to react v19.0 and eslint v9

Author: LeonSilva15

templates/node-react-todo/.eslintrc.cjs

@@ -0,0 +1,64 @@
+/*
+**
+** Copyright (c) 2024, Oracle and/or its affiliates.
+** All rights reserved
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl/
+*/
+import globals from "globals";
+import js from "@eslint/js";
+import nodePlugin from "eslint-plugin-n";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import reactRefreshPlugin from "eslint-plugin-react-refresh";
+
+export default [
+  {
+    files: ["src/**/*.js","src/**/*.jsx"],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: "module",
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      },
+      globals: {
+        ...globals.browser,
+      }
+    },
+    plugins: {
+      react: reactPlugin,
+      "react-hooks": reactHooksPlugin,
+      "react-refresh": reactRefreshPlugin
+    },
+    settings: {
+      react: { version: 'detect' }
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...reactPlugin.configs.flat.recommended.rules,
+      ...reactPlugin.configs.flat["jsx-runtime"].rules,
+      ...reactHooksPlugin.configs.recommended.rules,
+      ...reactRefreshPlugin.configs.vite.rules,
+      // The rule recommends migrating to TS or using propTypes (deprecated in React v15.5.0 https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-proptypes-and-defaultprops)
+      "react/prop-types": "off"
+    }
+  },
+  {
+    files: ["server/**/*.js", "server/**/*.cjs"],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: "module",
+      globals: {
+        ...globals.node,
+      }
+    },
+    plugins: {
+      n: nodePlugin
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...nodePlugin.configs["flat/recommended-script"].rules
+    }
+  }
+];

templates/node-react-todo/eslint.config.mjs

@@ -5,30 +5,32 @@
   "scripts": {
     "dev": "concurrently --names server,client --prefix-colors blue,yellow --success all --kill-others 'node ./server/index.cjs' 'vite'",
     "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives",
+    "lint": "eslint --report-unused-disable-directives",
     "preview": "vite preview"
   },
   "dependencies": {
-    "body-parser": "^1.20.2",
+    "body-parser": "^1.20.3",
     "cors": "^2.8.5",
-    "dotenv": "^16.3.1",
-    "express": "^4.18.2",
+    "dotenv": "^16.4.7",
+    "express": "^4.21.2",
     "morgan": "^1.10.0",
-    "oracledb": "^6.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-toastify": "^9.1.3"
+    "oracledb": "^6.7.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-toastify": "^11.0.3"
   },
   "devDependencies": {
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "@vitejs/plugin-react": "^4.2.1",
-    "concurrently": "^8.2.2",
-    "eslint": "^8.55.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-react": "^7.34.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "vite": "^5.0.8"
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "concurrently": "^9.1.2",
+    "eslint": "^9.18.0",
+    "@eslint/js": "^9.18.0",
+    "eslint-plugin-n": "^17.15.1",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "15.14.0",
+    "vite": "^6.0.7"
   }
 }

templates/node-react-todo/eslintrc.cjs

@@ -1,5 +1,3 @@
-import React from 'react';
-import { toast } from 'react-toastify';
 import completed from '../images/completed.png'
 import uncompleted from '../images/uncompleted.png'
 import all from '../images/all.png'

templates/node-react-todo/package.json

@@ -4,7 +4,6 @@
 ** All rights reserved
 ** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl/
 */
-import React from 'react';
 import { toast } from 'react-toastify';
 
 import { createTask, updateTask } from '../api/rest-service.js';

templates/node-react-todo/src/components/ToDoListFilter.jsx

@@ -4,12 +4,12 @@
 ** All rights reserved
 ** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl/
 */
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import './style.css';
-import { convertCharsToBooleans, convertBooleansToChars } from '../utils/utils';
-import { getTasks, createTask, updateTask, deleteTask } from '../api/rest-service';
+import { convertCharsToBooleans } from '../utils/utils';
+import { getTasks } from '../api/rest-service';
 import { TodoListInput } from './ToDoListInput';
 import { TodoListFilter } from './ToDoListFilter';
 import { TodoListItems } from './TodoListItems';

templates/node-react-todo/src/components/ToDoListInput.jsx

@@ -4,7 +4,6 @@
 ** All rights reserved
 ** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl/
 */
-import React from 'react';
 import { toast } from 'react-toastify';
 
 import { updateTask, deleteTask } from '../api/rest-service';

templates/node-react-todo/src/components/TodoList.jsx

@@ -4,7 +4,6 @@
 ** All rights reserved
 ** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl/
 */
-import React from 'react';
 import { toast } from 'react-toastify';
 
 import { updateTask, deleteTask } from '../api/rest-service';

templates/node-react-todo/src/components/TodoListFooter.jsx

@@ -9,7 +9,7 @@ export const convertBooleansToChars = (data) => {
         return data.map(item => {
             const convertedItem = {};
             for (const key in item) {
-                if (item.hasOwnProperty(key) && typeof item[key] === 'boolean') {
+                if (Object.prototype.hasOwnProperty.call(item, key) && typeof item[key] === 'boolean') {
                     if (typeof item[key] === 'boolean') {
                         convertedItem[key] = item[key] === true ? 'Y' : 'N';
                     } else {
@@ -22,7 +22,7 @@ export const convertBooleansToChars = (data) => {
     } else {
         const convertedItem = {};
         for (const key in data) {
-            if (data.hasOwnProperty(key)) {
+            if (Object.prototype.hasOwnProperty.call(data, key)) {
                 if (typeof data[key] === 'boolean') {
                     convertedItem[key] = data[key] === true ? 'Y' : 'N';
                 } else {
@@ -41,7 +41,7 @@ export const convertCharsToBooleans = (data) => {
         return data.map(item => {
             const convertedItem = {};
             for (const key in item) {
-                if (item.hasOwnProperty(key)) {
+                if (Object.prototype.hasOwnProperty.call(item, key)) {
                     if (item[key] === 'Y') convertedItem[key] = true;
                     else if (item[key] === 'N') convertedItem[key] = false;
                     else convertedItem[key] = item[key];
@@ -54,7 +54,7 @@ export const convertCharsToBooleans = (data) => {
     else {
         const convertedItem = {};
         for (const key in data) {
-            if (data.hasOwnProperty(key)) {
+            if (Object.prototype.hasOwnProperty.call(data, key)) {
                 if (data[key] === 'Y') convertedItem[key] = true;
                 else if (data[key] === 'N') convertedItem[key] = false;
                 else convertedItem[key] = data[key];