header-ui
Version:
Header UI
223 lines (202 loc) • 7.27 kB
JSX
import React from 'react';
import { Popover, OverlayTrigger } from 'react-bootstrap';
import { xhrClient } from './xhrClient';
// import Upgrade from '../payment';
import filter from 'lodash/filter';
import Button from '@material-ui/core/Button';
import moment from 'moment';
// css
require('./styles.css');
class Notifications extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false,
notifications: [],
showUpgradeModal: false,
};
}
componentWillMount = () =>
this.setState({ notifications: this.props.notifications });
componentWillReceiveProps(nextProps) {
if (nextProps.notifications !== this.props.notifications) {
this.setState({ notifications: nextProps.notifications });
}
}
handleTouchTap = event => {
event.preventDefault();
this.setState({ open: true, anchorEl: event.currentTarget });
};
clearNotifications() {
console.log('CLEARING NOTIFICATIONS');
this.props.updateNotificationsSeen();
}
handleRequestClose = () => this.setState({ open: false });
closeUpgradeModal = () => this.setState({ showUpgradeModal: false });
handleNotificationResponse(type, data) {
if (type === 'addDeveloper') {
this.props.fetchApps();
this.props.deleteNotificationById(data);
} else if (type === 'delete') {
this.props.deleteNotificationById(data);
}
}
callAction(data, obj) {
const { meta } = obj;
const { url, method, payload, external } = data;
const thisObj = this;
if (meta.notificationType === 'payment') {
this.setState({
showUpgradeModal: true,
appId: data.appId,
planId: data.planId,
});
} else if (!external) {
xhrClient(this.props.USER_SERVICE_URL)({
url,
method,
data: payload,
}).then(
res => {
this.handleNotificationResponse(meta.notificationType, obj._id);
},
err => {
console.log(err);
this.props.showAlert('error', err);
},
);
} else window.open(url, '_blank');
}
deleteNotification = id => this.handleNotificationResponse('delete', id);
render() {
const { notifications } = this.state;
const pendingTasks = notifications ? notifications.length : 0;
const unSeenNotifications =
notifications && notifications.length
? filter(notifications, { seen: false }).length
: 0;
const notificationDiv = notifications && notifications.length ? notifications.map((x, i) => {
let cancelButton = null;
let acceptButton = null;
if (x.meta) {
cancelButton = x.meta.cancelButton;
acceptButton = x.meta.acceptButton;
}
const getTime = x => {
const notTime = moment(x.date);
const secs = moment().diff(notTime, 'seconds');
return secs > 172800
? notTime.format('Do MMMM')
: `${moment.duration(secs, 'seconds').humanize()} ago`;
};
return (
<div
className={
x.seen ? 'notificationdiv' : 'notificationdiv unSeenNotification'
}
key={i}
>
<div className="notdatacontainer">
<p
className="nottextinv"
dangerouslySetInnerHTML={{ __html: x.text }}
/>
<div className="noteinvbtncontainer">
<span className="nottimestamp"> {getTime(x)} </span>
{cancelButton && (
<button
className="cancelbtnnotinv"
onClick={this.callAction.bind(this, cancelButton, x)}
>
{cancelButton.text}
</button>
)}
{acceptButton && (
<button
className="acceptbtnnotinv"
onClick={this.callAction.bind(this, acceptButton, x)}
>
{acceptButton.text}
</button>
)}
{x.notificationType === 'inform' && (
<button
className="acceptbtnnotinv"
onClick={this.deleteNotification.bind(this, x._id)}
>
Okay
</button>
)}
</div>
</div>
</div>
);
}) : [];
const _id = new Date().getTime();
const popover = (
<Popover id={_id} title="Notifications" className="popovernotifications">
<button
className={pendingTasks ? 'clearnotbtn' : 'hide'}
onClick={this.clearNotifications.bind(this)}
style={{ display: 'block' }}
>
Mark All as read
</button>
{!pendingTasks ? (
<div style={{ textAlign: 'center' }}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 -3 26 26"
className="ion-ios-bell notificationemptybell"
>
<g fill="none" fillRule="evenodd">
<path
fill="#AAB7C4"
d="M7.65 16.914A2.721 2.721 0 0 0 10.298 19c1.282 0 2.36-.886 2.647-2.086H7.65zm7.917-8.129a50.014 50.014 0 0 1-.45-2.963c-.242-2.031-2.076-3.56-4.246-3.56h-.86c-2.17 0-4.004 1.529-4.245 3.56a47.54 47.54 0 0 1-.451 2.963c-.42 2.314-1.342 3.98-2.097 5.11-.576.859.053 1.98 1.133 1.82h12.117c1.08.16 1.72-.961 1.133-1.82-.85-1.256-1.657-3.026-2.034-5.11zm-5.137-6.69a1.048 1.048 0 1 0 .002-2.096 1.048 1.048 0 0 0-.002 2.095z"
/>
</g>
</svg>
<p className="notificationemptymessage">
{"We'll let you know when we've got something new for you!"}
</p>
</div>
) : (
<div className="notification-wrap">{notificationDiv}</div>
)}
</Popover>
);
return (
<div>
{this.state.showUpgradeModal && (
<div // Upgrade
appId={this.state.appId}
planId={this.state.planId}
show={this.state.showUpgradeModal}
close={this.closeUpgradeModal}
/>
)}
<OverlayTrigger trigger="click" rootClose placement="bottom" overlay={popover}>
<Button className="header-icon">
{unSeenNotifications > 0 ? <div className="red-dot" /> : <span />}
<svg
xmlns="http://www.w3.org/2000/svg"
width="29"
height="29"
viewBox="0 -3 26 26"
>
<g fill="none" fillRule="evenodd">
<path
fill="#AAB7C4"
d="M7.65 16.914A2.721 2.721 0 0 0 10.298 19c1.282 0 2.36-.886 2.647-2.086H7.65zm7.917-8.129a50.014 50.014 0 0 1-.45-2.963c-.242-2.031-2.076-3.56-4.246-3.56h-.86c-2.17 0-4.004 1.529-4.245 3.56a47.54 47.54 0 0 1-.451 2.963c-.42 2.314-1.342 3.98-2.097 5.11-.576.859.053 1.98 1.133 1.82h12.117c1.08.16 1.72-.961 1.133-1.82-.85-1.256-1.657-3.026-2.034-5.11zm-5.137-6.69a1.048 1.048 0 1 0 .002-2.096 1.048 1.048 0 0 0-.002 2.095z"
/>
</g>
</svg>
</Button>
</OverlayTrigger>
</div>
);
}
}
export default Notifications;