Fix security issues, JS peer dependencies, and some warnings (#523)

* Upgrade bootstrap-loader

* Install unmet peer dependencies

* Upgrade url-loader

* Upgrade redux and react-redux

* Remove deprecated babel-eslint

* Replace react-addons-css-transition-group pachage

* Modify App component to follow ROR API

* Fix warning related deprecated or old rails config

Author: ahangarha

client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx

@@ -13,7 +13,7 @@ import Button from 'react-bootstrap/lib/Button';
 import Nav from 'react-bootstrap/lib/Nav';
 import NavItem from 'react-bootstrap/lib/NavItem';
 import Alert from 'react-bootstrap/lib/Alert';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 import _ from 'lodash';
 import { injectIntl } from 'react-intl';
 import { defaultMessages } from 'libs/i18n/default';

client/app/bundles/comments/components/CommentBox/CommentList/CommentList.jsx

@@ -2,7 +2,7 @@ import Alert from 'react-bootstrap/lib/Alert';
 import Immutable from 'immutable';
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 import _ from 'lodash';
 import BaseComponent from '../../../../../libs/components/BaseComponent.jsx';
 

client/app/bundles/comments/startup/App.jsx

@@ -7,11 +7,13 @@ import NonRouterCommentsContainer from '../containers/NonRouterCommentsContainer
 function App(_props, _railsContext) {
   const store = ReactOnRails.getStore('commentsStore');
 
-  return (
-    <Provider store={store}>
-      <NonRouterCommentsContainer />
-    </Provider>
-  );
+  return function AppComponent() {
+    return (
+      <Provider store={store}>
+        <NonRouterCommentsContainer />
+      </Provider>
+    );
+  };
 }
 
 export default App;

config/application.rb

@@ -11,7 +11,7 @@
 module RailsReactTutorial
   class Application < Rails::Application
     # Initialize configuration defaults for originally generated Rails version.
-    config.load_defaults 6.0
+    config.load_defaults 7.0
 
     # Configuration for the application, engines, and railties goes here.
 

config/initializers/new_framework_defaults_6_1.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 # Be sure to restart your server when you modify this file.
 #
 # This file contains migration options to ease your Rails 6.1 upgrade.
@@ -43,7 +44,7 @@
 # Use new connection handling API. For most applications this won't have any
 # effect. For applications using multiple databases, this new API provides
 # support for granular connection swapping.
-# Rails.application.config.active_record.legacy_connection_handling = false
+Rails.application.config.active_record.legacy_connection_handling = false
 
 # Make `form_with` generate non-remote forms by default.
 # Rails.application.config.action_view.form_with_generates_remote_forms = false

package.json

@@ -32,13 +32,14 @@
     "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
+    "@babel/runtime": "^7.17.9",
     "@rails/actioncable": "7.0.4-1",
     "autoprefixer": "^7.1.5",
     "axios": "^0.21.1",
     "babel-loader": "^9.1.2",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "bootstrap-loader": "^4.0.2",
+    "bootstrap-loader": "^4.0.4",
     "bootstrap-sass": "^3.4.3",
     "classnames": "^2.3.2",
     "compression-webpack-plugin": "9",
@@ -47,29 +48,33 @@
     "es5-shim": "^4.6.7",
     "estraverse": "^4.2.0",
     "expose-loader": "^4.0.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "immutable": "^3.8.2",
     "imports-loader": "^4.0.0",
     "intl": "^1.2.5",
     "jquery": "^3.2.1",
     "jquery-ujs": "^1.2.2",
+    "js-yaml": "^4.1.0",
     "loader-utils": "^1.1.0",
     "lodash": "^4.17.4",
     "marked": "^4.0.0",
+    "node-sass": "^8.0.0",
     "node-uuid": "^1.4.8",
     "postcss": "^8.4.5",
     "postcss-loader": "6.2.1",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
-    "react-addons-css-transition-group": "^15.6.2",
     "react-bootstrap": "^0.31.5",
     "react-dom": "^17.0.2",
     "react-intl": "^5.24.1",
     "react-on-rails": "13.2.0",
-    "react-redux": "^5.0.6",
+    "react-redux": "^7.2.2",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-router-redux": "^4.0.8",
-    "redux": "^3.7.2",
+    "react-transition-group": "1.x",
+    "redux": "^4.2.1",
     "redux-thunk": "^2.2.0",
     "resolve-url-loader": "^2.2.0",
     "sass": "^1.58.3",
@@ -79,7 +84,7 @@
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "5",
     "turbolinks": "^5.2.0",
-    "url-loader": "^0.6.2",
+    "url-loader": "^4.1.1",
     "webpack": "5",
     "webpack-assets-manifest": "5",
     "webpack-cli": "5",
@@ -89,7 +94,6 @@
     "@babel/eslint-parser": "^7.16.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@webpack-cli/serve": "^1.6.0",
-    "babel-eslint": "^8.0.2",
     "babel-jest": "^27.2.1",
     "body-parser": "^1.20.2",
     "eslint": "^8.35.0",