From 2e6f56c4e7de1d375eb91e188c3697383b31638f Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Sun, 2 Jul 2017 12:19:32 +0800
Subject: [PATCH] [web] Try toggle options in option modal.

---
 web/src/js/backends/websocket.js            |  1 +
 web/src/js/components/Modal/OptionModal.jsx |  6 ++-
 web/src/js/components/Modal/OptionTypes.jsx | 48 +++++++++++++++++++++
 web/src/js/ducks/index.js                   |  2 +
 4 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 web/src/js/components/Modal/OptionTypes.jsx

diff --git a/web/src/js/backends/websocket.js b/web/src/js/backends/websocket.js
index 01094ac45..d7e13bb2a 100644
--- a/web/src/js/backends/websocket.js
+++ b/web/src/js/backends/websocket.js
@@ -27,6 +27,7 @@ export default class WebsocketBackend {
         this.fetchData("settings")
         this.fetchData("flows")
         this.fetchData("events")
+        this.fetchData("options")
         this.store.dispatch(connectionActions.startFetching())
     }
 
diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index 500495c42..c9a56d099 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -1,6 +1,8 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import * as modalAction from '../../ducks/ui/modal'
+import { SettingsToggle } from '../Header/MenuToggle'
+import { OptionsToggle } from './OptionTypes'
 
 class PureOptionModal extends Component {
 
@@ -26,7 +28,9 @@ class PureOptionModal extends Component {
                 </div>
 
                 <div className="modal-body">
-                    ...
+                    <OptionsToggle option="http2">HTTP/2.0</OptionsToggle>
+                    <OptionsToggle option="anticache">Anticache</OptionsToggle>
+                    <OptionsToggle option="anticomp">Anticomp</OptionsToggle>
                 </div>
 
                 <div className="modal-footer">
diff --git a/web/src/js/components/Modal/OptionTypes.jsx b/web/src/js/components/Modal/OptionTypes.jsx
new file mode 100644
index 000000000..8a9325e13
--- /dev/null
+++ b/web/src/js/components/Modal/OptionTypes.jsx
@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { update as updateOptions } from '../../ducks/options'
+
+MenuToggle.propTypes = {
+    value: PropTypes.bool.isRequired,
+    onChange: PropTypes.func.isRequired,
+    children: PropTypes.node.isRequired,
+}
+
+export function MenuToggle({ value, onChange, children }) {
+    return (
+        <div className="menu-entry">
+            <label>
+                <input type="checkbox"
+                        checked={value}
+                        onChange={onChange}/>
+                {children}
+            </label>
+        </div>
+    )
+}
+
+OptionsToggle.propTypes = {
+    option: PropTypes.string.isRequired,
+    children: PropTypes.node.isRequired,
+}
+
+export function OptionsToggle({ option, children, options, updateOptions }) {
+    return (
+        <MenuToggle
+            value={ options[option].value }
+            onChange={() => {console.log(options[option]);
+                updateOptions({ [option]: !(options[option].value)}) }}
+        >
+            {children}
+        </MenuToggle>
+    )
+}
+
+OptionsToggle = connect(
+    state => ({
+        options: state.options,
+    }),
+    {
+        updateOptions,
+    }
+)(OptionsToggle)
diff --git a/web/src/js/ducks/index.js b/web/src/js/ducks/index.js
index 0f2426ecf..be2f28850 100644
--- a/web/src/js/ducks/index.js
+++ b/web/src/js/ducks/index.js
@@ -4,6 +4,7 @@ import flows from "./flows"
 import settings from "./settings"
 import ui from "./ui/index"
 import connection from "./connection"
+import options from './options'
 
 export default combineReducers({
     eventLog,
@@ -11,4 +12,5 @@ export default combineReducers({
     settings,
     connection,
     ui,
+    options,
 })