From 21b3f9c02956c625c576c6787ab10409aab0618d Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Mon, 17 Jul 2017 15:32:52 +0800
Subject: [PATCH] [web] Update OptionMaster.

---
 web/src/js/components/Modal/OptionMaster.jsx | 86 +++++++-------------
 web/src/js/ducks/options.js                  | 31 ++++---
 2 files changed, 44 insertions(+), 73 deletions(-)

diff --git a/web/src/js/components/Modal/OptionMaster.jsx b/web/src/js/components/Modal/OptionMaster.jsx
index 32f5bb4b1..5befc34a8 100644
--- a/web/src/js/components/Modal/OptionMaster.jsx
+++ b/web/src/js/components/Modal/OptionMaster.jsx
@@ -10,14 +10,12 @@ PureBooleanOption.PropTypes = {
 }
 
 function PureBooleanOption({ value, onChange, ...props}) {
-        let onMouseEnter = () => { props.onMouseEnter() },
-            onMouseLeave = () => { props.onMouseLeave() }
         return (
                 <input type="checkbox"
                         checked={value}
                         onChange={onChange}
-                        onMouseOver={onMouseEnter}
-                        onMouseLeave={onMouseLeave}
+                        onMouseOver={props.onMouseEnter}
+                        onMouseLeave={props.onMouseLeave}
                 />
         )
 }
