chore: bump major versions of client dependencies #529

KhaledEmaraDev · 2023-06-19T19:26:09Z

Bump all minor and patch versions of all packages.
Upgrade autoprefixer: Use .browserslistrc and delete .postcssrc add it to postcss.config.js . Install and add postcss-preset-env to postcss.config.js.
Upgrade immutable: Explicitly convert all Arrays to Lists.
Upgrae marked: Install marked-gfm-heading-id to support gfm option.
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.
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.
Install typescript because it's a needed peer depenency of prettier-eslint-cli.

This change is

ahangarha

Thanks for working on upgrading dependencies especially for transition one.

Please fix linter issues.

Also, please consider splitting changes into smaller and relevant commits. Pushing many changes in only one commit makes debugging and reviewing difficult. Many small and relevant commits are better. It helps to know the rationale behind a particular change.

justin808 · 2023-07-05T05:46:53Z

@KhaledEmaraDev what's left here?

ahangarha · 2023-08-01T14:57:42Z

Good work so far 👍🏾

I see two issues:

Deleting a comment in the classic rails page causes the following error in the browser console

Also, we still have this error from the past:

Let's fix this here in this PR.

ahangarha

Great work 👍🏾
Thanks to @KhaledEmaraDev for starting and @Yassa-hue for wrapping up.

To me, this PR is done.

I made two comments (which are not blocking)

ahangarha · 2023-08-07T13:43:14Z

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

+        // `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


Any React developer should know to include unique key to lists to avoid issues when interacting with them. We don't need to mention it here.

ahangarha · 2023-08-07T13:45:40Z

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

    // The 500 must correspond to the 0.5s in:
    //   client/app/bundles/comments/components/CommentBox/CommentBox.module.scss:6


I think this is an example of a good comment.
I would propose the same comment on the sass file too.

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 <[email protected]>

This commit solve the warning of unexpected ref object provided for a div.

- Since we create the comment nodeRef in the CommentList component We don’t need it to be created during adding a comment. - We shouldn’t change the props of a react component, It is not the best practice, So that this commit creates the nodeRef in the render function where it is used instead of the constructor function.

ahangarha

Good work 👍🏾

After rebasing, we have a new page for stimulus. There, we still get the following warning message:
We had a new set of browserlist. After rebase, it is gone.
There are some comments from my previous review. Maybe consider applying them with the next commits for wrapping this PR up.

Our only error is related to i18n, which comes from the past and can be fixed in a separate PR.

I don't see any other issues.

Yassa-hue · 2023-08-11T15:00:53Z

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

 import { injectIntl } from 'react-intl';
+import BaseComponent from 'libs/components/BaseComponent';


It's just a linting issue.

ahangarha · 2023-08-11T17:42:06Z

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

@@ -52,9 +52,6 @@ export default class CommentList extends BaseComponent {
    const commentNodes = $$comments.map(($$comment, index) => {
      const nodeRef = React.createRef(null);
      return (
-        // `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
        <CSSTransition
          key={$$comment.get('id') || index}


I am concerned that this is a good key. Though it works in our case I think it is better to make ids like comment_123.

ahangarha

LGTM 👍🏾

ahangarha reviewed Jun 20, 2023

View reviewed changes

Yassa-hue force-pushed the upgrade-deps branch from b3d73f8 to be0f3a1 Compare August 1, 2023 09:42

ahangarha marked this pull request as draft August 3, 2023 20:32

Yassa-hue force-pushed the upgrade-deps branch from 1e2352d to 7308993 Compare August 4, 2023 14:58

ahangarha mentioned this pull request Aug 5, 2023

Added stimulus example - update #533

Merged

ahangarha approved these changes Aug 7, 2023

View reviewed changes

ahangarha marked this pull request as ready for review August 7, 2023 13:55

ahangarha requested a review from Judahmeek August 7, 2023 18:01

KhaledEmaraDev and others added 9 commits August 10, 2023 13:36

Refactor js code to pass the lint test

8ad4cab

Add x86_64-linux platform

d160ee8

Upgrade to Shakapacker 7.0.2

37bcfca

Use generateWebpackConfig instead of webpackConfig

6f2fe92

Remove deprecated option

1e30e07

Solve the marked warnings

4223647

Move the comment component ref to CommentList

907295a

This commit solve the warning of unexpected ref object provided for a div.

Yassa-hue force-pushed the upgrade-deps branch from 23b70d3 to 8c13893 Compare August 10, 2023 15:35

ahangarha self-requested a review August 10, 2023 17:38

ahangarha suggested changes Aug 10, 2023

View reviewed changes

Apply review requests

e849ebf

Yassa-hue reviewed Aug 11, 2023

View reviewed changes

ahangarha reviewed Aug 11, 2023

View reviewed changes

ahangarha approved these changes Aug 11, 2023

View reviewed changes

justin808 merged commit 9d919d5 into shakacode:master Aug 11, 2023
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: bump major versions of client dependencies #529

chore: bump major versions of client dependencies #529

KhaledEmaraDev commented Jun 19, 2023 •

edited by justin808

Loading

ahangarha left a comment

justin808 commented Jul 5, 2023

ahangarha commented Aug 1, 2023 •

edited

Loading

ahangarha left a comment

ahangarha Aug 7, 2023

ahangarha Aug 7, 2023

ahangarha left a comment •

edited

Loading

Yassa-hue Aug 11, 2023

ahangarha Aug 11, 2023

ahangarha left a comment

		// The 500 must correspond to the 0.5s in:
		// client/app/bundles/comments/components/CommentBox/CommentBox.module.scss:6

		import { injectIntl } from 'react-intl';
		import BaseComponent from 'libs/components/BaseComponent';

chore: bump major versions of client dependencies #529

chore: bump major versions of client dependencies #529

Conversation

KhaledEmaraDev commented Jun 19, 2023 • edited by justin808 Loading

ahangarha left a comment

Choose a reason for hiding this comment

justin808 commented Jul 5, 2023

ahangarha commented Aug 1, 2023 • edited Loading

ahangarha left a comment

Choose a reason for hiding this comment

ahangarha Aug 7, 2023

Choose a reason for hiding this comment

ahangarha Aug 7, 2023

Choose a reason for hiding this comment

ahangarha left a comment • edited Loading

Choose a reason for hiding this comment

Yassa-hue Aug 11, 2023

Choose a reason for hiding this comment

ahangarha Aug 11, 2023

Choose a reason for hiding this comment

ahangarha left a comment

Choose a reason for hiding this comment

KhaledEmaraDev commented Jun 19, 2023 •

edited by justin808

Loading

ahangarha commented Aug 1, 2023 •

edited

Loading

ahangarha left a comment •

edited

Loading