refactor preferences page [fixes SCI-1564]

app/controllers/client_api/users/users_controller.rb

@@ -65,15 +65,11 @@ module ClientApi
 
       def user_params
         params.require(:user)
-              .permit(:password,
+              .permit(:password, :initials, :email, :full_name,
-                      :initials,
+                      :password_confirmation, :current_password, :avatar,
-                      :email,
+                      :assignments, :time_zone, :assignmentsNotification,
-                      :full_name,
+                      :assignmentsEmailNotification, :recentNotification,
-                      :password_confirmation,
+                      :recentEmailNotification, :systemMessageEmailNotification)
-                      :current_password,
-                      :avatar,
-                      :assignments,
-                      :time_zone)
       end
 
       def success_response(template = nil, locals = nil)

app/javascript/src/scenes/SettingsPage/scenes/preferences/components/NotificationsGroup.jsx

@@ -51,6 +51,7 @@ class NotificationsGroup extends Component {
     this.inAppNotificationField = this.inAppNotificationField.bind(this);
     this.emailNotificationField = this.emailNotificationField.bind(this);
     this.updateStatus = this.updateStatus.bind(this);
+    this.buttonGroupStatus = this.buttonGroupStatus.bind(this);
   }
 
   notificationImage() {
@@ -68,17 +69,25 @@ class NotificationsGroup extends Component {
     );
   }
 