@@ -28,11 +26,7 @@ PureStringOption.PropTypes = {
 }
 
 function PureStringOption( { value, onChange, ...props }) {
-    let onKeyDown = (e) => {e.stopPropagation()},
-        onFocus = () => { props.onFocus() },
-        onBlur = () => { props.onBlur() },
-        onMouseEnter = () => { props.onMouseEnter() },
-        onMouseLeave = () => { props.onMouseLeave() }
+    let onKeyDown = (e) => {e.stopPropagation()}
     return (
         <div className={classnames('input-group', {'has-error': props.error})}>
             <input type="text"
@@ -40,10 +34,10 @@ function PureStringOption( { value, onChange, ...props }) {
                     className='form-control'
                     onChange={onChange}
                     onKeyDown={onKeyDown}
-                    onFocus={onFocus}
-                    onBlur={onBlur}
-                    onMouseOver={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
+                    onFocus={props.onFocus}
+                    onBlur={props.onBlur}
+                    onMouseOver={props.onMouseEnter}
+                    onMouseLeave={props.onMouseLeave}
             />
         </div>
     )
@@ -55,11 +49,7 @@ PureNumberOption.PropTypes = {
 }
 
 function PureNumberOption( {value, onChange, ...props }) {
-    let onKeyDown = (e) => {e.stopPropagation()},
-        onFocus = () => { props.onFocus() },
-        onBlur = () => { props.onBlur() },
-        onMouseEnter = () => { props.onMouseEnter() },
-        onMouseLeave = () => { props.onMouseLeave() }
+    let onKeyDown = (e) => {e.stopPropagation()}
 
     return (
             <input type="number"
@@ -67,10 +57,10 @@ function PureNumberOption( {value, onChange, ...props }) {
                     value={value}
                     onChange={onChange}
                     onKeyDown={onKeyDown}
-                    onFocus={onFocus}
-                    onBlur={onBlur}
-                    onMouseOver={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
+                    onFocus={props.onFocus}
+                    onBlur={props.onBlur}
+                    onMouseOver={props.onMouseEnter}
+                    onMouseLeave={props.onMouseLeave}
             />
     )
 }
@@ -81,20 +71,16 @@ PureChoicesOption.PropTypes = {
 }
 
 function PureChoicesOption( { value, onChange, name, choices, ...props}) {
-    let onFocus = () => { props.onFocus() },
-        onBlur = () => { props.onBlur() },
-        onMouseEnter = () => { props.onMouseEnter() },
-        onMouseLeave = () => { props.onMouseLeave() }
     return (
             <select
                 name={name}
                 className="form-control"
                 onChange={onChange}
                 selected={value}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                onMouseOver={onMouseEnter}
-                onMouseLeave={onMouseLeave}
+                onFocus={props.onFocus}
+                onBlur={props.onBlur}
+                onMouseOver={props.onMouseEnter}
+                onMouseLeave={props.onMouseLeave}
             >
                 { choices.map((choice, index) => (
                     <option key={index} value={choice}> {choice} </option>
@@ -112,8 +98,6 @@ class PureStringSequenceOption extends Component {
         this.onBlur = this.onBlur.bind(this)
         this.onKeyDown = this.onKeyDown.bind(this)
         this.onChange = this.onChange.bind(this)
-        this.onMouseEnter = this.onMouseEnter.bind(this)
-        this.onMouseLeave = this.onMouseLeave.bind(this)
     }
 
     onFocus() {
@@ -126,14 +110,6 @@ class PureStringSequenceOption extends Component {
         this.props.onBlur()
     }
 
-    onMouseEnter() {
-        this.props.onMouseEnter()
-    }
-
-    onMouseLeave() {
-        this.props.onMouseLeave()
-    }
-
     onKeyDown(e) {
         e.stopPropagation()
     }
@@ -146,7 +122,7 @@ class PureStringSequenceOption extends Component {
 
     render() {
         const {height, value} = this.state
-        const {error} = this.props
+        const {error, onMouseEnter, onMouseLeave} = this.props
         return (
             <div className={classnames('input-group', {'has-error': error})}>
             <textarea
@@ -157,8 +133,8 @@ class PureStringSequenceOption extends Component {
                 onKeyDown={this.onKeyDown}
                 onFocus={this.onFocus}
                 onBlur={this.onBlur}
-                onMouseEnter={this.onMouseEnter}
-                onMouseLeave={this.onMouseLeave}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
             />
             </div>
         )
@@ -183,7 +159,6 @@ class OptionMaster extends Component {
                 mousefocus: false,
                 focus: false,
                 error: false,
-
         }
         if (props.option.choices) {
             this.WrappedComponent = PureChoicesOption
@@ -198,17 +173,12 @@ class OptionMaster extends Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        if (nextProps.option.value !== this.state.option.value){
-           this.setState({ error: true })
-        }
-        else{
-            this.setState({ option: nextProps.option, error: false })
-        }
+        this.setState({ option: nextProps.option })
     }
 
     onChange(e) {
         const { option, name } = this.state
-        this.setState({ option: {...option, value: e.target.value}})
+        const { updateOptions } = this.props
         switch (option.type) {
             case 'bool' :
                 updateOptions({[name]: !option.value})
@@ -242,9 +212,11 @@ class OptionMaster extends Component {
     }
 
     render() {
-        const { name, children } = this.props
-        const { option, focus, mousefocus, error } = this.state
+        const { name, children, client_options } = this.props
+        const { option, focus, mousefocus } = this.state
         const WrappedComponent = this.WrappedComponent
+        let error = (name in client_options) ? client_options[name].error : false,
+            value = (name in client_options) ? client_options[name].value : option.value
         return (
             <div className="row">
                 <div className="col-sm-8">
@@ -253,7 +225,7 @@ class OptionMaster extends Component {
                 <div className="col-sm-4">
                     <WrappedComponent
                         children={children}
-                        value={option.value}
+                        value={value}
                         onChange={this.onChange}
                         name={name}
                         choices={option.choices}
@@ -276,8 +248,10 @@ class OptionMaster extends Component {
 }
 
 export default connect(
-    null,
+    state => ({
+        client_options: state.ui.option
+    }),
     {
-        updateOptions: updateOptions
+       updateOptions
     }
 )(OptionMaster)
diff --git a/web/src/js/ducks/options.js b/web/src/js/ducks/options.js
index ed82d7f3c..48e3708b9 100644
--- a/web/src/js/ducks/options.js
+++ b/web/src/js/ducks/options.js
@@ -1,10 +1,10 @@
 import { fetchApi } from '../utils'
+import  * as optionActions from './ui/option'
 
 export const RECEIVE        = 'OPTIONS_RECEIVE'
 export const UPDATE         = 'OPTIONS_UPDATE'
 export const REQUEST_UPDATE = 'REQUEST_UPDATE'
 export const UNKNOWN_CMD    = 'OPTIONS_UNKNOWN_CMD'
-export const ERROR          = 'OPTIONS_ERROR'
 
 const defaultState = {
 
@@ -22,26 +22,23 @@ export default function reducer(state = defaultState, action) {
                 ...action.data,
             }
 
-        case ERROR:
-            return {
-                ...state,
-                ...action.data,
-            }
-
         default:
             return state
     }
 }
 
 export function update(options) {
-    let error = ''
-    fetchApi.put('/options', options).then(
-        (response) => {
-            response.text().then(errorMsg => {
-                error = errorMsg
-                console.log(error)
-            })
-        }
-    )
-    return {type: ERROR, error}
+    return dispatch => {
+        let option = Object.keys(options)[0]
+        dispatch({ type: optionActions.OPTION_UPDATE_START, option, value: options[option] })
+        fetchApi.put('/options', options).then(response => {
+            if (response.status === 200) {
+                dispatch({ type: optionActions.OPTION_UPDATE_SUCCESS, option})
+            } else {
+                response.text().then( text => {
+                    dispatch({type: optionActions.OPTION_UPDATE_ERROR, error: text, option})
+                })
+            }
+        })
+    }
 }