Creating a parent component and extending it to other components

Author: marcusvmsa

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+export default class BaseComponent extends React.Component {
+  shouldComponentUpdate() {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
+  }
+}

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

@@ -1,21 +1,17 @@
 import React, { PropTypes } from 'react';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import CommentForm from './CommentForm/CommentForm';
 import CommentList from './CommentList/CommentList';
 import css from './CommentBox.scss';
+import BaseComponent from '../BaseComponent';
 
-export default class CommentBox extends React.Component {
+export default class CommentBox extends BaseComponent {
   static propTypes = {
     pollInterval: PropTypes.number.isRequired,
     actions: PropTypes.object.isRequired,
     data: PropTypes.object.isRequired,
   };
 
-  shouldComponentUpdate() {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
-  }
-
   componentDidMount() {
     const { fetchComments } = this.props.actions;
     fetchComments();

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

@@ -8,12 +8,13 @@ import NavItem from 'react-bootstrap/lib/NavItem';
 import Alert from 'react-bootstrap/lib/Alert';
 import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
 import _ from 'lodash';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+import BaseComponent from '../../BaseComponent';
 
 const emptyComment = { author: '', text: '' };
 const textPlaceholder = 'Say something using markdown...';
 
-export default class CommentForm extends React.Component {
+export default class CommentForm extends BaseComponent {
   static propTypes = {
     isSaving: PropTypes.bool.isRequired,
     actions: PropTypes.object.isRequired,
@@ -36,10 +37,6 @@ export default class CommentForm extends React.Component {
     ]);
   }
 
-  shouldComponentUpdate() {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
-  }
-
   _handleSelect(selectedKey) {
     this.setState({ formMode: selectedKey });
   }

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

@@ -1,19 +1,15 @@
 import React, { PropTypes } from 'react';
 import marked from 'marked';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import css from './Comment.scss';
+import BaseComponent from '../../../BaseComponent';
 
-export default class Comment extends React.Component {
+export default class Comment extends BaseComponent {
   static propTypes = {
     author: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,
   };
 
-  shouldComponentUpdate() {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
-  }
-
   render() {
     const { author, text } = this.props;
     const rawMarkup = marked(text, { gfm: true, sanitize: true });

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

@@ -3,11 +3,11 @@ import Immutable from 'immutable';
 import Alert from 'react-bootstrap/lib/Alert';
 import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
 import _ from 'lodash';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import Comment from './Comment/Comment';
+import BaseComponent from '../../BaseComponent';
 
-export default class CommentList extends React.Component {
+export default class CommentList extends BaseComponent {
   static propTypes = {
     $$comments: PropTypes.instanceOf(Immutable.List).isRequired,
     error: PropTypes.any,
@@ -20,10 +20,6 @@ export default class CommentList extends React.Component {
     _.bindAll(this, '_errorWarning');
   }
 
-  shouldComponentUpdate() {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
-  }
-
   _errorWarning() {
     // If there is no error, there is nothing to add to the DOM
     if (!this.props.error) return null;

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

@@ -1,10 +1,10 @@
 import React, { PropTypes } from 'react';
 
 import CommentBox from '../CommentBox/CommentBox';
-
 import css from './CommentScreen.scss';
+import BaseComponent from '../BaseComponent';
 
-export default class CommentScreen extends React.Component {
+export default class CommentScreen extends BaseComponent {
 
   static propTypes = {
     actions: PropTypes.object.isRequired,

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

@@ -2,14 +2,14 @@ import React from 'react';
 import Immutable from 'immutable';
 import request from 'axios';
 import _ from 'lodash';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import metaTagsManager from 'libs/metaTagsManager';
 import CommentForm from '../CommentBox/CommentForm/CommentForm';
 import CommentList from '../CommentBox/CommentList/CommentList';
 import css from './SimpleCommentScreen.scss';
+import BaseComponent from '../BaseComponent';
 
-export default class SimpleCommentScreen extends React.Component {
+export default class SimpleCommentScreen extends BaseComponent {
   constructor(props, context) {
     super(props, context);
     this.state = {
@@ -22,10 +22,6 @@ export default class SimpleCommentScreen extends React.Component {
     _.bindAll(this, '_fetchComments', '_handleCommentSubmit');
   }
 
-  shouldComponentUpdate() {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
-  }
-
   componentDidMount() {
     this._fetchComments();
   }

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

@@ -1,11 +1,8 @@
 import React from 'react';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
 
-export default class TestReactRouter extends React.Component {
-  shouldComponentUpdate() {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
-  }
+import BaseComponent from '../BaseComponent';
 
+export default class TestReactRouter extends BaseComponent {
   render() {
     return (
       <div className="container">

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

@@ -1,11 +1,8 @@
 import React from 'react';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
 
-export default class TestReactRouterRedirect extends React.Component {
-  shouldComponentUpdate() {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
-  }
+import BaseComponent from '../BaseComponent';
 
+export default class TestReactRouterRedirect extends BaseComponent {
   static checkAuth(nextState, replaceState) {
     // Hard code this to demonstrate the effect
     const notAuthorized = true;

client/app/bundles/comments/containers/NonRouterCommentsContainer.jsx

@@ -1,26 +1,22 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import CommentScreen from '../components/CommentScreen/CommentScreen';
 import * as commentsActionCreators from '../actions/commentsActionCreators';
+import BaseComponent from '../components/BaseComponent';
 
 function select(state) {
   // Which part of the Redux global state does our component want to receive as props?
   return { data: state.$$commentsStore };
 }
 
-class NonRouterCommentsContainer extends React.Component {
+class NonRouterCommentsContainer extends BaseComponent {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     data: PropTypes.object.isRequired,
   };
 
-  shouldComponentUpdate() {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
-  }
-
   render() {
     const { dispatch, data } = this.props;
     const actions = bindActionCreators(commentsActionCreators, dispatch);

client/app/bundles/comments/containers/RouterCommentsContainer.jsx

@@ -1,17 +1,17 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import CommentScreen from '../components/CommentScreen/CommentScreen';
 import * as commentsActionCreators from '../actions/commentsActionCreators';
+import BaseComponent from '../components/BaseComponent';
 
 function select(state) {
   // Which part of the Redux global state does our component want to receive as props?
   return { data: state.$$commentsStore };
 }
 
-class RouterCommentsContainer extends React.Component {
+class RouterCommentsContainer extends BaseComponent {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     data: PropTypes.object.isRequired,
@@ -20,10 +20,6 @@ class RouterCommentsContainer extends React.Component {
     }).isRequired,
   };
 
-  shouldComponentUpdate() {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
-  }
-
   render() {
     const { dispatch, data } = this.props;
     const actions = bindActionCreators(commentsActionCreators, dispatch);