Use string values for all persistent keys and autofocus behavior (#229)

src/ui/components/filters/filterboxcomponent.js

@@ -182,7 +182,6 @@ export default class FilterBoxComponent extends Component {
       ? Filter.and(...allFilters)
       : allFilters[0];
 
-    // TODO(jdelerme): check empty object
     const query = this.core.globalStorage.getState(StorageKeys.QUERY);
 
     const facetFilter = this.core.globalStorage.getAll(StorageKeys.FACET_FILTER)[0];

src/ui/components/filters/filteroptionscomponent.js

@@ -33,7 +33,13 @@ export default class FilterOptionsComponent extends Component {
         'FilterOptions');
     }
 
-    const selectedOptions = this.core.globalStorage.getState(this.name) || [];
+    let previousOptions = this.core.globalStorage.getState(this.name);
+    if (typeof previousOptions === 'string') {
+      try {
+        previousOptions = JSON.parse(previousOptions);
+      } catch (e) {}
+    }
+    let selectedOptions = previousOptions || [];
 
     /**
      * The list of filter options to display with checked status

src/ui/components/filters/geolocationcomponent.js

@@ -92,7 +92,6 @@ export default class GeoLocationComponent extends Component {
 
     /**
      * The query string to use for the input box, provided to template for rendering.
-     * Optionally provided
      * @type {string}
      */
     this.query = this.core.globalStorage.getState(`${StorageKeys.QUERY}.${this.name}`) || '';
@@ -102,11 +101,16 @@ export default class GeoLocationComponent extends Component {
     });
 
     /**
-     * The filter string to use for the provided query
-     * Optionally provided
-     * @type {string}
+     * The filter to use for the current query
+     * @type {Filter}
      */
-    this.filter = this.core.globalStorage.getState(`${StorageKeys.FILTER}.${this.name}`) || '';
+    this.filter = this.core.globalStorage.getState(`${StorageKeys.FILTER}.${this.name}`) || {};
+    if (typeof this.filter === 'string') {
+      try {
+        this.filter = JSON.parse(this.filter);
+      } catch (e) {}
+    }
+
     this.core.globalStorage.on('update', `${StorageKeys.FILTER}.${this.name}`, f => { this.filter = f; });
   }
 

src/ui/components/filters/rangefiltercomponent.js

@@ -29,8 +29,18 @@ export default class RangeFilterComponent extends Component {
      */
     this._storeOnChange = config.storeOnChange || false;
 
-    const minVal = this.core.globalStorage.getState(`${this.name}.min`);
-    const maxVal = this.core.globalStorage.getState(`${this.name}.max`);
+    let minVal = this.core.globalStorage.getState(`${this.name}.min`);
+    if (typeof minVal === 'string') {
+      try {
+        minVal = Number.parseInt(minVal);
+      } catch (e) {}
+    }
+    let maxVal = this.core.globalStorage.getState(`${this.name}.max`);
+    if (typeof minVal === 'string') {
+      try {
+        maxVal = Number.parseInt(maxVal);
+      } catch (e) {}
+    }
 
     /**
      * The current range represented

src/ui/components/search/autocompletecomponent.js

@@ -93,6 +93,12 @@ export default class AutoCompleteComponent extends Component {
      */
     this.promptHeader = opts.promptHeader || null;
 
+    /**
+     * Whether the input is autocomatically focused or not
+     * @type {boolean}
+     */
+    this._autoFocus = opts.autoFocus || false;
+
     /**
      * Callback invoked when the `Enter` key is pressed on auto complete.
      */
@@ -177,6 +183,12 @@ export default class AutoCompleteComponent extends Component {
       this.handleSubmitResult(e.keyCode, queryInput.value, e);
     });
 
+    if (this._autoFocus) {
+      DOM.once(queryInput, 'click', () => {
+        this.autoComplete(queryInput.value);
+      });
+    }
+
     // Allow the user to select a result with the mouse
     DOM.delegate(this._container, '.js-yext-autocomplete-option', 'click', (evt, target) => {
       let data = target.dataset;

src/ui/components/search/filtersearchcomponent.js

@@ -106,6 +106,12 @@ export default class FilterSearchComponent extends Component {
      * @type {string}
      */
     this.filter = config.filter || this.core.globalStorage.getState(`${StorageKeys.FILTER}.${this.name}`) || '';
+    if (typeof this.filter === 'string') {
+      try {
+        this.filter = JSON.parse(this.filter);
+      } catch (e) {}
+    }
+
     this.core.globalStorage.on('update', `${StorageKeys.FILTER}.${this.name}`, f => { this.filter = f; });
   }
 

src/ui/components/search/searchcomponent.js

@@ -85,6 +85,13 @@ export default class SearchComponent extends Component {
      */
     this.autoFocus = config.autoFocus === true;
 
+    /**
+     * When autofocusing on load, optionally open the autocomplete
+     * (preset prompts)
+     * @type {boolean}
+     */
+    this.autocompleteOnLoad = config.autocompleteOnLoad || false;
+
     /**
      * submitURL will force the search query submission to get
      * redirected to the URL provided.
@@ -101,9 +108,9 @@ export default class SearchComponent extends Component {
      * Optionally provided
      * @type {string}
      */
-    this.query = config.query || String(this.core.globalStorage.getState(StorageKeys.QUERY)) || '';
+    this.query = config.query || this.core.globalStorage.getState(StorageKeys.QUERY) || '';
     this.core.globalStorage.on('update', StorageKeys.QUERY, q => {
-      this.query = String(q);
+      this.query = q;
       this.setState();
       this.search(q);
     });
@@ -138,13 +145,17 @@ export default class SearchComponent extends Component {
   }
 
   onMount () {
-    if (this.autoFocus === true && this.query.length === 0) {
+    if (this.autoFocus === true && this.query.length === 0 && !this.autocompleteOnLoad) {
       DOM.query(this._container, this._inputEl).focus();
     }
 
     // Wire up our search handling and auto complete
     this.initSearch(this._formEl);
     this.initAutoComplete(this._inputEl);
+
+    if (this.autoFocus === true && this.query.length === 0 && this.autocompleteOnLoad) {
+      DOM.query(this._container, this._inputEl).focus();
+    }
   }
 
   /**
@@ -202,6 +213,7 @@ export default class SearchComponent extends Component {
       name: `${this.name}.autocomplete`,
       container: '.yxt-SearchBar-autocomplete',
       barKey: this._barKey,
+      autoFocus: this.autoFocus && !this.autocompleteOnLoad,
       verticalKey: this._verticalKey,
       promptHeader: this.promptHeader,
       originalQuery: this.query,

src/ui/dom/dom.js

@@ -174,6 +174,10 @@ export default class DOM {
     DOM.query(selector).addEventListener(evt, handler);
   }
 
+  static once (selector, evt, handler) {
+    DOM.query(selector).addEventListener(evt, handler, { once: true });
+  }
+
   static off (selector, evt, handler) {
     DOM.query(selector).removeEventListener(evt, handler);
   }

src/ui/storage/persistentstorage.js

@@ -93,11 +93,7 @@ export default class PersistentStorage {
   getAll () {
     const allParams = {};
     for (const [key, val] of this._params.entries()) {
-      let parsedVal = val;
-      try {
-        parsedVal = JSON.parse(val);
-      } catch (e) { }
-      allParams[key] = parsedVal;
+      allParams[key] = val;
     }
     return allParams;
   }