makes redux work with Notifications

This commit is contained in:
Toni Dezman 2017-08-16 15:52:42 +02:00
parent 522262f9fe
commit dd5c329ef1
7 changed files with 202 additions and 5 deletions

View file

@ -13,3 +13,12 @@ export const CHANGE_CURRENT_USER_EMAIL = "CHANGE_CURRENT_USER_EMAIL";
export const CHANGE_CURRENT_USER_PASSWORD = "CHANGE_CURRENT_USER_PASSWORD";
export const CHANGE_CURRENT_USER_AVATAR = "CHANGE_CURRENT_USER_AVATAR";
export const CHANGE_CURRENT_USER_TIMEZONE = "CHANGE_CURRENT_USER_TIMEZONE";
export const CHANGE_ASSIGNMENTS_NOTIFICATION =
"CHANGE_ASSIGNMENTS_NOTIFICATION";
export const CHANGE_ASSIGNMENTS_NOTIFICATION_EMAIL =
"CHANGE_ASSIGNMENTS_NOTIFICATION_EMAIL";
export const CHANGE_RECENT_NOTIFICATION = "CHANGE_RECENT_NOTIFICATION";
export const CHANGE_RECENT_NOTIFICATION_EMAIL =
"CHANGE_RECENT_NOTIFICATION_EMAIL";
export const CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL =
"CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL";

View file

@ -7,7 +7,10 @@ import {
CHANGE_CURRENT_USER_EMAIL,
CHANGE_CURRENT_USER_PASSWORD,
CHANGE_CURRENT_USER_AVATAR,
CHANGE_CURRENT_USER_TIMEZONE
CHANGE_CURRENT_USER_TIMEZONE,
CHANGE_CURRENT_USER_SYSTEM_NOTIFICATION,
CHANGE_CURRENT_USER_CHANGES_NOTIFICATION,
CHANGE_CURRENT_USER_ASSIGNEMENT_NOTIFICATION
} from "../../app/action_types";
function addCurrentUser(data) {
@ -71,3 +74,36 @@ export function changeTimezone(timezone) {
payload: timezone
};
}
export function changeAssignmentsNotification(status) {
return {
type: CHANGE_CURRENT_USER_ASSIGNEMENT_NOTIFICATION,
payload: status
};
}
export function changeAssignmentsNotificationEmail(status) {
return {
type: CHANGE_CURRENT_USER_CHANGES_NOTIFICATION,
payload: status
};
}
export function changeRecentNotification(status) {
return {
type: CHANGE_CURRENT_USER_SYSTEM_NOTIFICATION,
payload: status
};
}
export function changeRecentNotificationEmail(status) {
return {
type: CHANGE_CURRENT_USER_SYSTEM_NOTIFICATION,
payload: status
};
}
export function changeSystemMessageNotificationEmail(status) {
return {
type: CHANGE_CURRENT_USER_SYSTEM_NOTIFICATION,
payload: status
};
}

View file

@ -5,7 +5,12 @@ import {
CHANGE_CURRENT_USER_EMAIL,
CHANGE_CURRENT_USER_PASSWORD,
CHANGE_CURRENT_USER_AVATAR,
CHANGE_CURRENT_USER_TIMEZONE
CHANGE_CURRENT_USER_TIMEZONE,
CHANGE_ASSIGNMENTS_NOTIFICATION,
CHANGE_ASSIGNMENTS_NOTIFICATION_EMAIL,
CHANGE_RECENT_NOTIFICATION,
CHANGE_RECENT_NOTIFICATION_EMAIL,
CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL
} from "../../app/action_types";
export function currentUser(
@ -16,7 +21,12 @@ export function currentUser(
email: "",
avatarPath: "",
avatarThumbPath: "",
timezone: ""
timezone: "",
assignmentsNotification: false,
assignmentsNotificationEmail: false,
recentNotification: false,
recentNotificationEmail: false,
systemMessageNotificationEmail: false
},
action
) {
@ -37,6 +47,24 @@ export function currentUser(
return Object.assign({}, state, { avatar: action.payload });
case CHANGE_CURRENT_USER_TIMEZONE:
return Object.assign({}, state, { timezone: action.payload });
case CHANGE_ASSIGNMENTS_NOTIFICATION:
return Object.assign({}, state, {
assignmentsNotification: action.payload
});
case CHANGE_ASSIGNMENTS_NOTIFICATION_EMAIL:
return Object.assign({}, state, {
assignmentsNotificationEmail: action.payload
});
case CHANGE_RECENT_NOTIFICATION:
return Object.assign({}, state, { recentNotification: action.payload });
case CHANGE_RECENT_NOTIFICATION_EMAIL:
return Object.assign({}, state, {
recentNotificationEmail: action.payload
});
case CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL:
return Object.assign({}, state, {
systemMessageNotificationEmail: action.payload
});
default:
return state;
}

View file

@ -0,0 +1,52 @@
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
);

View file

@ -0,0 +1,57 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import NotificationsBtnGroup from "./NotificationsBtnGroup";
const Icon = styled.span`
background-color: silver;
border-radius: 50%;
color: #f5f5f5;
display: block !important;
font-size: 15px;
height: 30px;
margin-right: 15px;
padding: 7px;
padding-bottom: 5px;
padding-top: 5px;
width: 30px;
`;
class NotificationsGroup extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div className="row">
<div className="col-sm-2">
<Icon>
<i className="fa fa-newspaper-o" />
</Icon>
</div>
<div className="col-sm-10">
<h5>
{this.props.title}
</h5>
<p>
{this.props.subtitle}
</p>
</div>
</div>
<NotificationsBtnGroup type={this.props.type} />
</div>
);
}
}
NotificationsGroup.propTypes = {
title: PropTypes.string.isRequired,
subtitle: PropTypes.string.isRequired,
type: PropTypes.string.isRequired
};
export default NotificationsGroup;

View file

@ -6,13 +6,14 @@ import InputDisabled from "./InputDisabled";
import InputTimezone from "./InputTimezone";
import { changeTimezone } from "../../../shared/actions/UsersActions";
import NotificationsGroup from "./NotificationsGroup";
class SettingsPreferences extends Component {
constructor(props) {
super(props);
this.state = {
isTimeZoneEditable: true
isTimeZoneEditable: false
};
}
@ -52,6 +53,14 @@ class SettingsPreferences extends Component {
Time zone setting affects all time & date fields throughout
application.
</small>
<h3>Notifications</h3>
<NotificationsGroup
type="assignement"
title="Assignement"
subtitle="Assignment notifications appear whenever you get assigned to a team, project, task."
imageUrl={this.props.avatarPath}
/>
</div>
);
}
@ -59,7 +68,8 @@ class SettingsPreferences extends Component {
SettingsPreferences.propTypes = {
timezone: PropTypes.string.isRequired,
changeTimezone: PropTypes.func.isRequired
changeTimezone: PropTypes.func.isRequired,
avatarPath: PropTypes.string.isRequired
};
const mapStateToProps = state => state.current_user;

View file

@ -7,4 +7,9 @@ json.user do
json.avatarThumbPath avatar_path(user, :thumb)
json.statistics user.statistics
json.timezone user.time_zone
json.assignmentsNotification user.assignments_notification
json.assignmentsNotificationEmail user.assignments_notification_email
json.recentNotification user.recent_notification
json.recentNotificationEmail user.recent_notification_email
json.systemMessageNotificationEmail user.system_message_notification_email
end