Step 2: select auto-suggestions.

Author: Treora

main.css

@@ -52,7 +52,6 @@ svg#edges {
     border-radius: 10px;
     background-color: white;
     position: absolute;
-    overflow: hidden;
     box-shadow: 3px 3px 10px #888;
 }
 
@@ -61,22 +60,45 @@ svg#edges {
 }
 
 .emptyItemForm {
-    display: flex;
-    margin-top: 10px;
+    margin-top: 15px;
 }
 
-.emptyItemForm > input[type=text] {
-    flex-grow: 0.7;
-    border: 0px;
+.emptyItemForm .emptyItemInput {
+    width: 90%;
+    margin-left: 5%;
+    box-sizing: border-box;
+    border: none;
     outline: none;
-    padding: 5px 5px 5px 10px;
     font-family: mono;
 }
 
-.emptyItem .autoCompleteSuggestion {
+.emptyItemForm ul.react-autosuggest__suggestions-container {
+    padding-left: 20px;
+    padding-right: 20px;
+    list-style: none;
+}
+
+.emptyItemForm li.react-autosuggest__suggestion {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding: 5px;
+    margin-top: 1px;
+    background-color: #fff;
+    box-shadow: 3px 3px 10px #888;
+}
+
+.emptyItemForm li.react-autosuggest__suggestion:last-child {
+    border-radius: 0 0 7px 7px;
+}
+
+.emptyItemForm li.react-autosuggest__suggestion--focused {
+    background-color: #ffe;
 }
 
 .note {
+    overflow: hidden;
     background-color: #FFD;
     width: 100%;
     height: 100%;
@@ -91,8 +113,8 @@ svg#edges {
 }
 
 .webpage-iframe-wrapper-container {
-    position:'relative';
-    overflow: 'hidden';
+    position: relative;
+    overflow: hidden;
 }
 
 .webpage-iframe-scaling-container {

package.json

@@ -17,6 +17,7 @@
     "lodash": "^4.11.1",
     "pouchdb": "^5.3.1",
     "react": "^0.14.8",
+    "react-autosuggest": "^3.8.0",
     "react-contenteditable": "git://github.com/Treora/react-contenteditable#userIsKing",
     "react-dom": "^0.14.8",
     "react-motion": "^0.4.3",

src/actions.js

@@ -2,6 +2,7 @@ import { createAction } from 'redux-act'
 
 import canvas from './canvas'
 import storage from './storage'
+import { getEmptyItemState } from './selectors'
 import { asUrl, textToHtml } from './utils'
 
 // Clean the canvas and show an empty item
@@ -181,22 +182,18 @@ export function handleDraggedOut({itemId, dir}) {
     }
 }
 
-export function updateAutoComplete({value, itemId}) {
+export function updateAutoSuggest({itemId}) {
     return function(dispatch, getState) {
-        let suggestions
-        if (value.length < 3)
-            suggestions = []
-        else
-            suggestions = dispatch(chooseAutoCompleteSuggestions({value}))
-        dispatch(setAutoCompleteSuggestions({itemId, suggestions}))
+        // Tell UI to show suggestions for the current input
+        dispatch(updateEmptyItemSuggestions({itemId}))
+        // Let store search for suggestions
+        let inputValue = getEmptyItemState(getState(), itemId).inputValue
+        let suggestions = storage.autoSuggestSearch(getState().storage, {inputValue})
+        // Update list of suggestions for this user input
+        dispatch(setAutoSuggestSuggestions({inputValue, suggestions}))
     }
 }
 
-function chooseAutoCompleteSuggestions({value}) {
-    return function (dispatch, getState) {
-        let suggestions = storage.autoCompleteSearch(getState().storage, {text: value})
-        return suggestions
-    }
-}
-
-export let setAutoCompleteSuggestions = createAction()
+export let setAutoSuggestSuggestions = createAction()
+export let setEmptyItemValue = createAction()
+export let updateEmptyItemSuggestions = createAction()

src/components/EmptyItem.jsx

@@ -1,43 +1,52 @@
 import React from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
+import Autosuggest from 'react-autosuggest'
 
-import { navigateTo, updateAutoComplete } from '../actions'
-import { getAutoCompleteSuggestions } from '../selectors'
+import { navigateTo, updateAutoSuggest, setEmptyItemValue } from '../actions'
+import { getEmptyItemState, getAutoSuggestSuggestions } from '../selectors'
 
 let EmptyItem = React.createClass({
 
     render() {
         const submitForm = event => {
             event.preventDefault()
-            let value = this.refs['urlInput'].value.trim()
-            this.refs['urlInput'].value = ''
-            if (value) {
-                this.props.submitForm(value)
+            let inputValue = this.props.inputValue.trim()
+            if (inputValue) {
+                this.props.submitForm(inputValue)
             }
         }
+
+        const inputProps = {
+            value: this.props.inputValue,
+            type: 'text',
+            placeholder: '.....',
+            className: 'emptyItemInput',
+            onFocus: () => this.props.focus(),
+            onBlur: () => this.props.blur(),
+            onChange: (e, {newValue}) => this.props.changed(newValue),
+        }
+        const suggestions = this.props.suggestions
+        const renderSuggestion = suggestion => (
+            <span dangerouslySetInnerHTML={{__html: suggestion}} />
+        )
+        const getSuggestionValue = s => s
+        const onSuggestionSelected = (event, {suggestionValue}) => {
+            event.preventDefault()
+            this.props.submitForm(suggestionValue)
+        }
         return (
             <div className='emptyItem'>
-                <form className='emptyItemForm' onSubmit={submitForm}>
-                    <input
-                        ref='urlInput'
-                        type='text'
-                        placeholder='.....'
-                        onFocus={() => this.props.focus()}
-                        onBlur={() => this.props.blur()}
-                        onChange={(e) => this.props.changed(e.target.value)}
-                    ></input>
+                <form ref='form' className='emptyItemForm' onSubmit={submitForm}>
+                    <Autosuggest
+                        suggestions={suggestions}
+                        onSuggestionsUpdateRequested={this.props.updateAutoSuggest}
+                        onSuggestionSelected={onSuggestionSelected}
+                        getSuggestionValue={getSuggestionValue}
+                        renderSuggestion={renderSuggestion}
+                        inputProps={inputProps}
+                    />
                 </form>
-                <ul className='autoCompleteSuggestionList'>
-                    {this.props.suggestions.map(suggestion =>
-                        <li
-                            className='autoCompleteSuggestion'
-                            key={suggestion}
-                            dangerouslySetInnerHTML={{__html: suggestion}}
-                        >
-                        </li>
-                    )}
-                </ul>
             </div>
         )
     },
@@ -51,7 +60,7 @@ let EmptyItem = React.createClass({
 
     updateBrowserFocus() {
         // Make browser state reflect application state.
-        let el = this.refs['urlInput']
+        let el = this.refs['form'].getElementsByClassName('emptyItemInput')[0]
         if (this.props.focussed && document.activeElement !== el) {
             el.focus()
         }
@@ -64,17 +73,28 @@ let EmptyItem = React.createClass({
 
 
 function mapStateToProps(state, {canvasItemId}) {
-    let suggestions = getAutoCompleteSuggestions(state, canvasItemId)
+    let itemState = getEmptyItemState(state, canvasItemId)
+    let inputValue = itemState !== undefined ? itemState.inputValue : ''
+    let suggestions = itemState !== undefined
+        ? getAutoSuggestSuggestions(state, itemState.inputValueForSuggestions)
+        : []
     return {
         suggestions,
+        inputValue
     }
 }
 
 function mapDispatchToProps(dispatch, {canvasItemId}) {
-    return bindActionCreators({
-        changed: value => updateAutoComplete({itemId: canvasItemId, value}),
-        submitForm: userInput => navigateTo({userInput, itemId: canvasItemId})
-    }, dispatch)
+    return {
+        submitForm: userInput => {
+            dispatch(setEmptyItemValue({inputValue: '', itemId: canvasItemId}))
+            dispatch(navigateTo({userInput, itemId: canvasItemId}))
+        },
+        ...bindActionCreators({
+            changed: inputValue => setEmptyItemValue({inputValue, itemId: canvasItemId}),
+            updateAutoSuggest: () => updateAutoSuggest({itemId: canvasItemId})
+        }, dispatch)
+    }
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(EmptyItem)

src/reducer/volatile.js

@@ -3,19 +3,44 @@ import { createReducer } from 'redux-act';
 import * as actions from '../actions'
 
 let defaultState = {
-    autoCompletions: {
-        // [itemId]: {suggestions: [...]},
+    emptyItems: {
+        // [itemId]: {inputValue, inputValueForSuggestions}
     },
+    autoSuggestions: {
+        // [inputValue]: {suggestions: [...]},
+    },
+}
+
+// Notes on our auto-suggest implementation:
+// Browsing through suggestions updates inputValue, so we remember the last
+// 'manually entered' input value in inputValueForSuggestions. We then look up
+// this value in state.autoSuggestions, which acts as a cache for search results.
+
+function setEmptyItemValue(state, {itemId, inputValue}) {
+    let item = {...state.emptyItems[itemId], inputValue}
+    let emptyItems = {...state.emptyItems, [itemId]: item}
+    return {...state, emptyItems}
+}
+
+function updateEmptyItemSuggestions(state, {itemId}) {
+    let item = state.emptyItems[itemId]
+
+    item.inputValueForSuggestions = item.inputValue
+
+    let emptyItems = {...state.emptyItems, [itemId]: item}
+    return {...state, emptyItems}
 }
 
-function setAutoCompleteSuggestions(state, {itemId, suggestions}) {
-    let autoCompletions = {...state.autoCompletions, [itemId]: {suggestions}}
-    return {...state, autoCompletions}
+function setAutoSuggestSuggestions(state, {itemId, inputValue, suggestions}) {
+    let autoSuggestions = {...state.autoSuggestions, [inputValue]: {suggestions}}
+    return {...state, autoSuggestions}
 }
 
 let reducer = createReducer(
     {
-        [actions.setAutoCompleteSuggestions]: setAutoCompleteSuggestions,
+        [actions.setAutoSuggestSuggestions]: setAutoSuggestSuggestions,
+        [actions.setEmptyItemValue]: setEmptyItemValue,
+        [actions.updateEmptyItemSuggestions]: updateEmptyItemSuggestions,
     },
     defaultState
 )

src/selectors.js

@@ -1,7 +1,12 @@
-export function getAutoCompleteSuggestions(state, itemId) {
-    let autoCompletion = state.volatile.autoCompletions[itemId]
-    if (autoCompletion) {
-        return autoCompletion.suggestions
+export function getEmptyItemState(state, itemId) {
+    let itemState = state.volatile.emptyItems[itemId]
+    return itemState
+}
+
+export function getAutoSuggestSuggestions(state, inputValue) {
+    let autoSuggestion = state.volatile.autoSuggestions[inputValue]
+    if (autoSuggestion) {
+        return autoSuggestion.suggestions
     }
     return []
 }

src/storage/selectors.js

@@ -48,8 +48,8 @@ export function readGeneratedId(action) {
     return action.meta.generatedId
 }
 
-export function autoCompleteSearch(state, {text, maxSuggestions=5}) {
-    let lowText = text.toLowerCase()
+export function autoSuggestSearch(state, {inputValue, maxSuggestions=5}) {
+    let lowText = inputValue.toLowerCase()
     let words = lowText.split(' ')
     let stripUrl = url => url.replace('http://', '').replace('https://','')
     let strippedUrl = stripUrl(lowText)
@@ -64,7 +64,7 @@ export function autoCompleteSearch(state, {text, maxSuggestions=5}) {
         words.every(word => url.toLowerCase().indexOf(word) > -1)
     )
     let caseSensitiveStartsWith = docText => (
-        docText.startsWith(text)
+        docText.startsWith(inputValue)
     )
     let caseInsensitiveStartsWith = docText => (
         docText.toLowerCase().startsWith(lowText)
@@ -96,6 +96,6 @@ export function autoCompleteSearch(state, {text, maxSuggestions=5}) {
         let matches = _(state.docs).map(doc=>doc.text).filter().filter(textMatchers[i]).value()
         suggestions = _.uniq(suggestions.concat(matches))
     }
-    suggestions.slice(maxSuggestions)
+    suggestions.splice(maxSuggestions)
     return suggestions
 }