Toggle button for settings

Author: Emmanouil Konstantinidis

package.json

@@ -111,6 +111,7 @@
     "octicons": "=2.2.0",
     "react": "=0.13.3",
     "react-router": "=0.13.3",
+    "react-toggle": "=1.2.3",
     "react-tools": "=0.13.3",
     "reactify": "=1.1.1",
     "reflux": "=0.2.7",

src/js/actions/actions.js

@@ -4,7 +4,9 @@ var Actions = Reflux.createActions({
 
   'login': {},
   'logout': {},
-  'getNotifications': {asyncResult: true}
+  'getNotifications': {asyncResult: true},
+  'getSettings': {},
+  'setSetting': {}
 
 });
 

src/js/components/settings.js

@@ -1,6 +1,8 @@
 var React = require('react');
 var Reflux = require('reflux');
+var Toggle = require('react-toggle');
 
+var Actions = require('../actions/actions');
 var SettingsStore = require('../stores/settings');
 
 var SettingsPage = React.createClass({
@@ -10,16 +12,26 @@ var SettingsPage = React.createClass({
 
   getInitialState: function () {
     return {
-      settings: undefined
+      settings: {
+        participating: false
+      }
     };
   },
 
+  toggleParticipating: function () {
+    Actions.setSetting('participating', 'true');
+  },
+
   render: function () {
     return (
       <div className="container-fluid main-container settings">
         <div className='row'>
           <div className='col-xs-8'>Setting Title</div>
-          <div className='col-xs-4'>Value</div>
+          <div className='col-xs-4'>
+            <Toggle
+              defaultChecked={this.state.settings.participating}
+              onChange={this.toggleParticipating} />
+          </div>
         </div>
       </div>
     );

src/js/stores/settings.js

@@ -18,7 +18,7 @@ var SettingsStore = Reflux.createStore({
     return this._settings;
   },
 
-  onSetSettings: function (setting, value) {
+  onSetSetting: function (setting, value) {
     console.log('Setting: ' + setting + ' to: ' + value);
   }
 

src/less/style.less

@@ -3,6 +3,7 @@
 @import "node_modules/bootstrap/less/bootstrap";
 @import "node_modules/font-awesome/less/font-awesome.less";
 @import "node_modules/octicons/octicons/octicons.less";
+@import (inline) "node_modules/react-toggle/style.css";
 @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700);
 
 /* @end Imports */
@@ -231,6 +232,11 @@ html, body {
 .settings {
   background-color: @ThemeBlack;
   color: @White;
+  padding: 20px;
+
+  .col-xs-4 {
+    text-align: right;
+  }
 }
 
 /* @end Settings */