Merge pull request #143 from rschamp/feature/empty-activity

Add empty state for What's Happening box

src/components/activity/activity.jsx

 var React = require('react');
 var ReactIntl = require('react-intl');
 var defineMessages = ReactIntl.defineMessages;
+var FormattedMessage = ReactIntl.FormattedMessage;
 var FormattedRelative = ReactIntl.FormattedRelative;
 var injectIntl = ReactIntl.injectIntl;
 
@@ -32,29 +33,46 @@ var Activity = React.createClass({
                 className="activity"
                 title={formatMessage(defaultMessages.whatsHappening)}>
 
-                <ul>
-                    {this.props.items.map(function (item) {
-                        var actorProfileUrl = '/users/' + item.actor.username + '/';
-                        var actionDate = new Date(item.datetime_created + 'Z');
-                        var activityMessageHTML = '<a href=' + actorProfileUrl + '>' +
-                            item.actor.username + '</a>' + item.message;
-                        if (item.message.replace(/\s/g, '')) {
-                            return (
-                                <li key={item.pk}>
-                                    <a href={actorProfileUrl}>
-                                        <img src={item.actor.thumbnail_url} width="34" height="34" />
-                                        <p dangerouslySetInnerHTML={{__html: activityMessageHTML}}></p>
-                                        <p>
-                                            <span className="stamp">
-                                                <FormattedRelative value={actionDate} />
-                                            </span>
-                                        </p>
-                                    </a>
-                                </li>
-                            );
-                        }
-                    })}
-                </ul>
+                {this.props.items && this.props.items.length > 0 ? [
+                    <ul>
+                        {this.props.items.map(function (item) {
+                            if (item.message.replace(/\s/g, '')) {
+                                var actorProfileUrl = '/users/' + item.actor.username + '/';
+                                var actionDate = new Date(item.datetime_created + 'Z');
+                                var activityMessageHTML = (
+                                    '<a href=' + actorProfileUrl + '>' + item.actor.username + '</a>' +
+                                    item.message
+                                );
+                                return (
+                                    <li key={item.pk}>
+                                        <a href={actorProfileUrl}>
+                                            <img src={item.actor.thumbnail_url} width="34" height="34" />
+                                            <p dangerouslySetInnerHTML={{__html: activityMessageHTML}}></p>
+                                            <p>
+                                                <span className="stamp">
+                                                    <FormattedRelative value={actionDate} />
+                                                </span>
+                                            </p>
+                                        </a>
+                                    </li>
+                                );
+                            }
+                        })}
+                    </ul>
+                ] : [
+                    <div className="empty">
+                        <h4>
+                            <FormattedMessage
+                                id="activity.seeUpdates"
+                                defaultMessage="This is where you will see updates from Scratchers you follow" />
+                        </h4>
+                        <a href="/studios/146521/">
+                            <FormattedMessage
+                                id="activity.checkOutScratchers"
+                                defaultMessage="Check out some Scratchers you might like to follow" />
+                        </a>
+                    </div>
+                ]}
             </Box>
         );
     }

src/components/box/box.scss

@@ -6,6 +6,7 @@ $base-bg: $ui-white;
     display: inline-block;
     border: 1px solid $ui-border;
     border-radius: 10px 10px 0 0;
+    background-color: $ui-white;
     width: 100%;
 
     .box-header {
@@ -44,4 +45,8 @@ $base-bg: $ui-white;
         background-color: $base-bg;
         padding: 8px 20px;
     }
+
+    .empty {
+        margin-top: 20px;
+    }
 }

src/main.scss

@@ -52,6 +52,21 @@ a:hover {
     width: 942px;
 }
 
+.empty {
+    $bg-blue: #d9edf7;
+    $bg-blue-accent: #bce8f1;
+    border: 1px solid $bg-blue-accent;
+    border-radius: 5px;
+    background-color: $bg-blue;
+    padding: 10px;
+    text-align: center;
+    line-height: 2rem;
+    color: $type-gray;
+    h4 {
+        color: $type-gray;
+    }
+}
+
 #view {
     /* NOTE: Margin should match height in navigation.scss */
     margin-top: 50px;

src/views/components/components.jsx

@@ -35,6 +35,8 @@ var Components = React.createClass({
                 </Box>
                 <h1>{'What\'s Happening??'}</h1>
                 <Activity />
+                <h1>{'Nothing!!!'}</h1>
+                <Activity items={[]} />
             </div>
         );
     }