extract App component from AppComposer

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

@@ -1,23 +1,7 @@
 import React, { PropTypes, Component } from 'react';
-import { composeWithTracker } from 'react-komposer';
 
-function AppComposer(props, onData) {
+import Core from "meteor/nova:core";
-
+const AppComposer = Core.AppComposer;
-  const subscriptions = Telescope.subscriptions.map((sub) => Meteor.subscribe(sub.name, sub.arguments));
-
-  FlowRouter.watchPathChange();
-
-  if (!subscriptions.length || _.every(subscriptions, handle => handle.ready())) {
-    const data = {
-      ready: true,
-      currentUser: Meteor.user(),
-      currentRoute: FlowRouter.current()
-    }
-    onData(null, data);
-  } else {
-    onData(null, {ready: false});
-  }
-}
 
 class App extends Component {
 
@@ -52,5 +36,5 @@ App.childContextTypes = {
   currentRoute: React.PropTypes.object
 }
 
-module.exports = composeWithTracker(AppComposer)(App);
+module.exports = AppComposer(App);
-export default composeWithTracker(AppComposer)(App);
+export default AppComposer(App);

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

@@ -6,7 +6,7 @@ const Messages = Core.Messages;
 
 const Header = ({currentUser}) => {
   
-  ({Logo, ListContainer, CategoriesList, NewPostButton, UserMenu} = Telescope.components);
+  ({Logo, ListContainer, CategoriesList, NewPostButton, UserMenu, AccountsMenu} = Telescope.components);
 
   const logoUrl = Telescope.settings.get("logoUrl");
   const siteTitle = Telescope.settings.get("title", "Telescope");
@@ -24,7 +24,7 @@ const Header = ({currentUser}) => {
         <div className="nav">
           
           <div className="nav-user">
-            {currentUser ? <UserMenu user={currentUser}/> : <LogInButtons />}
+            {currentUser ? <UserMenu user={currentUser}/> : <NoSSR><LogInButtons /></NoSSR>}
           </div>
 
           <div className="nav-new-post">

packages/base-components/lib/components.js

@@ -1,5 +1,6 @@
 // common
 
+Telescope.registerComponent("App", require('./common/App.jsx'));
 Telescope.registerComponent("Footer", require('./common/Footer.jsx'));
 Telescope.registerComponent("Header", require('./common/Header.jsx'));
 Telescope.registerComponent("Layout", require('./common/Layout.jsx'));
@@ -57,6 +58,7 @@ Telescope.registerComponent("UserSingle", require('./users/UserSingle.jsx'));
 Telescope.registerComponent("UserAvatar", require('./users/UserAvatar.jsx'));
 Telescope.registerComponent("UserName", require('./users/UserName.jsx'));
 Telescope.registerComponent("UserMenu", require('./users/UserMenu.jsx'));
+Telescope.registerComponent("AccountsMenu", require('./users/AccountsMenu.jsx'));
 
 // debug
 

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

@@ -1,3 +1,6 @@
-const LoadMore = ({loadMore, count, totalCount}) => <a href="#" className="post-load-more" onClick={loadMore}>Load More ({count}/{totalCount})</a>
+const LoadMore = ({loadMore, count, totalCount}) => {
+  const label = totalCount ? `Load More (${count}/${totalCount})` : "Load More";
+  return <a href="#" className="post-load-more" onClick={loadMore}>{label}</a>
+}
 
 module.exports = LoadMore;

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

@@ -70,14 +70,14 @@ class PostItem extends Component {
           </h3>
           
           <div className="post-meta">
-            {post.user? <UserAvatar user={post.user} size="small"/> : null}
+            <UserAvatar user={post.user} size="small"/>
-            {post.user? <UserName user={post.user}/> : null}
+            <UserName user={post.user}/>
             <div className="post-date">{moment(post.postedAt).fromNow()}</div>
             <div className="post-comments"><a href={Posts.getPageUrl(post)}>{post.commentCount}&nbsp;comments</a></div>
             <PostStats post={post} />
             {this.renderActions()}
-
           </div>
+
         </div>
 
         {this.renderCommenters()}

packages/base-components/lib/routes.jsx

@@ -2,17 +2,18 @@ import React from 'react';
 import Router from './router.js'
 import {mount} from 'react-mounter';
 
+
 // ------------------------------------- Posts -------------------------------- //
 
 Router.route('/', {
   name: 'posts.list',
   action(params, queryParams) {
 
-    ({AppContainer, ListContainer, PostList} = Telescope.components);
+    ({App, ListContainer, PostList} = Telescope.components);
     queryParams = _.isEmpty(queryParams) ? {view: 'new'} : _.clone(queryParams);
     ({selector, options} = Posts.parameters.get(queryParams));
 
-    mount(AppContainer, {content: 
+    mount(App, {content: 
       <ListContainer 
         collection={Posts} 
         publication="posts.list"
@@ -29,17 +30,17 @@ Router.route('/daily/:days?', {
   name: 'posts.daily',
   action(params, queryParams) {
 
-    ({AppContainer, PostDaily} = Telescope.components);
+    ({App, PostDaily} = Telescope.components);
 
-    mount(AppContainer, {content: <PostDaily days={params.days}/>})
+    mount(App, {content: <PostDaily days={params.days}/>})
   }
 });
 
 Router.route('/posts/:_id/:slug?', {
   name: 'posts.single',
   action(params, queryParams) {
-    ({AppContainer, DocumentContainer, PostPage} = Telescope.components);
+    ({App, DocumentContainer, PostPage} = Telescope.components);
-    mount(AppContainer, {content: 
+    mount(App, {content: 
       <DocumentContainer 
         collection={Posts} 
         publication="posts.single" 
@@ -54,8 +55,8 @@ Router.route('/posts/:_id/:slug?', {
 // Router.route('/posts/:_id/edit', {
 //   name: 'posts.edit',
 //   action(params, queryParams) {
-//     ({AppContainer, DocumentContainer} = Telescope.components);
+//     ({App, DocumentContainer} = Telescope.components);
-//     mount(AppContainer, {content: <DocumentContainer
+//     mount(App, {content: <DocumentContainer
 //       collection={Posts} 
 //       publication="posts.single" 
 //       selector={{_id: params._id}}
@@ -68,8 +69,8 @@ Router.route('/posts/:_id/:slug?', {
 Router.route('/users/:slug', {
   name: 'users.single',
   action(params, queryParams) {
-    ({AppContainer, DocumentContainer, UserSingle} = Telescope.components);
+    ({App, DocumentContainer, UserSingle} = Telescope.components);
-    mount(AppContainer, {content: 
+    mount(App, {content: 
       <DocumentContainer 
         collection={Users} 
         publication="users.single" 
@@ -83,8 +84,8 @@ Router.route('/users/:slug', {
 Router.route('/account', {
   name: 'account',
   action(params, queryParams) {
-    ({AppContainer, DocumentContainer, UserEdit} = Telescope.components);
+    ({App, DocumentContainer, UserEdit} = Telescope.components);
-    mount(AppContainer, {content: 
+    mount(App, {content: 
       <DocumentContainer 
         collection={Users} 
         publication="users.single" 
@@ -98,8 +99,8 @@ Router.route('/account', {
 Router.route('/users/:slug/edit', {
   name: 'users.edit',
   action(params, queryParams) {
-    ({AppContainer, DocumentContainer, UserEdit} = Telescope.components);
+    ({App, DocumentContainer, UserEdit} = Telescope.components);
-    mount(AppContainer, {content: 
+    mount(App, {content: 
       <DocumentContainer 
         collection={Users} 
         publication="users.single" 
@@ -113,8 +114,8 @@ Router.route('/users/:slug/edit', {
 Router.route('/cheatsheet', {
   name: 'cheatsheet',
   action() {
-    ({AppContainer, Cheatsheet} = Telescope.components);
+    ({App, Cheatsheet} = Telescope.components);
-    mount(AppContainer, {content: <Cheatsheet/>});
+    mount(App, {content: <Cheatsheet/>});
   }
 });
 

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

@@ -0,0 +1,22 @@
+import React, { PropTypes, Component } from 'react';
+import Router from '../router.js'
+import { Dropdown } from 'react-bootstrap';
+
+const AccountsMenu = ({user}) => {
+
+  ({UserAvatar, UserName} = Telescope.components);
+
+  return (
+    <Dropdown id="accounts-dropdown" className="user-menu-dropdown">
+      <Dropdown.Toggle>
+        Log In
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        *log in form goes here*
+      </Dropdown.Menu>
+    </Dropdown>
+  ) 
+}
+
+module.exports = AccountsMenu;
+export default AccountsMenu;

packages/base-components/package.js

@@ -22,8 +22,8 @@ Package.onUse(function (api) {
     // third-party packages
 
     'tmeasday:check-npm-versions@0.1.1',
-    'alt:react-accounts-ui@1.2.0',
+    'alt:react-accounts-ui@1.2.1',
-    // 'alt:react-accounts-unstyled',
+    // 'alt:react-accounts-unstyled@1.2.1',
     'dburles:spacebars-tohtml@1.0.1',
   ]);
 

packages/nova-core/lib/components.js

@@ -1,7 +1,7 @@
 import SmartContainers from "meteor/utilities:react-list-container";
 import FormContainers from "meteor/utilities:react-form-containers";
 
-Telescope.registerComponent("AppContainer", require('./containers/AppContainer.jsx'));
+// Telescope.registerComponent("AppContainer", require('./containers/AppContainer.jsx'));
 // Telescope.registerComponent("DocumentContainer", require('./containers/DocumentContainer.jsx'));
 // Telescope.registerComponent("ListContainer", require('./containers/ListContainer.jsx'));
 

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

@@ -0,0 +1,22 @@
+import { composeWithTracker } from 'react-komposer';
+
+function composer(props, onData) {
+
+  const subscriptions = Telescope.subscriptions.map((sub) => Meteor.subscribe(sub.name, sub.arguments));
+
+  FlowRouter.watchPathChange();
+
+  if (!subscriptions.length || _.every(subscriptions, handle => handle.ready())) {
+    const data = {
+      ready: true,
+      currentUser: Meteor.user(),
+      currentRoute: FlowRouter.current()
+    }
+    onData(null, data);
+  } else {
+    onData(null, {ready: false});
+  }
+}
+
+module.exports = composeWithTracker(composer);
+export default composeWithTracker(composer);

packages/nova-core/lib/core.js

@@ -1,4 +1,6 @@
 import Messages from "./messages.js";
 import ModalTrigger from "./components/ModalTrigger.jsx";
 
-export default {Messages, ModalTrigger};
+import AppComposer from "./containers/AppComposer.jsx";
+
+export default {Messages, ModalTrigger, AppComposer};