From bde133aa6a0a7cb4f343c43f122f3e5299a5555b Mon Sep 17 00:00:00 2001 From: Khaled Emara Date: Mon, 19 Jun 2023 22:23:12 +0300 Subject: [PATCH 01/10] chore: bump major versions of client dependencies 1. Bump all minor and patch versions of all packages. 2. Upgrade `autoprefixer`: Use `.browserslistrc` and delete `.postcssrc` Add it to `postcss.config.js` Install and add `postcss-preset-env` to `postcss.config.js` 3. Upgrade `immutable`: Explicitly convert all `Array`s to `List`s 4. Upgrae `marked`: Install `marked-gfm-heading-id` to support `gfm` opt 5. Upgrade `react-router`: a. Remove `exact` b. Use `Routes` instead of `Switch`. c. Import `StaticRouter` from `react-router-dom/server`. d. Use `element` instead of `component` e. Use absolute paths instead of relative in Links. f. Convert Two Components to Functional React ones in order to use `useLocation` hook. g. Use `isActive` in `className` instead of `activeClassName`. h. Use `Navigate` instead of `Redirect`. i. Reset state once redirected. 6. Upgrade `react-transition-group`: a. Use `TransitionGroup` and `CSSTransition` instead of `ReactCSSTransitionGroup`. b. Convert one component to a Functional React one to use `forwardRef` c. Add `nodeRef` as part of the state to track DOM nodes for animation 7. Install `typescript` because it's a needed peer depenency of `prettier-eslint-cli` Signed-off-by: Khaled Emara --- .postcssrc | 13 - Gemfile.lock | 7 +- README.md | 16 +- .../components/CommentBox/CommentBox.jsx | 6 +- .../CommentBox/CommentForm/CommentForm.jsx | 34 +- .../CommentList/Comment/Comment.jsx | 38 +- .../CommentBox/CommentList/CommentList.jsx | 62 +- .../CommentList/CommentList.spec.jsx | 11 +- .../CommentScreen/CommentScreen.jsx | 2 + .../SimpleCommentScreen.jsx | 15 +- .../TestReactRouterRedirect.jsx | 28 +- .../containers/RouterCommentsContainer.jsx | 42 +- client/app/bundles/comments/layout/Layout.jsx | 6 +- .../comments/reducers/commentsReducer.js | 9 +- client/app/bundles/comments/routes/routes.jsx | 12 +- .../comments/startup/ServerRouterApp.jsx | 2 +- .../bundles/comments/store/commentsStore.js | 8 +- .../comments/store/routerCommentsStore.js | 8 +- package.json | 55 +- postcss.config.js | 12 +- yarn.lock | 4846 +++++++---------- 21 files changed, 2272 insertions(+), 2960 deletions(-) delete mode 100644 .postcssrc 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.lock b/Gemfile.lock index bcfd5302..ff0b5e47 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -180,8 +180,7 @@ 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) parallel (1.23.0) parser (3.2.2.3) @@ -392,7 +391,7 @@ GEM zeitwerk (2.6.11) PLATFORMS - ruby + arm64-darwin-22 DEPENDENCIES autoprefixer-rails @@ -449,4 +448,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..4a29b439 100644 --- a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx +++ b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx @@ -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/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()}