Modernize existing React component code #17

li-boxuan · 2018-05-01T14:44:52Z

Refactor deprecated code and upgrade to React v16.3

Closes #16

blazeu · 2018-05-01T15:19:21Z

src/components/app/filter-dropdown.jsx

-  renderItem(item) {
+  };
+
+  renderItem = (item) => {


I don't think it's necessary to convert method other than event listener to class properties, this is still this class because it's not called from event listener.

Related https://stackoverflow.com/questions/44423947/javascript-class-methods-versus-properties#comment75847321_44424064

There are some benefits to use public class fields syntax:
(1). It prevents accidental neglect of binding.

It's actually not necessary to transform all methods to arrow functions (i.e., to bind them), but this behavior is the same as createClass() and we can make sure that we won't accidentally break stuff

Related:
https://github.com/reactjs/react-codemod/blob/master/README.md#explanation-of-the-new-es2015-class-transform-with-property-initializers

(2). It does not have the performance issue.

It avoids the performance issues of approach Bind in Render and Use Arrow Function in Render.

Related:
https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

(3). The converting was done by jscodeshift automatically.
I used react-codemod, which automatically transforms all methods to arrow functions.
It involves much manual work to convert arrow functions back.

Related:
https://github.com/reactjs/react-codemod/

I'm not sure, but it seems to me that the function renderItem is indeed called from outside. I suspect it is called somewhere in react-bootstrap library.

It literally says It's actually not necessary to transform all methods to arrow functions

That's right, and we're talking about comparing bind(this) and () => listener(), other function besides event listener does not need bind.

If we're deciding to move back to using normal class method on non event listener, if that's even worth it, we need to make sure it doesn't break anything and this project has no complete tests.

@andrewda gonna need your opinion on this.

Maybe we could leave this as a separate issue? If we decide to move back to normal methods, we need careful reviews. Errors are likely to be missed in this large PR.

If I move some inappropriate methods back to use normal class methods, there would be no diff for that method in this PR, which is almost impossible for reviewers to detect if I make any errors.

blazeu · 2018-05-01T15:22:33Z

src/components/app/filter-dropdown.jsx

-
-
-const FilterDropdownShell = React.createClass({
+class FilterDropdownShell extends React.Component {
  render() {


This can be converted to functional component.

blazeu · 2018-05-01T15:27:04Z

src/components/by-user-view.jsx


-
-const UsersView = React.createClass({
+class UsersView extends React.Component {
  render() {


This can be converted to functional component.

blazeu · 2018-05-01T15:27:34Z

src/components/colored-icon.jsx

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import {isLight} from '../helpers';
 import {getFilters} from '../route-utils';

-const ColoredIcon = React.createClass({
+class ColoredIcon extends React.Component {
  render() {


This can be converted to functional component.

blazeu · 2018-05-01T15:28:17Z

src/components/dashboard.jsx


-const RepoItem = React.createClass({
+class RepoItem extends React.Component {
  render() {


This can be converted to functional component.

All component with only render method can be functional component, I'll stop marking.

blazeu · 2018-05-01T15:33:03Z

Build is failing, looks like we need that json generator first.

blazeu · 2018-05-01T15:43:52Z

Also there's an update on lifecycle method https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles , let's see if we can migrate safely.

andrewda · 2018-05-01T16:28:59Z

src/components/anonymous-modal.jsx

@@ -6,7 +6,7 @@ import CurrentUserStore from '../user-store';

 let hasAlreadyShownAnonymousModal = false;

-const AnonymousModal = React.createClass({
+class AnonymousModal extends React.Component {


Could just be me, but I much prefer extends Component over extends React.Component. (i.e. importing Component using import React, {Component} from 'react')

Yeah, let's do that.

Additionally, babel-plugin-react-require can be used to auto import React when the file only has functional component that doesn't need to extends from Component

blazeu · 2018-05-05T02:13:56Z

I'm willing to merge without updating the lifecycle method in this PR. There's no deprecation warning in 16.3, but the next version will.

jayvdb · 2018-05-07T08:55:07Z

@gitmate-bot rebase

gitmate-bot · 2018-05-07T08:55:10Z

Hey! I'm GitMate.io! This pull request is being rebased automatically. Please DO NOT push while rebase is in progress or your changes would be lost permanently ⚠️

gitmate-bot · 2018-05-07T08:55:21Z

Automated rebase with GitMate.io was successful! 🎉

blazeu · 2018-05-07T12:23:05Z

src/components/issue.diff

@@ -0,0 +1,848 @@
+diff --git a/src/components/issue.jsx b/src/components/issue.jsx


Unrelated file

Thx. A stupid mistake which should definitely be avoided. 😅

blazeu · 2018-05-07T12:24:04Z

src/components/issue-blurb.jsx

@@ -10,7 +10,7 @@ import GithubFlavoredMarkdown from './gfm';
 import Loadable from './loadable';
 import ColoredIcon from './colored-icon';

-const IssueOrPullRequestBlurb = React.createClass({
+class IssueOrPullRequestBlurb extends Component {


More functional component?

Using functional component would lead to an error as it is using this.onClickIcon here. To be honest, I don't know where the function onClickIcon comes from. I use grep and find out it's being used in issue-blurb.jsx but defined nowhere.

Ah ok. We'll leave it as it is.

But does it even matter? Since this.onClickIcon is undefined whether it is using class or functional. It would lead to an error either way.

Probably open an issue after finding where the component is located in the UI, if there's an error.

I just transformed it into the functional component. You are right, the undefined onClickIcon has nothing to do with whether it is using class or function.
Filed another issue #29 for the undefined onClickIcon.

blazeu · 2018-05-07T12:36:34Z

src/components/anonymous-modal.jsx

+function AnonymousModal() {
+  const onHide = () => {
+    hasAlreadyShownAnonymousModal = true;
+    this.setState({ showModal: false});


This will introduce error, since it's functional component and has no this.setState
https://jsbin.com/dodalubaxo/edit?html,js,output

And the worst part is that this modal is showed when you visit the issues view
https://deploy-preview-17--coala-gh-board.netlify.com/#/r/coala:coala%7Ccoala-bears%7Cdocumentation%7Ccorobo/kanban

jayvdb · 2018-05-08T01:01:54Z

src/components/board.jsx

-  onStop(context) { this.setState({ticks: this.props.progress.ticks, max: this.props.progress.max, message: 'Finished: ' + context}); },
+  };
+
+  onStop = (context) => { this.setState({ticks: this.props.progress.ticks, max: this.props.progress.max, message: 'Finished: ' + context}); };


line is longer than github's code review block width.

drop messages: ... to next line under ticks: ?

or something similar.

Please note that a 'split line' type of change should only be done in this PR where the change already contains a non-whitespace modification to the line.

We dont want git diff -w for this patch getting extra changes which are line splits.

There are only a few cases in this PR where the very long line is already changing syntax, so we may as well also improve the layout a little.

jayvdb · 2018-05-08T01:06:55Z

src/components/app/filter-dropdown.jsx

-    if (repoInfos.length) {
-      const [{repoOwner, repoName}] = repoInfos;
-
-      // TODO: Poll all of these so we get updates


Create a separate PR (to be merged first) remove any of the TODOs which are going to be needlessly moved as part of this PR. #30

Not done yet?

Created a separate PR here: #33

jayvdb · 2018-05-08T01:15:26Z

src/components/by-user-view.jsx

-      // !isFilteringByColumn && (!getShowEmptyColumns || columnCards.length)
-
-      kanbanColumnCount++; // Count the number of actual columns displayed
-      /*HACK: Column should handle milestones */


this set of comments is duplicated from by-milestone-view.jsx.

should this handle milestones in by-user-view.jsx?

Looks like when the author reused the code from by-milestone-view.jsx, he forgot to delete the unrelated comment.

jayvdb · 2018-05-08T01:19:45Z

src/components/etherpad.jsx

-  },
+class EtherpadInner extends Component {
+  static defaultProps = {
+    hostName: 'https://openstax-pad.herokuapp.com',


We shouldnt modernise a component that we are not able to test

#20

React.createClass is not supported in React V16.
A feasible approach is to import createReactClass from "create-react-class"; and substitute React.createClass with createReactClass.

jayvdb · 2018-05-08T01:22:12Z

src/components/issue-blurb.jsx

+    );
+  }
+  if (issue) {
+    const isPullRequest = card.isPullRequest() || issue.base; // use .base in case we are given the PR JSON (which does not contain labels)


line is longer than github review block width

jayvdb · 2018-05-09T02:14:19Z

src/components/anonymous-modal.jsx

@@ -20,7 +21,7 @@ const AnonymousModal = React.createClass({
    }

    return (
-      <BS.Modal show={showModal} container={this} onHide={onHide}>
+      <BS.Modal show={showModal} container={this} onHide={this.onHide}>


surely there should be a way to avoid using this. in templates

I don't understand, why should we avoid that? This is ES6 style component. Ref: https://reactjs.org/docs/components-and-props.html

While it is possible to use this as a prop, it isnt desirable for normal usage where it is possible to declare the properties which are available to the template.

I am a bit confused. Are you talking about container={this} or onHide={this.onHide}? But both of them are consistent with the react-bootstrap documentation: https://react-bootstrap.github.io/components/modal/#modals-contained

Do you mean onHide function should be declared in render() function?

this.onHide is okay, it's a common pattern https://reactjs.org/docs/handling-events.html . React template isn't a template, each element is transformed into a function call, it's possible to write component without jsx or "template", with pure function call.

I'm not sure about container prop, but I think that's part of Bootstrap.

Ok. I defer to you on this one then.

I note that in most other cases this. is not being used; this patch is removing many of them, and very rarely adding them.

Most of the time this.props is changed into props because React.createClass is changed into functional component. So now props is being passed as an argument.
Ref: https://reactjs.org/docs/components-and-props.html#functional-and-class-components

jayvdb · 2018-05-09T02:22:04Z

src/components/colored-icon.jsx

-        <span className={className} style={headerStyle} title={name}>{children}</span>
-    );
+  return (
+      <span className={className} style={headerStyle} title={name}>{children}</span>


four space indent?

gitmate-bot · 2018-05-11T14:50:54Z

Automated fastforward with GitMate.io was successful! 🎉

blazeu requested changes May 1, 2018

View reviewed changes

andrewda reviewed May 1, 2018

View reviewed changes

li-boxuan force-pushed the refactor-react branch from 8c2706b to 698f26f Compare May 6, 2018 13:43

gitmate-bot added process/pending review size/XXL labels May 6, 2018

gitmate-bot assigned li-boxuan May 6, 2018

gitmate-bot force-pushed the refactor-react branch from 698f26f to 073b6e2 Compare May 7, 2018 08:55

blazeu requested changes May 7, 2018

View reviewed changes

li-boxuan mentioned this pull request May 7, 2018

Undefined function in issue-blurb.jsx #29

Closed

li-boxuan force-pushed the refactor-react branch from 073b6e2 to cd03915 Compare May 7, 2018 14:43

jayvdb requested changes May 8, 2018

View reviewed changes

jayvdb added process/wip and removed process/pending review labels May 8, 2018

li-boxuan force-pushed the refactor-react branch from cd03915 to fac9d3b Compare May 8, 2018 04:59

gitmate-bot added process/pending review and removed process/wip labels May 8, 2018

jayvdb added process/wip and removed process/pending review labels May 8, 2018

li-boxuan force-pushed the refactor-react branch from fac9d3b to 900d752 Compare May 8, 2018 16:32

gitmate-bot added process/pending review and removed process/wip labels May 8, 2018

jayvdb reviewed May 9, 2018

View reviewed changes

jayvdb requested changes May 9, 2018

View reviewed changes

li-boxuan force-pushed the refactor-react branch from 900d752 to ed71263 Compare May 9, 2018 03:17

gitmate-bot removed the process/approved label May 11, 2018

li-boxuan deleted the refactor-react branch May 11, 2018 14:52

gitmate-bot added process/approved and removed process/approved labels May 11, 2018

li-boxuan mentioned this pull request May 14, 2018

React Component: Move some arrow functions back to normal methods #37

Open

gitmate-bot added process/approved and removed process/approved labels May 15, 2018

gitmate-bot added process/approved and removed process/approved labels May 22, 2018

li-boxuan mentioned this pull request Jul 28, 2018

Hiroshis' Etherpad #126

Merged

		@@ -0,0 +1,848 @@
		diff --git a/src/components/issue.jsx b/src/components/issue.jsx

Modernize existing React component code #17

Modernize existing React component code #17

Conversation

li-boxuan commented May 1, 2018

Choose a reason for hiding this comment

li-boxuan May 2, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

li-boxuan May 5, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blazeu commented May 1, 2018

blazeu commented May 1, 2018

Choose a reason for hiding this comment

blazeu May 1, 2018 • edited Loading

Choose a reason for hiding this comment

blazeu commented May 5, 2018

jayvdb commented May 7, 2018

gitmate-bot commented May 7, 2018

gitmate-bot commented May 7, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

li-boxuan May 7, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blazeu May 9, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gitmate-bot commented May 11, 2018

li-boxuan May 2, 2018 •

edited

Loading

li-boxuan May 5, 2018 •

edited

Loading

blazeu May 1, 2018 •

edited

Loading

li-boxuan May 7, 2018 •

edited

Loading

blazeu May 9, 2018 •

edited

Loading