show a message for empty feeds

src/feed/Page.js

@@ -22,6 +22,7 @@ import { toggleBookmark } from '../bookmarks/bookmarksActions';
 import Loading from '../widgets/Loading';
 import FavoriteCategoryButton from '../favorites/FavoriteCategoryButton';
 import * as favoriteActions from '../favorites/favoritesActions';
+import EmptyFeed from '../statics/EmptyFeed';
 
 @PageHOC
 @connect(
@@ -111,6 +112,10 @@ export default class Page extends React.Component {
             route={this.props.route}
           />
         }
+
+        { (content.length === 0 && !isFetching) &&
+          <EmptyFeed />
+        }
       </div>
     );
   }

src/statics/EmptyFeed.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Link } from 'react-router';
+import Icon from '../widgets/Icon';
+
+const EmptyFeed = () => (
+  <div className="ptl text-xs-center">
+    <Icon name="info" xl />
+    <h1>Empty Feed</h1>
+    <p>
+      This feed is still empty, please try another feed from the menu or <Link to="/">home page</Link>
+    </p>
+  </div>
+);
+
+export default EmptyFeed;

src/statics/EmptyUserOwnProfile.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Link } from 'react-router';
+import Icon from '../widgets/Icon';
+
+const EmptyUserProfile = () => (
+  <div className="ptl text-xs-center">
+    <Icon name="info" xl />
+    <h1>Your Profile is Empty!</h1>
+    <p>
+      You didn't publish any stories yet. <Link to="/write">Start now</Link>
+    </p>
+  </div>
+);
+
+export default EmptyUserProfile;

src/statics/EmptyUserProfile.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Icon from '../widgets/Icon';
+
+const EmptyUserProfile = () => (
+  <div className="ptl text-xs-center">
+    <Icon name="info" xl />
+    <h1>User Profile is Empty</h1>
+    <p>
+      This user doesn't have any story published yet!
+    </p>
+  </div>
+);
+
+export default EmptyUserProfile;

src/user/UserFeed.js

@@ -5,6 +5,7 @@ import {
   getFeedLoadingFromState,
   getFeedHasMoreFromState
 } from '../helpers/stateHelpers';
+import EmptyFeed from '../statics/EmptyFeed';
 
 export default class UserProfileFeed extends Component {
   constructor(props) {
@@ -30,14 +31,20 @@ export default class UserProfileFeed extends Component {
     });
 
     return (
-      <Feed
-        content={content}
-        isFetching={isFetching}
-        hasMore={hasMore}
-        loadContent={loadContentAction}
-        loadMoreContent={loadMoreContentAction}
-        route={this.props.route}
-      />
+      <div>
+        <Feed
+          content={content}
+          isFetching={isFetching}
+          hasMore={hasMore}
+          loadContent={loadContentAction}
+          loadMoreContent={loadMoreContentAction}
+          route={this.props.route}
+        />
+
+        { (content.length === 0 && !isFetching) &&
+          <EmptyFeed />
+        }
+      </div>
     );
   }
 }

src/user/UserProfile.js

@@ -22,6 +22,8 @@ import Avatar from '../widgets/Avatar';
 import Badge from '../widgets/Badge';
 import Donor from '../widgets/Donor';
 import donors from '../helpers/donors';
+import EmptyUserProfile from '../statics/EmptyUserProfile';
+import EmptyUserOwnProfile from '../statics/EmptyUserOwnProfile';
 
 class Profile extends Component {
   constructor(props) {
@@ -79,12 +81,9 @@ class Profile extends Component {
   }
 
   render() {
-    const { feed, posts, getFeedContent, getMoreFeedContent, limit } = this.props;
+    const { feed, posts, getFeedContent, getMoreFeedContent, limit, auth } = this.props;
     const username = this.props.params.name;
-    const edit = (
-      this.props.auth.isAuthenticated
-        && username === this.props.auth.user.name
-    );
+    const isOwnProfile = auth.isAuthenticated && username === auth.user.name;
 
     const content = getFeedContentFromState('blog', username, feed, posts);
     const isFetching = getFeedLoadingFromState('blog', username, feed);
@@ -204,6 +203,13 @@ class Profile extends Component {
             loadMoreContent={loadMoreContentAction}
             route={this.props.route}
           />
+
+          { (content.length === 0 && !isFetching) &&
+            isOwnProfile ?
+              <EmptyUserOwnProfile />
+            :
+              <EmptyUserProfile />
+          }
         </div>
       </div>
     );