fix(genie): allow genie to sort wishes properly (codesandbox#1013)

* fix(genie): allow genie to sort wishes properly

One of the cool things about genie is it's sorting algorithm takes into account the user's previous choices. By providing the input value when you make the wish, genie can keep track of what input values lead to which wishes and can optimistically suggest certain wishes as the user's typing.

* keep track of inputValue

* persist genie's enteredMagicWords to localstorage

* Update index.js

* Update index.js

Author: Kent C. Dodds

packages/app/src/app/pages/Sandbox/QuickActions/index.js

@@ -16,6 +16,9 @@ import {
 } from './elements';
 
 class QuickActions extends React.Component {
+  // we'll just keep track of what the user changes the inputValue to be
+  // so when the user makes a wish we can provide that info to genie
+  inputValue = ''
   updateGenie = () => {
     const keybindings = this.props.store.preferences.keybindings;
     const signals = this.props.signals;
@@ -44,6 +47,7 @@ class QuickActions extends React.Component {
 
   componentDidMount() {
     this.updateGenie();
+    this.loadGenie();
   }
 
   componentDidUpdate() {
@@ -63,10 +67,28 @@ class QuickActions extends React.Component {
   };
 
   onChange = item => {
-    genie.makeWish(item);
+    genie.makeWish(item, this.inputValue);
+    this.persistGenie();
     this.closeQuickActions();
   };
 
+  persistGenie() {
+    const { enteredMagicWords } = genie.options();
+    window.localStorage.setItem('genie', JSON.stringify({ enteredMagicWords }))
+  }
+
+  loadGenie() {
+    try {    
+      const { enteredMagicWords } = JSON.parse(window.localStorage.getItem('genie'))
+      genie.options({ enteredMagicWords })
+    } catch (error) {
+      // it may not exist in localStorage yet, or the JSON was malformed somehow
+      // so we'll persist it to update localStorage so it doesn't throw an error
+      // next time the page is loaded.
+      this.persistGenie()
+    }
+  }
+
   itemToString = item => item && item.magicWords.join(', ');
 
   render() {
@@ -92,6 +114,9 @@ class QuickActions extends React.Component {
             highlightedIndex,
           }) => {
             const inputProps = getInputProps({
+              onChange: ev => {
+                this.inputValue = ev.target.value
+              },
               innerRef: el => el && el.focus(),
               onKeyUp: this.handleKeyUp,
               // Timeout so the fuzzy handler can still select the module