From ce75376dd6327c2370afd4435551da04a3c6cd90 Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Sat, 21 Jul 2018 18:07:48 -0400
Subject: [PATCH 01/18] Refactor to use a word search dialog container

---
 .../dialog.jsx}                               |   5 +-
 .../newtable/search/dialog_container.jsx      | 165 +++++++++
 .../js/wordwalls/newtable/search/row.jsx      | 186 ++++++++++
 .../{search_rows.jsx => search/rows.jsx}      |   3 +-
 .../js/wordwalls/newtable/search/types.js     | 125 +++++++
 .../js/wordwalls/newtable/search_row.jsx      | 232 ------------
 .../js/wordwalls/newtable/table_creator.jsx   | 163 ++-------
 .../static/js/wordwalls/wordwalls_api.js      |  63 ++++
 .../static/js/wordwalls/wordwalls_rpc.js      |  13 +-
 package.json                                  |   3 +
 yarn.lock                                     | 330 +++++++++++++++++-
 11 files changed, 906 insertions(+), 382 deletions(-)
 rename djAerolith/wordwalls/static/js/wordwalls/newtable/{word_search_dialog.jsx => search/dialog.jsx} (89%)
 create mode 100644 djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx
 create mode 100644 djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
 rename djAerolith/wordwalls/static/js/wordwalls/newtable/{search_rows.jsx => search/rows.jsx} (94%)
 create mode 100644 djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
 delete mode 100644 djAerolith/wordwalls/static/js/wordwalls/newtable/search_row.jsx
 create mode 100644 djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js

diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/word_search_dialog.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx
similarity index 89%
rename from djAerolith/wordwalls/static/js/wordwalls/newtable/word_search_dialog.jsx
rename to djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx
index 478af5f6..6641ad8c 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/word_search_dialog.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import SearchRows from './search_rows';
+import SearchRows from './rows';
 
 const WordSearchDialog = props => (
   <div className="row" style={{ marginTop: '8px' }}>
@@ -18,6 +18,7 @@ const WordSearchDialog = props => (
         style={{ marginTop: '0.75em' }}
         onClick={props.onSearchSubmit}
         data-dismiss="modal"
+        disabled={props.disabled ? 'disabled' : ''}
       >Play!
       </button>
       <button
@@ -25,6 +26,7 @@ const WordSearchDialog = props => (
         style={{ marginTop: '0.75em', marginLeft: '1em' }}
         onClick={props.onFlashcardSubmit}
         data-dismiss="modal"
+        disabled={props.disabled ? 'disabled' : ''}
       >Flashcard
       </button>
     </div>
@@ -47,6 +49,7 @@ WordSearchDialog.propTypes = {
   removeSearchRow: PropTypes.func.isRequired,
   onSearchSubmit: PropTypes.func.isRequired,
   onFlashcardSubmit: PropTypes.func.isRequired,
+  disabled: PropTypes.bool.isRequired,
 };
 
 export default WordSearchDialog;
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx
new file mode 100644
index 00000000..80339d13
--- /dev/null
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx
@@ -0,0 +1,165 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import WordSearchDialog from './dialog';
+import { SearchTypesEnum, searchCriterionToAdd } from './types';
+import WordwallsAPI from '../../wordwalls_api';
+
+const SEARCH_URL = 'wordwalls/api/new_search/';
+const FLASHCARD_URL = '/flashcards/';
+
+class DialogContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchCriteria: [{
+        searchType: SearchTypesEnum.LENGTH,
+        minValue: 7,
+        maxValue: 7,
+      }, {
+        searchType: SearchTypesEnum.PROBABILITY,
+        minValue: 1,
+        maxValue: 100,
+      }],
+    };
+
+    this.searchSubmit = this.searchSubmit.bind(this);
+    this.flashcardSearchSubmit = this.flashcardSearchSubmit.bind(this);
+
+    this.searchParamChange = this.searchParamChange.bind(this);
+    this.searchTypeChange = this.searchTypeChange.bind(this);
+    this.addSearchRow = this.addSearchRow.bind(this);
+    this.removeSearchRow = this.removeSearchRow.bind(this);
+    this.api = new WordwallsAPI();
+  }
+
+  addSearchRow() {
+    const toadd = searchCriterionToAdd(this.state.searchCriteria);
+    if (!toadd) {
+      return; // Don't add any more.
+    }
+
+    const newCriteria = this.state.searchCriteria.concat(toadd);
+    this.setState({
+      searchCriteria: newCriteria,
+    });
+  }
+
+  removeSearchRow(criteriaIndex) {
+    const currentCriteria = this.state.searchCriteria;
+    currentCriteria.splice(criteriaIndex, 1);
+    this.setState({
+      searchCriteria: currentCriteria,
+    });
+  }
+
+  searchParamChange(index, paramName, paramValue) {
+    const criteria = this.state.searchCriteria;
+    const valueModifier = (val) => {
+      if (paramName === 'minValue' || paramName === 'maxValue') {
+        return parseInt(val, 10) || 0;
+      } else if (paramName === 'valueList') {
+        return val.trim();
+      }
+      return val;
+    };
+
+    criteria[index][paramName] = valueModifier(paramValue);
+    this.setState({
+      searchCriteria: criteria,
+    });
+  }
+
+  /**
+   * Turn the search criteria into something the back end would understand.
+   * @return {Array.<Object>}
+   */
+  searchCriteriaMapper() {
+    // TODO modify me
+    return this.state.searchCriteria.map(criterion => Object.assign({}, criterion, {
+      searchType: SearchTypesEnum.properties[criterion.searchType].name,
+    }));
+  }
+
+  searchTypeChange(index, value) {
+    const criteria = this.state.searchCriteria;
+    const searchType = parseInt(value, 10);
+    criteria[index].searchType = searchType;
+    // Reset the values.
+    if (searchType !== SearchTypesEnum.TAGS) {
+      criteria[index].minValue = SearchTypesEnum.properties[searchType].defaultMin;
+      criteria[index].maxValue = SearchTypesEnum.properties[searchType].defaultMax;
+    }
+    this.setState({
+      searchCriteria: criteria,
+    });
+  }
+
+  searchSubmit() {
+    this.props.showSpinner();
+    this.api.call(SEARCH_URL, {
+      lexicon: this.props.lexicon,
+      searchCriteria: this.searchCriteriaMapper(),
+      desiredTime: this.props.desiredTime,
+      questionsPerRound: this.props.questionsPerRound,
+      tablenum: this.props.tablenum,
+    })
+      .then(data => this.props.onLoadNewList(data))
+      .catch(error => this.props.notifyError(error))
+      .finally(() => this.props.hideSpinner());
+  }
+
+  /**
+   * Submit search params to flashcard function. We use a legacy
+   * "WhitleyCards" API here, which is not quite JSON. This will have
+   * to be moved over to my new Cards program in the future.
+   */
+  flashcardSearchSubmit() {
+    this.props.showSpinner();
+    this.api.callLegacy(FLASHCARD_URL, {
+      action: 'searchParamsFlashcard',
+      lexicon: this.props.lexicon,
+      searchCriteria: this.searchCriteriaMapper(),
+    })
+      .then(data => this.props.redirectUrl(data.url))
+      .catch(resp => this.props.notifyError(resp))
+      .finally(() => this.props.hideSpinner());
+  }
+
+  render() {
+    return (
+      <WordSearchDialog
+        searches={this.state.searchCriteria}
+        addSearchRow={this.addSearchRow}
+        removeSearchRow={this.removeSearchRow}
+        onSearchTypeChange={this.searchTypeChange}
+        onSearchParamChange={this.searchParamChange}
+        onSearchSubmit={this.searchSubmit}
+        onFlashcardSubmit={this.flashcardSearchSubmit}
+        disabled={this.props.disabled}
+      />);
+  }
+}
+
+DialogContainer.propTypes = {
+  lexicon: PropTypes.number.isRequired,
+  desiredTime: PropTypes.number.isRequired,
+  questionsPerRound: PropTypes.number.isRequired,
+  notifyError: PropTypes.func.isRequired,
+  redirectUrl: PropTypes.func.isRequired,
+  // availableLexica: PropTypes.arrayOf(PropTypes.shape({
+  //   id: PropTypes.number,
+  //   lexicon: PropTypes.string,
+  //   description: PropTypes.string,
+  //   counts: PropTypes.object,
+  // })).isRequired,
+  // onSearchSubmit: PropTypes.func.isRequired,
+  // onFlashcardSubmit: PropTypes.func.isRequired,
+  tablenum: PropTypes.number.isRequired,
+  onLoadNewList: PropTypes.func.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  showSpinner: PropTypes.func.isRequired,
+  hideSpinner: PropTypes.func.isRequired,
+};
+
+export default DialogContainer;
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
new file mode 100644
index 00000000..9ef476d8
--- /dev/null
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
@@ -0,0 +1,186 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Select from '../../forms/select';
+import NumberInput from '../../forms/number_input';
+import TextInput from '../../forms/text_input';
+
+import { SearchTypesEnum, searchCriteriaOptions } from './types';
+
+
+const NumberValue = props => (
+  <div className="col-xs-3">
+    <NumberInput
+      colSize={12}
+      label={props.label}
+      value={String(props.defaultValue)}
+      minAllowed={props.minAllowed}
+      maxAllowed={props.maxAllowed}
+      onChange={event => props.modifySearchParam(
+        props.index,
+        props.paramName,
+        event.target.value,
+      )}
+    />
+  </div>);
+
+NumberValue.propTypes = {
+  minAllowed: PropTypes.number.isRequired,
+  maxAllowed: PropTypes.number.isRequired,
+  defaultValue: PropTypes.number.isRequired,
+  modifySearchParam: PropTypes.func.isRequired,
+  index: PropTypes.number.isRequired,
+  paramName: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+};
+
+const MinMaxValues = props => (
+  <div style={{ marginTop: '2px' }}>
+    <NumberValue
+      label="Min"
+      defaultValue={props.minValue}
+      minAllowed={props.minAllowed}
+      maxAllowed={props.maxAllowed}
+      modifySearchParam={props.modifySearchParam}
+      index={props.index}
+      paramName="minValue"
+    />
+    <NumberValue
+      label="Max"
+      defaultValue={props.maxValue}
+      minAllowed={props.minAllowed}
+      maxAllowed={props.maxAllowed}
+      modifySearchParam={props.modifySearchParam}
+      index={props.index}
+      paramName="maxValue"
+    />
+  </div>);
+
+MinMaxValues.propTypes = {
+  minValue: PropTypes.number.isRequired,
+  maxValue: PropTypes.number.isRequired,
+  minAllowed: PropTypes.number.isRequired,
+  maxAllowed: PropTypes.number.isRequired,
+  modifySearchParam: PropTypes.func.isRequired,
+  index: PropTypes.number.isRequired,
+};
+
+const ListValue = props => (
+  <div className="col-xs-4 col-sm-6" style={{ marginTop: '2px' }}>
+    <TextInput
+      colSize={12}
+      label="Comma-separated values"
+      value={props.valueList}
+      onChange={event => props.modifySearchParam(
+        props.index,
+        'valueList',
+        event.target.value,
+      )}
+    />
+  </div>);
+
+ListValue.propTypes = {
+  valueList: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  modifySearchParam: PropTypes.func.isRequired,
+};
+
+const SearchRow = (props) => {
+  let specificForm;
+  switch (props.searchType) {
+    case SearchTypesEnum.PROBABILITY:
+    case SearchTypesEnum.POINTS:
+    case SearchTypesEnum.LENGTH:
+    case SearchTypesEnum.NUM_VOWELS:
+    case SearchTypesEnum.NUM_ANAGRAMS:
+      specificForm = (
+        <MinMaxValues
+          minValue={props.minValue}
+          maxValue={props.maxValue}
+          minAllowed={props.minAllowedValue}
+          maxAllowed={props.maxAllowedValue}
+          modifySearchParam={props.modifySearchParam}
+          index={props.index}
+        />);
+      break;
+    case SearchTypesEnum.FIXED_LENGTH:
+      specificForm = (
+        <NumberValue
+          label="Value"
+          defaultValue=""
+          minAllowed=""
+          maxAllowed=""
+          modifySearchParam={props.modifySearchParam}
+          index={props.index}
+        />);
+      break;
+    case SearchTypesEnum.TAGS:
+      specificForm = (
+        <ListValue
+          valueList={props.valueList}
+          index={props.index}
+          modifySearchParam={props.modifySearchParam}
+        />);
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <div className="row">
+      <div className="col-xs-1" style={{ marginTop: '33px', marginBottom: '5px' }}>
+        <button
+          className="btn btn-info btn-xs"
+          onClick={props.addRow}
+        ><span className="glyphicon glyphicon-plus" aria-hidden="true" />
+        </button>
+      </div>
+      <div className="col-xs-1" style={{ marginTop: '33px', marginBottom: '5px' }}>
+        <button
+          className="btn btn-info btn-xs"
+          onClick={() => props.removeRow(props.index)}
+          disabled={props.removeDisabled}
+        ><span className="glyphicon glyphicon-minus" aria-hidden="true" />
+        </button>
+      </div>
+      <div className="col-xs-4">
+        <Select
+          colSize={12}
+          label="Search Criterion"
+          selectedValue={String(props.searchType)}
+          options={searchCriteriaOptions()}
+          onChange={(event) => {
+            props.modifySearchType(props.index, event.target.value);
+          }}
+        />
+      </div>
+      {specificForm}
+    </div>
+  );
+};
+
+SearchRow.propTypes = {
+  searchType: PropTypes.number.isRequired,
+  index: PropTypes.number.isRequired,
+  minValue: PropTypes.number,
+  minAllowedValue: PropTypes.number,
+  maxValue: PropTypes.number,
+  maxAllowedValue: PropTypes.number,
+  valueList: PropTypes.string,
+  addRow: PropTypes.func.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  removeDisabled: PropTypes.bool.isRequired,
+  modifySearchType: PropTypes.func.isRequired,
+  modifySearchParam: PropTypes.func.isRequired,
+};
+
+SearchRow.defaultProps = {
+  minValue: 1,
+  minAllowedValue: 1,
+  maxValue: 100,
+  maxAllowedValue: 100,
+  valueList: '',
+};
+
+export default SearchRow;
+
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search_rows.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/rows.jsx
similarity index 94%
rename from djAerolith/wordwalls/static/js/wordwalls/newtable/search_rows.jsx
rename to djAerolith/wordwalls/static/js/wordwalls/newtable/search/rows.jsx
index cf9b53a0..a059f3ab 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search_rows.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/rows.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import SearchRow, { SearchTypesEnum } from './search_row';
+import SearchRow from './row';
+import { SearchTypesEnum } from './types';
 
 const SearchRows = props => (
   props.searches.map((search, idx) => (
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
new file mode 100644
index 00000000..962424a8
--- /dev/null
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
@@ -0,0 +1,125 @@
+const SearchTypesEnum = {
+  PROBABILITY: 1,
+  LENGTH: 2,
+  TAGS: 3,
+  POINTS: 4,
+  NUM_ANAGRAMS: 5,
+  NUM_VOWELS: 6,
+  FIXED_LENGTH: 7,
+  /**
+   * The inputs won't allow user to go beyond minAllowed and maxAllowed.
+   * defaultMin and defaultMax are the values that show up when the
+   * input is first placed on the screen.
+   */
+  properties: {
+    1: {
+      name: 'probability_range',
+      displayName: 'Probability Range',
+      defaultMin: 1,
+      defaultMax: 100,
+      minAllowed: 1,
+      maxAllowed: 70000, // Subject to change by lexicon
+    },
+    2: {
+      name: 'length',
+      displayName: 'Word Length',
+      defaultMin: 2,
+      defaultMax: 15,
+      minAllowed: 2,
+      maxAllowed: 15,
+    },
+    3: { name: 'has_tags', displayName: 'Has Tags' },
+    4: {
+      name: 'point_value',
+      displayName: 'Point Value',
+      defaultMin: 2,
+      defaultMax: 30,
+      minAllowed: 2,
+      maxAllowed: 150, // for ZZZZZZZZZZZZZZZ
+    },
+    5: {
+      name: 'number_anagrams',
+      displayName: 'Number of Anagrams',
+      defaultMin: 1,
+      defaultMax: 15,
+      minAllowed: 1,
+      maxAllowed: 99,
+    },
+    6: {
+      name: 'number_vowels',
+      displayName: 'Number of Vowels',
+      defaultMin: 0,
+      defaultMax: 15,
+      minAllowed: 0,
+      maxAllowed: 15,
+    },
+    7: {
+      name: 'fixed_length',
+      displayName: 'Word Length',
+      default: 5,
+      minAllowed: 5,
+      maxAllowed: 10,
+    },
+  },
+};
+
+const SearchTypesOrder = [
+  SearchTypesEnum.LENGTH,
+  SearchTypesEnum.PROBABILITY,
+  SearchTypesEnum.POINTS,
+  SearchTypesEnum.NUM_ANAGRAMS,
+  SearchTypesEnum.NUM_VOWELS,
+  SearchTypesEnum.FIXED_LENGTH,
+  SearchTypesEnum.TAGS,
+];
+
+function searchCriteriaOptions() {
+  return SearchTypesOrder.map(el => ({
+    value: String(el),
+    displayValue: SearchTypesEnum.properties[el].displayName,
+  }));
+}
+
+/**
+ * Given a list of word search criteria, figure out the next one to add,
+ * based on the order.
+ * @param {Array.<Object>} wordSearchCriteria
+ * @return {Object?} A new search type criterion, or null.
+ */
+function searchCriterionToAdd(wordSearchCriteria) {
+  const stmap = {};
+  wordSearchCriteria.forEach((criteria) => {
+    // These are enum integers.
+    stmap[criteria.searchType] = true;
+  });
+  // Find the first search type that's not in the map.
+  const newtypeId = SearchTypesOrder.find(tid => stmap[tid] == null);
+  if (!newtypeId) {
+    return null;
+  }
+  if (newtypeId === SearchTypesEnum.TAGS) {
+    return {
+      searchType: newtypeId,
+      //criterion: {
+        valueList: '',
+      //},
+    };
+  }
+  if (newtypeId === SearchTypesEnum.FIXED_LENGTH) {
+    return {
+      searchType: newtypeId,
+      //criterion: {
+        value: SearchTypesEnum.properties[newtypeId].default,
+      //},
+    };
+  }
+  return {
+    searchType: newtypeId,
+    //criterion: {
+      minValue: SearchTypesEnum.properties[newtypeId].defaultMin,
+      maxValue: SearchTypesEnum.properties[newtypeId].defaultMax,
+    //},
+  };
+}
+
+export { SearchTypesEnum, searchCriterionToAdd, searchCriteriaOptions };
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search_row.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search_row.jsx
deleted file mode 100644
index 110abaac..00000000
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search_row.jsx
+++ /dev/null
@@ -1,232 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Select from '../forms/select';
-import NumberInput from '../forms/number_input';
-import TextInput from '../forms/text_input';
-
-const SearchTypesEnum = {
-  PROBABILITY: 1,
-  LENGTH: 2,
-  TAGS: 3,
-  POINTS: 4,
-  NUM_ANAGRAMS: 5,
-  NUM_VOWELS: 6,
-  properties: {
-    1: {
-      name: 'probability_range',
-      displayName: 'Probability Range',
-      defaultMin: 1,
-      defaultMax: 100,
-      minAllowed: 1,
-      maxAllowed: 70000, // Subject to change by lexicon
-    },
-    2: {
-      name: 'length',
-      displayName: 'Word Length',
-      defaultMin: 2,
-      defaultMax: 15,
-      minAllowed: 2,
-      maxAllowed: 15,
-    },
-    3: { name: 'has_tags', displayName: 'Has Tags' },
-    4: {
-      name: 'point_value',
-      displayName: 'Point Value',
-      defaultMin: 2,
-      defaultMax: 99,
-      minAllowed: 2,
-      maxAllowed: 15,
-    },
-    5: {
-      name: 'number_anagrams',
-      displayName: 'Number of Anagrams',
-      defaultMin: 1,
-      defaultMax: 99,
-      minAllowed: 1,
-      maxAllowed: 99,
-    },
-    6: {
-      name: 'number_vowels',
-      displayName: 'Number of Vowels',
-      defaultMin: 0,
-      defaultMax: 15,
-      minAllowed: 0,
-      maxAllowed: 15,
-    },
-  },
-};
-
-const SearchTypesOrder = [
-  SearchTypesEnum.LENGTH,
-  SearchTypesEnum.PROBABILITY,
-  SearchTypesEnum.POINTS,
-  SearchTypesEnum.NUM_ANAGRAMS,
-  SearchTypesEnum.NUM_VOWELS,
-  SearchTypesEnum.TAGS,
-];
-
-function searchCriteriaOptions() {
-  return SearchTypesOrder.map(el => ({
-    value: String(el),
-    displayValue: SearchTypesEnum.properties[el].displayName,
-  }));
-}
-
-/**
- * Given a list of word search criteria, figure out the next one to add,
- * based on the order.
- * @param {Array.<Object>} wordSearchCriteria
- * @return {Object?} A new search type criterion, or null.
- */
-function searchCriterionToAdd(wordSearchCriteria) {
-  const stmap = {};
-  wordSearchCriteria.forEach((criteria) => {
-    // These are enum integers.
-    stmap[criteria.searchType] = true;
-  });
-  // Find the first search type that's not in the map.
-  const newtypeId = SearchTypesOrder.find(tid => stmap[tid] == null);
-  if (!newtypeId) {
-    return null;
-  }
-  if (newtypeId === SearchTypesEnum.TAGS) {
-    return {
-      searchType: newtypeId,
-      valueList: '',
-    };
-  }
-  return {
-    searchType: newtypeId,
-    minValue: SearchTypesEnum.properties[newtypeId].defaultMin,
-    maxValue: SearchTypesEnum.properties[newtypeId].defaultMax,
-  };
-}
-
-class SearchRow extends React.Component {
-  renderMinMax() {
-    return (
-      <div style={{ marginTop: '2px' }}>
-        <div className="col-xs-3">
-          <NumberInput
-            colSize={12}
-            label="Min"
-            value={String(this.props.minValue)}
-            minAllowed={this.props.minAllowedValue}
-            maxAllowed={this.props.maxAllowedValue}
-            onChange={event => this.props.modifySearchParam(
-              this.props.index,
-              'minValue', event.target.value,
-            )}
-          />
-        </div>
-        <div className="col-xs-3">
-          <NumberInput
-            colSize={12}
-            label="Max"
-            value={String(this.props.maxValue)}
-            minAllowed={this.props.minAllowedValue}
-            maxAllowed={this.props.maxAllowedValue}
-            onChange={event => this.props.modifySearchParam(
-              this.props.index,
-              'maxValue', event.target.value,
-            )}
-          />
-        </div>
-      </div>
-    );
-  }
-
-  renderListValue() {
-    return (
-      <div className="col-xs-4 col-sm-6" style={{ marginTop: '2px' }}>
-        <TextInput
-          colSize={12}
-          label="Comma-separated values"
-          value={this.props.valueList}
-          onChange={event => this.props.modifySearchParam(
-            this.props.index,
-            'valueList', event.target.value,
-          )}
-        />
-      </div>
-    );
-  }
-
-  render() {
-    let specificForm;
-    switch (this.props.searchType) {
-      case SearchTypesEnum.PROBABILITY:
-      case SearchTypesEnum.POINTS:
-      case SearchTypesEnum.LENGTH:
-      case SearchTypesEnum.NUM_VOWELS:
-      case SearchTypesEnum.NUM_ANAGRAMS:
-        specificForm = this.renderMinMax();
-        break;
-      case SearchTypesEnum.TAGS:
-        specificForm = this.renderListValue();
-        break;
-      default:
-        break;
-    }
-
-    return (
-      <div className="row">
-        <div className="col-xs-1" style={{ marginTop: '33px', marginBottom: '5px' }}>
-          <button
-            className="btn btn-info btn-xs"
-            onClick={this.props.addRow}
-          ><span className="glyphicon glyphicon-plus" aria-hidden="true" />
-          </button>
-        </div>
-        <div className="col-xs-1" style={{ marginTop: '33px', marginBottom: '5px' }}>
-          <button
-            className="btn btn-info btn-xs"
-            onClick={() => this.props.removeRow(this.props.index)}
-            disabled={this.props.removeDisabled}
-          ><span className="glyphicon glyphicon-minus" aria-hidden="true" />
-          </button>
-        </div>
-        <div className="col-xs-4">
-          <Select
-            colSize={12}
-            label="Search Criterion"
-            selectedValue={String(this.props.searchType)}
-            options={searchCriteriaOptions()}
-            onChange={(event) => {
-              this.props.modifySearchType(this.props.index, event.target.value);
-            }}
-          />
-        </div>
-        {specificForm}
-      </div>
-    );
-  }
-}
-
-SearchRow.propTypes = {
-  searchType: PropTypes.number.isRequired,
-  index: PropTypes.number.isRequired,
-  minValue: PropTypes.number,
-  minAllowedValue: PropTypes.number,
-  maxValue: PropTypes.number,
-  maxAllowedValue: PropTypes.number,
-  valueList: PropTypes.string,
-  addRow: PropTypes.func.isRequired,
-  removeRow: PropTypes.func.isRequired,
-  removeDisabled: PropTypes.bool.isRequired,
-  modifySearchType: PropTypes.func.isRequired,
-  modifySearchParam: PropTypes.func.isRequired,
-};
-
-SearchRow.defaultProps = {
-  minValue: 1,
-  minAllowedValue: 1,
-  maxValue: 100,
-  maxAllowedValue: 100,
-  valueList: '',
-};
-
-export default SearchRow;
-export { SearchTypesEnum, searchCriterionToAdd };
-
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
index 9ddf3524..d03f1875 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
@@ -11,14 +11,14 @@ import Notifications from '../notifications';
 import Sidebar from './sidebar';
 
 import ChallengeDialog from './challenge_dialog';
-import WordSearchDialog from './word_search_dialog';
+import WordSearchDialogContainer from './search/dialog_container';
 import SavedListDialog, { PlayOptions } from './saved_list_dialog';
 import AerolithListDialog from './aerolith_list_dialog';
-import { SearchTypesEnum, searchCriterionToAdd } from './search_row';
 
 const GAME_TYPE_NEW = 'Load New List';
 const LIST_TYPE_CHALLENGE = 'Single-Player Challenges';
 const LIST_TYPE_WORDSEARCH = 'Word Search';
+const LIST_TYPE_BLANKS = 'Blanks';
 const LIST_TYPE_AEROLITH_LISTS = 'Aerolith Lists';
 const LIST_TYPE_SAVED_LIST = 'My Saved Lists';
 const FLASHCARD_URL = '/flashcards/';
@@ -73,15 +73,11 @@ class TableCreator extends React.Component {
       challengeData: {},
       currentChallenge: 0,
       // Word-search related
-      wordSearchCriteria: [{
-        searchType: SearchTypesEnum.LENGTH,
-        minValue: 7,
-        maxValue: 7,
-      }, {
-        searchType: SearchTypesEnum.PROBABILITY,
-        minValue: 1,
-        maxValue: 100,
-      }],
+
+      // blankSearchCriteria: [{
+      //   searchType: SearchTypesEnum.FIXED_LENGTH,
+      //   value: 7,
+      // },],
 
       // Aerolith lists
       aerolithLists: [],
@@ -100,18 +96,15 @@ class TableCreator extends React.Component {
     };
     this.challengeSubmit = this.challengeSubmit.bind(this);
     this.onChallengeSelected = this.onChallengeSelected.bind(this);
-    this.searchParamChange = this.searchParamChange.bind(this);
-    this.searchTypeChange = this.searchTypeChange.bind(this);
     this.selectedListChange = this.selectedListChange.bind(this);
-    this.searchSubmit = this.searchSubmit.bind(this);
-    this.flashcardSearchSubmit = this.flashcardSearchSubmit.bind(this);
     this.aerolithListSubmit = this.aerolithListSubmit.bind(this);
     this.flashcardAerolithListSubmit = this.flashcardAerolithListSubmit.bind(this);
     this.savedListSubmit = this.savedListSubmit.bind(this);
     this.flashcardSavedListSubmit = this.flashcardSavedListSubmit.bind(this);
     this.listUpload = this.listUpload.bind(this);
-    this.addSearchRow = this.addSearchRow.bind(this);
-    this.removeSearchRow = this.removeSearchRow.bind(this);
+
+    this.showSpinner = this.showSpinner.bind(this);
+    this.hideSpinner = this.hideSpinner.bind(this);
   }
 
   /**
@@ -205,26 +198,6 @@ class TableCreator extends React.Component {
     this.props.setLoadingData(false);
   }
 
-  addSearchRow() {
-    const toadd = searchCriterionToAdd(this.state.wordSearchCriteria);
-    if (!toadd) {
-      return; // Don't add any more.
-    }
-
-    const newCriteria = this.state.wordSearchCriteria.concat(toadd);
-    this.setState({
-      wordSearchCriteria: newCriteria,
-    });
-  }
-
-  removeSearchRow(criteriaIndex) {
-    const currentCriteria = this.state.wordSearchCriteria;
-    currentCriteria.splice(criteriaIndex, 1);
-    this.setState({
-      wordSearchCriteria: currentCriteria,
-    });
-  }
-
   /**
    * Submit a challenge to the backend.
    */
@@ -249,62 +222,6 @@ class TableCreator extends React.Component {
       .always(() => this.hideSpinner());
   }
 
-  /**
-   * Turn the search criteria into something the back end would understand.
-   * @return {Array.<Object>}
-   */
-  searchCriteriaMapper() {
-    return this.state.wordSearchCriteria.map(criterion => Object.assign({}, criterion, {
-      searchType: SearchTypesEnum.properties[criterion.searchType].name,
-    }));
-  }
-
-  searchSubmit() {
-    this.showSpinner();
-    $.ajax({
-      url: '/wordwalls/api/new_search/',
-      data: JSON.stringify({
-        lexicon: this.state.currentLexicon,
-        searchCriteria: this.searchCriteriaMapper(),
-        desiredTime: parseFloat(this.state.desiredTime),
-        questionsPerRound: this.state.questionsPerRound,
-        tablenum: this.props.tablenum,
-      }),
-      contentType: 'application/json; charset=utf-8',
-      method: 'POST',
-    })
-      .done(data => this.props.onLoadNewList(data))
-      .fail(jqXHR => Notifications.alert(
-        'Error',
-        `Failed to load search: ${jqXHR.responseJSON}`,
-      ))
-      .always(() => this.hideSpinner());
-  }
-
-  /**
-   * Submit search params to flashcard function. We use a legacy
-   * "WhitleyCards" API here, which is not quite JSON. This will have
-   * to be moved over to my new Cards program in the future.
-   */
-  flashcardSearchSubmit() {
-    this.showSpinner();
-    $.ajax({
-      url: FLASHCARD_URL,
-      method: 'POST',
-      data: {
-        action: 'searchParamsFlashcard',
-        lexicon: this.state.currentLexicon,
-        searchCriteria: this.searchCriteriaMapper(),
-      },
-    })
-      .done(data => TableCreator.redirectUrl(data.url))
-      .fail(jqXHR => Notifications.alert(
-        'Error',
-        `Failed to process: ${jqXHR.responseJSON.error}`,
-      ))
-      .always(() => this.hideSpinner());
-  }
-
   aerolithListSubmit() {
     this.showSpinner();
     $.ajax({
@@ -481,37 +398,6 @@ class TableCreator extends React.Component {
       .always(() => this.hideSpinner());
   }
 
-  searchParamChange(index, paramName, paramValue) {
-    const criteria = this.state.wordSearchCriteria;
-    const valueModifier = (val) => {
-      if (paramName === 'minValue' || paramName === 'maxValue') {
-        return parseInt(val, 10) || 0;
-      } else if (paramName === 'valueList') {
-        return val.trim();
-      }
-      return val;
-    };
-
-    criteria[index][paramName] = valueModifier(paramValue);
-    this.setState({
-      wordSearchCriteria: criteria,
-    });
-  }
-
-  searchTypeChange(index, value) {
-    const criteria = this.state.wordSearchCriteria;
-    const searchType = parseInt(value, 10);
-    criteria[index].searchType = searchType;
-    // Reset the values.
-    if (searchType !== SearchTypesEnum.TAGS) {
-      criteria[index].minValue = SearchTypesEnum.properties[searchType].defaultMin;
-      criteria[index].maxValue = SearchTypesEnum.properties[searchType].defaultMax;
-    }
-    this.setState({
-      wordSearchCriteria: criteria,
-    });
-  }
-
   selectedListChange(listId) {
     this.setState({
       selectedList: listId,
@@ -555,19 +441,30 @@ class TableCreator extends React.Component {
         break;
       case LIST_TYPE_WORDSEARCH:
         selectedQuizSearchDialog = (
-          <WordSearchDialog
+          <WordSearchDialogContainer
+            tablenum={this.props.tablenum}
+            onLoadNewList={this.props.onLoadNewList}
+            disabled={this.props.gameGoing}
+            showSpinner={this.showSpinner}
+            hideSpinner={this.hideSpinner}
             lexicon={this.state.currentLexicon}
-            availableLexica={this.props.availableLexica}
-            onSearchSubmit={() => this.preSubmitHook(this.searchSubmit)}
-            onFlashcardSubmit={() => this.preSubmitHook(this.flashcardSearchSubmit)}
-            onSearchTypeChange={this.searchTypeChange}
-            onSearchParamChange={this.searchParamChange}
-            removeSearchRow={this.removeSearchRow}
-            addSearchRow={this.addSearchRow}
-            searches={this.state.wordSearchCriteria}
+            desiredTime={parseFloat(this.state.desiredTime)}
+            questionsPerRound={this.state.questionsPerRound}
+            notifyError={error => Notifications.alert(
+              'Error',
+              `Failed to process: ${error}`,
+            )}
+            redirectUrl={TableCreator.redirectUrl}
           />);
 
         break;
+      case LIST_TYPE_BLANKS:
+        // selectedQuizSearchDialog = (
+        //   <BlankSearchDialog
+
+        //   />);
+        break;
+
       case LIST_TYPE_SAVED_LIST:
         selectedQuizSearchDialog = (
           <SavedListDialog
diff --git a/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js
new file mode 100644
index 00000000..08ced8bb
--- /dev/null
+++ b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js
@@ -0,0 +1,63 @@
+/**
+ * The non-RPC API for general Wordwalls functionality. For the most part,
+ * this is limited to stuff like configuring new tables, making word
+ * list searches, new challenges, etc.
+ *
+ * Might move this over to RPC eventually.
+ */
+import _ from 'underscore';
+import qs from 'qs';
+import Cookies from 'js-cookie';
+
+class WordwallsAPI {
+  constructor() {
+    this.fetchInit = {
+      method: 'POST',
+      headers: new Headers({
+        'Content-Type': 'application/json',
+        'X-CSRFToken': Cookies.get('csrftoken'),
+      }),
+      credentials: 'include',
+    };
+  }
+
+  fetchdata(params) {
+    return _.extend(this.fetchInit, {
+      body: JSON.stringify(params),
+    });
+  }
+
+  fetchdataLegacy(params) {
+    return _.extend(this.fetchInit, {
+      body: qs.stringify(params),
+      headers: new Headers({
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'X-CSRFToken': Cookies.get('csrftoken'),
+      }),
+    });
+  }
+
+  async call(path, params) {
+    // eslint-disable-next-line compat/compat
+    const response = await fetch(path, this.fetchdata(params));
+    const data = await response.json();
+    if (response.ok) {
+      return data;
+    }
+    // Otherwise, there is an error.
+    // XXX: TODO standardize error return API.
+    throw new Error(data.error || data);
+  }
+
+  async callLegacy(path, params) {
+    // eslint-disable-next-line compat/compat
+    const response = await fetch(path, this.fetchdataLegacy(params));
+    const data = await response.json();
+    if (response.ok) {
+      return data;
+    }
+    throw new Error(data.error);
+  }
+}
+
+export default WordwallsAPI;
diff --git a/djAerolith/wordwalls/static/js/wordwalls/wordwalls_rpc.js b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_rpc.js
index 6d11d7c3..cb807b20 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/wordwalls_rpc.js
+++ b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_rpc.js
@@ -4,23 +4,16 @@
 
 import _ from 'underscore';
 
-import Cookies from 'js-cookie';
+import WordwallsAPI from './wordwalls_api';
 
 function uniqueId() {
   return Math.random().toString(36).substring(2)
     + (new Date()).getTime().toString(36);
 }
 
-class WordwallsRPC {
+class WordwallsRPC extends WordwallsAPI {
   constructor(tablenum) {
-    this.fetchInit = {
-      method: 'POST',
-      headers: new Headers({
-        'Content-Type': 'application/json',
-        'X-CSRFToken': Cookies.get('csrftoken'),
-      }),
-      credentials: 'include',
-    };
+    super();
     this.tablenum = tablenum;
     if (tablenum) {
       this.tableurl = `/wordwalls/table/${tablenum}/rpc/`;
diff --git a/package.json b/package.json
index 5ae6208d..c4135f40 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "babel-preset-react": "^6.24.1",
     "compression-webpack-plugin": "^1.0.1",
     "css-loader": "^0.25.0",
+    "enzyme": "^3.3.0",
     "eslint": "^4.8.0",
     "eslint-config-airbnb": "^16.0.0",
     "eslint-plugin-compat": "^2.0.1",
@@ -44,6 +45,7 @@
     "less-loader": "^2.2.3",
     "react-test-renderer": "^16.1.1",
     "rimraf": "^2.6.2",
+    "sinon": "^6.1.3",
     "style-loader": "^0.13.1",
     "text-loader": "^0.0.1",
     "url-loader": "^0.5.7",
@@ -70,6 +72,7 @@
     "mustache": "^2.3.0",
     "promise-polyfill": "^7.0.0",
     "prop-types": "^15.6.0",
+    "qs": "^6.5.2",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-dropzone": "^4.1.3",
diff --git a/yarn.lock b/yarn.lock
index 14bae5fb..4f57e0a3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,20 @@
 # yarn lockfile v1
 
 
+"@sinonjs/formatio@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/formatio/-/formatio-2.0.0.tgz#84db7e9eb5531df18a8c5e0bfb6e449e55e654b2"
+  dependencies:
+    samsam "1.3.0"
+
+"@sinonjs/samsam@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/samsam/-/samsam-2.0.0.tgz#9163742ac35c12d3602dece74317643b35db6a80"
+
+"@types/node@*":
+  version "10.5.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.5.2.tgz#f19f05314d5421fe37e74153254201a7bf00a707"
+
 abab@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
@@ -964,6 +978,10 @@ bonjour@^3.5.0:
     multicast-dns "^6.0.1"
     multicast-dns-service-types "^1.1.0"
 
+boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+
 boom@2.x.x:
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
@@ -1204,6 +1222,17 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
+cheerio@^1.0.0-rc.2:
+  version "1.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.2.tgz#4b9f53a81b27e4d5dac31c0ffd0cfa03cc6830db"
+  dependencies:
+    css-select "~1.2.0"
+    dom-serializer "~0.1.0"
+    entities "~1.1.1"
+    htmlparser2 "^3.9.1"
+    lodash "^4.15.0"
+    parse5 "^3.0.1"
+
 chokidar@^1.6.0, chokidar@^1.6.1, chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
@@ -1347,6 +1376,10 @@ colormin@^1.0.5:
     css-color-names "0.0.4"
     has "^1.0.1"
 
+colors@0.5.x:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-0.5.1.tgz#7d0023eaeb154e8ee9fce75dcb923d0ed1667774"
+
 colors@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
@@ -1543,6 +1576,15 @@ css-loader@^0.25.0:
     postcss-modules-values "^1.1.0"
     source-list-map "^0.1.4"
 
+css-select@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  dependencies:
+    boolbase "~1.0.0"
+    css-what "2.1"
+    domutils "1.5.1"
+    nth-check "~1.0.1"
+
 css-selector-tokenizer@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.6.0.tgz#6445f582c7930d241dcc5007a43d6fcb8f073152"
@@ -1559,6 +1601,10 @@ css-selector-tokenizer@^0.7.0:
     fastparse "^1.1.1"
     regexpu-core "^1.0.0"
 
+css-what@2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
+
 cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -1752,6 +1798,10 @@ diff@^3.2.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
 
+diff@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+
 diffie-hellman@^5.0.0:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
@@ -1760,6 +1810,10 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
+discontinuous-range@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
+
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -1791,7 +1845,7 @@ doctrine@^2.0.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-dom-serializer@0:
+dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
   dependencies:
@@ -1802,7 +1856,7 @@ domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
 
-domelementtype@1:
+domelementtype@1, domelementtype@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
 
@@ -1816,13 +1870,26 @@ domhandler@2.3:
   dependencies:
     domelementtype "1"
 
-domutils@1.5:
+domhandler@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.5, domutils@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
   dependencies:
     dom-serializer "0"
     domelementtype "1"
 
+domutils@^1.5.1:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
 duplexer2@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
@@ -1886,10 +1953,31 @@ entities@1.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.0.0.tgz#b2987aa3821347fcde642b24fdfc9e4fb712bf26"
 
-entities@~1.1.1:
+entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
+enzyme@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.3.0.tgz#0971abd167f2d4bf3f5bd508229e1c4b6dc50479"
+  dependencies:
+    cheerio "^1.0.0-rc.2"
+    function.prototype.name "^1.0.3"
+    has "^1.0.1"
+    is-boolean-object "^1.0.0"
+    is-callable "^1.1.3"
+    is-number-object "^1.0.3"
+    is-string "^1.0.4"
+    is-subset "^0.1.1"
+    lodash "^4.17.4"
+    object-inspect "^1.5.0"
+    object-is "^1.0.1"
+    object.assign "^4.1.0"
+    object.entries "^1.0.4"
+    object.values "^1.0.4"
+    raf "^3.4.0"
+    rst-selector-parser "^2.2.3"
+
 errno@^0.1.1, errno@^0.1.3, errno@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
@@ -1902,6 +1990,16 @@ error-ex@^1.2.0:
   dependencies:
     is-arrayish "^0.2.1"
 
+es-abstract@^1.6.1:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+    is-callable "^1.1.3"
+    is-regex "^1.0.4"
+
 es-abstract@^1.7.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
@@ -2523,10 +2621,18 @@ fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
     mkdirp ">=0.5 0"
     rimraf "2"
 
-function-bind@^1.0.2, function-bind@^1.1.1:
+function-bind@^1.0.2, function-bind@^1.1.0, function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
+function.prototype.name@^1.0.3:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.0.tgz#8bd763cc0af860a859cc5d49384d74b932cd2327"
+  dependencies:
+    define-properties "^1.1.2"
+    function-bind "^1.1.1"
+    is-callable "^1.1.3"
+
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
@@ -2704,12 +2810,20 @@ has-flag@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
 
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+
 has-gulplog@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/has-gulplog/-/has-gulplog-0.1.0.tgz#6414c82913697da51590397dafb12f22967811ce"
   dependencies:
     sparkles "^1.0.0"
 
+has-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
+
 has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -2818,6 +2932,17 @@ htmlparser2@3.8.x:
     entities "1.0"
     readable-stream "1.1"
 
+htmlparser2@^3.9.1:
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
+  dependencies:
+    domelementtype "^1.3.0"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    inherits "^2.0.1"
+    readable-stream "^2.0.2"
+
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
@@ -3004,6 +3129,10 @@ is-binary-path@^1.0.0:
   dependencies:
     binary-extensions "^1.0.0"
 
+is-boolean-object@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.0.tgz#98f8b28030684219a95f375cfbd88ce3405dff93"
+
 is-buffer@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
@@ -3078,6 +3207,10 @@ is-glob@^3.1.0:
   dependencies:
     is-extglob "^2.1.0"
 
+is-number-object@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.3.tgz#f265ab89a9f445034ef6aff15a8f00b00f551799"
+
 is-number@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
@@ -3138,6 +3271,14 @@ is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
+is-string@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.4.tgz#cc3a9b69857d621e963725a24caeec873b826e64"
+
+is-subset@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
+
 is-svg@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
@@ -3613,6 +3754,10 @@ jsx-ast-utils@^2.0.0:
   dependencies:
     array-includes "^3.0.3"
 
+just-extend@^1.1.27:
+  version "1.1.27"
+  resolved "https://registry.yarnpkg.com/just-extend/-/just-extend-1.1.27.tgz#ec6e79410ff914e472652abfa0e603c03d60e905"
+
 kind-of@^3.0.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -3781,6 +3926,14 @@ lodash.escape@^3.0.0:
   dependencies:
     lodash._root "^3.0.0"
 
+lodash.flattendeep@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
+
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+
 lodash.isarguments@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
@@ -3848,10 +4001,18 @@ lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
+lodash@^4.15.0:
+  version "4.17.10"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
+
 loglevel@^1.4.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.5.1.tgz#189078c94ab9053ee215a0acdbf24244ea0f6502"
 
+lolex@^2.3.2, lolex@^2.4.2:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-2.7.1.tgz#e40a8c4d1f14b536aa03e42a537c7adbaf0c20be"
+
 longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
@@ -4034,6 +4195,10 @@ moment@^2.17.1:
   version "2.18.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
 
+moo@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/moo/-/moo-0.4.3.tgz#3f847a26f31cf625a956a87f2b10fbc013bfd10e"
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -4071,10 +4236,30 @@ natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
 
+nearley@^2.7.10:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.15.0.tgz#d1ff5406a58064615fe6eafb429cf06fbb1b7eab"
+  dependencies:
+    moo "^0.4.3"
+    nomnom "~1.6.2"
+    railroad-diagrams "^1.0.0"
+    randexp "0.4.6"
+    semver "^5.4.1"
+
 negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
+nise@^1.3.3:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/nise/-/nise-1.4.2.tgz#a9a3800e3994994af9e452333d549d60f72b8e8c"
+  dependencies:
+    "@sinonjs/formatio" "^2.0.0"
+    just-extend "^1.1.27"
+    lolex "^2.3.2"
+    path-to-regexp "^1.7.0"
+    text-encoding "^0.6.4"
+
 node-fetch@^1.0.1:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
@@ -4142,6 +4327,13 @@ node-pre-gyp@^0.6.36:
     tar "^2.2.1"
     tar-pack "^3.4.0"
 
+nomnom@~1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.6.2.tgz#84a66a260174408fc5b77a18f888eccc44fb6971"
+  dependencies:
+    colors "0.5.x"
+    underscore "~1.4.4"
+
 nopt@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
@@ -4192,6 +4384,12 @@ npmlog@^4.0.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
+nth-check@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4"
+  dependencies:
+    boolbase "~1.0.0"
+
 num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
@@ -4216,10 +4414,40 @@ object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
+object-inspect@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b"
+
+object-is@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
+
+object-keys@^1.0.11:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.12.tgz#09c53855377575310cca62f55bb334abff7b3ed2"
+
 object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
 
+object.assign@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
+  dependencies:
+    define-properties "^1.1.2"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.0"
+    object-keys "^1.0.11"
+
+object.entries@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.0.4.tgz#1bf9a4dd2288f5b33f3a993d257661f05d161a5f"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.6.1"
+    function-bind "^1.1.0"
+    has "^1.0.1"
+
 object.omit@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
@@ -4227,6 +4455,15 @@ object.omit@^2.0.0:
     for-own "^0.1.4"
     is-extendable "^0.1.1"
 
+object.values@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.0.4.tgz#e524da09b4f66ff05df457546ec72ac99f13069a"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.6.1"
+    function-bind "^1.1.0"
+    has "^1.0.1"
+
 obuf@^1.0.0, obuf@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.1.tgz#104124b6c602c6796881a042541d36db43a5264e"
@@ -4379,6 +4616,12 @@ parse5@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
 
+parse5@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
+  dependencies:
+    "@types/node" "*"
+
 parseurl@~1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
@@ -4417,6 +4660,12 @@ path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
 
+path-to-regexp@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -4831,6 +5080,10 @@ qs@6.5.1, qs@~6.5.1:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
 
+qs@^6.5.2:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
+
 qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
@@ -4858,6 +5111,23 @@ querystringify@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
 
+raf@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
+  dependencies:
+    performance-now "^2.1.0"
+
+railroad-diagrams@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
+
+randexp@0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.6.tgz#e986ad5e5e31dae13ddd6f7b3019aa7c87f60ca3"
+  dependencies:
+    discontinuous-range "1.0.0"
+    ret "~0.1.10"
+
 randomatic@^1.1.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
@@ -5192,6 +5462,10 @@ restore-cursor@^2.0.0:
     onetime "^2.0.0"
     signal-exit "^3.0.2"
 
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+
 right-align@^0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
@@ -5211,6 +5485,13 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^2.0.0"
     inherits "^2.0.1"
 
+rst-selector-parser@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"
+  dependencies:
+    lodash.flattendeep "^4.4.0"
+    nearley "^2.7.10"
+
 run-async@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
@@ -5231,6 +5512,10 @@ safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, s
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
+samsam@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.3.0.tgz#8d1d9350e25622da30de3e44ba692b5221ab7c50"
+
 sane@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/sane/-/sane-2.2.0.tgz#d6d2e2fcab00e3d283c93b912b7c3a20846f1d56"
@@ -5269,6 +5554,10 @@ selfsigned@^1.9.1:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
 
+semver@^5.4.1:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+
 send@0.16.1:
   version "0.16.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.16.1.tgz#a70e1ca21d1382c11d0d9f6231deb281080d7ab3"
@@ -5357,6 +5646,19 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
+sinon@^6.1.3:
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/sinon/-/sinon-6.1.3.tgz#98e7d716b7b11f7f1200e9c997e74f50ae094660"
+  dependencies:
+    "@sinonjs/formatio" "^2.0.0"
+    "@sinonjs/samsam" "^2.0.0"
+    diff "^3.5.0"
+    lodash.get "^4.4.2"
+    lolex "^2.4.2"
+    nise "^1.3.3"
+    supports-color "^5.4.0"
+    type-detect "^4.0.8"
+
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
@@ -5613,6 +5915,12 @@ supports-color@^4.0.0, supports-color@^4.2.1, supports-color@^4.4.0:
   dependencies:
     has-flag "^2.0.0"
 
+supports-color@^5.4.0:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54"
+  dependencies:
+    has-flag "^3.0.0"
+
 svgo@^0.7.0:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
@@ -5685,6 +5993,10 @@ tether@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/tether/-/tether-1.4.0.tgz#0f9fa171f75bf58485d8149e94799d7ae74d1c1a"
 
+text-encoding@^0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/text-encoding/-/text-encoding-0.6.4.tgz#e399a982257a276dae428bb92845cb71bdc26d19"
+
 text-loader@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/text-loader/-/text-loader-0.0.1.tgz#8bf75d749b7c0579c939920051c69ea572ebddc1"
@@ -5786,6 +6098,10 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
+type-detect@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+
 type-is@~1.6.15:
   version "1.6.15"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.15.tgz#cab10fb4909e441c82842eafe1ad646c81804410"
@@ -5830,6 +6146,10 @@ underscore@>=1.8.3, underscore@^1.8.3:
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.8.3.tgz#4f3fb53b106e6097fcf9cb4109f2a5e9bdfa5022"
 
+underscore@~1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.4.4.tgz#61a6a32010622afa07963bf325203cf12239d604"
+
 uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"

From 8e31c14215bc1b947054b4169b3cf9f42fd05858 Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Mon, 23 Jul 2018 22:09:23 -0400
Subject: [PATCH 02/18] more progress, using enzyme for tests

---
 .../js/wordwalls/newtable/search/dialog.jsx   | 13 +++-
 .../newtable/search/dialog_container.jsx      | 10 ++--
 .../js/wordwalls/newtable/search/row.jsx      |  5 +-
 .../js/wordwalls/newtable/search/rows.jsx     |  2 +
 .../js/wordwalls/newtable/search/types.js     | 12 ++--
 .../js/wordwalls/newtable/table_creator.jsx   |  3 +
 .../newtable/search/search_dialog.test.jsx    | 59 +++++++++++++++++++
 .../static/js/wordwalls/test/setup_enzyme.js  |  8 +++
 .../static/js/wordwalls/test/shim.js          |  4 ++
 .../static/js/wordwalls/wordwalls_api.js      | 16 ++++-
 package.json                                  |  7 +++
 yarn.lock                                     | 43 +++++++++++++-
 12 files changed, 164 insertions(+), 18 deletions(-)
 create mode 100644 djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx
 create mode 100644 djAerolith/wordwalls/static/js/wordwalls/test/setup_enzyme.js
 create mode 100644 djAerolith/wordwalls/static/js/wordwalls/test/shim.js

diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx
index 6641ad8c..cdc0b8db 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx
@@ -2,6 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import SearchRows from './rows';
+import { SearchTypesEnum } from './types';
+
+const allowedSearchTypes = new Set([
+  SearchTypesEnum.PROBABILITY,
+  SearchTypesEnum.LENGTH,
+  SearchTypesEnum.TAGS,
+  SearchTypesEnum.POINTS,
+  SearchTypesEnum.NUM_ANAGRAMS,
+  SearchTypesEnum.NUM_VOWELS,
+]);
 
 const WordSearchDialog = props => (
   <div className="row" style={{ marginTop: '8px' }}>
@@ -12,9 +22,10 @@ const WordSearchDialog = props => (
         removeSearchRow={props.removeSearchRow}
         modifySearchType={props.onSearchTypeChange}
         modifySearchParam={props.onSearchParamChange}
+        allowedSearchTypes={allowedSearchTypes}
       />
       <button
-        className="btn btn-primary"
+        className="btn btn-primary submit-word-search"
         style={{ marginTop: '0.75em' }}
         onClick={props.onSearchSubmit}
         data-dismiss="modal"
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx
index 80339d13..00d2ef55 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx
@@ -19,7 +19,7 @@ class DialogContainer extends React.Component {
       }, {
         searchType: SearchTypesEnum.PROBABILITY,
         minValue: 1,
-        maxValue: 100,
+        maxValue: 200,
       }],
     };
 
@@ -30,7 +30,6 @@ class DialogContainer extends React.Component {
     this.searchTypeChange = this.searchTypeChange.bind(this);
     this.addSearchRow = this.addSearchRow.bind(this);
     this.removeSearchRow = this.removeSearchRow.bind(this);
-    this.api = new WordwallsAPI();
   }
 
   addSearchRow() {
@@ -97,7 +96,7 @@ class DialogContainer extends React.Component {
 
   searchSubmit() {
     this.props.showSpinner();
-    this.api.call(SEARCH_URL, {
+    this.props.api.call(SEARCH_URL, {
       lexicon: this.props.lexicon,
       searchCriteria: this.searchCriteriaMapper(),
       desiredTime: this.props.desiredTime,
@@ -116,7 +115,7 @@ class DialogContainer extends React.Component {
    */
   flashcardSearchSubmit() {
     this.props.showSpinner();
-    this.api.callLegacy(FLASHCARD_URL, {
+    this.props.api.callLegacy(FLASHCARD_URL, {
       action: 'searchParamsFlashcard',
       lexicon: this.props.lexicon,
       searchCriteria: this.searchCriteriaMapper(),
@@ -153,13 +152,12 @@ DialogContainer.propTypes = {
   //   description: PropTypes.string,
   //   counts: PropTypes.object,
   // })).isRequired,
-  // onSearchSubmit: PropTypes.func.isRequired,
-  // onFlashcardSubmit: PropTypes.func.isRequired,
   tablenum: PropTypes.number.isRequired,
   onLoadNewList: PropTypes.func.isRequired,
   disabled: PropTypes.bool.isRequired,
   showSpinner: PropTypes.func.isRequired,
   hideSpinner: PropTypes.func.isRequired,
+  api: PropTypes.instanceOf(WordwallsAPI).isRequired,
 };
 
 export default DialogContainer;
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
index 9ef476d8..a8361935 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
@@ -127,7 +127,7 @@ const SearchRow = (props) => {
   }
 
   return (
-    <div className="row">
+    <div className="row search-row">
       <div className="col-xs-1" style={{ marginTop: '33px', marginBottom: '5px' }}>
         <button
           className="btn btn-info btn-xs"
@@ -148,7 +148,7 @@ const SearchRow = (props) => {
           colSize={12}
           label="Search Criterion"
           selectedValue={String(props.searchType)}
-          options={searchCriteriaOptions()}
+          options={searchCriteriaOptions(props.allowedSearchTypes)}
           onChange={(event) => {
             props.modifySearchType(props.index, event.target.value);
           }}
@@ -172,6 +172,7 @@ SearchRow.propTypes = {
   removeDisabled: PropTypes.bool.isRequired,
   modifySearchType: PropTypes.func.isRequired,
   modifySearchParam: PropTypes.func.isRequired,
+  allowedSearchTypes: PropTypes.instanceOf(Set).isRequired,
 };
 
 SearchRow.defaultProps = {
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/rows.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/rows.jsx
index a059f3ab..b51d26b4 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/rows.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/rows.jsx
@@ -21,6 +21,7 @@ const SearchRows = props => (
       removeDisabled={idx === 0 && props.searches.length === 1}
       modifySearchType={props.modifySearchType}
       modifySearchParam={props.modifySearchParam}
+      allowedSearchTypes={props.allowedSearchTypes}
     />))
 );
 
@@ -37,6 +38,7 @@ SearchRows.propTypes = {
   modifySearchParam: PropTypes.func.isRequired,
   addSearchRow: PropTypes.func.isRequired,
   removeSearchRow: PropTypes.func.isRequired,
+  allowedSearchTypes: PropTypes.instanceOf(Set).isRequired,
 };
 
 export default SearchRows;
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
index 962424a8..d8726e7b 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
@@ -73,11 +73,13 @@ const SearchTypesOrder = [
   SearchTypesEnum.TAGS,
 ];
 
-function searchCriteriaOptions() {
-  return SearchTypesOrder.map(el => ({
-    value: String(el),
-    displayValue: SearchTypesEnum.properties[el].displayName,
-  }));
+function searchCriteriaOptions(allowedSearchTypes) {
+  return SearchTypesOrder
+    .filter(t => allowedSearchTypes.has(t))
+    .map(el => ({
+      value: String(el),
+      displayValue: SearchTypesEnum.properties[el].displayName,
+    }));
 }
 
 /**
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
index d03f1875..56a5db9c 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
@@ -9,6 +9,7 @@ import ModalSkeleton from '../modal_skeleton';
 import Pills from './pills';
 import Notifications from '../notifications';
 import Sidebar from './sidebar';
+import WordwallsAPI from '../wordwalls_api';
 
 import ChallengeDialog from './challenge_dialog';
 import WordSearchDialogContainer from './search/dialog_container';
@@ -105,6 +106,7 @@ class TableCreator extends React.Component {
 
     this.showSpinner = this.showSpinner.bind(this);
     this.hideSpinner = this.hideSpinner.bind(this);
+    this.api = new WordwallsAPI();
   }
 
   /**
@@ -455,6 +457,7 @@ class TableCreator extends React.Component {
               `Failed to process: ${error}`,
             )}
             redirectUrl={TableCreator.redirectUrl}
+            api={this.api}
           />);
 
         break;
diff --git a/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx b/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx
new file mode 100644
index 00000000..5c015267
--- /dev/null
+++ b/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, shallow } from 'enzyme';
+import sinon from 'sinon';
+
+import SearchDialogContainer from '../../../newtable/search/dialog_container';
+import SearchDialog from '../../../newtable/search/dialog';
+import { SearchTypesEnum } from '../../../newtable/search/types';
+
+const props = {
+  lexicon: 3,
+  desiredTime: 100,
+  questionsPerRound: 50,
+  // eslint-disable-next-line no-console
+  notifyError: (err) => { console.log('Mock notifyError: ', err); },
+  redirectUrl: () => {},
+  tablenum: 12,
+  onLoadNewList: () => {},
+  disabled: false,
+  showSpinner: () => {},
+  hideSpinner: () => {},
+  api: () => {},
+};
+
+describe('<SearchDialogContainer />', () => {
+  describe('Static Analysis', () => {
+    it('renders two search criteria by default', () => {
+      const wrapper = render(<SearchDialogContainer {...props} />);
+      expect(wrapper.find('.search-row').length).toBe(2);
+    });
+
+    it('does not render single-value word length selector', () => {
+      const wrapper = render(<SearchDialogContainer {...props} />);
+      const selectOptions = wrapper.find('.search-row').eq(0).find('select option');
+      const optionSet = new Set();
+      selectOptions.each((idx, el) => {
+        optionSet.add(parseInt(el.attribs.value, 10));
+      });
+      expect(optionSet.has(SearchTypesEnum.FIXED_LENGTH)).toBeFalsy();
+      expect(optionSet.has(SearchTypesEnum.LENGTH)).toBeTruthy();
+    });
+  });
+
+  describe('Data', () => {
+    it('submits expected parameters to back-end', () => {
+      const apiSpy = sinon.spy();
+      const propsWithSpy = {
+        ...props,
+        api: apiSpy,
+      };
+      const wrapper = shallow(<SearchDialogContainer {...propsWithSpy} />);
+
+      wrapper
+        .find(SearchDialog)
+        .shallow().find('.submit-word-search')
+        .simulate('click');
+      expect(apiSpy).toHaveProperty('callCount', 1);
+    });
+  });
+});
diff --git a/djAerolith/wordwalls/static/js/wordwalls/test/setup_enzyme.js b/djAerolith/wordwalls/static/js/wordwalls/test/setup_enzyme.js
new file mode 100644
index 00000000..e7ab367b
--- /dev/null
+++ b/djAerolith/wordwalls/static/js/wordwalls/test/setup_enzyme.js
@@ -0,0 +1,8 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import Enzyme from 'enzyme';
+import EnzymeAdapter from 'enzyme-adapter-react-16';
+
+// Setup enzyme's react adapter
+Enzyme.configure({ adapter: new EnzymeAdapter() });
+// Mocking the Headers from fetch
+global.Headers = () => {};
diff --git a/djAerolith/wordwalls/static/js/wordwalls/test/shim.js b/djAerolith/wordwalls/static/js/wordwalls/test/shim.js
new file mode 100644
index 00000000..c94d001c
--- /dev/null
+++ b/djAerolith/wordwalls/static/js/wordwalls/test/shim.js
@@ -0,0 +1,4 @@
+// Shim requestAnimationFrame to get rid of a warning.
+global.requestAnimationFrame = (callback) => {
+  setTimeout(callback, 0);
+};
diff --git a/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js
index 08ced8bb..b2379b57 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js
+++ b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js
@@ -21,9 +21,13 @@ class WordwallsAPI {
     };
   }
 
-  fetchdata(params) {
+  fetchdata(params, method) {
+    // Note that we default to POST. A lot of these API requests are not
+    // idempotent, for example, making a new search should look like a GET,
+    // but a lot of the time it can result in creating a new table.
     return _.extend(this.fetchInit, {
       body: JSON.stringify(params),
+      method: method || 'POST',
     });
   }
 
@@ -37,9 +41,9 @@ class WordwallsAPI {
     });
   }
 
-  async call(path, params) {
+  async call(path, params, method) {
     // eslint-disable-next-line compat/compat
-    const response = await fetch(path, this.fetchdata(params));
+    const response = await fetch(path, this.fetchdata(params, method));
     const data = await response.json();
     if (response.ok) {
       return data;
@@ -49,6 +53,12 @@ class WordwallsAPI {
     throw new Error(data.error || data);
   }
 
+  /**
+   * Aerolith has a legacy API that I need to slowly get rid of. It uses
+   * a x-www-form-urlencoded content type and POST.
+   * @param {string} path
+   * @param {Object} params
+   */
   async callLegacy(path, params) {
     // eslint-disable-next-line compat/compat
     const response = await fetch(path, this.fetchdataLegacy(params));
diff --git a/package.json b/package.json
index c4135f40..f9dc4b1b 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "compression-webpack-plugin": "^1.0.1",
     "css-loader": "^0.25.0",
     "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.8.0",
     "eslint-config-airbnb": "^16.0.0",
     "eslint-plugin-compat": "^2.0.1",
@@ -80,5 +81,11 @@
     "tether": "^1.4.0",
     "underscore": "^1.8.3",
     "whatwg-fetch": "^2.0.3"
+  },
+  "jest": {
+    "setupFiles": [
+      "./djAerolith/wordwalls/static/js/wordwalls/test/shim.js",
+      "./djAerolith/wordwalls/static/js/wordwalls/test/setup_enzyme.js"
+    ]
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 4f57e0a3..a47012ca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1957,6 +1957,25 @@ entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
+enzyme-adapter-react-16@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.1.1.tgz#a8f4278b47e082fbca14f5bfb1ee50ee650717b4"
+  dependencies:
+    enzyme-adapter-utils "^1.3.0"
+    lodash "^4.17.4"
+    object.assign "^4.0.4"
+    object.values "^1.0.4"
+    prop-types "^15.6.0"
+    react-reconciler "^0.7.0"
+    react-test-renderer "^16.0.0-0"
+
+enzyme-adapter-utils@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.4.0.tgz#c403b81e8eb9953658569e539780964bdc98de62"
+  dependencies:
+    object.assign "^4.1.0"
+    prop-types "^15.6.0"
+
 enzyme@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.3.0.tgz#0971abd167f2d4bf3f5bd508229e1c4b6dc50479"
@@ -4430,7 +4449,7 @@ object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
 
-object.assign@^4.1.0:
+object.assign@^4.0.4, object.assign@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
   dependencies:
@@ -5179,6 +5198,28 @@ react-dropzone@^4.1.3:
     attr-accept "^1.0.3"
     prop-types "^15.5.7"
 
+react-is@^16.4.1:
+  version "16.4.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
+
+react-reconciler@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
+react-test-renderer@^16.0.0-0:
+  version "16.4.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70"
+  dependencies:
+    fbjs "^0.8.16"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+    react-is "^16.4.1"
+
 react-test-renderer@^16.1.1:
   version "16.1.1"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.1.1.tgz#a05184688d564be799f212449262525d1e350537"

From 854fbaa774bbd6f01956281b3865982758390b3b Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Tue, 24 Jul 2018 00:06:21 -0400
Subject: [PATCH 03/18] fix render data test

---
 .../js/wordwalls/newtable/search/types.js     | 20 ++++++------
 .../newtable/search/search_dialog.test.jsx    | 31 ++++++++++++++++---
 2 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
index d8726e7b..ef67b6f5 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
@@ -102,25 +102,25 @@ function searchCriterionToAdd(wordSearchCriteria) {
   if (newtypeId === SearchTypesEnum.TAGS) {
     return {
       searchType: newtypeId,
-      //criterion: {
-        valueList: '',
-      //},
+      // criterion: {
+      valueList: '',
+      // },
     };
   }
   if (newtypeId === SearchTypesEnum.FIXED_LENGTH) {
     return {
       searchType: newtypeId,
-      //criterion: {
-        value: SearchTypesEnum.properties[newtypeId].default,
-      //},
+      // criterion: {
+      value: SearchTypesEnum.properties[newtypeId].default,
+      // },
     };
   }
   return {
     searchType: newtypeId,
-    //criterion: {
-      minValue: SearchTypesEnum.properties[newtypeId].defaultMin,
-      maxValue: SearchTypesEnum.properties[newtypeId].defaultMax,
-    //},
+    // criterion: {
+    minValue: SearchTypesEnum.properties[newtypeId].defaultMin,
+    maxValue: SearchTypesEnum.properties[newtypeId].defaultMax,
+    // },
   };
 }
 
diff --git a/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx b/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx
index 5c015267..a53efd80 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx
@@ -42,18 +42,41 @@ describe('<SearchDialogContainer />', () => {
 
   describe('Data', () => {
     it('submits expected parameters to back-end', () => {
-      const apiSpy = sinon.spy();
+      const apiSpy = sinon.stub().returns({
+        then: sinon.stub().returns({
+          catch: sinon.stub().returns({
+            finally: sinon.stub(),
+          }),
+        }),
+      });
       const propsWithSpy = {
         ...props,
-        api: apiSpy,
+        api: {
+          call: apiSpy,
+        },
       };
       const wrapper = shallow(<SearchDialogContainer {...propsWithSpy} />);
-
+      // Simulate the click.
       wrapper
         .find(SearchDialog)
         .shallow().find('.submit-word-search')
         .simulate('click');
-      expect(apiSpy).toHaveProperty('callCount', 1);
+
+      expect(apiSpy.calledOnceWith('wordwalls/api/new_search/', {
+        lexicon: 3,
+        searchCriteria: [{
+          searchType: 'length',
+          minValue: 7,
+          maxValue: 7,
+        }, {
+          searchType: 'probability_range',
+          minValue: 1,
+          maxValue: 200,
+        }],
+        desiredTime: 100,
+        questionsPerRound: 50,
+        tablenum: 12,
+      })).toBeTruthy();
     });
   });
 });

From 84c45702007d4bb54c93ab7b513e69452a52a097 Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Fri, 27 Jul 2018 00:05:37 -0400
Subject: [PATCH 04/18] Refactor search dialog and data a bit more, fix for
 flashcards app

---
 .../js/flashcards/views/word_search_form.jsx  | 68 +++++++++++--------
 .../js/wordwalls/newtable/search/dialog.jsx   | 11 +--
 .../newtable/search/dialog_container.jsx      | 58 ++++++++--------
 .../js/wordwalls/newtable/search/row.jsx      | 19 ++----
 .../js/wordwalls/newtable/search/rows.jsx     | 15 +---
 .../js/wordwalls/newtable/search/types.js     | 68 ++++++++++++++-----
 .../newtable/search/search_dialog.test.jsx    |  4 +-
 package.json                                  |  6 ++
 webpack.config.babel.js                       |  1 +
 yarn.lock                                     | 22 +++++-
 10 files changed, 164 insertions(+), 108 deletions(-)

diff --git a/djAerolith/flashcards/static/js/flashcards/views/word_search_form.jsx b/djAerolith/flashcards/static/js/flashcards/views/word_search_form.jsx
index 54510f13..2acb5e51 100644
--- a/djAerolith/flashcards/static/js/flashcards/views/word_search_form.jsx
+++ b/djAerolith/flashcards/static/js/flashcards/views/word_search_form.jsx
@@ -7,25 +7,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import SearchRows from '../../../../../wordwalls/static/js/wordwalls/newtable/search_rows';
+import SearchRows from '../../../../../wordwalls/static/js/wordwalls/newtable/search/rows';
 import { SearchTypesEnum,
-  searchCriterionToAdd } from '../../../../../wordwalls/static/js/wordwalls/newtable/search_row';
+  searchCriterionToAdd,
+  SearchCriterion } from '../../../../../wordwalls/static/js/wordwalls/newtable/search/types';
 
 import Select from '../../../../../wordwalls/static/js/wordwalls/forms/select';
 
+const allowedSearchTypes = new Set([
+  SearchTypesEnum.PROBABILITY,
+  SearchTypesEnum.LENGTH,
+  SearchTypesEnum.TAGS,
+  SearchTypesEnum.POINTS,
+  SearchTypesEnum.NUM_ANAGRAMS,
+  SearchTypesEnum.NUM_VOWELS,
+]);
+
 class WordSearchForm extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      wordSearchCriteria: [{
-        searchType: SearchTypesEnum.LENGTH,
-        minValue: 7,
-        maxValue: 7,
-      }, {
-        searchType: SearchTypesEnum.PROBABILITY,
-        minValue: 1,
-        maxValue: 100,
-      }],
+      wordSearchCriteria: [
+        new SearchCriterion(SearchTypesEnum.LENGTH, {
+          minValue: 7,
+          maxValue: 7,
+        }),
+        new SearchCriterion(SearchTypesEnum.PROBABILITY, {
+          minValue: 1,
+          maxValue: 200,
+        }),
+      ],
       lexicon: 'America', // we will build a giant word wall
     };
 
@@ -56,16 +67,7 @@ class WordSearchForm extends React.Component {
 
   modifySearchParam(index, paramName, paramValue) {
     const criteria = this.state.wordSearchCriteria;
-    const valueModifier = (val) => {
-      if (paramName === 'minValue' || paramName === 'maxValue') {
-        return parseInt(val, 10) || 0;
-      } else if (paramName === 'valueList') {
-        return val.trim();
-      }
-      return val;
-    };
-
-    criteria[index][paramName] = valueModifier(paramValue);
+    criteria[index].setOption(paramName, paramValue);
     this.setState({
       wordSearchCriteria: criteria,
     });
@@ -74,11 +76,24 @@ class WordSearchForm extends React.Component {
   modifySearchType(index, value) {
     const criteria = this.state.wordSearchCriteria;
     const searchType = parseInt(value, 10);
+
     criteria[index].searchType = searchType;
     // Reset the values.
-    if (searchType !== SearchTypesEnum.TAGS) {
-      criteria[index].minValue = SearchTypesEnum.properties[searchType].defaultMin;
-      criteria[index].maxValue = SearchTypesEnum.properties[searchType].defaultMax;
+    if ([SearchTypesEnum.LENGTH, SearchTypesEnum.NUM_ANAGRAMS, SearchTypesEnum.NUM_VOWELS,
+      SearchTypesEnum.POINTS, SearchTypesEnum.PROBABILITY].includes(searchType)) {
+      // Defaults to two options for this criteria - min/max
+      criteria[index].setOptions({
+        minValue: SearchTypesEnum.properties[searchType].defaultMin,
+        maxValue: SearchTypesEnum.properties[searchType].defaultMax,
+      });
+    } else if (searchType === SearchTypesEnum.FIXED_LENGTH) {
+      criteria[index].setOptions({
+        value: SearchTypesEnum.properties[searchType].default,
+      });
+    } else if (searchType === SearchTypesEnum.TAGS) {
+      criteria[index].setOptions({
+        valueList: '',
+      });
     }
     this.setState({
       wordSearchCriteria: criteria,
@@ -91,9 +106,7 @@ class WordSearchForm extends React.Component {
    * @return {Array.<Object>}
    */
   searchCriteriaMapper() {
-    return this.state.wordSearchCriteria.map(criterion => Object.assign({}, criterion, {
-      searchType: SearchTypesEnum.properties[criterion.searchType].name,
-    }));
+    return this.state.wordSearchCriteria.map(criterion => criterion.toJSObj());
   }
 
   render() {
@@ -129,6 +142,7 @@ class WordSearchForm extends React.Component {
               removeSearchRow={this.removeSearchRow}
               modifySearchType={this.modifySearchType}
               modifySearchParam={this.modifySearchParam}
+              allowedSearchTypes={allowedSearchTypes}
             />
           </div>
         </div>
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx
index cdc0b8db..8a80df90 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import SearchRows from './rows';
-import { SearchTypesEnum } from './types';
+import { SearchTypesEnum, SearchCriterion } from './types';
 
 const allowedSearchTypes = new Set([
   SearchTypesEnum.PROBABILITY,
@@ -46,14 +46,7 @@ const WordSearchDialog = props => (
 
 
 WordSearchDialog.propTypes = {
-  searches: PropTypes.arrayOf(PropTypes.shape({
-    searchType: PropTypes.number,
-    minValue: PropTypes.number,
-    maxValue: PropTypes.number,
-    minAllowedValue: PropTypes.number,
-    maxAllowedValue: PropTypes.number,
-    valueList: PropTypes.string,
-  })).isRequired,
+  searches: PropTypes.arrayOf(PropTypes.instanceOf(SearchCriterion)).isRequired,
   onSearchTypeChange: PropTypes.func.isRequired,
   onSearchParamChange: PropTypes.func.isRequired,
   addSearchRow: PropTypes.func.isRequired,
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx
index 00d2ef55..9c20ea4e 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx
@@ -2,25 +2,26 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import WordSearchDialog from './dialog';
-import { SearchTypesEnum, searchCriterionToAdd } from './types';
+import { SearchTypesEnum, searchCriterionToAdd, SearchCriterion } from './types';
 import WordwallsAPI from '../../wordwalls_api';
 
-const SEARCH_URL = 'wordwalls/api/new_search/';
+const SEARCH_URL = '/wordwalls/api/new_search/';
 const FLASHCARD_URL = '/flashcards/';
 
 class DialogContainer extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      searchCriteria: [{
-        searchType: SearchTypesEnum.LENGTH,
-        minValue: 7,
-        maxValue: 7,
-      }, {
-        searchType: SearchTypesEnum.PROBABILITY,
-        minValue: 1,
-        maxValue: 200,
-      }],
+      searchCriteria: [
+        new SearchCriterion(SearchTypesEnum.LENGTH, {
+          minValue: 7,
+          maxValue: 7,
+        }),
+        new SearchCriterion(SearchTypesEnum.PROBABILITY, {
+          minValue: 1,
+          maxValue: 200,
+        }),
+      ],
     };
 
     this.searchSubmit = this.searchSubmit.bind(this);
@@ -54,16 +55,7 @@ class DialogContainer extends React.Component {
 
   searchParamChange(index, paramName, paramValue) {
     const criteria = this.state.searchCriteria;
-    const valueModifier = (val) => {
-      if (paramName === 'minValue' || paramName === 'maxValue') {
-        return parseInt(val, 10) || 0;
-      } else if (paramName === 'valueList') {
-        return val.trim();
-      }
-      return val;
-    };
-
-    criteria[index][paramName] = valueModifier(paramValue);
+    criteria[index].setOption(paramName, paramValue);
     this.setState({
       searchCriteria: criteria,
     });
@@ -74,20 +66,30 @@ class DialogContainer extends React.Component {
    * @return {Array.<Object>}
    */
   searchCriteriaMapper() {
-    // TODO modify me
-    return this.state.searchCriteria.map(criterion => Object.assign({}, criterion, {
-      searchType: SearchTypesEnum.properties[criterion.searchType].name,
-    }));
+    return this.state.searchCriteria.map(criterion => criterion.toJSObj());
   }
 
   searchTypeChange(index, value) {
     const criteria = this.state.searchCriteria;
     const searchType = parseInt(value, 10);
+
     criteria[index].searchType = searchType;
     // Reset the values.
-    if (searchType !== SearchTypesEnum.TAGS) {
-      criteria[index].minValue = SearchTypesEnum.properties[searchType].defaultMin;
-      criteria[index].maxValue = SearchTypesEnum.properties[searchType].defaultMax;
+    if ([SearchTypesEnum.LENGTH, SearchTypesEnum.NUM_ANAGRAMS, SearchTypesEnum.NUM_VOWELS,
+      SearchTypesEnum.POINTS, SearchTypesEnum.PROBABILITY].includes(searchType)) {
+      // Defaults to two options for this criteria - min/max
+      criteria[index].setOptions({
+        minValue: SearchTypesEnum.properties[searchType].defaultMin,
+        maxValue: SearchTypesEnum.properties[searchType].defaultMax,
+      });
+    } else if (searchType === SearchTypesEnum.FIXED_LENGTH) {
+      criteria[index].setOptions({
+        value: SearchTypesEnum.properties[searchType].default,
+      });
+    } else if (searchType === SearchTypesEnum.TAGS) {
+      criteria[index].setOptions({
+        valueList: '',
+      });
     }
     this.setState({
       searchCriteria: criteria,
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
index a8361935..3a609533 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
@@ -95,8 +95,8 @@ const SearchRow = (props) => {
     case SearchTypesEnum.NUM_ANAGRAMS:
       specificForm = (
         <MinMaxValues
-          minValue={props.minValue}
-          maxValue={props.maxValue}
+          minValue={props.searchCriteria.minValue}
+          maxValue={props.searchCriteria.maxValue}
           minAllowed={props.minAllowedValue}
           maxAllowed={props.maxAllowedValue}
           modifySearchParam={props.modifySearchParam}
@@ -107,9 +107,9 @@ const SearchRow = (props) => {
       specificForm = (
         <NumberValue
           label="Value"
-          defaultValue=""
-          minAllowed=""
-          maxAllowed=""
+          defaultValue={props.searchCriteria.value}
+          minAllowed={props.minAllowedValue}
+          maxAllowed={props.maxAllowedValue}
           modifySearchParam={props.modifySearchParam}
           index={props.index}
         />);
@@ -117,7 +117,7 @@ const SearchRow = (props) => {
     case SearchTypesEnum.TAGS:
       specificForm = (
         <ListValue
-          valueList={props.valueList}
+          valueList={props.searchCriteria.valueList}
           index={props.index}
           modifySearchParam={props.modifySearchParam}
         />);
@@ -162,11 +162,9 @@ const SearchRow = (props) => {
 SearchRow.propTypes = {
   searchType: PropTypes.number.isRequired,
   index: PropTypes.number.isRequired,
-  minValue: PropTypes.number,
+  searchCriteria: PropTypes.objectOf(PropTypes.any).isRequired,
   minAllowedValue: PropTypes.number,
-  maxValue: PropTypes.number,
   maxAllowedValue: PropTypes.number,
-  valueList: PropTypes.string,
   addRow: PropTypes.func.isRequired,
   removeRow: PropTypes.func.isRequired,
   removeDisabled: PropTypes.bool.isRequired,
@@ -176,11 +174,8 @@ SearchRow.propTypes = {
 };
 
 SearchRow.defaultProps = {
-  minValue: 1,
   minAllowedValue: 1,
-  maxValue: 100,
   maxAllowedValue: 100,
-  valueList: '',
 };
 
 export default SearchRow;
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/rows.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/rows.jsx
index b51d26b4..5ba0fcc4 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/rows.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/rows.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import SearchRow from './row';
-import { SearchTypesEnum } from './types';
+import { SearchTypesEnum, SearchCriterion } from './types';
 
 const SearchRows = props => (
   props.searches.map((search, idx) => (
@@ -11,11 +11,9 @@ const SearchRows = props => (
       key={`row${idx + 0}`}
       index={idx}
       searchType={search.searchType}
-      minValue={search.minValue}
-      maxValue={search.maxValue}
+      searchCriteria={search.options}
       minAllowedValue={SearchTypesEnum.properties[search.searchType].minAllowed}
       maxAllowedValue={SearchTypesEnum.properties[search.searchType].maxAllowed}
-      valueList={search.valueList}
       addRow={props.addSearchRow}
       removeRow={props.removeSearchRow}
       removeDisabled={idx === 0 && props.searches.length === 1}
@@ -26,14 +24,7 @@ const SearchRows = props => (
 );
 
 SearchRows.propTypes = {
-  searches: PropTypes.arrayOf(PropTypes.shape({
-    searchType: PropTypes.number,
-    minValue: PropTypes.number,
-    maxValue: PropTypes.number,
-    minAllowedValue: PropTypes.number,
-    maxAllowedValue: PropTypes.number,
-    valueList: PropTypes.string,
-  })).isRequired,
+  searches: PropTypes.arrayOf(PropTypes.instanceOf(SearchCriterion)).isRequired,
   modifySearchType: PropTypes.func.isRequired,
   modifySearchParam: PropTypes.func.isRequired,
   addSearchRow: PropTypes.func.isRequired,
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
index ef67b6f5..4cdbe477 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
@@ -82,11 +82,49 @@ function searchCriteriaOptions(allowedSearchTypes) {
     }));
 }
 
+class SearchCriterion {
+  constructor(searchType, options) {
+    this.searchType = searchType;
+    this.options = options;
+  }
+  /**
+   * Convert this to an object that the backend would understand.
+   */
+  toJSObj() {
+    return {
+      searchType: SearchTypesEnum.properties[this.searchType].name,
+      ...this.options,
+    };
+  }
+  /**
+   * Set the option to the passed-in value. This function takes care
+   * of converting the optionValue to the proper type, based on the
+   * optionName
+   * @param {string} optionName The name of the option in the options dict
+   * @param {any} optionValue The value for the option
+   */
+  setOption(optionName, optionValue) {
+    const valueModifier = (val) => {
+      if (['minValue', 'maxValue', 'value'].includes(optionName)) {
+        return parseInt(val, 10) || 0;
+      } else if (optionName === 'valueList') {
+        return val.trim();
+      }
+      throw new Error('Unsupported option name');
+    };
+    this.options[optionName] = valueModifier(optionValue);
+  }
+
+  setOptions(optionName, options) {
+    this.options[optionName] = options;
+  }
+}
+
 /**
  * Given a list of word search criteria, figure out the next one to add,
  * based on the order.
  * @param {Array.<Object>} wordSearchCriteria
- * @return {Object?} A new search type criterion, or null.
+ * @return {SearchCriterion?} A new search type criterion, or null.
  */
 function searchCriterionToAdd(wordSearchCriteria) {
   const stmap = {};
@@ -100,28 +138,24 @@ function searchCriterionToAdd(wordSearchCriteria) {
     return null;
   }
   if (newtypeId === SearchTypesEnum.TAGS) {
-    return {
-      searchType: newtypeId,
-      // criterion: {
+    return new SearchCriterion(newtypeId, {
       valueList: '',
-      // },
-    };
+    });
   }
   if (newtypeId === SearchTypesEnum.FIXED_LENGTH) {
-    return {
-      searchType: newtypeId,
-      // criterion: {
+    return new SearchCriterion(newtypeId, {
       value: SearchTypesEnum.properties[newtypeId].default,
-      // },
-    };
+    });
   }
-  return {
-    searchType: newtypeId,
-    // criterion: {
+  return new SearchCriterion(newtypeId, {
     minValue: SearchTypesEnum.properties[newtypeId].defaultMin,
     maxValue: SearchTypesEnum.properties[newtypeId].defaultMax,
-    // },
-  };
+  });
 }
 
-export { SearchTypesEnum, searchCriterionToAdd, searchCriteriaOptions };
+export {
+  SearchTypesEnum,
+  searchCriterionToAdd,
+  searchCriteriaOptions,
+  SearchCriterion,
+};
diff --git a/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx b/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx
index a53efd80..361a69f7 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx
@@ -62,7 +62,7 @@ describe('<SearchDialogContainer />', () => {
         .shallow().find('.submit-word-search')
         .simulate('click');
 
-      expect(apiSpy.calledOnceWith('wordwalls/api/new_search/', {
+      sinon.assert.calledWith(apiSpy, '/wordwalls/api/new_search/', {
         lexicon: 3,
         searchCriteria: [{
           searchType: 'length',
@@ -76,7 +76,7 @@ describe('<SearchDialogContainer />', () => {
         desiredTime: 100,
         questionsPerRound: 50,
         tablenum: 12,
-      })).toBeTruthy();
+      });
     });
   });
 });
diff --git a/package.json b/package.json
index f9dc4b1b..826f11a8 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,8 @@
     "babel-core": "^6.26.0",
     "babel-jest": "^21.2.0",
     "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "compression-webpack-plugin": "^1.0.1",
@@ -58,6 +60,10 @@
     "presets": [
       "env",
       "react"
+    ],
+    "plugins": [
+      "transform-object-rest-spread",
+      "transform-class-properties"
     ]
   },
   "dependencies": {
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 68d9fa91..d665472a 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -1,6 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 // Used for development build.
 const webpack = require('webpack');
+const path = require('path');
 
 export default {
   output: {
diff --git a/yarn.lock b/yarn.lock
index a47012ca..89dafa96 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -527,6 +527,10 @@ babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
 
+babel-plugin-syntax-class-properties@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
+
 babel-plugin-syntax-exponentiation-operator@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
@@ -539,7 +543,7 @@ babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
 
-babel-plugin-syntax-object-rest-spread@^6.13.0:
+babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
 
@@ -555,6 +559,15 @@ babel-plugin-transform-async-to-generator@^6.22.0:
     babel-plugin-syntax-async-functions "^6.8.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-class-properties@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac"
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-plugin-syntax-class-properties "^6.8.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
 babel-plugin-transform-es2015-arrow-functions@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
@@ -738,6 +751,13 @@ babel-plugin-transform-flow-strip-types@^6.22.0:
     babel-plugin-syntax-flow "^6.18.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-object-rest-spread@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.26.0"
+
 babel-plugin-transform-react-display-name@^6.23.0:
   version "6.25.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz#67e2bf1f1e9c93ab08db96792e05392bf2cc28d1"

From 12019941fec914e73fdb6d7f38abffc1c642f0db Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Fri, 27 Jul 2018 00:08:01 -0400
Subject: [PATCH 05/18] remove unused path

---
 webpack.config.babel.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index d665472a..68d9fa91 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -1,7 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 // Used for development build.
 const webpack = require('webpack');
-const path = require('path');
 
 export default {
   output: {

From 9f042be631fe83df62791e43c1d663b2af0196b8 Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Mon, 30 Jul 2018 22:04:56 -0400
Subject: [PATCH 06/18] Starting the blanks dialog

---
 .../newtable/blanks/dialog_container.jsx      |  2 +
 .../js/wordwalls/newtable/search/row.jsx      |  4 +-
 .../js/wordwalls/newtable/search/rows.jsx     | 36 +++++----
 .../newtable/search/search_dialog.test.jsx    | 74 +++++++++++++++----
 4 files changed, 84 insertions(+), 32 deletions(-)
 create mode 100644 djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx

diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
new file mode 100644
index 00000000..968290fa
--- /dev/null
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
@@ -0,0 +1,2 @@
+import React from 'react';
+
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
index 3a609533..118fbc78 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
@@ -130,14 +130,14 @@ const SearchRow = (props) => {
     <div className="row search-row">
       <div className="col-xs-1" style={{ marginTop: '33px', marginBottom: '5px' }}>
         <button
-          className="btn btn-info btn-xs"
+          className="btn btn-info btn-xs btn-add-search-row"
           onClick={props.addRow}
         ><span className="glyphicon glyphicon-plus" aria-hidden="true" />
         </button>
       </div>
       <div className="col-xs-1" style={{ marginTop: '33px', marginBottom: '5px' }}>
         <button
-          className="btn btn-info btn-xs"
+          className="btn btn-info btn-xs btn-remove-search-row"
           onClick={() => props.removeRow(props.index)}
           disabled={props.removeDisabled}
         ><span className="glyphicon glyphicon-minus" aria-hidden="true" />
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/rows.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/rows.jsx
index 5ba0fcc4..7d974b52 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/rows.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/rows.jsx
@@ -5,22 +5,26 @@ import SearchRow from './row';
 import { SearchTypesEnum, SearchCriterion } from './types';
 
 const SearchRows = props => (
-  props.searches.map((search, idx) => (
-    <SearchRow
-      // To suppress idx warning we use idx + 0, ew. XXX
-      key={`row${idx + 0}`}
-      index={idx}
-      searchType={search.searchType}
-      searchCriteria={search.options}
-      minAllowedValue={SearchTypesEnum.properties[search.searchType].minAllowed}
-      maxAllowedValue={SearchTypesEnum.properties[search.searchType].maxAllowed}
-      addRow={props.addSearchRow}
-      removeRow={props.removeSearchRow}
-      removeDisabled={idx === 0 && props.searches.length === 1}
-      modifySearchType={props.modifySearchType}
-      modifySearchParam={props.modifySearchParam}
-      allowedSearchTypes={props.allowedSearchTypes}
-    />))
+  /* XXX Enzyme doesn't seem to like React Fragments yet (i.e. lists
+  of React elements), so we wrap a div around it. :/ */
+  <div>
+    {props.searches.map((search, idx) => (
+      <SearchRow
+        // To suppress idx warning we use idx + 0, ew. XXX
+        key={`row${idx + 0}`}
+        index={idx}
+        searchType={search.searchType}
+        searchCriteria={search.options}
+        minAllowedValue={SearchTypesEnum.properties[search.searchType].minAllowed}
+        maxAllowedValue={SearchTypesEnum.properties[search.searchType].maxAllowed}
+        addRow={props.addSearchRow}
+        removeRow={props.removeSearchRow}
+        removeDisabled={idx === 0 && props.searches.length === 1}
+        modifySearchType={props.modifySearchType}
+        modifySearchParam={props.modifySearchParam}
+        allowedSearchTypes={props.allowedSearchTypes}
+      />))}
+  </div>
 );
 
 SearchRows.propTypes = {
diff --git a/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx b/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx
index 361a69f7..79c55282 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import { render, shallow } from 'enzyme';
+import { render, shallow, mount } from 'enzyme';
 import sinon from 'sinon';
 
 import SearchDialogContainer from '../../../newtable/search/dialog_container';
 import SearchDialog from '../../../newtable/search/dialog';
+import SearchRow from '../../../newtable/search/row';
 import { SearchTypesEnum } from '../../../newtable/search/types';
 
 const props = {
@@ -21,6 +22,21 @@ const props = {
   api: () => {},
 };
 
+const apiSpy = sinon.stub().returns({
+  then: sinon.stub().returns({
+    catch: sinon.stub().returns({
+      finally: sinon.stub(),
+    }),
+  }),
+});
+
+const propsWithSpy = {
+  ...props,
+  api: {
+    call: apiSpy,
+  },
+};
+
 describe('<SearchDialogContainer />', () => {
   describe('Static Analysis', () => {
     it('renders two search criteria by default', () => {
@@ -42,19 +58,6 @@ describe('<SearchDialogContainer />', () => {
 
   describe('Data', () => {
     it('submits expected parameters to back-end', () => {
-      const apiSpy = sinon.stub().returns({
-        then: sinon.stub().returns({
-          catch: sinon.stub().returns({
-            finally: sinon.stub(),
-          }),
-        }),
-      });
-      const propsWithSpy = {
-        ...props,
-        api: {
-          call: apiSpy,
-        },
-      };
       const wrapper = shallow(<SearchDialogContainer {...propsWithSpy} />);
       // Simulate the click.
       wrapper
@@ -79,4 +82,47 @@ describe('<SearchDialogContainer />', () => {
       });
     });
   });
+
+  describe('Interactions', () => {
+    it('adds a search row when button is clicked', () => {
+      const wrapper = mount(<SearchDialogContainer {...props} />);
+      wrapper.find('.btn-add-search-row').at(0).simulate('click');
+      expect(wrapper.find(SearchRow).length).toBe(3);
+      wrapper.unmount();
+    });
+
+    it('removes a search row when button is clicked', () => {
+      const wrapper = mount(<SearchDialogContainer {...props} />);
+      wrapper.find('.btn-remove-search-row').at(0).simulate('click');
+      expect(wrapper.find(SearchRow).length).toBe(1);
+      wrapper.unmount();
+    });
+
+    it('submits more search parameters to api after button is clicked', () => {
+      const wrapper = mount(<SearchDialogContainer {...propsWithSpy} />);
+      wrapper.find('.btn-add-search-row').at(0).simulate('click');
+      wrapper.find('.submit-word-search').simulate('click');
+
+      sinon.assert.calledWith(apiSpy, '/wordwalls/api/new_search/', {
+        lexicon: 3,
+        searchCriteria: [{
+          searchType: 'length',
+          minValue: 7,
+          maxValue: 7,
+        }, {
+          searchType: 'probability_range',
+          minValue: 1,
+          maxValue: 200,
+        }, {
+          searchType: 'point_value',
+          minValue: 2,
+          maxValue: 30,
+        }],
+        desiredTime: 100,
+        questionsPerRound: 50,
+        tablenum: 12,
+      });
+      wrapper.unmount();
+    });
+  });
 });

From 344bc8c694bbd37f749bafda4ea78c305dcfc8be Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Sun, 12 Aug 2018 18:42:43 -0400
Subject: [PATCH 07/18] use HOCs to avoid repeating code

---
 .gitignore                                    |   2 +-
 .../static/js/wordwalls/forms/text_input.jsx  |   9 +-
 .../newtable/blanks/dialog_container.jsx      |  35 +++++
 .../dialog_container_with_search_rows.jsx     |  97 ++++++++++++++
 .../js/wordwalls/newtable/search/dialog.jsx   |  14 +-
 .../newtable/search/dialog_container.jsx      | 126 +++++-------------
 .../js/wordwalls/newtable/search/types.js     |  19 ++-
 .../newtable/search/search_dialog.test.jsx    |  29 +++-
 8 files changed, 215 insertions(+), 116 deletions(-)
 create mode 100644 djAerolith/wordwalls/static/js/wordwalls/newtable/dialog_container_with_search_rows.jsx

diff --git a/.gitignore b/.gitignore
index aaba199d..38d8dec3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,4 +29,4 @@ coverage
 __pycache__
 .vscode
 words
-wordsdir
\ No newline at end of file
+wordsdir
diff --git a/djAerolith/wordwalls/static/js/wordwalls/forms/text_input.jsx b/djAerolith/wordwalls/static/js/wordwalls/forms/text_input.jsx
index 9b578995..b8c3ad8e 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/forms/text_input.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/forms/text_input.jsx
@@ -29,13 +29,18 @@ const TextInput = (props) => {
   );
 };
 
+TextInput.defaultProps = {
+  onKeyPress: () => {},
+  maxLength: 100,
+};
+
 TextInput.propTypes = {
   colSize: PropTypes.number.isRequired,
   label: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
-  maxLength: PropTypes.number.isRequired,
+  maxLength: PropTypes.number,
   onChange: PropTypes.func.isRequired,
-  onKeyPress: PropTypes.func.isRequired,
+  onKeyPress: PropTypes.func,
 };
 
 export default TextInput;
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
index 968290fa..384b0a4a 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
@@ -1,2 +1,37 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
+import BlankSearchDialog from './dialog';
+
+import { SearchTypesEnum, searchCriterionToAdd, SearchCriterion } from '../search/types';
+
+import WordwallsAPI from '../../wordwalls_api';
+
+const allowedSearchTypes = new Set([
+  SearchTypesEnum.FIXED_LENGTH,
+  SearchTypesEnum.NUM_ANAGRAMS,
+  SearchTypesEnum.NUM_TWO_BLANKS,
+]);
+
+
+class DialogContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchCriteria: [
+        new SearchCriterion(SearchTypesEnum.FIXED_LENGTH, {
+          value: 7,
+        }),
+        new SearchCriterion(SearchTypesEnum.NUM_ANAGRAMS, {
+          minValue: 1,
+          maxValue: 10,
+        }),
+        new SearchCriterion(SearchTypesEnum.NUM_TWO_BLANKS, {
+          value: 4,
+        }),
+      ],
+    };
+
+    this.searchSubmit = this.searchSubmit.bind(this);
+  }
+}
\ No newline at end of file
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/dialog_container_with_search_rows.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/dialog_container_with_search_rows.jsx
new file mode 100644
index 00000000..d31d0de6
--- /dev/null
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/dialog_container_with_search_rows.jsx
@@ -0,0 +1,97 @@
+/**
+ * A generic Dialog container for the different modes. This uses a Higher-Order
+ * container in order to avoid repeating the search row add / remove / state
+ * management code.
+ */
+import React from 'react';
+
+import { SearchTypesEnum, searchCriterionToAdd } from './search/types';
+
+function withSearchRows(WrappedDialogContainer, allowedSearchTypes, searchCriteria) {
+  return class extends React.Component {
+    constructor(props) {
+      super(props);
+      this.searchParamChange = this.searchParamChange.bind(this);
+      this.searchTypeChange = this.searchTypeChange.bind(this);
+      this.addSearchRow = this.addSearchRow.bind(this);
+      this.removeSearchRow = this.removeSearchRow.bind(this);
+
+      this.state = {
+        // Do a deep copy.
+        searchCriteria: [...searchCriteria],
+      };
+      this.allowedSearchTypes = allowedSearchTypes;
+    }
+
+    addSearchRow() {
+      const toadd = searchCriterionToAdd(this.state.searchCriteria, this.allowedSearchTypes);
+      if (!toadd) {
+        return; // Don't add any more.
+      }
+
+      const newCriteria = this.state.searchCriteria.concat(toadd);
+      this.setState({
+        searchCriteria: newCriteria,
+      });
+    }
+
+    removeSearchRow(criteriaIndex) {
+      const currentCriteria = this.state.searchCriteria;
+      currentCriteria.splice(criteriaIndex, 1);
+      this.setState({
+        searchCriteria: currentCriteria,
+      });
+    }
+
+    searchParamChange(index, paramName, paramValue) {
+      const criteria = this.state.searchCriteria;
+      criteria[index].setOption(paramName, paramValue);
+      this.setState({
+        searchCriteria: criteria,
+      });
+    }
+
+    searchTypeChange(index, value) {
+      const criteria = this.state.searchCriteria;
+      const searchType = parseInt(value, 10);
+
+      criteria[index].searchType = searchType;
+      // Reset the values.
+      if ([SearchTypesEnum.LENGTH, SearchTypesEnum.NUM_ANAGRAMS, SearchTypesEnum.NUM_VOWELS,
+        SearchTypesEnum.POINTS, SearchTypesEnum.PROBABILITY].includes(searchType)) {
+        // Defaults to two options for this criteria - min/max
+        criteria[index].setOptions({
+          minValue: SearchTypesEnum.properties[searchType].defaultMin,
+          maxValue: SearchTypesEnum.properties[searchType].defaultMax,
+        });
+      } else if (searchType === SearchTypesEnum.FIXED_LENGTH) {
+        criteria[index].setOptions({
+          value: SearchTypesEnum.properties[searchType].default,
+        });
+      } else if (searchType === SearchTypesEnum.TAGS) {
+        criteria[index].setOptions({
+          valueList: '',
+        });
+      }
+      this.setState({
+        searchCriteria: criteria,
+      });
+    }
+
+    render() {
+      return (
+        <WrappedDialogContainer
+          searches={this.state.searchCriteria}
+          addSearchRow={this.addSearchRow}
+          removeSearchRow={this.removeSearchRow}
+          onSearchTypeChange={this.searchTypeChange}
+          onSearchParamChange={this.searchParamChange}
+          {...this.props}
+        />
+      );
+    }
+  };
+}
+
+export default withSearchRows;
+
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx
index 8a80df90..a5c4af26 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx
@@ -2,16 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import SearchRows from './rows';
-import { SearchTypesEnum, SearchCriterion } from './types';
-
-const allowedSearchTypes = new Set([
-  SearchTypesEnum.PROBABILITY,
-  SearchTypesEnum.LENGTH,
-  SearchTypesEnum.TAGS,
-  SearchTypesEnum.POINTS,
-  SearchTypesEnum.NUM_ANAGRAMS,
-  SearchTypesEnum.NUM_VOWELS,
-]);
+import { SearchCriterion } from './types';
 
 const WordSearchDialog = props => (
   <div className="row" style={{ marginTop: '8px' }}>
@@ -22,7 +13,7 @@ const WordSearchDialog = props => (
         removeSearchRow={props.removeSearchRow}
         modifySearchType={props.onSearchTypeChange}
         modifySearchParam={props.onSearchParamChange}
-        allowedSearchTypes={allowedSearchTypes}
+        allowedSearchTypes={props.allowedSearchTypes}
       />
       <button
         className="btn btn-primary submit-word-search"
@@ -54,6 +45,7 @@ WordSearchDialog.propTypes = {
   onSearchSubmit: PropTypes.func.isRequired,
   onFlashcardSubmit: PropTypes.func.isRequired,
   disabled: PropTypes.bool.isRequired,
+  allowedSearchTypes: PropTypes.instanceOf(Set).isRequired,
 };
 
 export default WordSearchDialog;
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx
index 9c20ea4e..dfc9fdee 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx
@@ -1,106 +1,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import ContainerWithSearchRows from '../dialog_container_with_search_rows';
 import WordSearchDialog from './dialog';
-import { SearchTypesEnum, searchCriterionToAdd, SearchCriterion } from './types';
+
+import { SearchTypesEnum, SearchCriterion } from './types';
 import WordwallsAPI from '../../wordwalls_api';
 
 const SEARCH_URL = '/wordwalls/api/new_search/';
 const FLASHCARD_URL = '/flashcards/';
 
-class DialogContainer extends React.Component {
+const allowedSearchTypes = new Set([
+  SearchTypesEnum.PROBABILITY,
+  SearchTypesEnum.LENGTH,
+  SearchTypesEnum.TAGS,
+  SearchTypesEnum.POINTS,
+  SearchTypesEnum.NUM_ANAGRAMS,
+  SearchTypesEnum.NUM_VOWELS,
+]);
+
+class SearchDialogContainer extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      searchCriteria: [
-        new SearchCriterion(SearchTypesEnum.LENGTH, {
-          minValue: 7,
-          maxValue: 7,
-        }),
-        new SearchCriterion(SearchTypesEnum.PROBABILITY, {
-          minValue: 1,
-          maxValue: 200,
-        }),
-      ],
-    };
-
     this.searchSubmit = this.searchSubmit.bind(this);
     this.flashcardSearchSubmit = this.flashcardSearchSubmit.bind(this);
-
-    this.searchParamChange = this.searchParamChange.bind(this);
-    this.searchTypeChange = this.searchTypeChange.bind(this);
-    this.addSearchRow = this.addSearchRow.bind(this);
-    this.removeSearchRow = this.removeSearchRow.bind(this);
-  }
-
-  addSearchRow() {
-    const toadd = searchCriterionToAdd(this.state.searchCriteria);
-    if (!toadd) {
-      return; // Don't add any more.
-    }
-
-    const newCriteria = this.state.searchCriteria.concat(toadd);
-    this.setState({
-      searchCriteria: newCriteria,
-    });
-  }
-
-  removeSearchRow(criteriaIndex) {
-    const currentCriteria = this.state.searchCriteria;
-    currentCriteria.splice(criteriaIndex, 1);
-    this.setState({
-      searchCriteria: currentCriteria,
-    });
-  }
-
-  searchParamChange(index, paramName, paramValue) {
-    const criteria = this.state.searchCriteria;
-    criteria[index].setOption(paramName, paramValue);
-    this.setState({
-      searchCriteria: criteria,
-    });
-  }
-
-  /**
-   * Turn the search criteria into something the back end would understand.
-   * @return {Array.<Object>}
-   */
-  searchCriteriaMapper() {
-    return this.state.searchCriteria.map(criterion => criterion.toJSObj());
-  }
-
-  searchTypeChange(index, value) {
-    const criteria = this.state.searchCriteria;
-    const searchType = parseInt(value, 10);
-
-    criteria[index].searchType = searchType;
-    // Reset the values.
-    if ([SearchTypesEnum.LENGTH, SearchTypesEnum.NUM_ANAGRAMS, SearchTypesEnum.NUM_VOWELS,
-      SearchTypesEnum.POINTS, SearchTypesEnum.PROBABILITY].includes(searchType)) {
-      // Defaults to two options for this criteria - min/max
-      criteria[index].setOptions({
-        minValue: SearchTypesEnum.properties[searchType].defaultMin,
-        maxValue: SearchTypesEnum.properties[searchType].defaultMax,
-      });
-    } else if (searchType === SearchTypesEnum.FIXED_LENGTH) {
-      criteria[index].setOptions({
-        value: SearchTypesEnum.properties[searchType].default,
-      });
-    } else if (searchType === SearchTypesEnum.TAGS) {
-      criteria[index].setOptions({
-        valueList: '',
-      });
-    }
-    this.setState({
-      searchCriteria: criteria,
-    });
   }
 
   searchSubmit() {
     this.props.showSpinner();
     this.props.api.call(SEARCH_URL, {
       lexicon: this.props.lexicon,
-      searchCriteria: this.searchCriteriaMapper(),
+      searchCriteria: this.props.searches.map(s => s.toJSObj()),
       desiredTime: this.props.desiredTime,
       questionsPerRound: this.props.questionsPerRound,
       tablenum: this.props.tablenum,
@@ -120,7 +50,7 @@ class DialogContainer extends React.Component {
     this.props.api.callLegacy(FLASHCARD_URL, {
       action: 'searchParamsFlashcard',
       lexicon: this.props.lexicon,
-      searchCriteria: this.searchCriteriaMapper(),
+      searchCriteria: this.props.searches.map(s => s.toJSObj()),
     })
       .then(data => this.props.redirectUrl(data.url))
       .catch(resp => this.props.notifyError(resp))
@@ -130,19 +60,16 @@ class DialogContainer extends React.Component {
   render() {
     return (
       <WordSearchDialog
-        searches={this.state.searchCriteria}
-        addSearchRow={this.addSearchRow}
-        removeSearchRow={this.removeSearchRow}
-        onSearchTypeChange={this.searchTypeChange}
-        onSearchParamChange={this.searchParamChange}
         onSearchSubmit={this.searchSubmit}
         onFlashcardSubmit={this.flashcardSearchSubmit}
-        disabled={this.props.disabled}
+        allowedSearchTypes={allowedSearchTypes}
+        {...this.props}
       />);
   }
 }
 
-DialogContainer.propTypes = {
+SearchDialogContainer.propTypes = {
+  searches: PropTypes.arrayOf(PropTypes.instanceOf(SearchCriterion)).isRequired,
   lexicon: PropTypes.number.isRequired,
   desiredTime: PropTypes.number.isRequired,
   questionsPerRound: PropTypes.number.isRequired,
@@ -162,4 +89,19 @@ DialogContainer.propTypes = {
   api: PropTypes.instanceOf(WordwallsAPI).isRequired,
 };
 
+const DialogContainer = ContainerWithSearchRows(
+  SearchDialogContainer,
+  allowedSearchTypes,
+  [
+    new SearchCriterion(SearchTypesEnum.LENGTH, {
+      minValue: 7,
+      maxValue: 7,
+    }),
+    new SearchCriterion(SearchTypesEnum.PROBABILITY, {
+      minValue: 1,
+      maxValue: 200,
+    }),
+  ],
+);
+
 export default DialogContainer;
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
index 4cdbe477..a1e0e990 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
@@ -6,6 +6,7 @@ const SearchTypesEnum = {
   NUM_ANAGRAMS: 5,
   NUM_VOWELS: 6,
   FIXED_LENGTH: 7,
+  NUM_TWO_BLANKS: 8,
   /**
    * The inputs won't allow user to go beyond minAllowed and maxAllowed.
    * defaultMin and defaultMax are the values that show up when the
@@ -18,7 +19,7 @@ const SearchTypesEnum = {
       defaultMin: 1,
       defaultMax: 100,
       minAllowed: 1,
-      maxAllowed: 70000, // Subject to change by lexicon
+      maxAllowed: 70000, // XXX should be subject to change by lexicon
     },
     2: {
       name: 'length',
@@ -60,6 +61,13 @@ const SearchTypesEnum = {
       minAllowed: 5,
       maxAllowed: 10,
     },
+    8: {
+      name: 'number_2_blanks',
+      displayName: 'Number of 2-blank questions',
+      default: 4,
+      minAllowed: 1,
+      maxAllowed: 50,
+    },
   },
 };
 
@@ -71,6 +79,7 @@ const SearchTypesOrder = [
   SearchTypesEnum.NUM_VOWELS,
   SearchTypesEnum.FIXED_LENGTH,
   SearchTypesEnum.TAGS,
+  SearchTypesEnum.NUM_TWO_BLANKS,
 ];
 
 function searchCriteriaOptions(allowedSearchTypes) {
@@ -124,16 +133,20 @@ class SearchCriterion {
  * Given a list of word search criteria, figure out the next one to add,
  * based on the order.
  * @param {Array.<Object>} wordSearchCriteria
+ * @param {Set} allowedSearchTypes
  * @return {SearchCriterion?} A new search type criterion, or null.
  */
-function searchCriterionToAdd(wordSearchCriteria) {
+function searchCriterionToAdd(wordSearchCriteria, allowedSearchTypes) {
   const stmap = {};
   wordSearchCriteria.forEach((criteria) => {
     // These are enum integers.
     stmap[criteria.searchType] = true;
   });
   // Find the first search type that's not in the map.
-  const newtypeId = SearchTypesOrder.find(tid => stmap[tid] == null);
+  const newtypeId = SearchTypesOrder
+    .filter(t => allowedSearchTypes.has(t))
+    .find(tid => stmap[tid] == null);
+
   if (!newtypeId) {
     return null;
   }
diff --git a/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx b/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx
index 79c55282..6c79f680 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/test/newtable/search/search_dialog.test.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { render, shallow, mount } from 'enzyme';
+import { render, mount } from 'enzyme';
 import sinon from 'sinon';
 
 import SearchDialogContainer from '../../../newtable/search/dialog_container';
-import SearchDialog from '../../../newtable/search/dialog';
 import SearchRow from '../../../newtable/search/row';
 import { SearchTypesEnum } from '../../../newtable/search/types';
 
@@ -58,12 +57,9 @@ describe('<SearchDialogContainer />', () => {
 
   describe('Data', () => {
     it('submits expected parameters to back-end', () => {
-      const wrapper = shallow(<SearchDialogContainer {...propsWithSpy} />);
+      const wrapper = mount(<SearchDialogContainer {...propsWithSpy} />);
       // Simulate the click.
-      wrapper
-        .find(SearchDialog)
-        .shallow().find('.submit-word-search')
-        .simulate('click');
+      wrapper.find('.submit-word-search').simulate('click');
 
       sinon.assert.calledWith(apiSpy, '/wordwalls/api/new_search/', {
         lexicon: 3,
@@ -80,6 +76,7 @@ describe('<SearchDialogContainer />', () => {
         questionsPerRound: 50,
         tablenum: 12,
       });
+      wrapper.unmount();
     });
   });
 
@@ -124,5 +121,23 @@ describe('<SearchDialogContainer />', () => {
       });
       wrapper.unmount();
     });
+
+    it('does not ever add single-value word length selector', () => {
+      const wrapper = mount(<SearchDialogContainer {...props} />);
+      for (let i = 0; i < 15; i += 1) {
+        // Click 'add' a whole bunch of times.
+        wrapper.find('.btn-add-search-row').at(0).simulate('click');
+      }
+      expect(wrapper.find(SearchRow).length).toBe(6);
+      // And search specifically that fixed length wasn't rendered.
+      const selectOptions = wrapper.find('.search-row').at(0).find('select option');
+      const optionSet = new Set();
+      selectOptions.forEach(node => optionSet.add(parseInt(node.props().value, 10)));
+
+      expect(optionSet.has(SearchTypesEnum.FIXED_LENGTH)).toBeFalsy();
+      expect(optionSet.has(SearchTypesEnum.LENGTH)).toBeTruthy();
+
+      wrapper.unmount();
+    });
   });
 });

From 51ef48252d67aeedd92859a2049ef746f0bc9dad Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Tue, 14 Aug 2018 00:15:12 -0400
Subject: [PATCH 08/18] fix a badly written function

---
 .../newtable/blanks/dialog_container.jsx      | 83 ++++++++++++++-----
 .../js/wordwalls/newtable/search/row.jsx      |  5 ++
 .../js/wordwalls/newtable/search/types.js     | 14 +++-
 .../js/wordwalls/newtable/table_creator.jsx   | 23 ++++-
 4 files changed, 98 insertions(+), 27 deletions(-)

diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
index 384b0a4a..b987a31e 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import BlankSearchDialog from './dialog';
+import BlankSearchDialog from '../search/dialog';
+import ContainerWithSearchRows from '../dialog_container_with_search_rows';
 
-import { SearchTypesEnum, searchCriterionToAdd, SearchCriterion } from '../search/types';
+import { SearchTypesEnum, SearchCriterion } from '../search/types';
 
 import WordwallsAPI from '../../wordwalls_api';
 
@@ -14,24 +15,68 @@ const allowedSearchTypes = new Set([
 ]);
 
 
-class DialogContainer extends React.Component {
+class BlanksDialogContainer extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      searchCriteria: [
-        new SearchCriterion(SearchTypesEnum.FIXED_LENGTH, {
-          value: 7,
-        }),
-        new SearchCriterion(SearchTypesEnum.NUM_ANAGRAMS, {
-          minValue: 1,
-          maxValue: 10,
-        }),
-        new SearchCriterion(SearchTypesEnum.NUM_TWO_BLANKS, {
-          value: 4,
-        }),
-      ],
-    };
-
     this.searchSubmit = this.searchSubmit.bind(this);
+    this.flashcardSearchSubmit = this.flashcardSearchSubmit.bind(this);
+  }
+
+  searchSubmit() {
+    this.props.showSpinner();
+  }
+
+  flashcardSearchSubmit() {
+    this.props.showSpinner();
   }
-}
\ No newline at end of file
+
+  render() {
+    return (
+      <BlankSearchDialog
+        onSearchSubmit={this.searchSubmit}
+        onFlashcardSubmit={this.flashcardSearchSubmit}
+        allowedSearchTypes={allowedSearchTypes}
+        {...this.props}
+      />);
+  }
+}
+
+BlanksDialogContainer.propTypes = {
+  searches: PropTypes.arrayOf(PropTypes.instanceOf(SearchCriterion)).isRequired,
+  lexicon: PropTypes.number.isRequired,
+  desiredTime: PropTypes.number.isRequired,
+  questionsPerRound: PropTypes.number.isRequired,
+  notifyError: PropTypes.func.isRequired,
+  redirectUrl: PropTypes.func.isRequired,
+  // availableLexica: PropTypes.arrayOf(PropTypes.shape({
+  //   id: PropTypes.number,
+  //   lexicon: PropTypes.string,
+  //   description: PropTypes.string,
+  //   counts: PropTypes.object,
+  // })).isRequired,
+  tablenum: PropTypes.number.isRequired,
+  onLoadNewList: PropTypes.func.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  showSpinner: PropTypes.func.isRequired,
+  hideSpinner: PropTypes.func.isRequired,
+  api: PropTypes.instanceOf(WordwallsAPI).isRequired,
+};
+
+const DialogContainer = ContainerWithSearchRows(
+  BlanksDialogContainer,
+  allowedSearchTypes,
+  [
+    new SearchCriterion(SearchTypesEnum.FIXED_LENGTH, {
+      value: 7,
+    }),
+    new SearchCriterion(SearchTypesEnum.NUM_ANAGRAMS, {
+      minValue: 1,
+      maxValue: 10,
+    }),
+    new SearchCriterion(SearchTypesEnum.NUM_TWO_BLANKS, {
+      value: 4,
+    }),
+  ],
+);
+
+export default DialogContainer;
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
index 118fbc78..a1c85d2e 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
@@ -93,6 +93,9 @@ const SearchRow = (props) => {
     case SearchTypesEnum.LENGTH:
     case SearchTypesEnum.NUM_VOWELS:
     case SearchTypesEnum.NUM_ANAGRAMS:
+      // XXX TODO this case should be in types.js with more generic code;
+      // i.e. it should specify how many inputs and of what type, and this
+      // should just draw that.
       specificForm = (
         <MinMaxValues
           minValue={props.searchCriteria.minValue}
@@ -104,9 +107,11 @@ const SearchRow = (props) => {
         />);
       break;
     case SearchTypesEnum.FIXED_LENGTH:
+    case SearchTypesEnum.NUM_TWO_BLANKS:
       specificForm = (
         <NumberValue
           label="Value"
+          paramName="Value"
           defaultValue={props.searchCriteria.value}
           minAllowed={props.minAllowedValue}
           maxAllowed={props.maxAllowedValue}
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
index a1e0e990..6f626be4 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
@@ -29,7 +29,11 @@ const SearchTypesEnum = {
       minAllowed: 2,
       maxAllowed: 15,
     },
-    3: { name: 'has_tags', displayName: 'Has Tags' },
+    3: {
+      name: 'has_tags',
+      displayName: 'Has Tags',
+      valueList: '',
+    },
     4: {
       name: 'point_value',
       displayName: 'Point Value',
@@ -121,11 +125,12 @@ class SearchCriterion {
       }
       throw new Error('Unsupported option name');
     };
+
     this.options[optionName] = valueModifier(optionValue);
   }
 
-  setOptions(optionName, options) {
-    this.options[optionName] = options;
+  setOptions(options) {
+    Object.keys(options).forEach(key => this.setOption(key, options[key]));
   }
 }
 
@@ -155,7 +160,8 @@ function searchCriterionToAdd(wordSearchCriteria, allowedSearchTypes) {
       valueList: '',
     });
   }
-  if (newtypeId === SearchTypesEnum.FIXED_LENGTH) {
+  if (newtypeId === SearchTypesEnum.FIXED_LENGTH ||
+      newtypeId === SearchTypesEnum.NUM_TWO_BLANKS) {
     return new SearchCriterion(newtypeId, {
       value: SearchTypesEnum.properties[newtypeId].default,
     });
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
index 56a5db9c..ce4fa3cd 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
@@ -12,6 +12,7 @@ import Sidebar from './sidebar';
 import WordwallsAPI from '../wordwalls_api';
 
 import ChallengeDialog from './challenge_dialog';
+import BlankSearchDialogContainer from './blanks/dialog_container';
 import WordSearchDialogContainer from './search/dialog_container';
 import SavedListDialog, { PlayOptions } from './saved_list_dialog';
 import AerolithListDialog from './aerolith_list_dialog';
@@ -462,10 +463,23 @@ class TableCreator extends React.Component {
 
         break;
       case LIST_TYPE_BLANKS:
-        // selectedQuizSearchDialog = (
-        //   <BlankSearchDialog
-
-        //   />);
+        selectedQuizSearchDialog = (
+          <BlankSearchDialogContainer
+            tablenum={this.props.tablenum}
+            onLoadNewList={this.props.onLoadNewList}
+            disabled={this.props.gameGoing}
+            showSpinner={this.showSpinner}
+            hideSpinner={this.hideSpinner}
+            lexicon={this.state.currentLexicon}
+            desiredTime={parseFloat(this.state.desiredTime)}
+            questionsPerRound={this.state.questionsPerRound}
+            notifyError={error => Notifications.alert(
+              'Error',
+              `Failed to process: ${error}`,
+            )}
+            redirectUrl={TableCreator.redirectUrl}
+            api={this.api}
+          />);
         break;
 
       case LIST_TYPE_SAVED_LIST:
@@ -498,6 +512,7 @@ class TableCreator extends React.Component {
           options={[
             LIST_TYPE_CHALLENGE,
             LIST_TYPE_WORDSEARCH,
+            LIST_TYPE_BLANKS,
             LIST_TYPE_AEROLITH_LISTS,
             LIST_TYPE_SAVED_LIST,
           ]}

From a3ae21e3fcdbcc5810ec96e9a533b1fb18d50cdb Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Fri, 17 Aug 2018 00:10:47 -0400
Subject: [PATCH 09/18] refactor challenge dialog

---
 .../js/wordwalls/challenge_results_modal.jsx  |   2 +-
 .../newtable/blanks/dialog_container.jsx      |   2 +-
 .../{ => challenges}/challenge_button.jsx     |   0
 .../challenges}/challenge_results.jsx         |   0
 .../dialog.jsx}                               |   6 +-
 .../newtable/challenges/dialog_container.jsx  | 143 ++++++++++++++++
 .../newtable/search/dialog_container.jsx      |   2 +-
 .../js/wordwalls/newtable/table_creator.jsx   | 152 ++++--------------
 .../static/js/wordwalls/wordwalls_api.js      |  15 +-
 9 files changed, 194 insertions(+), 128 deletions(-)
 rename djAerolith/wordwalls/static/js/wordwalls/newtable/{ => challenges}/challenge_button.jsx (100%)
 rename djAerolith/wordwalls/static/js/wordwalls/{ => newtable/challenges}/challenge_results.jsx (100%)
 rename djAerolith/wordwalls/static/js/wordwalls/newtable/{challenge_dialog.jsx => challenges/dialog.jsx} (94%)
 create mode 100644 djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/dialog_container.jsx

diff --git a/djAerolith/wordwalls/static/js/wordwalls/challenge_results_modal.jsx b/djAerolith/wordwalls/static/js/wordwalls/challenge_results_modal.jsx
index be3bf3f2..89b300d9 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/challenge_results_modal.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/challenge_results_modal.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import ChallengeResults from './challenge_results';
+import ChallengeResults from './newtable/challenges/challenge_results';
 import ModalSkeleton from './modal_skeleton';
 
 const ResultsModal = props => (
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
index b987a31e..9fafee13 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
@@ -56,10 +56,10 @@ BlanksDialogContainer.propTypes = {
   // })).isRequired,
   tablenum: PropTypes.number.isRequired,
   onLoadNewList: PropTypes.func.isRequired,
-  disabled: PropTypes.bool.isRequired,
   showSpinner: PropTypes.func.isRequired,
   hideSpinner: PropTypes.func.isRequired,
   api: PropTypes.instanceOf(WordwallsAPI).isRequired,
+  disabled: PropTypes.bool.isRequired,
 };
 
 const DialogContainer = ContainerWithSearchRows(
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/challenge_button.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/challenge_button.jsx
similarity index 100%
rename from djAerolith/wordwalls/static/js/wordwalls/newtable/challenge_button.jsx
rename to djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/challenge_button.jsx
diff --git a/djAerolith/wordwalls/static/js/wordwalls/challenge_results.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/challenge_results.jsx
similarity index 100%
rename from djAerolith/wordwalls/static/js/wordwalls/challenge_results.jsx
rename to djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/challenge_results.jsx
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/challenge_dialog.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/dialog.jsx
similarity index 94%
rename from djAerolith/wordwalls/static/js/wordwalls/newtable/challenge_dialog.jsx
rename to djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/dialog.jsx
index 84bdd32e..31c69fe3 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/challenge_dialog.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/dialog.jsx
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 
 import moment from 'moment';
 
-import DatePicker from '../forms/date_picker';
-import ChallengeResults from '../challenge_results';
+import DatePicker from '../../forms/date_picker';
+import ChallengeResults from './challenge_results';
 import ChallengeButtonRow from './challenge_button';
 
 const ChallengeDialog = (props) => {
@@ -76,6 +76,7 @@ const ChallengeDialog = (props) => {
           style={{ marginTop: '0.75em' }}
           onClick={props.onChallengeSubmit}
           data-dismiss="modal"
+          disabled={props.disabled ? 'disabled' : ''}
         >Play!
         </button>
       </div>
@@ -116,6 +117,7 @@ ChallengeDialog.propTypes = {
     maxScore: PropTypes.number,
   }).isRequired,
   currentChallenge: PropTypes.number.isRequired,
+  disabled: PropTypes.bool.isRequired,
 };
 
 export default ChallengeDialog;
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/dialog_container.jsx
new file mode 100644
index 00000000..546d733a
--- /dev/null
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/dialog_container.jsx
@@ -0,0 +1,143 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+
+import ChallengeDialog from './dialog';
+import WordwallsAPI from '../../wordwalls_api';
+
+const CHALLENGERS_URL = '/wordwalls/api/challengers/';
+const NEW_CHALLENGE_URL = '/wordwalls/api/new_challenge/';
+const CHALLENGES_PLAYED_URL = '/wordwalls/api/challenges_played/';
+const DATE_FORMAT_STRING = 'YYYY-MM-DD';
+
+class ChallengeDialogContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentDate: moment(),
+      challengesDoneAtDate: [],
+      currentChallenge: 0,
+      challengeData: {},
+    };
+    this.challengeSubmit = this.challengeSubmit.bind(this);
+    this.onChallengeSelected = this.onChallengeSelected.bind(this);
+  }
+
+  componentDidMount() {
+    this.loadChallengePlayedInfo();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    let loaded = false;
+    if ((prevProps.lexicon !== this.props.lexicon) ||
+        (prevState.currentDate.format(DATE_FORMAT_STRING) !==
+        this.state.currentDate.format(DATE_FORMAT_STRING))) {
+      this.loadChallengePlayedInfo();
+      loaded = true;
+    }
+    if ((prevState.currentChallenge !== this.state.currentChallenge) ||
+        loaded) {
+      this.loadChallengeLeaderboardData();
+    }
+  }
+
+  onChallengeSelected(challID) {
+    const challenge = this.props.challengeInfo.find(c => c.id === challID);
+    this.setState({
+      currentChallenge: challID,
+    });
+    this.props.setTimeAndQuestions({
+      desiredTime: String(challenge.seconds / 60),
+      questionsPerRound: challenge.numQuestions,
+    });
+  }
+
+  loadChallengeLeaderboardData() {
+    if (!this.state.currentChallenge) {
+      return;
+    }
+    this.props.showSpinner();
+    this.props.api.call(CHALLENGERS_URL, {
+      lexicon: this.props.lexicon,
+      date: this.state.currentDate.format(DATE_FORMAT_STRING),
+      challenge: this.state.currentChallenge,
+    }, 'GET')
+      .then(data => this.setState({
+        challengeData: data || {},
+      }))
+      .catch(error => this.props.notifyError(error))
+      .finally(() => this.props.hideSpinner());
+  }
+
+  /**
+   * Submit a challenge to the backend.
+   */
+  challengeSubmit() {
+    this.props.showSpinner();
+    this.props.api.call(NEW_CHALLENGE_URL, {
+      lexicon: this.props.lexicon,
+      date: this.state.currentDate.format(DATE_FORMAT_STRING),
+      challenge: this.state.currentChallenge,
+      tablenum: this.props.tablenum,
+    })
+      .then(data => this.props.onLoadNewList(data))
+      .catch(error => this.props.notifyError(error))
+      .finally(() => this.props.hideSpinner());
+  }
+
+  loadChallengePlayedInfo() {
+    // Load the challenge-related stuff.
+    this.props.showSpinner();
+    this.props.api.call(CHALLENGES_PLAYED_URL, {
+      lexicon: this.props.lexicon,
+      date: this.state.currentDate.format(DATE_FORMAT_STRING),
+    }, 'GET')
+      .then(data => this.setState({
+        challengesDoneAtDate: data,
+      }))
+      .catch(error => this.props.notifyError(error))
+      .finally(() => this.props.hideSpinner());
+  }
+
+  render() {
+    return (
+      <ChallengeDialog
+        challengeInfo={this.props.challengeInfo}
+        disabled={this.state.currentChallenge === 0}
+        currentChallenge={this.state.currentChallenge}
+        challengesDoneAtDate={this.state.challengesDoneAtDate}
+        challengeData={this.state.challengeData}
+        onDateChange={(date) => {
+          this.setState({
+            currentDate: moment(date),
+          });
+        }}
+        currentDate={this.state.currentDate}
+        onChallengeSubmit={() => this.props.preSubmitHook(this.challengeSubmit)}
+        onChallengeSelected={challID => () => this.onChallengeSelected(challID)}
+      />
+    );
+  }
+}
+
+ChallengeDialogContainer.propTypes = {
+  challengeInfo: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number,
+    seconds: PropTypes.number,
+    numQuestions: PropTypes.number,
+    name: PropTypes.string,
+    orderPriority: PropTypes.number,
+  })).isRequired,
+  showSpinner: PropTypes.func.isRequired,
+  hideSpinner: PropTypes.func.isRequired,
+  api: PropTypes.instanceOf(WordwallsAPI).isRequired,
+  setTimeAndQuestions: PropTypes.func.isRequired,
+  tablenum: PropTypes.number.isRequired,
+  onLoadNewList: PropTypes.func.isRequired,
+  lexicon: PropTypes.number.isRequired,
+  preSubmitHook: PropTypes.func.isRequired,
+  notifyError: PropTypes.func.isRequired,
+};
+
+export default ChallengeDialogContainer;
+
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx
index dfc9fdee..f46f9fdc 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog_container.jsx
@@ -83,10 +83,10 @@ SearchDialogContainer.propTypes = {
   // })).isRequired,
   tablenum: PropTypes.number.isRequired,
   onLoadNewList: PropTypes.func.isRequired,
-  disabled: PropTypes.bool.isRequired,
   showSpinner: PropTypes.func.isRequired,
   hideSpinner: PropTypes.func.isRequired,
   api: PropTypes.instanceOf(WordwallsAPI).isRequired,
+  disabled: PropTypes.bool.isRequired,
 };
 
 const DialogContainer = ContainerWithSearchRows(
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
index ce4fa3cd..01787f0b 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
@@ -3,7 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import $ from 'jquery';
-import moment from 'moment';
 
 import ModalSkeleton from '../modal_skeleton';
 import Pills from './pills';
@@ -11,7 +10,7 @@ import Notifications from '../notifications';
 import Sidebar from './sidebar';
 import WordwallsAPI from '../wordwalls_api';
 
-import ChallengeDialog from './challenge_dialog';
+import ChallengeDialogContainer from './challenges/dialog_container';
 import BlankSearchDialogContainer from './blanks/dialog_container';
 import WordSearchDialogContainer from './search/dialog_container';
 import SavedListDialog, { PlayOptions } from './saved_list_dialog';
@@ -37,6 +36,10 @@ HarperCollins Publishers 2015 and used with permission.`;
 
 const DEFAULT_TIME_PER_QUIZ = '5'; // minutes
 
+const notifyError = (error) => {
+  Notifications.alert('Error', `Failed to process: ${error}`);
+};
+
 /**
  * TableCreator should mostly manage its own state, do its own AJAX queries,
  * etc.. It is mostly an independent app. It will have parallels to
@@ -68,18 +71,6 @@ class TableCreator extends React.Component {
 
       desiredTime: DEFAULT_TIME_PER_QUIZ,
       questionsPerRound: 50,
-      // Challenge-related
-      currentDate: moment(),
-      challengesDoneAtDate: [],
-      // Challenge data is leaderboard data.
-      challengeData: {},
-      currentChallenge: 0,
-      // Word-search related
-
-      // blankSearchCriteria: [{
-      //   searchType: SearchTypesEnum.FIXED_LENGTH,
-      //   value: 7,
-      // },],
 
       // Aerolith lists
       aerolithLists: [],
@@ -96,14 +87,15 @@ class TableCreator extends React.Component {
       },
 
     };
-    this.challengeSubmit = this.challengeSubmit.bind(this);
-    this.onChallengeSelected = this.onChallengeSelected.bind(this);
+
     this.selectedListChange = this.selectedListChange.bind(this);
     this.aerolithListSubmit = this.aerolithListSubmit.bind(this);
     this.flashcardAerolithListSubmit = this.flashcardAerolithListSubmit.bind(this);
     this.savedListSubmit = this.savedListSubmit.bind(this);
     this.flashcardSavedListSubmit = this.flashcardSavedListSubmit.bind(this);
     this.listUpload = this.listUpload.bind(this);
+    this.preSubmitHook = this.preSubmitHook.bind(this);
+    this.setTimeAndQuestions = this.setTimeAndQuestions.bind(this);
 
     this.showSpinner = this.showSpinner.bind(this);
     this.hideSpinner = this.hideSpinner.bind(this);
@@ -115,57 +107,23 @@ class TableCreator extends React.Component {
    * some network requests.
    */
   componentDidUpdate(prevProps, prevState) {
-    let challengeParamsChanged = false;
+    // XXX: this should be moved to individual dialog containers.
     // If the lexicon changes, we have to load new word lists no matter what.
-    // If the date changes, we are in the challenges window. We should
-    // mark challenge parameters as having changed.
-    if ((prevState.currentLexicon !== this.state.currentLexicon) ||
-        (prevState.currentDate.format(DATE_FORMAT_STRING) !==
-         this.state.currentDate.format(DATE_FORMAT_STRING))) {
-      // We may need to load new lists or challenges.
+    if (prevState.currentLexicon !== this.state.currentLexicon) {
+      // We may need to load new lists.
       this.loadInfoForListType(this.state.activeListType);
-      challengeParamsChanged = true;
-    }
-    if (prevState.currentChallenge !== this.state.currentChallenge ||
-        challengeParamsChanged) {
-      // The challenge changed. We should load challenge leaderboard data.
-      this.loadChallengeLeaderboardData();
     }
   }
 
-  onChallengeSelected(challID) {
-    const challenge = this.props.challengeInfo.find(c => c.id === challID);
+  setTimeAndQuestions(o) {
     this.setState({
-      currentChallenge: challID,
-      desiredTime: String(challenge.seconds / 60),
-      questionsPerRound: challenge.numQuestions,
+      desiredTime: o.desiredTime,
+      questionsPerRound: o.questionsPerRound,
     });
   }
 
-  loadChallengeLeaderboardData() {
-    if (!this.state.currentChallenge) {
-      return;
-    }
-    this.showSpinner();
-    $.ajax({
-      url: '/wordwalls/api/challengers/',
-      data: {
-        lexicon: this.state.currentLexicon,
-        date: this.state.currentDate.format(DATE_FORMAT_STRING),
-        challenge: this.state.currentChallenge,
-      },
-      method: 'GET',
-    })
-      .done(data => this.setState({ challengeData: data || {} }))
-      .always(() => this.hideSpinner());
-  }
-
   loadInfoForListType(option) {
     switch (option) {
-      case LIST_TYPE_CHALLENGE:
-        this.loadChallengePlayedInfo();
-        break;
-
       case LIST_TYPE_SAVED_LIST:
         this.loadSavedListInfo();
         break;
@@ -182,11 +140,9 @@ class TableCreator extends React.Component {
   // Reset dialog is called from the parent. This is a bit of an anti
   // pattern. We just make sure we reload any lists/etc when a user
   // reopens the dialog.
+  // XXX: TODO fixme
   resetDialog() {
     this.loadInfoForListType(this.state.activeListType);
-    if (this.state.activeListType === LIST_TYPE_CHALLENGE) {
-      this.loadChallengeLeaderboardData();
-    }
   }
 
   showModal() {
@@ -201,30 +157,6 @@ class TableCreator extends React.Component {
     this.props.setLoadingData(false);
   }
 
-  /**
-   * Submit a challenge to the backend.
-   */
-  challengeSubmit() {
-    this.showSpinner();
-    $.ajax({
-      url: '/wordwalls/api/new_challenge/',
-      data: JSON.stringify({
-        lexicon: this.state.currentLexicon,
-        date: this.state.currentDate.format(DATE_FORMAT_STRING),
-        challenge: this.state.currentChallenge,
-        tablenum: this.props.tablenum,
-      }),
-      contentType: 'application/json; charset=utf-8',
-      method: 'POST',
-    })
-      .done(data => this.props.onLoadNewList(data))
-      .fail(jqXHR => Notifications.alert(
-        'Error',
-        `Failed to load challenge: ${jqXHR.responseJSON}`,
-      ))
-      .always(() => this.hideSpinner());
-  }
-
   aerolithListSubmit() {
     this.showSpinner();
     $.ajax({
@@ -332,21 +264,6 @@ class TableCreator extends React.Component {
       .always(() => this.hideSpinner());
   }
 
-  loadChallengePlayedInfo() {
-    // Load the challenge-related stuff.
-    this.showSpinner();
-    $.ajax({
-      url: '/wordwalls/api/challenges_played/',
-      data: {
-        lexicon: this.state.currentLexicon,
-        date: this.state.currentDate.format(DATE_FORMAT_STRING),
-      },
-      method: 'GET',
-    })
-      .done(data => this.setState({ challengesDoneAtDate: data }))
-      .always(() => this.hideSpinner());
-  }
-
   loadAerolithListInfo() {
     this.showSpinner();
     $.ajax({
@@ -406,6 +323,7 @@ class TableCreator extends React.Component {
       selectedList: listId,
     });
   }
+
   /**
    * This hook gets called prior to every submit function, in order to
    * check common things such as the host of the table and whether a game
@@ -426,20 +344,18 @@ class TableCreator extends React.Component {
     switch (this.state.activeListType) {
       case LIST_TYPE_CHALLENGE:
         selectedQuizSearchDialog = (
-          <ChallengeDialog
+          <ChallengeDialogContainer
+            tablenum={this.props.tablenum}
+            onLoadNewList={this.props.onLoadNewList}
             challengeInfo={this.props.challengeInfo}
-            challengesDoneAtDate={this.state.challengesDoneAtDate}
-            challengeData={this.state.challengeData}
-            currentDate={this.state.currentDate}
-            onDateChange={(date) => {
-              this.setState({
-                currentDate: moment(date),
-              });
-            }}
-            onChallengeSubmit={() => this.preSubmitHook(this.challengeSubmit)}
-            onChallengeSelected={/* currying */
-              challID => () => this.onChallengeSelected(challID)}
-            currentChallenge={this.state.currentChallenge}
+            showSpinner={this.showSpinner}
+            hideSpinner={this.hideSpinner}
+            lexicon={this.state.currentLexicon}
+            api={this.api}
+            preSubmitHook={this.preSubmitHook}
+            notifyError={notifyError}
+            setTimeAndQuestions={this.setTimeAndQuestions}
+            disabled={this.props.gameGoing}
           />);
         break;
       case LIST_TYPE_WORDSEARCH:
@@ -447,18 +363,15 @@ class TableCreator extends React.Component {
           <WordSearchDialogContainer
             tablenum={this.props.tablenum}
             onLoadNewList={this.props.onLoadNewList}
-            disabled={this.props.gameGoing}
             showSpinner={this.showSpinner}
             hideSpinner={this.hideSpinner}
             lexicon={this.state.currentLexicon}
             desiredTime={parseFloat(this.state.desiredTime)}
             questionsPerRound={this.state.questionsPerRound}
-            notifyError={error => Notifications.alert(
-              'Error',
-              `Failed to process: ${error}`,
-            )}
+            notifyError={notifyError}
             redirectUrl={TableCreator.redirectUrl}
             api={this.api}
+            disabled={this.props.gameGoing}
           />);
 
         break;
@@ -467,18 +380,15 @@ class TableCreator extends React.Component {
           <BlankSearchDialogContainer
             tablenum={this.props.tablenum}
             onLoadNewList={this.props.onLoadNewList}
-            disabled={this.props.gameGoing}
             showSpinner={this.showSpinner}
             hideSpinner={this.hideSpinner}
             lexicon={this.state.currentLexicon}
             desiredTime={parseFloat(this.state.desiredTime)}
             questionsPerRound={this.state.questionsPerRound}
-            notifyError={error => Notifications.alert(
-              'Error',
-              `Failed to process: ${error}`,
-            )}
+            notifyError={notifyError}
             redirectUrl={TableCreator.redirectUrl}
             api={this.api}
+            disabled={this.props.gameGoing}
           />);
         break;
 
diff --git a/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js
index b2379b57..bcc2b42e 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js
+++ b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js
@@ -9,6 +9,13 @@ import _ from 'underscore';
 import qs from 'qs';
 import Cookies from 'js-cookie';
 
+function getQueryString(params) {
+  const esc = encodeURIComponent;
+  return Object.keys(params || {})
+    .map(k => `${esc(k)}=${esc(params[k])}`)
+    .join('&');
+}
+
 class WordwallsAPI {
   constructor() {
     this.fetchInit = {
@@ -26,7 +33,7 @@ class WordwallsAPI {
     // idempotent, for example, making a new search should look like a GET,
     // but a lot of the time it can result in creating a new table.
     return _.extend(this.fetchInit, {
-      body: JSON.stringify(params),
+      body: method !== 'GET' ? JSON.stringify(params) : null,
       method: method || 'POST',
     });
   }
@@ -42,8 +49,12 @@ class WordwallsAPI {
   }
 
   async call(path, params, method) {
+    let p = '';
+    if (method === 'GET') {
+      p = `?${qs.stringify(params)}`;
+    }
     // eslint-disable-next-line compat/compat
-    const response = await fetch(path, this.fetchdata(params, method));
+    const response = await fetch(`${path}${p}`, this.fetchdata(params, method));
     const data = await response.json();
     if (response.ok) {
       return data;

From 5ac6c8f33c97a1620e5b44c307233ece20a5e9c9 Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Sat, 18 Aug 2018 00:04:26 -0400
Subject: [PATCH 10/18] few more tweaks

---
 .../newtable/challenges/challenge_button.jsx  |  2 +-
 .../newtable/challenges/dialog_container.jsx  |  2 +-
 .../js/wordwalls/newtable/table_creator.jsx   | 27 ++++++++++++++-----
 .../wordwalls/templates/wordwalls/table.html  |  3 ---
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/challenge_button.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/challenge_button.jsx
index fa2de53a..fd2e2f64 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/challenge_button.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/challenge_button.jsx
@@ -18,7 +18,7 @@ const ChallengeButton = (props) => {
   if (props.selectedChallenge === props.challenge.id) {
     extraClassName = 'btn-info';
   } else if (props.solvedChallenges.includes(props.challenge.id)) {
-    extraClassName = 'btn-grayed-out';
+    extraClassName = 'btn-link';
   } else {
     extraClassName = 'btn-default';
   }
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/dialog_container.jsx
index 546d733a..eb66e6b8 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/dialog_container.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/challenges/dialog_container.jsx
@@ -86,7 +86,7 @@ class ChallengeDialogContainer extends React.Component {
   }
 
   loadChallengePlayedInfo() {
-    // Load the challenge-related stuff.
+    // Load info showing whether user has played this challenge.
     this.props.showSpinner();
     this.props.api.call(CHALLENGES_PLAYED_URL, {
       lexicon: this.props.lexicon,
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
index 01787f0b..011e35fe 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
@@ -24,8 +24,6 @@ const LIST_TYPE_AEROLITH_LISTS = 'Aerolith Lists';
 const LIST_TYPE_SAVED_LIST = 'My Saved Lists';
 const FLASHCARD_URL = '/flashcards/';
 
-const DATE_FORMAT_STRING = 'YYYY-MM-DD';
-
 const NO_LOAD_WHILE_PLAYING = (
   'Please wait until the end of the game to perform that action.');
 
@@ -35,6 +33,7 @@ The Collins Official Scrabble Words 2015 (CSW15) is copyright of
 HarperCollins Publishers 2015 and used with permission.`;
 
 const DEFAULT_TIME_PER_QUIZ = '5'; // minutes
+const DEFAULT_TIME_PER_BLANK_QUIZ = '10';
 
 const notifyError = (error) => {
   Notifications.alert('Error', `Failed to process: ${error}`);
@@ -140,9 +139,13 @@ class TableCreator extends React.Component {
   // Reset dialog is called from the parent. This is a bit of an anti
   // pattern. We just make sure we reload any lists/etc when a user
   // reopens the dialog.
-  // XXX: TODO fixme
   resetDialog() {
     this.loadInfoForListType(this.state.activeListType);
+    if (this.challengeDialogContainer) {
+      // XXX: This is an anti-pattern, but modals and React don't play
+      // 100% well together.
+      this.challengeDialogContainer.loadChallengePlayedInfo();
+    }
   }
 
   showModal() {
@@ -356,6 +359,9 @@ class TableCreator extends React.Component {
             notifyError={notifyError}
             setTimeAndQuestions={this.setTimeAndQuestions}
             disabled={this.props.gameGoing}
+            ref={(ref) => {
+              this.challengeDialogContainer = ref;
+            }}
           />);
         break;
       case LIST_TYPE_WORDSEARCH:
@@ -433,10 +439,17 @@ class TableCreator extends React.Component {
             });
             if (option !== LIST_TYPE_CHALLENGE) {
               // Reset the time back to the defaults.
-              this.setState({
-                desiredTime: DEFAULT_TIME_PER_QUIZ,
-                questionsPerRound: 50,
-              });
+              if (option !== LIST_TYPE_BLANKS) {
+                this.setState({
+                  desiredTime: DEFAULT_TIME_PER_QUIZ,
+                  questionsPerRound: 50,
+                });
+              } else {
+                this.setState({
+                  desiredTime: DEFAULT_TIME_PER_BLANK_QUIZ,
+                  questionsPerRound: 50,
+                });
+              }
             }
             this.loadInfoForListType(option);
           }}
diff --git a/djAerolith/wordwalls/templates/wordwalls/table.html b/djAerolith/wordwalls/templates/wordwalls/table.html
index 666d6158..cb5f4657 100644
--- a/djAerolith/wordwalls/templates/wordwalls/table.html
+++ b/djAerolith/wordwalls/templates/wordwalls/table.html
@@ -38,9 +38,6 @@
       max-width:1200px;
     }
   }
-  .btn-grayed-out {
-    background-color: #777777;
-  }
   </style>
 
 {% if USE_GA %}

From 9416cf6d3f91c6ad56c86294ad0e6ed30f8355bf Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Wed, 22 Aug 2018 21:32:47 -0400
Subject: [PATCH 11/18] a comment

---
 djAerolith/wordwalls/api.py | 2 --
 1 file changed, 2 deletions(-)

diff --git a/djAerolith/wordwalls/api.py b/djAerolith/wordwalls/api.py
index a776f58b..957539d5 100644
--- a/djAerolith/wordwalls/api.py
+++ b/djAerolith/wordwalls/api.py
@@ -379,8 +379,6 @@ def date_from_str(dt):
 
     today = timezone.localtime(timezone.now()).date()
     try:
-        # strptime has multithreading issues on Python 2 and this is
-        # an occasional error. XXX: Move to Python 3 already.
         ch_date = strptime(dt, '%Y-%m-%d').date()
     except (ValueError, TypeError):
         ch_date = today

From a5e7fd296f51392fe82a2fe388975d4702745c60 Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Thu, 6 Sep 2018 23:07:41 -0400
Subject: [PATCH 12/18] add brief UX doc

---
 misc/on_demand_blanks.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 misc/on_demand_blanks.md

diff --git a/misc/on_demand_blanks.md b/misc/on_demand_blanks.md
new file mode 100644
index 00000000..d595c137
--- /dev/null
+++ b/misc/on_demand_blanks.md
@@ -0,0 +1,16 @@
+### UX
+
+The UX for on-demand-blanks should be a bit special, and we should move
+some of those changes to the regular quizzes.
+
+Game Inactive Area has a START button, and Solutions/ Challenge Results buttons.
+
+START button should be context-aware:
+- if the first part of the quiz is done (i.e. all words have been quizzed on once):
+    - button should say Quiz on Missed
+    - a new button should show up that says More Like This or similar:
+        - Should load next challenge, next set of 500, next blank search, etc
+        - This button should only show up for challenges, word searches (maybe, if prob based?), blank searches
+        - Not for aerolith lists or saved lists
+- if the quiz is not yet done:
+    - button should say Continue

From 5e9c5a2b74de3d6f18f8632c8b3a3c628d013728 Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Fri, 7 Sep 2018 00:23:07 -0400
Subject: [PATCH 13/18] add a generic_rpc

---
 djAerolith/base/views.py                      |  7 ++-
 .../static/js/wordwalls/generic_rpc.js        | 48 +++++++++++++++++++
 .../newtable/blanks/dialog_container.jsx      |  3 ++
 .../static/js/wordwalls/wordwalls_api.js      |  6 ---
 .../static/js/wordwalls/wordwalls_rpc.js      | 48 ++-----------------
 5 files changed, 60 insertions(+), 52 deletions(-)
 create mode 100644 djAerolith/wordwalls/static/js/wordwalls/generic_rpc.js

diff --git a/djAerolith/base/views.py b/djAerolith/base/views.py
index 5f6b4cd9..910b1e43 100644
--- a/djAerolith/base/views.py
+++ b/djAerolith/base/views.py
@@ -33,7 +33,7 @@
 from base.utils import (generate_question_map_from_alphagrams,
                         generate_question_list_from_alphagrams,
                         question_list_from_probabilities)
-from lib.macondo_interface import anagram_letters
+from lib.macondo_interface import anagram_letters, MacondoError
 from lib.response import response, StatusCode
 
 logger = logging.getLogger(__name__)
@@ -329,5 +329,8 @@ def listmanager(request):
 def word_lookup(request):
     lexicon = request.GET.get('lexicon')
     letters = request.GET.get('letters')
-    results = anagram_letters(lexicon, letters)
+    try:
+        results = anagram_letters(lexicon, letters)
+    except MacondoError as e:
+        return response(str(e), StatusCode.BAD_REQUEST)
     return response(results)
diff --git a/djAerolith/wordwalls/static/js/wordwalls/generic_rpc.js b/djAerolith/wordwalls/static/js/wordwalls/generic_rpc.js
new file mode 100644
index 00000000..fd7861dd
--- /dev/null
+++ b/djAerolith/wordwalls/static/js/wordwalls/generic_rpc.js
@@ -0,0 +1,48 @@
+import WordwallsAPI from './wordwalls_api';
+
+function uniqueId() {
+  return Math.random().toString(36).substring(2)
+    + (new Date()).getTime().toString(36);
+}
+
+class GenericRPC extends WordwallsAPI {
+  /**
+   * Generate a JSON RPC data packet.
+   */
+  constructor() {
+    super();
+    this.RPCURL = null;
+  }
+
+  setRPCURL(url) {
+    this.RPCURL = url;
+  }
+
+  fetchdata(method, params) {
+    return Object.assign(this.fetchInit, {
+      body: JSON.stringify({
+        id: uniqueId(),
+        jsonrpc: '2.0',
+        method,
+        params,
+      }),
+    });
+  }
+
+  async rpcwrap(method, params) {
+    if (!this.RPCURL) {
+      await Promise.reject(new Error('No RPC URL was set.'));
+    }
+    // eslint-disable-next-line compat/compat
+    const response = await fetch(this.RPCURL, this.fetchdata(method, params));
+    const data = await response.json();
+    if (response.ok) {
+      // Use the `result` key - since this is JSONRPC
+      return data.result;
+    }
+    // Otherwise, there's an error.
+    throw new Error(data.error.message);
+  }
+}
+
+export default GenericRPC;
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
index 9fafee13..03848549 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
@@ -24,6 +24,9 @@ class BlanksDialogContainer extends React.Component {
 
   searchSubmit() {
     this.props.showSpinner();
+    this.props.api.call(
+
+    )
   }
 
   flashcardSearchSubmit() {
diff --git a/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js
index bcc2b42e..b37f4c9c 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js
+++ b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js
@@ -9,12 +9,6 @@ import _ from 'underscore';
 import qs from 'qs';
 import Cookies from 'js-cookie';
 
-function getQueryString(params) {
-  const esc = encodeURIComponent;
-  return Object.keys(params || {})
-    .map(k => `${esc(k)}=${esc(params[k])}`)
-    .join('&');
-}
 
 class WordwallsAPI {
   constructor() {
diff --git a/djAerolith/wordwalls/static/js/wordwalls/wordwalls_rpc.js b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_rpc.js
index cb807b20..87546f88 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/wordwalls_rpc.js
+++ b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_rpc.js
@@ -2,58 +2,18 @@
  * @fileOverview The RPC API for the Wordwalls game.
  */
 
-import _ from 'underscore';
+import GenericRPC from './generic_rpc';
 
-import WordwallsAPI from './wordwalls_api';
-
-function uniqueId() {
-  return Math.random().toString(36).substring(2)
-    + (new Date()).getTime().toString(36);
-}
-
-class WordwallsRPC extends WordwallsAPI {
+class WordwallsRPC extends GenericRPC {
   constructor(tablenum) {
     super();
-    this.tablenum = tablenum;
     if (tablenum) {
-      this.tableurl = `/wordwalls/table/${tablenum}/rpc/`;
-    } else {
-      this.tableurl = null;
+      this.setRPCURL(`/wordwalls/table/${tablenum}/rpc/`);
     }
   }
 
   setTablenum(tablenum) {
-    this.tablenum = tablenum;
-    this.tableurl = `/wordwalls/table/${tablenum}/rpc/`;
-  }
-
-  /**
-   * Generate a JSON RPC data packet.
-   */
-  fetchdata(method, params) {
-    return _.extend(this.fetchInit, {
-      body: JSON.stringify({
-        id: uniqueId(),
-        jsonrpc: '2.0',
-        method,
-        params,
-      }),
-    });
-  }
-
-  async rpcwrap(method, params) {
-    if (!this.tableurl) {
-      await Promise.reject(new Error('You are not in a table.'));
-    }
-    // eslint-disable-next-line compat/compat
-    const response = await fetch(this.tableurl, this.fetchdata(method, params));
-    const data = await response.json();
-    if (response.ok) {
-      // Use the `result` key - since this is JSONRPC
-      return data.result;
-    }
-    // Otherwise, there's an error.
-    throw new Error(data.error.message);
+    this.setRPCURL(`/wordwalls/table/${tablenum}/rpc/`);
   }
 
   guess(gstr) {

From b96e692f5e2c39a1241a4b3776ccef57e848118e Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Sat, 8 Sep 2018 10:52:10 -0400
Subject: [PATCH 14/18] send black search criteria to macondo backend

---
 .../static/js/wordwalls/generic_rpc.js        |  4 +-
 .../newtable/blanks/dialog_container.jsx      | 51 ++++++++++++++++---
 .../js/wordwalls/newtable/search/row.jsx      |  3 +-
 .../js/wordwalls/newtable/search/types.js     | 12 ++++-
 .../js/wordwalls/newtable/table_creator.jsx   |  5 ++
 5 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/djAerolith/wordwalls/static/js/wordwalls/generic_rpc.js b/djAerolith/wordwalls/static/js/wordwalls/generic_rpc.js
index fd7861dd..77180f76 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/generic_rpc.js
+++ b/djAerolith/wordwalls/static/js/wordwalls/generic_rpc.js
@@ -9,9 +9,9 @@ class GenericRPC extends WordwallsAPI {
   /**
    * Generate a JSON RPC data packet.
    */
-  constructor() {
+  constructor(rpcURL) {
     super();
-    this.RPCURL = null;
+    this.RPCURL = rpcURL || null;
   }
 
   setRPCURL(url) {
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
index 03848549..d9bce42a 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
@@ -7,10 +7,11 @@ import ContainerWithSearchRows from '../dialog_container_with_search_rows';
 import { SearchTypesEnum, SearchCriterion } from '../search/types';
 
 import WordwallsAPI from '../../wordwalls_api';
+import GenericRPC from '../../generic_rpc';
 
 const allowedSearchTypes = new Set([
   SearchTypesEnum.FIXED_LENGTH,
-  SearchTypesEnum.NUM_ANAGRAMS,
+  SearchTypesEnum.MAX_SOLUTIONS,
   SearchTypesEnum.NUM_TWO_BLANKS,
 ]);
 
@@ -22,11 +23,41 @@ class BlanksDialogContainer extends React.Component {
     this.flashcardSearchSubmit = this.flashcardSearchSubmit.bind(this);
   }
 
+  // Return the NAME of the lexicon, rather than the number. Macondo requires
+  // the lexicon name.
+  getLexiconName() {
+    return this.props.availableLexica.find(el => el.id === this.props.lexicon).lexicon;
+  }
+
   searchSubmit() {
     this.props.showSpinner();
-    this.props.api.call(
-
-    )
+    let wordLength;
+    let maxSolutions;
+    let num2Blanks;
+    this.props.searches.forEach((search) => {
+      switch (search.searchType) {
+        case SearchTypesEnum.FIXED_LENGTH:
+          wordLength = search.options.value;
+          break;
+        case SearchTypesEnum.MAX_SOLUTIONS:
+          maxSolutions = search.options.value;
+          break;
+        case SearchTypesEnum.NUM_TWO_BLANKS:
+          num2Blanks = search.options.value;
+          break;
+        default:
+          throw new Error('Unhandled search type');
+      }
+    });
+    this.props.macondoRPC.rpcwrap('AnagramService.BlankChallenge', {
+      wordLength,
+      numQuestions: this.props.questionsPerRound,
+      lexicon: this.getLexiconName(),
+      maxSolutions,
+      num2Blanks,
+    })
+      .then(result => console.log(result))
+      .catch(error => this.props.notifyError(error));
   }
 
   flashcardSearchSubmit() {
@@ -47,6 +78,12 @@ class BlanksDialogContainer extends React.Component {
 BlanksDialogContainer.propTypes = {
   searches: PropTypes.arrayOf(PropTypes.instanceOf(SearchCriterion)).isRequired,
   lexicon: PropTypes.number.isRequired,
+  availableLexica: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number,
+    lexicon: PropTypes.string,
+    description: PropTypes.string,
+    counts: PropTypes.object,
+  })).isRequired,
   desiredTime: PropTypes.number.isRequired,
   questionsPerRound: PropTypes.number.isRequired,
   notifyError: PropTypes.func.isRequired,
@@ -62,6 +99,7 @@ BlanksDialogContainer.propTypes = {
   showSpinner: PropTypes.func.isRequired,
   hideSpinner: PropTypes.func.isRequired,
   api: PropTypes.instanceOf(WordwallsAPI).isRequired,
+  macondoRPC: PropTypes.instanceOf(GenericRPC).isRequired,
   disabled: PropTypes.bool.isRequired,
 };
 
@@ -72,9 +110,8 @@ const DialogContainer = ContainerWithSearchRows(
     new SearchCriterion(SearchTypesEnum.FIXED_LENGTH, {
       value: 7,
     }),
-    new SearchCriterion(SearchTypesEnum.NUM_ANAGRAMS, {
-      minValue: 1,
-      maxValue: 10,
+    new SearchCriterion(SearchTypesEnum.MAX_SOLUTIONS, {
+      value: 5,
     }),
     new SearchCriterion(SearchTypesEnum.NUM_TWO_BLANKS, {
       value: 4,
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
index a1c85d2e..7efd0354 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/row.jsx
@@ -108,10 +108,11 @@ const SearchRow = (props) => {
       break;
     case SearchTypesEnum.FIXED_LENGTH:
     case SearchTypesEnum.NUM_TWO_BLANKS:
+    case SearchTypesEnum.MAX_SOLUTIONS:
       specificForm = (
         <NumberValue
           label="Value"
-          paramName="Value"
+          paramName="value"
           defaultValue={props.searchCriteria.value}
           minAllowed={props.minAllowedValue}
           maxAllowed={props.maxAllowedValue}
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
index 6f626be4..e62aba9e 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
@@ -7,6 +7,7 @@ const SearchTypesEnum = {
   NUM_VOWELS: 6,
   FIXED_LENGTH: 7,
   NUM_TWO_BLANKS: 8,
+  MAX_SOLUTIONS: 9,
   /**
    * The inputs won't allow user to go beyond minAllowed and maxAllowed.
    * defaultMin and defaultMax are the values that show up when the
@@ -72,6 +73,13 @@ const SearchTypesEnum = {
       minAllowed: 1,
       maxAllowed: 50,
     },
+    9: {
+      name: 'max_solutions',
+      displayName: 'Maximum number of anagrams',
+      default: 5,
+      minAllowed: 1,
+      maxAllowed: 200,
+    },
   },
 };
 
@@ -84,6 +92,7 @@ const SearchTypesOrder = [
   SearchTypesEnum.FIXED_LENGTH,
   SearchTypesEnum.TAGS,
   SearchTypesEnum.NUM_TWO_BLANKS,
+  SearchTypesEnum.MAX_SOLUTIONS,
 ];
 
 function searchCriteriaOptions(allowedSearchTypes) {
@@ -161,7 +170,8 @@ function searchCriterionToAdd(wordSearchCriteria, allowedSearchTypes) {
     });
   }
   if (newtypeId === SearchTypesEnum.FIXED_LENGTH ||
-      newtypeId === SearchTypesEnum.NUM_TWO_BLANKS) {
+      newtypeId === SearchTypesEnum.NUM_TWO_BLANKS ||
+      newtypeId === SearchTypesEnum.MAX_SOLUTIONS) {
     return new SearchCriterion(newtypeId, {
       value: SearchTypesEnum.properties[newtypeId].default,
     });
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
index 011e35fe..20b45b98 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
@@ -9,6 +9,7 @@ import Pills from './pills';
 import Notifications from '../notifications';
 import Sidebar from './sidebar';
 import WordwallsAPI from '../wordwalls_api';
+import GenericRPC from '../generic_rpc';
 
 import ChallengeDialogContainer from './challenges/dialog_container';
 import BlankSearchDialogContainer from './blanks/dialog_container';
@@ -99,6 +100,7 @@ class TableCreator extends React.Component {
     this.showSpinner = this.showSpinner.bind(this);
     this.hideSpinner = this.hideSpinner.bind(this);
     this.api = new WordwallsAPI();
+    this.macondoRPC = new GenericRPC('/macondo/rpc');
   }
 
   /**
@@ -145,6 +147,7 @@ class TableCreator extends React.Component {
       // XXX: This is an anti-pattern, but modals and React don't play
       // 100% well together.
       this.challengeDialogContainer.loadChallengePlayedInfo();
+      this.challengeDialogContainer.loadChallengeLeaderboardData();
     }
   }
 
@@ -389,11 +392,13 @@ class TableCreator extends React.Component {
             showSpinner={this.showSpinner}
             hideSpinner={this.hideSpinner}
             lexicon={this.state.currentLexicon}
+            availableLexica={this.props.availableLexica}
             desiredTime={parseFloat(this.state.desiredTime)}
             questionsPerRound={this.state.questionsPerRound}
             notifyError={notifyError}
             redirectUrl={TableCreator.redirectUrl}
             api={this.api}
+            macondoRPC={this.macondoRPC}
             disabled={this.props.gameGoing}
           />);
         break;

From 04abc6d1f95852df9e0cd0a5480912795c185a47 Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Sun, 9 Sep 2018 09:20:57 -0400
Subject: [PATCH 15/18] blank challenge working!

---
 djAerolith/lib/word_db_helper.py              | 10 ++++++++-
 djAerolith/wordwalls/api.py                   | 19 ++++++++++++++++-
 djAerolith/wordwalls/api_urls.py              |  2 ++
 djAerolith/wordwalls/game.py                  | 18 +++++++++++++++-
 .../newtable/blanks/dialog_container.jsx      | 21 ++++++++++++-------
 5 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/djAerolith/lib/word_db_helper.py b/djAerolith/lib/word_db_helper.py
index 46dab2c0..70eb10b9 100644
--- a/djAerolith/lib/word_db_helper.py
+++ b/djAerolith/lib/word_db_helper.py
@@ -123,6 +123,14 @@ def set_from_json(self, json_string):
 
         """
         qs = json.loads(json_string)
+        self.set_from_list(qs)
+
+    def set_from_list(self, qs):
+        """
+        Set Questions from a Python list, that looks like
+        [{'q': 'ABC', 'a': ['CAB']}, ... ]
+
+        """
         self.clear()
         for q in qs:
             question = Question()
@@ -192,7 +200,7 @@ def __repr__(self):
 
     def __str__(self):
         return '<Question: %s (%s)>' % (self.alphagram,
-                                         self.answers)
+                                        self.answers)
 
 
 class WordDB:
diff --git a/djAerolith/wordwalls/api.py b/djAerolith/wordwalls/api.py
index 957539d5..a192aa72 100644
--- a/djAerolith/wordwalls/api.py
+++ b/djAerolith/wordwalls/api.py
@@ -138,7 +138,7 @@ def wrap(request, *args, **kwargs):
         parsed_req['list_option'] = body.get('listOption')
         parsed_req['selectedList'] = body.get('selectedList')
         parsed_req['multiplayer'] = body.get('multiplayer', False)
-
+        parsed_req['raw_questions'] = body.get('rawQuestions', False)
         return f(request, parsed_req, *args, **kwargs)
 
     return wrap
@@ -295,6 +295,23 @@ def load_saved_list(request, parsed_req_body):
     return table_response(tablenum)
 
 
+@login_required
+@require_POST
+@load_new_words
+def load_raw_questions(request, parsed_req_body):
+    try:
+        tablenum = WordwallsGame().initialize_by_raw_questions(
+            parsed_req_body['lexicon'], request.user,
+            parsed_req_body['raw_questions'],
+            parsed_req_body['quiz_time_secs'],
+            parsed_req_body['questions_per_round'],
+            use_table=parsed_req_body['tablenum'],
+            multiplayer=parsed_req_body['multiplayer'])
+    except GameInitException as e:
+        return bad_request(str(e))
+    return table_response(tablenum)
+
+
 @login_required
 @require_GET
 def default_lists(request):
diff --git a/djAerolith/wordwalls/api_urls.py b/djAerolith/wordwalls/api_urls.py
index 08c48cce..b72a3e14 100644
--- a/djAerolith/wordwalls/api_urls.py
+++ b/djAerolith/wordwalls/api_urls.py
@@ -27,6 +27,7 @@
     new_search,
     load_aerolith_list,
     load_saved_list,
+    load_raw_questions,
 )
 
 urlpatterns = [
@@ -38,6 +39,7 @@
     url(r'^new_search/$', new_search),
     url(r'^load_aerolith_list/$', load_aerolith_list),
     url(r'^load_saved_list/$', load_saved_list),
+    url(r'^load_raw_questions/$', load_raw_questions),
 
     # url(r'^getNewSignature/$', 'wordwalls.views.get_new_signature',
     # name='get_new_signature')
diff --git a/djAerolith/wordwalls/game.py b/djAerolith/wordwalls/game.py
index 4550a55f..f3c65f77 100644
--- a/djAerolith/wordwalls/game.py
+++ b/djAerolith/wordwalls/game.py
@@ -17,6 +17,7 @@
 # To contact the author, please email delsolar at gmail dot com
 
 import json
+import datetime
 import time
 import copy
 import logging
@@ -29,7 +30,8 @@
 from gargoyle import gargoyle
 
 from base.forms import SavedListForm
-from lib.word_db_helper import WordDB, Questions, word_search, BadInput
+from lib.word_db_helper import (WordDB, Questions, Question, word_search,
+                                BadInput)
 from lib.word_searches import temporary_list_name
 from wordwalls.challenges import generate_dc_questions, toughies_challenge_date
 from base.models import WordList
@@ -269,6 +271,20 @@ def initialize_by_search_params(self, user, search_description, time_secs,
             questionsToPull=questions_per_round)
         return wgm.pk   # this is a table number id!
 
+    def initialize_by_raw_questions(self, lex, user, raw_questions, secs,
+                                    questions_per_round, use_table,
+                                    multiplayer):
+        dt = datetime.datetime.today().strftime('%Y-%m-%d %H:%M:%S')
+        qs = Questions()
+        qs.set_from_list(raw_questions)
+
+        wl = self.initialize_word_list(qs, lex, user)
+        wgm = self.create_or_update_game_instance(
+            user, lex, wl, use_table, multiplayer, timerSecs=secs,
+            temp_list_name='quiz on {}'.format(dt),
+            questionsToPull=questions_per_round)
+        return wgm.pk
+
     def initialize_by_named_list(self, lex, user, named_list, secs,
                                  questions_per_round=None, use_table=None,
                                  multiplayer=None):
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
index d9bce42a..c3817758 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
@@ -9,6 +9,8 @@ import { SearchTypesEnum, SearchCriterion } from '../search/types';
 import WordwallsAPI from '../../wordwalls_api';
 import GenericRPC from '../../generic_rpc';
 
+const RAW_QUESTIONS_URL = '/wordwalls/api/load_raw_questions/';
+
 const allowedSearchTypes = new Set([
   SearchTypesEnum.FIXED_LENGTH,
   SearchTypesEnum.MAX_SOLUTIONS,
@@ -56,8 +58,17 @@ class BlanksDialogContainer extends React.Component {
       maxSolutions,
       num2Blanks,
     })
-      .then(result => console.log(result))
-      .catch(error => this.props.notifyError(error));
+      .then(result => this.props.api.call(RAW_QUESTIONS_URL, {
+        lexicon: this.props.lexicon,
+        rawQuestions: result.questions,
+        desiredTime: this.props.desiredTime,
+        questionsPerRound: this.props.questionsPerRound,
+        tablenum: this.props.tablenum,
+      }).then(data => this.props.onLoadNewList(data))
+        .catch(error => this.props.notifyError(error)))
+
+      .catch(error => this.props.notifyError(error))
+      .finally(() => this.props.hideSpinner());
   }
 
   flashcardSearchSubmit() {
@@ -88,12 +99,6 @@ BlanksDialogContainer.propTypes = {
   questionsPerRound: PropTypes.number.isRequired,
   notifyError: PropTypes.func.isRequired,
   redirectUrl: PropTypes.func.isRequired,
-  // availableLexica: PropTypes.arrayOf(PropTypes.shape({
-  //   id: PropTypes.number,
-  //   lexicon: PropTypes.string,
-  //   description: PropTypes.string,
-  //   counts: PropTypes.object,
-  // })).isRequired,
   tablenum: PropTypes.number.isRequired,
   onLoadNewList: PropTypes.func.isRequired,
   showSpinner: PropTypes.func.isRequired,

From 25f339c7d5bcee86de8389a8ca8050d980e1b408 Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Wed, 12 Sep 2018 00:11:02 -0400
Subject: [PATCH 16/18] fix some error handling; hide flashcard

---
 djAerolith/wordwalls/api.py                   |  4 +-
 .../static/js/wordwalls/generic_rpc.js        |  7 +-
 .../newtable/blanks/dialog_container.jsx      |  7 +-
 .../js/wordwalls/newtable/search/dialog.jsx   | 94 +++++++++++++------
 .../static/js/wordwalls/solution.jsx          |  2 +-
 .../static/js/wordwalls/solutions.jsx         |  2 +-
 .../static/js/wordwalls/wordwalls_api.js      | 12 +--
 7 files changed, 79 insertions(+), 49 deletions(-)

diff --git a/djAerolith/wordwalls/api.py b/djAerolith/wordwalls/api.py
index a192aa72..7f9949b3 100644
--- a/djAerolith/wordwalls/api.py
+++ b/djAerolith/wordwalls/api.py
@@ -131,9 +131,9 @@ def wrap(request, *args, **kwargs):
 
         parsed_req['questions_per_round'] = body.get('questionsPerRound', 50)
         if (parsed_req['questions_per_round'] > 200 or
-                parsed_req['questions_per_round'] < 15):
+                parsed_req['questions_per_round'] < 10):
             return bad_request(
-                'Questions per round must be between 15 and 200.')
+                'Questions per round must be between 10 and 200.')
         parsed_req['search_criteria'] = body.get('searchCriteria', [])
         parsed_req['list_option'] = body.get('listOption')
         parsed_req['selectedList'] = body.get('selectedList')
diff --git a/djAerolith/wordwalls/static/js/wordwalls/generic_rpc.js b/djAerolith/wordwalls/static/js/wordwalls/generic_rpc.js
index 77180f76..109d7716 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/generic_rpc.js
+++ b/djAerolith/wordwalls/static/js/wordwalls/generic_rpc.js
@@ -19,14 +19,15 @@ class GenericRPC extends WordwallsAPI {
   }
 
   fetchdata(method, params) {
-    return Object.assign(this.fetchInit, {
+    return {
+      ...this.fetchInit,
       body: JSON.stringify({
         id: uniqueId(),
         jsonrpc: '2.0',
         method,
         params,
       }),
-    });
+    };
   }
 
   async rpcwrap(method, params) {
@@ -36,7 +37,7 @@ class GenericRPC extends WordwallsAPI {
     // eslint-disable-next-line compat/compat
     const response = await fetch(this.RPCURL, this.fetchdata(method, params));
     const data = await response.json();
-    if (response.ok) {
+    if (response.ok && data.result) {
       // Use the `result` key - since this is JSONRPC
       return data.result;
     }
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
index c3817758..9197fb74 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
@@ -22,7 +22,6 @@ class BlanksDialogContainer extends React.Component {
   constructor(props) {
     super(props);
     this.searchSubmit = this.searchSubmit.bind(this);
-    this.flashcardSearchSubmit = this.flashcardSearchSubmit.bind(this);
   }
 
   // Return the NAME of the lexicon, rather than the number. Macondo requires
@@ -71,15 +70,11 @@ class BlanksDialogContainer extends React.Component {
       .finally(() => this.props.hideSpinner());
   }
 
-  flashcardSearchSubmit() {
-    this.props.showSpinner();
-  }
-
   render() {
     return (
       <BlankSearchDialog
         onSearchSubmit={this.searchSubmit}
-        onFlashcardSubmit={this.flashcardSearchSubmit}
+        flashcardAllowed={false}
         allowedSearchTypes={allowedSearchTypes}
         {...this.props}
       />);
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx
index a5c4af26..a3db9d28 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/dialog.jsx
@@ -4,37 +4,70 @@ import PropTypes from 'prop-types';
 import SearchRows from './rows';
 import { SearchCriterion } from './types';
 
-const WordSearchDialog = props => (
-  <div className="row" style={{ marginTop: '8px' }}>
-    <div className="col-sm-8">
-      <SearchRows
-        searches={props.searches}
-        addSearchRow={props.addSearchRow}
-        removeSearchRow={props.removeSearchRow}
-        modifySearchType={props.onSearchTypeChange}
-        modifySearchParam={props.onSearchParamChange}
-        allowedSearchTypes={props.allowedSearchTypes}
-      />
-      <button
-        className="btn btn-primary submit-word-search"
-        style={{ marginTop: '0.75em' }}
-        onClick={props.onSearchSubmit}
-        data-dismiss="modal"
-        disabled={props.disabled ? 'disabled' : ''}
-      >Play!
-      </button>
-      <button
-        className="btn btn-info"
-        style={{ marginTop: '0.75em', marginLeft: '1em' }}
-        onClick={props.onFlashcardSubmit}
-        data-dismiss="modal"
-        disabled={props.disabled ? 'disabled' : ''}
-      >Flashcard
-      </button>
-    </div>
-  </div>
+const PlayButton = props => (
+  <button
+    className="btn btn-primary submit-word-search"
+    style={{ marginTop: '0.75em' }}
+    onClick={props.onSearchSubmit}
+    data-dismiss="modal"
+    disabled={props.disabled ? 'disabled' : ''}
+  >Play!
+  </button>
+);
+
+PlayButton.propTypes = {
+  onSearchSubmit: PropTypes.func.isRequired,
+  disabled: PropTypes.bool.isRequired,
+};
+
+const FlashcardButton = props => (
+  <button
+    className="btn btn-info"
+    style={{ marginTop: '0.75em', marginLeft: '1em' }}
+    onClick={props.onFlashcardSubmit}
+    data-dismiss="modal"
+    disabled={props.disabled ? 'disabled' : ''}
+  >Flashcard
+  </button>
 );
 
+FlashcardButton.propTypes = {
+  onFlashcardSubmit: PropTypes.func.isRequired,
+  disabled: PropTypes.bool.isRequired,
+};
+
+const WordSearchDialog = (props) => {
+  const flashcardButton = props.flashcardAllowed ? (
+    <FlashcardButton
+      onFlashcardSubmit={props.onFlashcardSubmit}
+      disabled={props.disabled}
+    />
+  ) : null;
+  return (
+    <div className="row" style={{ marginTop: '8px' }}>
+      <div className="col-sm-8">
+        <SearchRows
+          searches={props.searches}
+          addSearchRow={props.addSearchRow}
+          removeSearchRow={props.removeSearchRow}
+          modifySearchType={props.onSearchTypeChange}
+          modifySearchParam={props.onSearchParamChange}
+          allowedSearchTypes={props.allowedSearchTypes}
+        />
+        <PlayButton
+          onSearchSubmit={props.onSearchSubmit}
+          disabled={props.disabled}
+        />
+        {flashcardButton}
+      </div>
+    </div>
+  );
+};
+
+WordSearchDialog.defaultProps = {
+  flashcardAllowed: true,
+  onFlashcardSubmit: () => {},
+};
 
 WordSearchDialog.propTypes = {
   searches: PropTypes.arrayOf(PropTypes.instanceOf(SearchCriterion)).isRequired,
@@ -43,7 +76,8 @@ WordSearchDialog.propTypes = {
   addSearchRow: PropTypes.func.isRequired,
   removeSearchRow: PropTypes.func.isRequired,
   onSearchSubmit: PropTypes.func.isRequired,
-  onFlashcardSubmit: PropTypes.func.isRequired,
+  onFlashcardSubmit: PropTypes.func,
+  flashcardAllowed: PropTypes.bool,
   disabled: PropTypes.bool.isRequired,
   allowedSearchTypes: PropTypes.instanceOf(Set).isRequired,
 };
diff --git a/djAerolith/wordwalls/static/js/wordwalls/solution.jsx b/djAerolith/wordwalls/static/js/wordwalls/solution.jsx
index b0fe7fac..8985d85c 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/solution.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/solution.jsx
@@ -98,7 +98,7 @@ Solution.propTypes = {
   word: PropTypes.string.isRequired,
   lexiconSymbols: PropTypes.string.isRequired,
   wordPos: PropTypes.number.isRequired,
-  probability: PropTypes.number.isRequired,
+  probability: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   frontHooks: PropTypes.string.isRequired,
   backHooks: PropTypes.string.isRequired,
   definition: PropTypes.string.isRequired,
diff --git a/djAerolith/wordwalls/static/js/wordwalls/solutions.jsx b/djAerolith/wordwalls/static/js/wordwalls/solutions.jsx
index 9c3f054c..bd0697ec 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/solutions.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/solutions.jsx
@@ -15,7 +15,7 @@ const Solutions = (props) => {
         key={wordIdx}
         wordPos={wordPos}
         idx={question.get('idx')}
-        probability={question.get('p')}
+        probability={question.get('p') || ''}
         alphagram={question.get('a')}
         frontHooks={word.get('fh')}
         backHooks={word.get('bh')}
diff --git a/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js
index b37f4c9c..24df53a6 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js
+++ b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_api.js
@@ -5,11 +5,9 @@
  *
  * Might move this over to RPC eventually.
  */
-import _ from 'underscore';
 import qs from 'qs';
 import Cookies from 'js-cookie';
 
-
 class WordwallsAPI {
   constructor() {
     this.fetchInit = {
@@ -26,20 +24,22 @@ class WordwallsAPI {
     // Note that we default to POST. A lot of these API requests are not
     // idempotent, for example, making a new search should look like a GET,
     // but a lot of the time it can result in creating a new table.
-    return _.extend(this.fetchInit, {
+    return {
+      ...this.fetchInit,
       body: method !== 'GET' ? JSON.stringify(params) : null,
       method: method || 'POST',
-    });
+    };
   }
 
   fetchdataLegacy(params) {
-    return _.extend(this.fetchInit, {
+    return {
+      ...this.fetchInit,
       body: qs.stringify(params),
       headers: new Headers({
         'Content-Type': 'application/x-www-form-urlencoded',
         'X-CSRFToken': Cookies.get('csrftoken'),
       }),
-    });
+    };
   }
 
   async call(path, params, method) {

From f175944eab3a905d44eb19cf41bb95fc76a8c2c2 Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Thu, 13 Sep 2018 23:27:23 -0400
Subject: [PATCH 17/18] minor bug fixes

---
 .../js/wordwalls/newtable/blanks/dialog_container.jsx | 11 ++++++++++-
 .../newtable/dialog_container_with_search_rows.jsx    |  3 ++-
 .../static/js/wordwalls/newtable/search/types.js      |  6 ++++++
 .../static/js/wordwalls/newtable/table_creator.jsx    |  2 +-
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
index 9197fb74..9e9249a7 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/blanks/dialog_container.jsx
@@ -66,7 +66,16 @@ class BlanksDialogContainer extends React.Component {
       }).then(data => this.props.onLoadNewList(data))
         .catch(error => this.props.notifyError(error)))
 
-      .catch(error => this.props.notifyError(error))
+      .catch((error) => {
+        if (error.message.includes('context deadline exceeded')) {
+          this.props.notifyError([
+            'Your query took too long; please try either fewer questions ',
+            'or a shorter word length.',
+          ].join(''));
+        } else {
+          this.props.notifyError(error);
+        }
+      })
       .finally(() => this.props.hideSpinner());
   }
 
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/dialog_container_with_search_rows.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/dialog_container_with_search_rows.jsx
index d31d0de6..60241ef5 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/dialog_container_with_search_rows.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/dialog_container_with_search_rows.jsx
@@ -16,9 +16,10 @@ function withSearchRows(WrappedDialogContainer, allowedSearchTypes, searchCriter
       this.addSearchRow = this.addSearchRow.bind(this);
       this.removeSearchRow = this.removeSearchRow.bind(this);
 
+      const scCopy = searchCriteria.map(sc => sc.deepCopy());
       this.state = {
         // Do a deep copy.
-        searchCriteria: [...searchCriteria],
+        searchCriteria: scCopy,
       };
       this.allowedSearchTypes = allowedSearchTypes;
     }
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
index e62aba9e..f242ebcb 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/search/types.js
@@ -109,6 +109,12 @@ class SearchCriterion {
     this.searchType = searchType;
     this.options = options;
   }
+
+  deepCopy() {
+    return new SearchCriterion(this.searchType, {
+      ...this.options,
+    });
+  }
   /**
    * Convert this to an object that the backend would understand.
    */
diff --git a/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx b/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
index 20b45b98..042ee9f2 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/newtable/table_creator.jsx
@@ -37,7 +37,7 @@ const DEFAULT_TIME_PER_QUIZ = '5'; // minutes
 const DEFAULT_TIME_PER_BLANK_QUIZ = '10';
 
 const notifyError = (error) => {
-  Notifications.alert('Error', `Failed to process: ${error}`);
+  Notifications.alert('Error', `${error}`);
 };
 
 /**

From 3f832b0383f8217bd8fbdf4e90737ce240d2d6f4 Mon Sep 17 00:00:00 2001
From: Cesar Del Solar <delsolar@gmail.com>
Date: Thu, 13 Sep 2018 23:38:24 -0400
Subject: [PATCH 18/18] add inner hooks; close #295; add current version

---
 djAerolith/current_version.py                         | 2 +-
 djAerolith/wordwalls/static/js/wordwalls/user_box.jsx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/djAerolith/current_version.py b/djAerolith/current_version.py
index ce7bac37..fd348482 100644
--- a/djAerolith/current_version.py
+++ b/djAerolith/current_version.py
@@ -1 +1 @@
-CURRENT_VERSION = '1.1.2.0'
+CURRENT_VERSION = '1.1.3.0'
diff --git a/djAerolith/wordwalls/static/js/wordwalls/user_box.jsx b/djAerolith/wordwalls/static/js/wordwalls/user_box.jsx
index eba8c6a6..6106107b 100644
--- a/djAerolith/wordwalls/static/js/wordwalls/user_box.jsx
+++ b/djAerolith/wordwalls/static/js/wordwalls/user_box.jsx
@@ -22,7 +22,9 @@ const UserBox = (props) => {
           classes="text-info small"
         />
         <WordPartDisplay
-          text={`${word.get('w')}${showLexiconSymbols ? word.get('s') : ''}`}
+          text={
+            `${word.get('ifh') ? '･' : ''}${word.get('w')}` +
+            `${word.get('ibh') ? '･' : ''}${showLexiconSymbols ? word.get('s') : ''}`}
         />
         <WordPartDisplay
           text={` ${word.get('bh')}`}