diff --git a/.postcssrc b/.postcssrc deleted file mode 100644 index d2e4d68d..00000000 --- a/.postcssrc +++ /dev/null @@ -1,13 +0,0 @@ -{ - "plugins": { - "autoprefixer": { - "browsers": [ - ">1%", - "last 5 versions", - "safari >= 7", - "Firefox ESR", - "not ie < 9" - ] - } - } -} diff --git a/Gemfile b/Gemfile index d7177e76..f783373f 100644 --- a/Gemfile +++ b/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" diff --git a/Gemfile.lock b/Gemfile.lock index bcfd5302..134f03ea 100644 --- a/Gemfile.lock +++ b/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 diff --git a/README.md b/README.md index 03860aff..9ec25629 100644 --- a/README.md +++ b/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, }; } } diff --git a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx index 23a55bbe..a3c5f53e 100644 --- a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx +++ b/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 { diff --git a/client/app/bundles/comments/components/CommentBox/CommentBox.module.scss b/client/app/bundles/comments/components/CommentBox/CommentBox.module.scss index 959bfab8..1730a35f 100644 --- a/client/app/bundles/comments/components/CommentBox/CommentBox.module.scss +++ b/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; diff --git a/client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx b/client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx index 1aa01447..a3af853d 100644 --- a/client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx +++ b/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( -
  • - {_.upperFirst(errorFor)}: {errorText} -
    • , + +
  • + {_.upperFirst(errorFor)}: {errorText} +
    • +     , ); }, [], @@ -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 (
    - - {this.errorWarning()} - + {this.errorWarning()}