chore: bump major versions of client dependencies

Gemfile

@@ -7,7 +7,7 @@ ruby "3.1.2"
 
 gem "cpl", "~> 0.3.3"
 gem "react_on_rails", "13.2.0"
-gem "shakapacker", "7.0.0"
+gem "shakapacker", "7.0.2"
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails"
 gem "listen"

Gemfile.lock

@@ -180,8 +180,9 @@ GEM
     net-smtp (0.3.3)
       net-protocol
     nio4r (2.5.9)
-    nokogiri (1.15.3)
-      mini_portile2 (~> 2.8.2)
+    nokogiri (1.15.3-arm64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.15.3-x86_64-linux)
       racc (~> 1.4)
     parallel (1.23.0)
     parser (3.2.2.3)
@@ -336,7 +337,7 @@ GEM
       websocket (~> 1.0)
     semantic_range (3.0.0)
     sexp_processor (4.17.0)
-    shakapacker (7.0.0)
+    shakapacker (7.0.2)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
@@ -392,7 +393,8 @@ GEM
     zeitwerk (2.6.11)
 
 PLATFORMS
-  ruby
+  arm64-darwin-22
+  x86_64-linux
 
 DEPENDENCIES
   autoprefixer-rails
@@ -437,7 +439,7 @@ DEPENDENCIES
   scss_lint
   sdoc
   selenium-webdriver (~> 4)
-  shakapacker (= 7.0.0)
+  shakapacker (= 7.0.2)
   spring
   spring-commands-rspec
   stimulus-rails (~> 1.2)
@@ -449,4 +451,4 @@ RUBY VERSION
    ruby 3.1.2p20
 
 BUNDLED WITH
-   2.4.7
+   2.4.17

README.md

