Merge pull request #8 from dimGlyn/feature/unsubscribe-from-all

#7/unsubscribe from all channels functionality

Author: nishanthvijayan

app/components/AllPlatformsSettings.js

@@ -0,0 +1,34 @@
+const React = require('react');
+const store = require('../store');
+const { SUPPORTED_PLATFORMS } = require('../constants');
+const PlatformSetting = require('./PlatformSetting');
+
+const AllPlatformsSettings = React.createClass({
+    onClickHandler() {
+        SUPPORTED_PLATFORMS.forEach(platform => {
+            store.disablePlatform(platform);
+            ga('send', 'event', 'Platform Setting', 'UnCheck', platform);
+        });
+        this.forceUpdate();
+    },
+    render() {
+        return (
+            <div>
+                {SUPPORTED_PLATFORMS.map(platform => (
+                    <div>
+                        <PlatformSetting platform={platform} />
+                        <hr />
+                    </div>
+                ))}
+                <li className="platform-setting button-unsubscribe" onClick={this.onClickHandler}>
+                    <span className="unsubscribe-text">
+                    Unsubscribe from All
+                    </span>
+                </li>
+                <hr />
+            </div>
+        );
+    },
+});
+
+module.exports = AllPlatformsSettings;

app/components/Containers/SettingsContainer.js

@@ -1,6 +1,5 @@
 const React = require('react');
-const PlatformSetting = require('../PlatformSetting');
-const { SUPPORTED_PLATFORMS } = require('../../constants');
+const AllPlatformsSettings = require('../AllPlatformsSettings.js');
 
 const SettingsContainer = () => (
   <div className="settings-container">
@@ -11,12 +10,7 @@ Subscribe
         </h3>
       </div>
       <div className="subscribeContent">
-        {SUPPORTED_PLATFORMS.map(platform => (
-          <div>
-            <PlatformSetting platform={platform} />
-            <hr />
-          </div>
-        ))}
+      <AllPlatformsSettings />
       </div>
     </div>
   </div>

css/chrome.css

@@ -163,6 +163,17 @@ header > h3 {
 .green-text {
   color: #4caf50;
 }
+
+.button-unsubscribe {
+  background-color: #f44336;
+  cursor: pointer;
+}
+
+.unsubscribe-text {
+  color: #ffff;
+  font-size: x-large;
+  margin: 20%;
+}
 /*****************************************************/
 
 .circular-border{

css/firefox.css

@@ -159,6 +159,17 @@ header > h3 {
 .green-text {
   color: #4caf50;
 }
+
+.button-unsubscribe {
+  background-color: #f44336;
+  cursor: pointer;
+}
+  
+.unsubscribe-text {
+  color: #ffff;
+  font-size: x-large;
+  margin: 20%;
+}
 /*****************************************************/
 
 .circular-border{