scinote-web/app/javascript/packs/shared/navigation/components/NotificationsDropdown.jsx

118 lines
3.1 KiB
React
Raw Normal View History

2017-08-08 21:44:28 +08:00
import React, { Component } from "react";
import { NavDropdown } from "react-bootstrap";
import { FormattedMessage } from "react-intl";
import axios from "axios";
2017-08-09 20:49:29 +08:00
import styled from "styled-components";
2017-08-08 21:44:28 +08:00
import { RECENT_NOTIFICATIONS_PATH } from "../../../app/routes";
2017-08-09 20:49:29 +08:00
import {
MAIN_COLOR_BLUE,
WILD_SAND_COLOR,
MYSTIC_COLOR
2017-08-09 21:21:02 +08:00
} from "../../../app/constants/colors";
2017-08-08 21:44:28 +08:00
import NotificationItem from "./NotificationItem";
2017-08-09 18:46:04 +08:00
import Spinner from "../../Spinner";
2017-08-08 21:44:28 +08:00
import CustomNavItem from "./CustomNavItem";
2017-08-09 20:49:29 +08:00
const StyledListHeader = styled(CustomNavItem)`
background-color: ${MAIN_COLOR_BLUE};
color: ${WILD_SAND_COLOR};
font-weight: bold;
padding: 8px;
& a, a:hover, a:active {
color: ${WILD_SAND_COLOR};
}
`;
const StyledListFooter = styled(CustomNavItem)`
background-color: ${MYSTIC_COLOR};
padding: 8px;
text-align: center;
`;
const StyledNavDropdown = styled(NavDropdown)`
& > .dropdown-menu {
max-height: 500px;
overflow-x: hidden;
overflow-y: scroll;
padding-bottom: 0;
padding-top: 0;
width: 450px;
word-wrap: break-word;
}
`;
2017-08-08 21:44:28 +08:00
class NotificationsDropdown extends Component {
constructor(props) {
super(props);
this.state = { notifications: [] };
this.getRecentNotifications = this.getRecentNotifications.bind(this);
this.renderNotifications = this.renderNotifications.bind(this);
}
getRecentNotifications(e) {
e.preventDefault();
axios
.get(RECENT_NOTIFICATIONS_PATH, { withCredentials: true })
.then(({ data }) => {
this.setState({ notifications: data });
})
.catch(error => {
console.log("get Notifications Error: ", error); // TODO change this
});
}
renderNotifications() {
const list = this.state.notifications.map(notification =>
<NotificationItem key={notification.id} notification={notification} />
);
const items =
this.state.notifications.length > 0
? list
: <CustomNavItem>
<Spinner />
</CustomNavItem>;
return items;
}
render() {
return (
2017-08-09 20:49:29 +08:00
<StyledNavDropdown
2017-08-08 21:44:28 +08:00
noCaret
id="notifications-dropdown"
title={
<span>
<i className="fa fa-bell" />&nbsp;
<span className="visible-xs-inline visible-sm-inline">
<FormattedMessage id="navbar.notifications_label" />
</span>
</span>
}
2017-08-08 21:44:28 +08:00
onClick={this.getRecentNotifications}
>
2017-08-09 20:49:29 +08:00
<StyledListHeader>
2017-08-08 21:44:28 +08:00
<span>
<FormattedMessage id="notifications.dropdown_title" />
</span>
<span className="pull-right">
<a href="/users/settings/account/preferences">
<FormattedMessage id="notifications.dropdown_settings_link" />
</a>
</span>
2017-08-09 20:49:29 +08:00
</StyledListHeader>
2017-08-08 21:44:28 +08:00
{this.renderNotifications()}
2017-08-09 20:49:29 +08:00
<StyledListFooter>
2017-08-08 21:44:28 +08:00
<a href="/users/notifications">
<FormattedMessage id="notifications.dropdown_show_all" />
</a>
2017-08-09 20:49:29 +08:00
</StyledListFooter>
</StyledNavDropdown>
2017-08-08 21:44:28 +08:00
);
}
}
export default NotificationsDropdown;