Updates and replaced React.createClass

.meteor/packages

@@ -71,5 +71,5 @@ react-meteor-data
 jsx
 react-template-helper
 
-utilities:meteor-griddle
+# utilities:meteor-griddle
 # static-html

.meteor/versions

@@ -143,7 +143,6 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
-utilities:[email protected]
 [email protected]
 [email protected]
 zimme:[email protected]

client/lib/react.js

@@ -1,3 +1,8 @@
 // Temporary file until the new react-runtime does this for us
 import React from 'react';
-window.React = React;  
+window.React = React;
+
+//We need this npm package to replace React.createReactClass
+//import createReactClass from 'create-react-class';
+
+//console.log("react.js file was loaded 🎉", createReactClass);

client/react/admin/components/AdminUserPurchases.jsx

@@ -1,4 +1,6 @@
-AdminUserPurchases = React.createClass({
+import createReactClass from 'create-react-class';
+
+AdminUserPurchases = createReactClass({
   render() {
     return <UserPurchases userId={this.props.rowData._id} showTableHeading={false}/>
   }

client/react/admin/components/CreatedAt.jsx

@@ -1,4 +1,6 @@
-CreatedAt = React.createClass({
+import createReactClass from 'create-react-class';
+
+CreatedAt = createReactClass({
   render: function(){
     return (
       <span>{moment(this.props.rowData.createdAt).fromNow()}</span>

client/react/admin/components/Enrolled.jsx

@@ -1,4 +1,6 @@
-Enrolled = React.createClass({
+import createReactClass from 'create-react-class';
+
+Enrolled = createReactClass({
   render: function(){
     var user = Meteor.users._transform(this.props.rowData);
     if (user.enrollMethod() === "pending") {

client/react/admin/components/PurchaseId.jsx

@@ -1,4 +1,6 @@
-PurchaseId = React.createClass({
+import createReactClass from 'create-react-class';
+
+PurchaseId = createReactClass({
   render() {
     return (
       <a href={FlowRouter.path("adminPurchasePage", this.props.rowData)}>{this.props.rowData._id}</a>

client/react/admin/components/UserId.jsx

@@ -1,4 +1,6 @@
-UserId = React.createClass({
+import createReactClass from 'create-react-class';
+
+UserId = createReactClass({
   render() {
     return (
       <a href={FlowRouter.path("profilePage", this.props.rowData)}>{this.props.rowData._id}</a>

client/react/admin/components/Username.jsx

@@ -1,4 +1,6 @@
-Username = React.createClass({
+import createReactClass from 'create-react-class';
+
+Username = createReactClass({
   render: function(){
     var user = Meteor.users._transform(this.props.rowData);
     return <span>{user.getUsername()}</span>

client/react/admin/layouts/AdminLayout.jsx

@@ -1,4 +1,6 @@
-AdminLayout = React.createClass({
+import createReactClass from 'create-react-class';
+
+AdminLayout = createReactClass({
 
   mixins: [ReactMeteorData],
 

client/react/admin/pages/AdminPurchasePage.jsx

@@ -1,7 +1,10 @@
-AdminPurchasePage = React.createClass({
+import createReactClass from 'create-react-class';
+import PropTypes from 'prop-types';
+
+AdminPurchasePage = createReactClass({
 
   propTypes: {
-    purchaseId: React.PropTypes.string.isRequired
+    purchaseId: PropTypes.string.isRequired
   },
 
   mixins: [ReactMeteorData],

client/react/admin/pages/AdminPurchasesPage.jsx

@@ -1,4 +1,6 @@
-AdminPurchasesPage = React.createClass({
+import createReactClass from 'create-react-class';
+
+AdminPurchasesPage = createReactClass({
 
   render() {
 
@@ -35,6 +37,7 @@ AdminPurchasesPage = React.createClass({
 
     return (
       <AdminLayout>
+        {/*
         <MeteorGriddle
           publication="adminPurchases"
           collection={Purchases}
@@ -48,6 +51,7 @@ AdminPurchasesPage = React.createClass({
           externalSortColumn="createdAt"
           externalSortAscending={false}
         />
+        */}
       </AdminLayout>
     )
 

client/react/admin/pages/AdminUsersPage.jsx

@@ -1,4 +1,6 @@
-AdminUsersPage = React.createClass({
+import createReactClass from 'create-react-class';
+
+AdminUsersPage = createReactClass({
 
   render() {
 
@@ -38,6 +40,7 @@ AdminUsersPage = React.createClass({
 
     return (
       <AdminLayout>
+        {/*
         <MeteorGriddle
           publication="adminUsers"
           collection={Meteor.users}
@@ -51,6 +54,7 @@ AdminUsersPage = React.createClass({
           externalSortColumn="createdAt"
           externalSortAscending={false}
         />
+        */}
       </AdminLayout>
     )
 

client/react/app.jsx

@@ -1,4 +1,6 @@
-App = React.createClass({
+import createReactClass from 'create-react-class';
+
+App = createReactClass({
 
   mixins: [ReactMeteorData],
 

client/react/chapters/components/Chapter.jsx

@@ -1,7 +1,10 @@
-Chapter = React.createClass({
+import createReactClass from 'create-react-class';
+import PropTypes from 'prop-types';
+
+Chapter = createReactClass({
 
   propTypes: {
-    chapter: React.PropTypes.object.isRequired
+    chapter: PropTypes.object.isRequired
   },
 
   getChapterContent() {

client/react/chapters/components/ChapterNav.jsx

@@ -1,7 +1,10 @@
-ChapterNav = React.createClass({
+import createReactClass from 'create-react-class';
+import PropTypes from 'prop-types';
+
+ChapterNav = createReactClass({
 
   propTypes: {
-    chapter: React.PropTypes.object.isRequired
+    chapter: PropTypes.object.isRequired
   },
 
   render() {

client/react/chapters/components/ChaptersTOC.jsx

@@ -1,8 +1,11 @@
-ChaptersTOC = React.createClass({
+import createReactClass from 'create-react-class';
+import PropTypes from 'prop-types';
+
+ChaptersTOC = createReactClass({
 
   propTypes: {
-    chapter: React.PropTypes.object.isRequired,
-    chapters: React.PropTypes.array.isRequired
+    chapter: PropTypes.object.isRequired,
+    chapters: PropTypes.array.isRequired
   },
 
   renderChapter(chapter, index) {

client/react/chapters/components/Comments.jsx

@@ -1,13 +1,15 @@
-var ReactDisqusThread = require('react-disqus-thread');
+import createReactClass from 'create-react-class';
+import PropTypes from 'prop-types';
+//var ReactDisqusThread = require('react-disqus-thread');
 
 var disqus_shortname = 'themeteorbook'; // required: replace example with your forum shortname
 
-Comments = React.createClass({
+Comments = createReactClass({
 
   propTypes: {
-    chapter: React.PropTypes.object.isRequired,
-    chapters: React.PropTypes.array.isRequired,
-    vocabularyChapter: React.PropTypes.object
+    chapter: PropTypes.object.isRequired,
+    chapters: PropTypes.array.isRequired,
+    vocabularyChapter: PropTypes.object
   },
 
   handleToggleClick(event) {
@@ -27,12 +29,14 @@ Comments = React.createClass({
             <hr/>
             <p>Additionally, you can use this area for more general discussion and questions:</p>
           </div>
+          {/*
           <ReactDisqusThread
             shortname={disqus_shortname}
             identifier={this.props.chapter.slug}
             title={this.props.chapter.title}
             url={Meteor.absoluteUrl() + 'chapters/' + this.props.chapter.slug}
           />
+          */}
         </div>
       </div>
     );

client/react/chapters/components/Photo.jsx

@@ -1,14 +1,17 @@
+import createReactClass from 'create-react-class';
+import PropTypes from 'prop-types';
+
 var timeout;
 
 $.easing.easeOutQuad = function (x, t, b, c, d) {
   return -c *(t/=d)*(t-2) + b;
 }
 
-Photo = React.createClass({
+Photo = createReactClass({
 
   propTypes: {
-    chapter: React.PropTypes.object.isRequired,
-    chapters: React.PropTypes.array.isRequired
+    chapter: PropTypes.object.isRequired,
+    chapters: PropTypes.array.isRequired
   },
 
   prevChapter() {

client/react/chapters/components/ShareProgress.jsx

@@ -1,3 +1,6 @@
+import createReactClass from 'create-react-class';
+import PropTypes from 'prop-types';
+
 var getVerb = function (chapterNumber) {
   // pick a verb to introduce a bit of diversity in the prompt.
   // early chapters have more normal verbs, and it gets more crazy at the end.
@@ -8,10 +11,10 @@ var getVerb = function (chapterNumber) {
   return verbs[vindex];
 };
 
-ShareProgress = React.createClass({
+ShareProgress = createReactClass({
 
   propTypes: {
-    chapter: React.PropTypes.object.isRequired
+    chapter: PropTypes.object.isRequired
   },
 
   verb() {

client/react/chapters/components/Sidebars.jsx

@@ -1,9 +1,12 @@
-Sidebars = React.createClass({
+import createReactClass from 'create-react-class';
+import PropTypes from 'prop-types';
+
+Sidebars = createReactClass({
 
   propTypes: {
-    chapter: React.PropTypes.object.isRequired,
-    chapters: React.PropTypes.array.isRequired,
-    vocabularyChapter: React.PropTypes.object
+    chapter: PropTypes.object.isRequired,
+    chapters: PropTypes.array.isRequired,
+    vocabularyChapter: PropTypes.object
   },
 
   render() {

client/react/chapters/components/Vocabulary.jsx

@@ -1,7 +1,10 @@
-Vocabulary = React.createClass({
+import createReactClass from 'create-react-class';
+import PropTypes from 'prop-types';
+
+Vocabulary = createReactClass({
 
   propTypes: {
-    vocabularyChapter: React.PropTypes.object.isRequired
+    vocabularyChapter: PropTypes.object.isRequired
   },
 
   getVocabulary() {

client/react/chapters/containers/Upgrade.jsx

@@ -1,4 +1,6 @@
-Upgrade = React.createClass({
+import createReactClass from 'create-react-class';
+
+Upgrade = createReactClass({
 
   mixins: [ReactMeteorData],
 

client/react/chapters/layouts/ChapterLayout.jsx

@@ -1,9 +1,12 @@
-ChapterLayout = React.createClass({
+import createReactClass from 'create-react-class';
+import PropTypes from 'prop-types';
+
+ChapterLayout = createReactClass({
 
   propTypes: {
-    chapter: React.PropTypes.object.isRequired,
-    chapters: React.PropTypes.array.isRequired,
-    vocabularyChapter: React.PropTypes.object
+    chapter: PropTypes.object.isRequired,
+    chapters: PropTypes.array.isRequired,
+    vocabularyChapter: PropTypes.object
   },
 
   render() {

client/react/chapters/pages/ChapterPage.jsx

@@ -1,7 +1,10 @@
-ChapterPage = React.createClass({
+import createReactClass from 'create-react-class';
+import PropTypes from 'prop-types';
+
+ChapterPage = createReactClass({
 
   propTypes: {
-    slug: React.PropTypes.string.isRequired
+    slug: PropTypes.string.isRequired
   },
 
   mixins: [ReactMeteorData],

client/react/common/components/FormFooter.jsx

@@ -1,4 +1,6 @@
-FormFooter = React.createClass({
+import createReactClass from 'create-react-class';
+
+FormFooter = createReactClass({
 
   render() {
     return (

client/react/common/components/PhotoBackground.jsx

@@ -1,7 +1,10 @@
-PhotoBackground = React.createClass({
+import createReactClass from 'create-react-class';
+import PropTypes from 'prop-types';
+
+PhotoBackground = createReactClass({
 
   propTypes: {
-    chapter: React.PropTypes.object.isRequired
+    chapter: PropTypes.object.isRequired
   },
 
   componentDidMount() {

client/react/common/components/Purchase.jsx

@@ -1,11 +1,14 @@
-Purchase = React.createClass({
+import createReactClass from 'create-react-class';
+import PropTypes from 'prop-types';
+
+Purchase = createReactClass({
 
   propTypes: {
-    product: React.PropTypes.object.isRequired,
-    level: React.PropTypes.object.isRequired,
-    user: React.PropTypes.object, // if a user is provided, then we know this is an upgrade
-    key: React.PropTypes.number,
-    code: React.PropTypes.string,
+    product: PropTypes.object.isRequired,
+    level: PropTypes.object.isRequired,
+    user: PropTypes.object, // if a user is provided, then we know this is an upgrade
+    key: PropTypes.number,
+    code: PropTypes.string,
   },
 
   renderPrice(levelKey, index) {

client/react/common/layouts/FormLayout.jsx

@@ -1,4 +1,6 @@
-FormLayout = React.createClass({
+import createReactClass from 'create-react-class';
+
+FormLayout = createReactClass({
 
   mixins: [ReactMeteorData],
 

client/react/common/layouts/Layout.jsx

@@ -1,4 +1,6 @@
-Layout = React.createClass({
+import createReactClass from 'create-react-class';
+
+Layout = createReactClass({
 
   render() {
     return (