adds Notification Switches

app/javascript/packs/shared/actions/UsersActions.js

@@ -8,9 +8,11 @@ import {
   CHANGE_CURRENT_USER_PASSWORD,
   CHANGE_CURRENT_USER_AVATAR,
   CHANGE_CURRENT_USER_TIMEZONE,
-  CHANGE_CURRENT_USER_SYSTEM_NOTIFICATION,
-  CHANGE_CURRENT_USER_CHANGES_NOTIFICATION,
-  CHANGE_CURRENT_USER_ASSIGNEMENT_NOTIFICATION
+  CHANGE_ASSIGNMENTS_NOTIFICATION,
+  CHANGE_ASSIGNMENTS_NOTIFICATION_EMAIL,
+  CHANGE_RECENT_NOTIFICATION,
+  CHANGE_RECENT_NOTIFICATION_EMAIL,
+  CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL
 } from "../../app/action_types";
 
 function addCurrentUser(data) {
@@ -77,33 +79,33 @@ export function changeTimezone(timezone) {
 
 export function changeAssignmentsNotification(status) {
   return {
-    type: CHANGE_CURRENT_USER_ASSIGNEMENT_NOTIFICATION,
+    type: CHANGE_ASSIGNMENTS_NOTIFICATION,
     payload: status
   };
 }
 export function changeAssignmentsNotificationEmail(status) {
   return {
-    type: CHANGE_CURRENT_USER_CHANGES_NOTIFICATION,
+    type: CHANGE_ASSIGNMENTS_NOTIFICATION_EMAIL,
     payload: status
   };
 }
 export function changeRecentNotification(status) {
   return {
-    type: CHANGE_CURRENT_USER_SYSTEM_NOTIFICATION,
+    type: CHANGE_RECENT_NOTIFICATION,
     payload: status
   };
 }
 
 export function changeRecentNotificationEmail(status) {
   return {
-    type: CHANGE_CURRENT_USER_SYSTEM_NOTIFICATION,
+    type: CHANGE_RECENT_NOTIFICATION_EMAIL,
     payload: status
   };
 }
 
 export function changeSystemMessageNotificationEmail(status) {
   return {
-    type: CHANGE_CURRENT_USER_SYSTEM_NOTIFICATION,
+    type: CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL,
     payload: status
   };
 }

app/javascript/packs/src/settings/components/NotificationsBtnGroup.jsx

@@ -1,52 +0,0 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-
-import {
-  changeAssignmentsNotification,
-  changeAssignmentsNotificationEmail,
-  changeRecentNotification,
-  changeRecentNotificationEmail,
-  changeSystemMessageNotificationEmail
-} from "../../../shared/actions/UsersActions";
-
-class NotificationsBtnGroup extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isSciNoteSwitchOn: false,
-      isEmailSwitchOn: false
-    };
-  }
-
-  render() {
-    return (
-      <div>
-        <h1>tonko</h1>
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = state => state.current_user;
-const mapDispatchToProps = dispatch => ({
-  changeAssignmentsNotification(status) {
-    dispatch(changeAssignmentsNotification(status));
-  },
-  changeAssignmentsNotificationEmail(status) {
-    dispatch(changeAssignmentsNotificationEmail(status));
-  },
-  changeRecentNotification(status) {
-    dispatch(changeRecentNotification(status));
-  },
-  changeRecentNotificationEmail(status) {
-    dispatch(changeRecentNotificationEmail(status));
-  },
-  changeSystemMessageNotificationEmail(status) {
-    dispatch(changeSystemMessageNotificationEmail(status));
-  }
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(
-  NotificationsBtnGroup
-);

app/javascript/packs/src/settings/components/NotificationsGroup.jsx

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 
-import NotificationsBtnGroup from "./NotificationsBtnGroup";
+import NotificationsSwitchGroup from "./NotificationsSwitchGroup";
 
 const Icon = styled.span`
   background-color: silver;
@@ -39,10 +39,9 @@ class NotificationsGroup extends Component {
             <p>
               {this.props.subtitle}
             </p>
+            <NotificationsSwitchGroup type={this.props.type} />
           </div>
         </div>
-
-        <NotificationsBtnGroup type={this.props.type} />
       </div>
     );
   }

app/javascript/packs/src/settings/components/NotificationsSwitch.jsx

@@ -0,0 +1,80 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+class NotificationsSwitch extends Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    if (!this.props.isDisabled) {
+      this.props.toggleSwitch();
+    }
+  }
+
+  render() {
+    let switchBtn;
+
+    if (this.props.isSwitchOn) {
+      switchBtn = (
+        <div className="btn-group">
+          <button
+            className="btn btn-default"
+            disabled={this.props.isDisabled}
+            onClick={this.handleClick}
+          >
+            No
+          </button>
+          <button
+            className="btn btn-primary"
+            disabled={this.props.isDisabled}
+            onClick={this.handleClick}
+          >
+            Yes
+          </button>
+        </div>
+      );
+    } else {
+      switchBtn = (
+        <div className="btn-group">
+          <button
+            className="btn btn-danger"
+            disabled={this.props.isDisabled}
+            onClick={this.handleClick}
+          >
+            No
+          </button>
+          <button
+            className="btn btn-default"
+            disabled={this.props.isDisabled}
+            onClick={this.handleClick}
+          >
+            Yes
+          </button>
+        </div>
+      );
+    }
+
+    return (
+      <div className="row">
+        <div className="col-sm-4">
+          {this.props.title}
+        </div>
+        <div className="col-sm-8">
+          {switchBtn}
+        </div>
+      </div>
+    );
+  }
+}
+
+NotificationsSwitch.propTypes = {
+  title: PropTypes.string.isRequired,
+  isSwitchOn: PropTypes.bool.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+  toggleSwitch: PropTypes.func.isRequired
+};
+
+export default NotificationsSwitch;

app/javascript/packs/src/settings/components/NotificationsSwitchGroup.jsx

@@ -0,0 +1,157 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { string, bool, func } from "prop-types";
+
+import NotificationsSwitch from "./NotificationsSwitch";
+
+import {
+  ASSIGNMENT_NOTIFICATION,
+  RECENT_NOTIFICATION,
+  SYSTEM_NOTIFICATION
+} from "./constants";
+
+import {
+  changeAssignmentsNotification,
+  changeAssignmentsNotificationEmail,
+  changeRecentNotification,
+  changeRecentNotificationEmail,
+  changeSystemMessageNotificationEmail
+} from "../../../shared/actions/UsersActions";
+
+class NotificationsSwitchGroup extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isSciNoteSwitchOn: false,
+      isEmailSwitchOn: false
+    };
+
+    this.toggleFirstSwitch = this.toggleFirstSwitch.bind(this);
+    this.toggleSecondSwitch = this.toggleSecondSwitch.bind(this);
+    this.isSwitchDisabled = this.isSwitchDisabled.bind(this);
+  }
+
+  componentWillMount() {
+    switch (this.props.type) {
+      case ASSIGNMENT_NOTIFICATION:
+        this.setState({
+          isSciNoteSwitchOn: this.props.assignmentsNotification,
+          isEmailSwitchOn: this.props.assignmentsNotificationEmail,
+          sciNoteDispatch: state =>
+            this.props.changeAssignmentsNotification(state),
+          emailDispatch: state =>
+            this.props.changeAssignmentsNotificationEmail(state)
+        });
+        break;
+      case RECENT_NOTIFICATION:
+        this.setState({
+          isSciNoteSwitchOn: this.props.recentNotification,
+          isEmailSwitchOn: this.props.recentNotificationEmail,
+          sciNoteDispatch: state => this.props.changeRecentNotification(state),
+          emailDispatch: state =>
+            this.props.changeRecentNotificationEmail(state)
+        });
+        break;
+      case SYSTEM_NOTIFICATION:
+        this.setState({
+          isSciNoteSwitchOn: true,
+          isEmailSwitchOn: this.props.systemMessageNotificationEmail,
+          sciNoteDispatch: state => `${state}: Do Nothing`,
+          emailDispatch: state =>
+            this.props.changeSystemMessageNotificationEmail(state)
+        });
+        break;
+      default:
+        this.setState({
+          isSciNoteSwitchOn: true,
+          isEmailSwitchOn: false
+        });
+    }
+  }
+
+  toggleFirstSwitch() {
+    if (this.state.isSciNoteSwitchOn) {
+      this.setState({ isSciNoteSwitchOn: false, isEmailSwitchOn: false });
+      this.state.sciNoteDispatch(false);
+      this.state.emailDispatch(false);
+    } else {
+      this.setState({ isSciNoteSwitchOn: true });
+      this.state.sciNoteDispatch(true);
+    }
+  }
+
+  toggleSecondSwitch() {
+    if (this.state.isEmailSwitchOn) {
+      this.setState({ isEmailSwitchOn: false });
+      this.state.emailDispatch(false);
+    } else {
+      this.setState({ isEmailSwitchOn: true });
+      this.state.emailDispatch(true);
+    }
+  }
+
+  isSwitchDisabled() {
+    if (this.props.type === SYSTEM_NOTIFICATION) {
+      return true;
+    }
+
+    return false;
+  }
+
+  render() {
+    return (
+      <div>
+        <NotificationsSwitch
+          title="Show in sciNote"
+          isSwitchOn={this.state.isSciNoteSwitchOn}
+          toggleSwitch={this.toggleFirstSwitch}
+          isDisabled={this.isSwitchDisabled()}
+        />
+        <NotificationsSwitch
+          title="Notify me via email"
+          isSwitchOn={this.state.isEmailSwitchOn}
+          toggleSwitch={this.toggleSecondSwitch}
+          isDisabled={!this.state.isSciNoteSwitchOn}
+        />
+      </div>
+    );
+  }
+}
+
+NotificationsSwitchGroup.propTypes = {
+  type: string.isRequired,
+  assignmentsNotification: bool.isRequired,
+  assignmentsNotificationEmail: bool.isRequired,
+  recentNotification: bool.isRequired,
+  recentNotificationEmail: bool.isRequired,
+  systemMessageNotificationEmail: bool.isRequired,
+  changeAssignmentsNotification: func.isRequired,
+  changeAssignmentsNotificationEmail: func.isRequired,
+  changeRecentNotification: func.isRequired,
+  changeRecentNotificationEmail: func.isRequired,
+  changeSystemMessageNotificationEmail: func.isRequired
+};
+
+const mapStateToProps = state => state.current_user;
+const mapDispatchToProps = dispatch => ({
+  changeAssignmentsNotification(status) {
+    dispatch(changeAssignmentsNotification(status));
+  },
+  changeAssignmentsNotificationEmail(status) {
+    dispatch(changeAssignmentsNotificationEmail(status));
+  },
+  changeRecentNotification(status) {
+    dispatch(changeRecentNotification(status));
+  },
+  changeRecentNotificationEmail(status) {
+    dispatch(changeRecentNotificationEmail(status));
+  },
+  changeSystemMessageNotificationEmail(status) {
+    dispatch(changeSystemMessageNotificationEmail(status));
+  }
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(
+  NotificationsSwitchGroup
+);

app/javascript/packs/src/settings/components/SettingsPreferences.jsx

@@ -4,9 +4,13 @@ import PropTypes from "prop-types";
 
 import InputDisabled from "./InputDisabled";
 import InputTimezone from "./InputTimezone";
-
 import { changeTimezone } from "../../../shared/actions/UsersActions";
 import NotificationsGroup from "./NotificationsGroup";
+import {
+  ASSIGNMENT_NOTIFICATION,
+  RECENT_NOTIFICATION,
+  SYSTEM_NOTIFICATION
+} from "./constants";
 
 class SettingsPreferences extends Component {
   constructor(props) {
@@ -56,11 +60,23 @@ class SettingsPreferences extends Component {
 
         <h3>Notifications</h3>
         <NotificationsGroup
-          type="assignement"
+          type={ASSIGNMENT_NOTIFICATION}
           title="Assignement"
           subtitle="Assignment notifications appear whenever you get assigned to a team, project, task."
           imageUrl={this.props.avatarPath}
         />
+        <NotificationsGroup
+          type={RECENT_NOTIFICATION}
+          title="Recent changes"
+          subtitle="Recent changes notifications appear whenever there is a change on a task you are assigned to."
+          imageUrl={this.props.avatarPath}
+        />
+        <NotificationsGroup
+          type={SYSTEM_NOTIFICATION}
+          title="System message"
+          subtitle="System message notifications are specifically sent by site maintainers to notify all users about a system update."
+          imageUrl={this.props.avatarPath}
+        />
       </div>
     );
   }

app/javascript/packs/src/settings/components/constants.js

@@ -0,0 +1,3 @@
+export const ASSIGNMENT_NOTIFICATION = "ASSIGNMENT";
+export const RECENT_NOTIFICATION = "RECENT_NOTIFICATION";
+export const SYSTEM_NOTIFICATION = "SYSTEM_NOTIFICATION";