@@ -1,13 +1,13 @@
    [![Code Climate](https://codeclimate.com/github/shakacode/react-webpack-rails-tutorial/badges/gpa.svg)](https://codeclimate.com/github/shakacode/react-webpack-rails-tutorial) [![Coverage Status](https://coveralls.io/repos/shakacode/react-webpack-rails-tutorial/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react-webpack-rails-tutorial?branch=master)
- 
+
 # React, Redux, React-Bootstrap, ES7, Webpack, Ruby on Rails Demo
 
 * Server-Side Rendering of React via the [react_on_rails gem](https://github.com/shakacode/react_on_rails)
-* Live at [www.reactrails.com](http://www.reactrails.com/) 
- 
+* Live at [www.reactrails.com](http://www.reactrails.com/)
+
 ## Control Plane Deployment Example
 
-[Control Plane](https://controlplane.com) offers a viable, cost-saving alternative to Heroku, especially when using the [cpl gem](https://rubygems.org/gems/cpl) to deploy to Control Plane. 
+[Control Plane](https://controlplane.com) offers a viable, cost-saving alternative to Heroku, especially when using the [cpl gem](https://rubygems.org/gems/cpl) to deploy to Control Plane.
 
 ShakaCode recently migrated [HiChee.com](https://hichee.com) to Control Plane, resulting in a two-thirds reduction in server hosting costs!
 
@@ -20,7 +20,7 @@ in https://github.com/shakacode/heroku-to-control-plane.
 
 ## React on Rails Pro and ShakaCode Pro Support
 
-React on Rails Pro provides Node server rendering and other performance enhancements for React on Rails. 
+React on Rails Pro provides Node server rendering and other performance enhancements for React on Rails.
 
 [![2018-09-11_10-31-11](https://user-images.githubusercontent.com/1118459/45467845-5bcc7400-b6bd-11e8-91e1-e0cf806d4ea4.png)](https://blog.shakacode.com/hvmns-90-reduction-in-server-response-time-from-react-on-rails-pro-eb08226687db)
 
@@ -34,7 +34,7 @@ For more information, see the [React on Rails Pro Docs](https://www.shakacode.co
 * Upgrading your app to use the current Webpack setup that skips the Sprockets asset pipeline.
 * Better performance client and server side.
 
-ShakaCode can also help you with your custom software development needs. We specialize in marketplace and e-commerce applications that utilize both Rails and React. We can even leverage our code for [HiChee.com](https://hichee.com) for your app! 
+ShakaCode can also help you with your custom software development needs. We specialize in marketplace and e-commerce applications that utilize both Rails and React. We can even leverage our code for [HiChee.com](https://hichee.com) for your app!
 
 See the [ShakaCode Client Engagement Model](https://www.shakacode.com/blog/client-engagement-model/) article to learn how we can work together.
 
@@ -195,8 +195,8 @@ export default class CommentBox extends React.Component {
     const cssTransitionGroupClassNames = {
       enter: css.elementEnter,
       enterActive: css.elementEnterActive,
-      leave: css.elementLeave,
-      leaveActive: css.elementLeaveActive,
+      exit: css.elementLeave,
+      exitActive: css.elementLeaveActive,
     };
   }
 }

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

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Immutable from 'immutable';
 import _ from 'lodash';
-import BaseComponent from 'libs/components/BaseComponent';
 import { injectIntl } from 'react-intl';
+import BaseComponent from 'libs/components/BaseComponent';
 import SelectLanguage from 'libs/i18n/selectLanguage';
 import { defaultMessages, defaultLocale } from 'libs/i18n/default';
 import CommentForm from './CommentForm/CommentForm';
@@ -78,8 +78,8 @@ class CommentBox extends BaseComponent {
     const cssTransitionGroupClassNames = {
       enter: css.elementEnter,
       enterActive: css.elementEnterActive,
-      leave: css.elementLeave,
-      leaveActive: css.elementLeaveActive,
+      exit: css.elementLeave,
+      exitActive: css.elementLeaveActive,
     };
     const locale = data.get('locale') || defaultLocale;
     /* eslint-disable no-script-url */
@@ -105,7 +105,7 @@ class CommentBox extends BaseComponent {
         </ul>
         <CommentForm
           isSaving={data.get('isSaving')}
-          error={data.get('submitCommentError')}
+          error={{ error: data.get('submitCommentError'), nodeRef: React.createRef(null) }}
           actions={actions}
           cssTransitionGroupClassNames={cssTransitionGroupClassNames}
         />

client/app/bundles/comments/components/CommentBox/CommentBox.module.scss

@@ -1,3 +1,5 @@
+// The 0.5s must correspond to the 500s in:
+//   client/app/bundles/comments/components/CommentBox/CommentList.jsx:58
 .elementEnter {
   opacity: 0.01;
 

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-transition-group/CSSTransitionGroup';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import _ from 'lodash';
 import { injectIntl } from 'react-intl';
 import { defaultMessages } from 'libs/i18n/default';
@@ -259,20 +259,27 @@ class CommentForm extends BaseComponent {
   }
 
   errorWarning() {
-    const { error } = this.props;
+    const { error, cssTransitionGroupClassNames } = this.props;
 
     // If there is no error, there is nothing to add to the DOM
-    if (!error) return null;
+    if (!error.error) return null;
 
-    const errorData = error.response && error.response.data;
+    const errorData = error.error.response && error.error.response.data;
 
     const errorElements = _.transform(
       errorData,
       (result, errorText, errorFor) => {
         result.push(
-          <li key={errorFor}>
-            <b>{_.upperFirst(errorFor)}:</b> {errorText}
-          </li>,
+          <CSSTransition
+            key={errorFor}
+            nodeRef={error.nodeRef}
+            timeout={500}
+            classNames={cssTransitionGroupClassNames}
+          >
+            <li ref={error.nodeRef}>
+              <b>{_.upperFirst(errorFor)}:</b> {errorText}
+            </li>
+          </CSSTransition>,
         );
       },
       [],
@@ -302,22 +309,15 @@ class CommentForm extends BaseComponent {
         throw new Error(`Unknown form mode: ${this.state.formMode}.`);
     }
 
-    const { cssTransitionGroupClassNames } = this.props;
     const { formatMessage } = this.props.intl;
 
-    // For animation with ReactCSSTransitionGroup
-    //   https://facebook.github.io/react/docs/animation.html
+    // For animation with TransitionGroup
+    //   https://reactcommunity.org/react-transition-group/transition-group
     // The 500 must correspond to the 0.5s in:
     //   client/app/bundles/comments/components/CommentBox/CommentBox.module.scss:6
     return (
       <div>
-        <ReactCSSTransitionGroup
-          transitionName={cssTransitionGroupClassNames}
-          transitionEnterTimeout={500}
-          transitionLeaveTimeout={500}
-        >
-          {this.errorWarning()}
-        </ReactCSSTransitionGroup>
+        <TransitionGroup component={null}>{this.errorWarning()}</TransitionGroup>
 
         <Nav bsStyle="pills" activeKey={this.state.formMode} onSelect={this.handleSelect}>
           <NavItem eventKey={0}>{formatMessage(defaultMessages.formHorizontal)}</NavItem>

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

@@ -1,28 +1,34 @@
-import BaseComponent from 'libs/components/BaseComponent';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 import { marked } from 'marked';
+import { gfmHeadingId } from 'marked-gfm-heading-id';
+import { mangle } from 'marked-mangle';
 import sanitizeHtml from 'sanitize-html';
 import css from './Comment.module.scss';
 
-export default class Comment extends BaseComponent {
-  static propTypes = {
-    author: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-  };
+marked.use(gfmHeadingId());
+marked.use(mangle());
 
-  render() {
-    const { author, text } = this.props;
-    const rawMarkup = marked(text, { gfm: true });
-    const sanitizedRawMarkup = sanitizeHtml(rawMarkup);
+const Comment = React.forwardRef((props, ref) => {
+  const { author, text } = props;
+  const rawMarkup = marked(text, { gfm: true });
+  const sanitizedRawMarkup = sanitizeHtml(rawMarkup);
 
-    /* eslint-disable react/no-danger */
-    return (
-      <div className={css.comment}>
-        <h2 className={`${css.commentAuthor} js-comment-author`}>{author}</h2>
-        <span dangerouslySetInnerHTML={{ __html: sanitizedRawMarkup }} className="js-comment-text" />
-      </div>
-    );
-  }
-}
+  /* eslint-disable react/no-danger */
+  return (
+    <div ref={ref} className={css.comment}>
+      <h2 className={`${css.commentAuthor} js-comment-author`}>{author}</h2>
+      <span dangerouslySetInnerHTML={{ __html: sanitizedRawMarkup }} className="js-comment-text" />
+    </div>
+  );
+});
+
+Comment.displayName = 'Comment';
+
+Comment.propTypes = {
+  author: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+};
+
+export default React.memo(Comment);

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-transition-group/CSSTransitionGroup';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import _ from 'lodash';
 import BaseComponent from '../../../../../libs/components/BaseComponent.jsx';
 
@@ -20,57 +20,65 @@ export default class CommentList extends BaseComponent {
 
   constructor(props, context) {
     super(props, context);
-    this.state = {};
+
     _.bindAll(this, 'errorWarning');
   }
 
   errorWarning() {
+    const { error, cssTransitionGroupClassNames } = this.props;
+
     // If there is no error, there is nothing to add to the DOM
-    if (!this.props.error) return null;
+    if (!error) return null;
+
+    const nodeRef = React.createRef(null);
+
     return (
-      <Alert bsStyle="danger" key="commentFetchError">
-        <strong>Comments could not be retrieved. </strong>A server error prevented loading comments. Please
-        try again.
-      </Alert>
+      <CSSTransition
+        key="commentFetchError"
+        nodeRef={nodeRef}
+        timeout={500}
+        classNames={cssTransitionGroupClassNames}
+      >
+        <Alert ref={nodeRef} bsStyle="danger">
+          <strong>Comments could not be retrieved. </strong>A server error prevented loading comments. Please
+          try again.
+        </Alert>
+      </CSSTransition>
     );
   }
 
   render() {
     const { $$comments, cssTransitionGroupClassNames } = this.props;
-    const commentNodes = $$comments.map(($$comment, index) => (
-      // `key` is a React-specific concept and is not mandatory for the
-      // purpose of this tutorial. if you're curious, see more here:
-      // http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
-      <Comment
-        key={$$comment.get('id') || index}
-        author={$$comment.get('author')}
-        text={$$comment.get('text')}
-      />
-    ));
+    const commentNodes = $$comments.map(($$comment, index) => {
+      const nodeRef = React.createRef(null);
+      return (
+        <CSSTransition
+          key={$$comment.get('id') || index}
+          nodeRef={nodeRef}
+          timeout={500}
+          classNames={cssTransitionGroupClassNames}
+        >
+          <Comment
+            key={$$comment.get('id') || index}
+            author={$$comment.get('author')}
+            text={$$comment.get('text')}
+            ref={nodeRef}
+          />
+        </CSSTransition>
+      );
+    });
 
-    // For animation with ReactCSSTransitionGroup
-    //   https://facebook.github.io/react/docs/animation.html
+    // For animation with TransitionGroup
+    //   https://reactcommunity.org/react-transition-group/transition-group
     // The 500 must correspond to the 0.5s in:
-    //   client/app/bundles/comments/components/CommentBox/CommentBox.module.scss:6
+    //   client/app/bundles/comments/components/CommentBox/CommentBox.module.scss:8
     return (
       <div>
-        <ReactCSSTransitionGroup
-          transitionName={cssTransitionGroupClassNames}
-          transitionEnterTimeout={500}
-          transitionLeaveTimeout={500}
-        >
-          {this.errorWarning()}
-        </ReactCSSTransitionGroup>
+        {this.errorWarning()}
 
-        <ReactCSSTransitionGroup
-          transitionName={cssTransitionGroupClassNames}
-          transitionEnterTimeout={500}
-          transitionLeaveTimeout={500}
-          className="commentList"
-          component="div"
-        >
+        <TransitionGroup className="commentList" component="div">
           {commentNodes}
-        </ReactCSSTransitionGroup>
+        </TransitionGroup>
       </div>
     );
   }