break up PostInfo into stateless fn components

src/js/components/Post.jsx

@@ -27,7 +27,7 @@ const Post = React.createClass({
 
         return (
             <div className="post">
-                <PostLink post={ post } />
+                <PostLink title={ post.title } url={ post.url } />
                 <PostInfo post={ post } user={ user } />
             </div>
         );

src/js/components/PostCommentsLink.jsx

@@ -0,0 +1,20 @@
+'use strict';
+
+import React, { PropTypes } from 'react';
+import Link from 'react-router/lib/Link';
+import pluralize from '../util/pluralize';
+
+const CommentsLink = ({ postId, commentCount }) => (
+    <span className="post-info-item">
+        <Link to={ `/post/${postId}` }>
+            { pluralize(commentCount, 'comment') }
+        </Link>
+    </span>
+);
+
+CommentsLink.PropTypes = {
+    postId: PropTypes.string,
+    commentCount: PropTypes.number
+};
+
+export default CommentsLink;

src/js/components/PostCreatorLink.jsx

@@ -0,0 +1,16 @@
+'use strict';
+
+import React, { PropTypes } from 'react';
+import { Link } from 'react-router';
+
+const PostCreatorLink = ({ creator }) => (
+    <span className="post-info-item">
+        <Link to={ `/user/${creator}` }>{ creator }</Link>
+    </span>
+);
+
+PostCreatorLink.PropTypes = {
+    creator: PropTypes.string
+};
+
+export default PostCreatorLink;

src/js/components/PostDeleteLink.jsx

@@ -0,0 +1,16 @@
+'use strict';
+
+import { PropTypes } from 'react';
+import Actions from '../actions/Actions';
+
+const PostDeleteLink = ({ post }) => (
+    <span className="delete post-info-item">
+        <a onClick={ () => Actions.deletePost(post) }>delete</a>
+    </span>
+);
+
+PostDeleteLink.PropTypes = {
+    post: PropTypes.object
+};
+
+export default PostDeleteLink;

src/js/components/PostInfo.jsx

@@ -1,14 +1,14 @@
 'use strict';
 
 import React, { PropTypes } from 'react';
-import { Link } from 'react-router';
 
 import Actions from '../actions/Actions';
 
 import Upvote from './Upvote';
-
-import pluralize from '../util/pluralize';
-import timeAgo from '../util/timeAgo';
+import PostCommentsLink from './PostCommentsLink';
+import PostTimeAgo from './PostTimeAgo';
+import PostCreatorLink from './PostCreatorLink';
+import PostDeleteLink from './PostDeleteLink';
 
 const PostLink = React.createClass({
 
@@ -21,20 +21,13 @@ const PostLink = React.createClass({
         const { user, post } = this.props;
 
         let userUpvoted = user.upvoted || {};
+        let creatorIsLoggedIn = user.uid === post.creatorUID;
 
-        let commentCount = post.commentCount || 0;
         let upvoteActions = {
             upvote: Actions.upvotePost,
             downvote: Actions.downvotePost
         };
 
-        // add delete option if creator is logged in
-        let deleteOption = user.uid === post.creatorUID && (
-            <span className="delete post-info-item">
-                <a onClick={ () => Actions.deletePost(post) }>delete</a>
-            </span>
-        );
-
         return (
             <div className="post-info">
                 <Upvote
@@ -44,18 +37,10 @@ const PostLink = React.createClass({
                     isUpvoted={ !!userUpvoted[post.id] }
                     upvotes={ post.upvotes || 0 }
                 />
-                <span className="post-info-item">
-                    <Link to={ `/user/${post.creator}` }>{ post.creator }</Link>
-                </span>
-                <span className="post-info-item">
-                    { timeAgo(post.time) }
-                </span>
-                <span className="post-info-item">
-                    <Link to={ `/post/${post.id}` }>
-                        { pluralize(commentCount, 'comment') }
-                    </Link>
-                </span>
-                { deleteOption }
+                <PostCreatorLink creator={ post.creator } />
+                <PostTimeAgo time={ post.time } />
+                <PostCommentsLink postId={ post.id } commentCount={ post.commentCount || 0 } />
+                { creatorIsLoggedIn && <PostDeleteLink post={ post } /> }
             </div>
         );
     }

src/js/components/PostLink.jsx

@@ -13,7 +13,8 @@ const PostLink = ({ url, title }) => (
 );
 
 PostLink.PropTypes = {
-    post: PropTypes.object
+    url: PropTypes.string,
+    title: PropTypes.string
 };
 
 export default PostLink;

src/js/components/PostTimeAgo.jsx

@@ -0,0 +1,16 @@
+'use strict';
+
+import React, { PropTypes } from 'react';
+import timeAgo from '../util/timeAgo';
+
+const PostTimeAgo = ({ time }) => (
+    <span className="post-info-item">
+        { timeAgo(time) }
+    </span>
+);
+
+PostTimeAgo.PropTypes = {
+    time: PropTypes.string
+};
+
+export default PostTimeAgo;

src/js/components/Spinner.jsx

@@ -2,28 +2,26 @@
 
 import React from 'react';
 
-const Spinner = React.createClass({
-    render() {
-        var bars = [];
-        var barStyle;
+const Spinner = (props) => {
+    let bars = [];
+    let barStyle;
 
-        for (var i = 0; i < 12; i++) {
-            barStyle = {};
-            barStyle.WebkitAnimationDelay = barStyle.animationDelay =
-                (i - 12) / 10 + 's';
-            barStyle.WebkitTransform = barStyle.transform =
-                'rotate(' + (i * 30) + 'deg) translate(146%)';
-            bars.push(
-                <div style={ barStyle } className="react-spinner_bar" key={ i } />
-            );
-        }
-
-        return (
-            <div { ...this.props } className="react-spinner">
-                { bars }
-            </div>
+    for (let i = 0; i < 12; i++) {
+        barStyle = {};
+        barStyle.WebkitAnimationDelay = barStyle.animationDelay =
+            (i - 12) / 10 + 's';
+        barStyle.WebkitTransform = barStyle.transform =
+            'rotate(' + (i * 30) + 'deg) translate(146%)';
+        bars.push(
+            <div style={ barStyle } className="react-spinner_bar" key={ i } />
         );
     }
-});
+
+    return (
+        <div { ...props } className="react-spinner">
+            { bars }
+        </div>
+    );
+};
 
 export default Spinner;