Adds button behavior for various search result state

src/l10n.json

@@ -62,6 +62,7 @@
     "general.scratchJr": "ScratchJr",
     "general.scratchStore": "Scratch Store",
     "general.search": "Search",
+    "general.searchEmpty": "Nothing found",
     "general.signIn": "Sign in",
     "general.statistics": "Statistics",
     "general.studios": "Studios",

src/views/search/search.jsx

@@ -33,7 +33,8 @@ var Search = injectIntl(React.createClass({
     getInitialState: function () {
         return {
             loaded: [],
-            offset: 0
+            offset: 0,
+            loadMore: false
         };
     },
     componentDidMount: function () {
@@ -70,9 +71,9 @@ var Search = injectIntl(React.createClass({
         }, function (err, body) {
             var loadedSoFar = this.state.loaded;
             Array.prototype.push.apply(loadedSoFar, body);
-            this.setState({loaded: loadedSoFar});
             var currentOffset = this.state.offset + this.props.loadNumber;
-            this.setState({offset: currentOffset});
+            var willLoadMore = body.length === this.props.loadNumber;
+            this.setState({loaded: loadedSoFar, offset: currentOffset, loadMore: willLoadMore});
         }.bind(this));
     },
     onSearchSubmit: function (formData) {
@@ -96,6 +97,31 @@ var Search = injectIntl(React.createClass({
         }
         return allTab;
     },
+    getProjectBox: function () {
+        var results = <Grid
+            items={this.state.loaded}
+            itemType={this.props.tab}
+            cards={true}
+            showAvatar={true}
+            showLoves={false}
+            showFavorites={false}
+            showViews={false}
+        />;
+        var searchAction = null;
+        if (this.state.loaded.length === 0 && this.state.offset !== 0) {
+            searchAction = <h2 className="search-prompt"><FormattedMessage id="general.searchEmpty" /></h2>;
+        } else if (this.state.loadMore) {
+            searchAction = <Button onClick={this.getSearchMore} className="white">
+                              <FormattedMessage id='general.loadMore' />
+                            </Button>;
+        }
+        return (
+          <div id='projectBox' key='projectBox'>
+            {results}
+            {searchAction}
+          </div>
+        );
+    },
     render: function () {
         return (
             <div>
@@ -109,18 +135,7 @@ var Search = injectIntl(React.createClass({
                             {this.getTab('projects')}
                             {this.getTab('studios')}
                         </Tabs>
-                        <div id='projectBox' key='projectBox'>
+                        {this.getProjectBox()}
-                        <Grid items={this.state.loaded}
-                              itemType={this.props.tab}
-                              cards={true}
-                              showAvatar={true}
-                              showLoves={false}
-                              showFavorites={false}
-                              showViews={false} />
-                         <Button onClick={this.getSearchMore} className="white">
-                            <FormattedMessage id='general.loadMore' />
-                        </Button>
-                        </div>
                 </div>
             </div>
         );

src/views/search/search.scss

@@ -132,6 +132,13 @@ $base-bg: $ui-white;
             display: block;
             margin: 0 auto;
         }
+
+        .search-prompt {
+            margin: 0 auto;
+            padding: 30px;
+            max-width: 500px;
+            text-align: center;
+        }
     }
 }