more ES6 classes & functional stateless components refactoring

packages/base-components/lib/common/Flash.jsx

@@ -1,11 +1,14 @@
+import React, { PropTypes, Component } from 'react';
+
 import Core from "meteor/nova:core";
+
 const Messages = Core.Messages;
 
-const Flash = React.createClass({
+class Flash extends Component{
 
   componentDidMount() {
     Messages.markAsSeen(this.props.message._id);
-  },
+  }
 
   render() {
     return (
@@ -14,6 +17,6 @@ const Flash = React.createClass({
       </div>
     )
   }
-});
+}
 
 module.exports = Flash;

packages/base-components/lib/common/Header.jsx

@@ -1,7 +1,7 @@
 import NoSSR from 'react-no-ssr';
 
 
-const Header = props => {
+const Header = ({currentUser}) => {
   
   ({Logo, ListContainer, CategoriesList, FlashContainer, ModalButton, NewDocContainer, CanCreatePost} = Telescope.components);
 
@@ -21,9 +21,9 @@ const Header = props => {
       
       <LogInButtons />
       
-      {props.currentUser ? <p><a href={FlowRouter.path("account")}>My Account</a></p> : ""}
+      {currentUser ? <p><a href={FlowRouter.path("account")}>My Account</a></p> : ""}
 
-      <CanCreatePost user={props.currentUser}>
+      <CanCreatePost user={currentUser}>
         <ModalButton label="New Post" className="button button--primary">
           <NewDocContainer collection={Posts} label="New Post" methodName="posts.new" callback={(post)=>{FlowRouter.go('posts.single', post);}}/>
         </ModalButton>

packages/base-components/lib/common/Layout.jsx

@@ -1,7 +1,6 @@
 const Layout = props => {
 
-  const Header = Telescope.getComponent("Header");
-  const Footer = Telescope.getComponent("Footer");
+  ({Header, Footer} = Telescope.components);
 
   return (
     <div className="wrapper" id="wrapper">

packages/base-components/lib/common/Logo.jsx

@@ -1,15 +1,15 @@
-const Logo = props => {
-  if (props.logoUrl) {
+const Logo = ({logoUrl, siteTitle}) => {
+  if (logoUrl) {
     return (
       <h1 className="logo-image ">
         <a href="/">
-          <img src={props.logoUrl} alt={props.siteTitle} style={{maxWidth: "100px", maxHeight: "100px"}} />
+          <img src={logoUrl} alt={siteTitle} style={{maxWidth: "100px", maxHeight: "100px"}} />
         </a>
       </h1>
     )
   } else {
     return (
-      <h1 className="logo-text"><a href="/">{props.siteTitle}</a></h1>
+      <h1 className="logo-text"><a href="/">{siteTitle}</a></h1>
     )
   }
 }

packages/base-components/lib/permissions/CanCreatePost.jsx

@@ -1,19 +1,15 @@
-const CanCreatePost = React.createClass({
-
-  propTypes: {
-    user: React.PropTypes.object
-  },
-
-  render() {
-    if (!this.props.user){
-      return <p>Please log in.</p>;
-    } else if (Users.can.post(this.props.user)) {
-      return this.props.children;
-    } else {
-      return <p>Sorry, you do not have permissions to post at this time</p>;
-    }
+const CanCreatePost = ({user, children}) => {
+  if (!user){
+    return <p>Please log in.</p>;
+  } else if (Users.can.post(user)) {
+    return children;
+  } else {
+    return <p>Sorry, you do not have permissions to post at this time</p>;
   }
+};
 
-});
+CanCreatePost.propTypes = {
+  user: React.PropTypes.object
+}
 
 module.exports = CanCreatePost;

packages/base-components/lib/permissions/CanEditPost.jsx

@@ -1,20 +1,16 @@
-const CanEditPost = React.createClass({
-
-  propTypes: {
-    user: React.PropTypes.object,
-    post: React.PropTypes.object
-  },
-
-  render() {
-    if (Users.can.edit(this.props.user, this.props.post)) {
-      return this.props.children;
-    } else if (!this.props.user){
-      return <p>Please log in.</p>;
-    } else {
-      return <p>Sorry, you do not have permissions to edit this post at this time</p>;
-    }
+const CanEditPost = ({user, post, children}) => {
+  if (Users.can.edit(user, post)) {
+    return children;
+  } else if (!user){
+    return <p>Please log in.</p>;
+  } else {
+    return <p>Sorry, you do not have permissions to edit this post at this time</p>;
   }
+};
 
-});
+CanEditPost.propTypes = {
+  user: React.PropTypes.object,
+  post: React.PropTypes.object
+}
 
 module.exports = CanEditPost;

packages/base-components/lib/permissions/CanEditUser.jsx

@@ -1,20 +1,16 @@
-const CanEditUser = React.createClass({
-
-  propTypes: {
-    user: React.PropTypes.object,
-    userToEdit: React.PropTypes.object
-  },
-
-  render() {
-    if (!this.props.user){
-      return <p>Please log in.</p>;
-    } else if (Users.can.edit(this.props.user, this.props.userToEdit)) {
-      return this.props.children;
-    } else {
-      return <p>Sorry, you do not have permissions to edit this user at this time</p>;
-    }
+const CanEditUser = ({user, userToEdit, children}) => {
+  if (!user){
+    return <p>Please log in.</p>;
+  } else if (Users.can.edit(user, userToEdit)) {
+    return children;
+  } else {
+    return <p>Sorry, you do not have permissions to edit this user at this time</p>;
   }
+};
 
-});
+CanEditUser.propTypes = {
+  user: React.PropTypes.object,
+  userToEdit: React.PropTypes.object
+}
 
 module.exports = CanEditUser;

packages/base-components/lib/permissions/CanView.jsx

@@ -1,19 +1,15 @@
-const CanView = React.createClass({
-
-  propTypes: {
-    user: React.PropTypes.object
-  },
-
-  render() {
-    if (Users.can.view(this.props.user)) {
-      return this.props.children;
-    } else if (!this.props.user){
-      return <p>Please log in.</p>;
-    } else {
-      return <p>Sorry, you do not have permissions to post at this time</p>;
-    }
+const CanView = ({user, children}) => {
+  if (Users.can.view(user)) {
+    return children;
+  } else if (!user){
+    return <p>Please log in.</p>;
+  } else {
+    return <p>Sorry, you do not have permissions to post at this time</p>;
   }
+};
 
-});
+CanView.propTypes = {
+  user: React.PropTypes.object
+}
 
 module.exports = CanView;

packages/base-components/lib/permissions/CanViewPost.jsx

@@ -1,20 +1,16 @@
-const CanViewPost = React.createClass({
-
-  propTypes: {
-    user: React.PropTypes.object,
-    post: React.PropTypes.object
-  },
-
-  render() {
-    if (Users.can.viewPost(this.props.user, this.props.document)) {
-      return this.props.children;
-    } else if (!this.props.user){
-      return <p>Please log in.</p>;
-    } else {
-      return <p>Sorry, you do not have permissions to post at this time</p>;
-    }
+const CanViewPost = ({user, post, children}) => {
+  if (Users.can.viewPost(this.props.user, this.props.document)) {
+    return this.props.children;
+  } else if (!this.props.user){
+    return <p>Please log in.</p>;
+  } else {
+    return <p>Sorry, you do not have permissions to post at this time</p>;
   }
+};
 
-});
+CanViewPost.propTypes = {
+  user: React.PropTypes.object,
+  post: React.PropTypes.object
+}
 
 module.exports = CanViewPost;

packages/base-components/lib/posts/Post.jsx

@@ -1,8 +1,8 @@
-const Post = (props) => {
+const Post = ({document}) => {
   
   ({ListContainer, CommentList, CommentNew, PostCategories, SocialShare} = Telescope.components);
 
-  const post = props.document;
+  const post = document;
   const htmlBody = {__html: post.htmlBody};
 
   return (

packages/base-components/lib/posts/list/PostCategories.jsx

@@ -1,9 +1,9 @@
-const PostCategories = props => {
+const PostCategories = ({categories}) => {
   return (
     <div className="post-categories">
       <h4>Categories</h4>
       <ul>
-        {props.categories.map(category => <li key={category._id}><a href={FlowRouter.path("posts.list", {}, {cat: category.slug})}>{category.name}</a></li>)}
+        {categories.map(category => <li key={category._id}><a href={FlowRouter.path("posts.list", {}, {cat: category.slug})}>{category.name}</a></li>)}
       </ul>
     </div>
   )

packages/base-components/lib/posts/list/PostCommenters.jsx

@@ -1,9 +1,9 @@
-const PostCommenters = props => {
+const PostCommenters = ({commenters}) => {
   return (
     <div className="post-commenters">
       <h4>Comments by</h4>
       <ul>
-        {props.commenters.map(commenter => <li key={commenter._id}>{Users.getDisplayName(commenter)}</li>)}
+        {commenters.map(commenter => <li key={commenter._id}>{Users.getDisplayName(commenter)}</li>)}
       </ul>
     </div>
   )

packages/base-components/lib/posts/list/PostItem.jsx

@@ -1,23 +1,20 @@
-const PostItem = React.createClass({
-  
-  propTypes: {
-    post: React.PropTypes.object.isRequired, // the current comment
-    currentUser: React.PropTypes.object, // the current user
-  },
+import React, { PropTypes, Component } from 'react';
+
+class PostItem extends Component {
 
   renderCategories() {
 
     ({PostCategories} = Telescope.components);
 
     return this.props.post.categoriesArray ? <PostCategories categories={this.props.post.categoriesArray} /> : "";
-  },
+  }
 
   renderCommenters() {
 
     ({PostCommenters} = Telescope.components);
 
     return this.props.post.commentersArray ? <PostCommenters commenters={this.props.post.commentersArray}/> : "";
-  },
+  }
 
   renderActions() {
 
@@ -34,7 +31,7 @@ const PostItem = React.createClass({
         {Users.can.edit(this.props.currentUser, this.props.post) ? component : ""}
       </div>
     )
-  },
+  }
   
   render() {
 
@@ -53,6 +50,11 @@ const PostItem = React.createClass({
       </div>
     )
   }
-});
+};
+  
+PostItem.propTypes = {
+  post: React.PropTypes.object.isRequired, // the current comment
+  currentUser: React.PropTypes.object, // the current user
+}
 
 module.exports = PostItem;

packages/base-components/lib/posts/list/PostList.jsx

@@ -1,18 +1,18 @@
-const PostList = props => {
+const PostList = ({results, currentUser, hasMore, ready, count, totalCount, loadMore}) => {
 
   ({PostItem, LoadMore, PostsLoading, NoPosts, NoMorePosts, PostViews} = Telescope.components);
 
-  if (!!props.results.length) {
+  if (!!results.length) {
     return (
       <div className="postList">
         <PostViews />
         <div className="post-list-content">
-          {props.results.map(post => <PostItem post={post} currentUser={props.currentUser} key={post._id}/>)}
+          {results.map(post => <PostItem post={post} currentUser={currentUser} key={post._id}/>)}
         </div>
-        {props.hasMore ? (props.ready ? <LoadMore {...props}/> : <PostsLoading/>) : <NoMorePosts/>}
+        {hasMore ? (ready ? <LoadMore loadMore={loadMore} count={count} totalCount={totalCount} /> : <PostsLoading/>) : <NoMorePosts/>}
       </div>
     )
-  } else if (!props.ready) {
+  } else if (!ready) {
     return (
       <div className="postList">
         <PostViews />

packages/base-components/lib/users/UsersEdit.jsx

@@ -1,23 +1,20 @@
-const UsersEdit = React.createClass({
+const UsersEdit = ({document, currentUser}) => {
+
+  const user = this.props.document;
+  const label = `Edit profile for ${Users.getDisplayName(user)}`;
+
+  ({CanEditUser, EditDocContainer} = Telescope.components);
+
+  return (
+    <CanEditUser user={this.props.currentUser} userToEdit={user}>
+      <EditDocContainer collection={Meteor.users} document={user} label={label} methodName="users.edit"/>
+    </CanEditUser>
+  )
+}
   
-  propTypes: {
-    document: React.PropTypes.object.isRequired,
-    currentUser: React.PropTypes.object.isRequired
-  },
-
-  render() {
-  
-    const user = this.props.document;
-    const label = `Edit profile for ${Users.getDisplayName(user)}`;
-
-    ({CanEditUser, EditDocContainer} = Telescope.components);
-
-    return (
-      <CanEditUser user={this.props.currentUser} userToEdit={user}>
-        <EditDocContainer collection={Meteor.users} document={user} label={label} methodName="users.edit"/>
-      </CanEditUser>
-    )
-  }
-});
+UsersEdit.propTypes = {
+  document: React.PropTypes.object.isRequired,
+  currentUser: React.PropTypes.object.isRequired
+}
 
 module.exports = UsersEdit;

packages/base-components/lib/users/UsersSingle.jsx

@@ -1,18 +1,13 @@
-const UsersSingle = React.createClass({
-  
-  propTypes: {
-    document: React.PropTypes.object.isRequired,
-    currentUser: React.PropTypes.object.isRequired
-  },
+const UsersSingle = ({document, currentUser}) => {
+  const user = document;
+  return (
+    <p>Profile for {Users.getDisplayName(user)}</p>
+  )
+}
 
-  render() {
-  
-    const user = this.props.document;
-
-    return (
-      <p>Profile for {Users.getDisplayName(user)}</p>
-    )
-  }
-});
+UsersSingle.propTypes = {
+  document: React.PropTypes.object.isRequired,
+  currentUser: React.PropTypes.object.isRequired
+}
 
 module.exports = UsersSingle;

packages/nova-core/lib/components/ModalButton.jsx

@@ -1,3 +1,5 @@
+import React, { PropTypes, Component } from 'react';
+
 import Modal from 'react-modal';
 
 const customStyles = {
@@ -11,29 +13,29 @@ const customStyles = {
   }
 };
 
-const ModalButton = React.createClass({
+class ModalButton extends Component {
 
-  propTypes: {
-    label: React.PropTypes.string.isRequired,
-    className: React.PropTypes.string
-  },
+  constructor() {
+    super();
+    this.openModal = this.openModal.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+    this.state = {
+      modalIsOpen: false
+    };
+  }
 
-  getInitialState: function() {
-    return { modalIsOpen: false };
-  },
-
-  openModal: function(event) {
+  openModal(event) {
     event.preventDefault();
     this.setState({modalIsOpen: true});
-  },
+  }
 
-  closeModal: function() {
+  closeModal(event) {
+    event.preventDefault();
     this.setState({modalIsOpen: false});
-  },
+  }
 
   render() {
     
-    // ({PostNewContainer} = Telescope.components);
     const Component = this.props.component;
 
     // see http://stackoverflow.com/a/32371612/649299
@@ -69,7 +71,12 @@ const ModalButton = React.createClass({
       </div>
     )
   }
-});
+};
+
+ModalButton.propTypes = {
+  label: React.PropTypes.string.isRequired,
+  className: React.PropTypes.string
+}
 
 module.exports = ModalButton;
 export default ModalButton;

packages/nova-core/lib/containers/AppContainer.jsx

@@ -1,3 +1,5 @@
+import React, { PropTypes, Component } from 'react';
+
 const AppContainer = React.createClass({
 
   mixins: [ReactMeteorData],

packages/nova-demo/demo-component.jsx

@@ -1,3 +1,4 @@
+
 import NoSSR from 'react-no-ssr';
 
 import Core from 'meteor/nova:core';

packages/nova-share/lib/common/social_share.jsx

@@ -1,28 +1,29 @@
-const SocialShare = React.createClass({
+import React, { PropTypes, Component } from 'react';
 
-  propTypes: {
-    url: React.PropTypes.string.isRequired,
-    title: React.PropTypes.string.isRequired,
-  },
+class SocialShare extends Component {
 
-  getInitialState: function() {
-    return {showShare: false};
-  },
+  constructor() {
+    super();
+    this.toggleView = this.toggleView.bind(this);
+    this.state = {
+      showShare: false
+    }
+  }
 
   viaTwitter() {
     return !!Settings.get('twitterAccount') ? 'via='+Settings.get('twitterAccount') : '';
-  },
+  }
 
   toggleView() {
     this.setState({
       showShare: !this.state.showShare
     });
     return;
-  },
+  }
 
   insertIcon(name) {
     return {__html: Telescope.utils.getIcon(name)};
-  },
+  }
 
   render() {
     let shareDisplay = this.state.showShare ? 'active' : 'hidden';
@@ -38,6 +39,11 @@ const SocialShare = React.createClass({
       </div>
     )
   }
-});
+}
+
+SocialShare.propTypes = {
+  url: React.PropTypes.string.isRequired,
+  title: React.PropTypes.string.isRequired,
+}
 
 module.exports = SocialShare;