-  inAppNotificationField() {
+  inAppNotificationField(value) {
+    let params = {};
     switch (this.props.type) {
       case ASSIGNMENT_NOTIFICATION:
-        return "assignmentsNotification";
+        params.assignmentsNotification = value;
+        if(!value) {
+          params.assignmentsEmailNotification = false;
+        }
+        break;
       case RECENT_NOTIFICATION:
-        return "recentNotification";
+        params.recentNotification = value;
-      case SYSTEM_NOTIFICATION:
+        if(!value) {
-        return "systemMessageEmailNofification";
+          params.recentEmailNotification = false;
+        }
+        break;
       default:
-        return "";
+        params = {}
     }
+    return params
   }
 
   emailNotificationField() {
@@ -87,6 +96,8 @@ class NotificationsGroup extends Component {
         return "assignmentsEmailNotification";
       case RECENT_NOTIFICATION:
         return "recentEmailNotification";
+      case SYSTEM_NOTIFICATION:
+        return "systemMessageEmailNotification"
       default:
         return "";
     }
@@ -94,14 +105,21 @@ class NotificationsGroup extends Component {
 
   updateStatus(actionType, value) {
     if (actionType === "inAppNotification") {
-      const inAppField = this.inAppNotificationField();
+      const params = this.inAppNotificationField(value);
-      updateUser({ [inAppField]: value }).then(() => this.props.reloadInfo());
+      updateUser(params).then(() => this.props.reloadInfo());
     } else if (actionType === "emailNotification") {
       const emailField = this.emailNotificationField();
       updateUser({ [emailField]: value }).then(() => this.props.reloadInfo());
     }
   }
 
+  // check if the in sciNote notification is disabled
+  buttonGroupStatus() {
+    return (
+      this.props.type !== SYSTEM_NOTIFICATION && !this.props.inAppNotification
+    );
+  }
+
   render() {
     return (
       <Wrapper className="row">
@@ -123,14 +141,15 @@ class NotificationsGroup extends Component {
               status={this.props.inAppNotification}
               updateStatus={value =>
                 this.updateStatus("inAppNotification", value)}
-              isDisabled={false}
+              isDisabled={this.props.type === SYSTEM_NOTIFICATION}
             />
             <NotificationsSwitch
               title="settings_page.notify_me_via_email"
               status={this.props.emailNotification}
               updateStatus={value =>
                 this.updateStatus("emailNotification", value)}
-              isDisabled={this.props.type === SYSTEM_NOTIFICATION}
+              isDisabled={false}
+              isTemporarilyDisabled={this.buttonGroupStatus()}
             />
           </div>
         </div>

app/javascript/src/scenes/SettingsPage/scenes/preferences/components/NotificationsSwitch.jsx

@@ -1,10 +1,5 @@
 import React, { Component } from "react";
 import { string, bool, func } from "prop-types";
-import {
-  ButtonToolbar,
-  ToggleButtonGroup,
-  ToggleButton
-} from "react-bootstrap";
 import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
 
@@ -44,37 +39,73 @@ class NotificationsSwitch extends Component {
   }
 
   disabledButton() {
-    if (this.props.isDisabled) {
+    if(this.props.isTemporarilyDisabled) {
       return (
-        <ToggleButtonGroup
+        <div className="btn-group">
-          type="radio"
+          <LeftButton
-          name={this.props.title}
+            className="btn btn-danger"
-          defaultValue={this.state.status}
+            disabled
-          disabled
+          >
-        >
+            <FormattedMessage id="settings_page.no" />
-          <ToggleButton disabled value={false}>
+          </LeftButton>
-            No
+          <RightButton
-          </ToggleButton>
+            className="btn btn-default"
-          <ToggleButton disabled value={true}>
+            disabled
-            Yes
+          >
-          </ToggleButton>
+            <FormattedMessage id="settings_page.yes" />
-        </ToggleButtonGroup>
+          </RightButton>
+        </div>
+      );
+    } else if(this.props.isDisabled) {
+      return (
+        <div className="btn-group">
+          <LeftButton
+            className="btn btn-default"
+            disabled
+          >
+            <FormattedMessage id="settings_page.no" />
+          </LeftButton>
+          <RightButton
+            className="btn btn-primary"
+            disabled
+          >
+            <FormattedMessage id="settings_page.yes" />
+          </RightButton>
+        </div>
+      );
+    } else if(this.props.status) {
+      return (
+        <div className="btn-group">
+          <LeftButton
+            className="btn btn-default"
+            onClick={() => this.handleClick(false)}
+          >
+            <FormattedMessage id="settings_page.no" />
+          </LeftButton>
+          <RightButton
+            className="btn btn-primary"
+            onClick={() => this.handleClick(true)}
+          >
+            <FormattedMessage id="settings_page.yes" />
+          </RightButton>
+        </div>
       );
     }
     return (
-      <ToggleButtonGroup
+      <div className="btn-group">
-        type="radio"
+        <LeftButton
-        name={this.props.title}
+          className="btn btn-danger"
-        onChange={this.handleClick}
+          onClick={() => this.handleClick(false)}
-        defaultValue={this.state.status}
+        >
-      >
+          <FormattedMessage id="settings_page.no" />
-        <ToggleButton value={false}>
+        </LeftButton>
-          No
+        <RightButton
-        </ToggleButton>
+          className="btn btn-default"
-        <ToggleButton value={true}>
+          onClick={() => this.handleClick(true)}
-          Yes
+        >
-        </ToggleButton>
+          <FormattedMessage id="settings_page.yes" />
-      </ToggleButtonGroup>
+        </RightButton>
+      </div>
     );
   }
   render() {
@@ -84,7 +115,7 @@ class NotificationsSwitch extends Component {
           <FormattedMessage id={this.props.title} />
         </div>
         <div className="col-sm-7">
-          <ButtonToolbar>{this.disabledButton()}</ButtonToolbar>
+          {this.disabledButton()}
         </div>
       </Wrapper>
     );
@@ -95,7 +126,12 @@ NotificationsSwitch.propTypes = {
   title: string.isRequired,
   status: bool.isRequired,
   isDisabled: bool.isRequired,
-  updateStatus: func.isRequired
+  updateStatus: func.isRequired,
+  isTemporarilyDisabled: bool
 };
 
+NotificationsSwitch.defaultProps = {
+  isTemporarilyDisabled: false
+}
+
 export default NotificationsSwitch;

app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx

@@ -27,7 +27,7 @@ class SettingsPreferences extends Component {
       assignmentsEmailNotification: false,
       recentNotification: false,
       recentEmailNotification: false,
-      systemMessageEmailNofification: false
+      systemMessageEmailNotification: false
     };
 
     this.getPreferencesInfo = this.getPreferencesInfo.bind(this);
@@ -78,8 +78,8 @@ class SettingsPreferences extends Component {
             type={SYSTEM_NOTIFICATION}
             title="settings_page.system_message"
             subtitle="settings_page.system_message_msg"
-            inAppNotification={
+            emailNotification={
-              this.state.systemMessageEmailNofification
+              this.state.systemMessageEmailNotification
             }
             iconClasses="glyphicon glyphicon-tower"
             iconBackground={ICON_GREEN_COLOR}

app/models/user.rb

@@ -49,27 +49,6 @@ class User < ApplicationRecord
     }
   )
 
-  # json friendly attributes
-  NOTIFICATIONS_TYPES = %w(assignmentsNotification assignmentsEmailNotification
-                           recentNotification recentEmailNotification
-                           systemMessageEmailNofification)
-  # declare notifications getters
-  NOTIFICATIONS_TYPES.each do |name|
-    define_method(name) do
-      attr_name = name.slice!('Notification').underscore
-      self.notifications.fetch(attr_name.to_sym)
-    end
-  end
-
-  # declare notifications setters
-  NOTIFICATIONS_TYPES.each do |name|
-    next if name == 'systemMessageEmailNofification'
-    define_method("#{name}=") do |value|
-      attr_name = name.slice!('Notification').underscore
-      self.notifications[attr_name.to_sym] = value
-      save
-    end
-  end
   # Relations
   has_many :user_teams, inverse_of: :user
   has_many :teams, through: :user_teams
@@ -434,6 +413,27 @@ class User < ApplicationRecord
     statistics
   end
 
+  # json friendly attributes
+  NOTIFICATIONS_TYPES = %w(assignmentsNotification assignmentsEmailNotification
+                           recentNotification recentEmailNotification
+                           systemMessageEmailNotification)
+  # declare notifications getters
+  NOTIFICATIONS_TYPES.each do |name|
+    define_method(name) do
+      attr_name = name.gsub('Notification', '').underscore
+      self.notifications.fetch(attr_name.to_sym)
+    end
+  end
+
+  # declare notifications setters
+  NOTIFICATIONS_TYPES.each do |name|
+    define_method("#{name}=") do |value|
+      attr_name = name.gsub('Notification', '').underscore.to_sym
+      self.notifications[attr_name] = value
+      save
+    end
+  end
+
   protected
 
   def confirmation_required?

app/views/client_api/users/preferences.json.jbuilder

@@ -3,4 +3,4 @@ json.assignmentsNotification notifications['assignments']
 json.assignmentsEmailNotification notifications['assignments_email']
 json.recentNotification notifications['recent']
 json.recentEmailNotification notifications['recent_email']
-json.systemMessageEmailNofification notifications['system_message_email']
+json.systemMessageEmailNotification notifications['system_message_email']

config/routes.rb

@@ -36,25 +36,8 @@ Rails.application.routes.draw do
         delete '/leave_team', to: 'user_teams#leave_team'
         put '/update_role', to: 'user_teams#update_role'
         get '/profile_info', to: 'users#profile_info'
-        # get '/statistics_info', to: 'users#statistics_info'
         get '/preferences_info', to: 'users#preferences_info'
         post '/update', to: 'users#update'
-        # delete '/leave_team', to: 'user_teams#leave_team'
-        # post '/change_full_name', to: 'users#change_full_name'
-        # post '/change_initials', to: 'users#change_initials'
-        # post '/change_email', to: 'users#change_email'
-        # post '/change_password', to: 'users#change_password'
-        # post '/change_timezone', to: 'users#change_timezone'
-        # post '/change_assignements_notification',
-        #      to: 'users#change_assignements_notification'
-        # post '/change_assignements_notification_email',
-        #      to: 'users#change_assignements_notification_email'
-        # post '/change_recent_notification',
-        #      to: 'users#change_recent_notification'
-        # post '/change_recent_notification_email',
-        #      to: 'users#change_recent_notification_email'
-        # post '/change_system_notification_email',
-        #      to: 'users#change_system_notification_email'
       end
     end