Simplify text search logic #8

kehittamo · Aug 18, 2016 · cbd1b3c · cbd1b3c
1 parent 8b19552
commit cbd1b3c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 45 deletions.
diff --git a/app/scripts/components/SearchResults.jsx b/app/scripts/components/SearchResults.jsx
@@ -9,9 +9,6 @@ const SearchResults = React.createClass({
         return {
             activeBeerId: null,
             showResults: true,
-            data: [],
-            q: "",
-            error: null,
         };
     },
     componentWillMount: function(){
@@ -24,11 +21,6 @@ const SearchResults = React.createClass({
                 activeBeerId: data[0].ratebeerId,
             });
         }
-        this.setState({
-            data,
-            q,
-            error,
-        });
     },
     componentWillUnmount: function(){
         document.removeEventListener("keydown", this.handleKeyDown, false);
@@ -49,32 +41,15 @@ const SearchResults = React.createClass({
             this.toggleResults();
         }
     },
-    handleTextSearch(q, data, error=false){
-        if(!error && data.length > 0){
-            this.setState({
-                activeBeerId: data[0].ratebeerId,
-                data,
-                q,
-                error: null,
-            });
-        } else if(error){
-            this.setState({
-                activeBeerId: null,
-                error,
-                data,
-                q,
-            });
-        }
-    },
     render(){
-        const {q, data, error} = this.state;
+        const {q, data, error} = this.props;
         const iframe = this.state.activeBeerId ? <RateBeerIframe activeBeerId={this.state.activeBeerId} /> : null;
         const noResults = (data.length === 0 || error) ? <div className="search-results__no-results">Nothing found! :(</div> : null;
         return(
             <div className="search-results" >
                 <section className={this.state.showResults ? "search-results__wrapper show" : "search-results__wrapper hidden"}>
                     <span className="close-btn" onClick={this.toggleResults}>Close</span>
-                    <TextSearch beerResults={this.handleTextSearch} />
+                    <TextSearch q={q} />
                     {iframe}
                     <h1>Search results for: "{q}"</h1>
                     {noResults}

diff --git a/app/scripts/components/TextSearch.jsx b/app/scripts/components/TextSearch.jsx
@@ -1,34 +1,26 @@
 import React from "react";
 import DebounceInput from "react-debounce-input";
-import { BEER_KEY_NAME, RATE_BEER_GET_BEER_PREFIX, RATE_BEER_URL } from "../constants";
+import { SEARCH_KEY_NAME, BEER_KEY_NAME, RATE_BEER_GET_BEER_PREFIX, RATE_BEER_URL } from "../constants";
 import ajaxSearch from "../lib/ajaxSearch";
 import setData from "../lib/setData";
 
 const TextSearch = React.createClass({
     propTypes: {
-        beerResults: React.PropTypes.func.isRequired,
+        q: React.PropTypes.string,
     },
     getInitialState: function() {
         return {
             q: "",
         };
     },
+    componentDidMount(){
+        this.setState({
+            q: this.props.q,
+        });
+    },
     componentDidUpdate(previousProps, previousState){
-        if(this.state.q !== previousState.q){
-            const self = this;
-            ajaxSearch(this.state.q)
-            .then((result) => {
-                if(result.length === 0){
-                    self.props.beerResults(self.state.q, [], "404");
-                } else {
-                    setData(BEER_KEY_NAME, {query: self.state.q, data: result, url: window.location.href});
-                    self.props.beerResults(self.state.q, result);
-                }
-            })
-            .catch((err) => {
-                // TODO: better error message
-                console.error("Oh noes, something went wrong while fetching beers :(", err);
-            });
+        if(this.state.q !== previousProps.q){
+            setData(SEARCH_KEY_NAME, this.state.q);
         }
     },
     render(){
@@ -38,7 +30,8 @@ const TextSearch = React.createClass({
                 <DebounceInput
                     minLength={1}
                     debounceTimeout={500}
-                    onChange={event => this.setState({q: event.target.value})} />
+                    onChange={event => this.setState({q: event.target.value})}
+                    value={this.state.q} />
             </div>
         );
     },

diff --git a/app/scripts/lib/setData.js b/app/scripts/lib/setData.js
@@ -7,6 +7,7 @@ function setData(key, data) {
     switch (key) {
     case BEER_KEY_NAME:
         browserObject.storage.local.set({[BEER_KEY_NAME]: data}, function() {});
+        browserObject.storage.local.set({[data.query]: data}, function() {});
         break;
 
     case SEARCH_KEY_NAME: