[web] Try toggle options in option modal.

2 files changed, 53 insertions, 1 deletions

diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index 500495c4..c9a56d09 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 00000000..8a9325e1
--- /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)