298 lines
9.3 KiB
JavaScript
298 lines
9.3 KiB
JavaScript
import React, { Component } from 'react'
|
|
import Message from 'material-ui/svg-icons/communication/message';
|
|
import ReactMaterialUiNotifications from 'react-materialui-notifications';
|
|
import moment from 'moment';
|
|
import { deepOrange500 } from 'material-ui/styles/colors';
|
|
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
|
import getMuiTheme from 'material-ui/styles/getMuiTheme';
|
|
import lightTheme from '../../containers/themes/lightTheme';
|
|
import darkTheme from '../../containers/themes/darkTheme';
|
|
import grayTheme from '../../containers/themes/grayTheme';
|
|
|
|
import PropTypes from 'prop-types';
|
|
import FontIcon from 'material-ui/FontIcon';
|
|
import { indigo500 } from 'material-ui/styles/colors';
|
|
import Paper from 'material-ui/Paper';
|
|
import MapsDirectionsCar from 'material-ui/svg-icons/maps/directions-car';
|
|
|
|
import ContactList from '../../routes/app/components/ContactList';
|
|
|
|
const nearbyIcon = <FontIcon className="material-icons">perm phone msg</FontIcon>;
|
|
|
|
const paperStyle = {
|
|
height: 240,
|
|
width: 270,
|
|
margin: 10,
|
|
textAlign: 'center',
|
|
display: 'inline-block',
|
|
position: 'relative'
|
|
};
|
|
|
|
const styles = {
|
|
appbar: {
|
|
textAlign: 'left'
|
|
},
|
|
buttonContainer: {
|
|
display: 'flex',
|
|
justifyContent: 'space-around'
|
|
},
|
|
footer: {
|
|
marginTop: 15,
|
|
width: 'calc(100% - 30px)',
|
|
fontSize: 16,
|
|
padding: 15,
|
|
backgroundColor: '#fff'
|
|
},
|
|
logo: {
|
|
width: 48
|
|
},
|
|
paper: {
|
|
width: '100%',
|
|
textAlign: 'left',
|
|
marginBottom: 15,
|
|
padding: 15,
|
|
fontSize: 18
|
|
},
|
|
rightIcon: {
|
|
width: 36,
|
|
height: 36,
|
|
fill: '#fff'
|
|
},
|
|
table: {
|
|
marginTop: 15
|
|
},
|
|
headerStyle: {
|
|
tableLayout: 'auto'
|
|
},
|
|
table1Col1: {
|
|
width: 137
|
|
},
|
|
table1Col2: {
|
|
width: 72
|
|
},
|
|
table1Col3: {
|
|
width: 128
|
|
},
|
|
table1Col2C: {
|
|
width: 72,
|
|
},
|
|
table2Col3: {
|
|
width: 36
|
|
}
|
|
};
|
|
|
|
export default class Notification extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
const socketURL = process.env.NODE_ENV === 'production'
|
|
? 'wss://portal-api.bcbsinstitute.com/v1/notification/ws?id='
|
|
: 'wss://portal-api.dev.bcbsinstitute.com/v1/notification/ws?id='
|
|
|
|
this.props = props;
|
|
this.state = {
|
|
user: {
|
|
useruuid: '',
|
|
name: ''
|
|
},
|
|
socket_url: socketURL,
|
|
notifications: {},
|
|
totalNotifications: 0
|
|
};
|
|
this.socket = null;
|
|
|
|
this.socketMessageListener = this.socketMessageListener.bind(this);
|
|
this.socketOpenListener = this.socketOpenListener.bind(this);
|
|
this.socketCloseListener = this.socketCloseListener.bind(this);
|
|
this.socketCloseListener = this.socketCloseListener.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.setState(Object.assign(this.state, { user: this.props.user, notifications: [], totalNotifications: 0 }));
|
|
if (this.state.user.useruuid && this.state.user.useruuid != '') {
|
|
this.setState(Object.assign(this.state, { socket_url: this.state.socket_url + this.state.user.useruuid }));
|
|
this.socket = new WebSocket(this.state.socket_url);
|
|
|
|
this.socketMessageListener = this.socketMessageListener.bind(this);
|
|
this.socketOpenListener = this.socketOpenListener.bind(this);
|
|
this.socketCloseListener = this.socketCloseListener.bind(this);
|
|
|
|
this.socket.addEventListener('open', this.socketOpenListener);
|
|
this.socket.addEventListener('message', this.socketMessageListener);
|
|
this.socket.addEventListener('close', this.socketCloseListener);
|
|
}
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if (nextProps.user.useruuid !== this.state.user.useruuid) {
|
|
if (this.socket) {
|
|
this.socket.close();
|
|
}
|
|
this.setState(Object.assign(this.state, { user: nextProps.user, notifications: [], totalNotifications: 0 }));
|
|
if (this.state.user.useruuid && this.state.user.useruuid != '') {
|
|
this.setState(Object.assign(this.state, { socket_url: this.state.socket_url + this.state.user.useruuid }));
|
|
this.socket = new WebSocket(this.state.socket_url);
|
|
|
|
this.socketMessageListener = this.socketMessageListener.bind(this);
|
|
this.socketOpenListener = this.socketOpenListener.bind(this);
|
|
this.socketCloseListener = this.socketCloseListener.bind(this);
|
|
|
|
this.socket.addEventListener('open', this.socketOpenListener);
|
|
this.socket.addEventListener('message', this.socketMessageListener);
|
|
this.socket.addEventListener('close', this.socketCloseListener);
|
|
}
|
|
}
|
|
}
|
|
|
|
disableNotification(n) {
|
|
n.content.type = "disable-notification";
|
|
this.socket.send(JSON.stringify(n));
|
|
this.setState(Object.assign(this.state, { totalNotifications: this.state.totalNotifications-- }));
|
|
}
|
|
|
|
|
|
socketMessageListener(event) {
|
|
let n = JSON.parse(event.data);
|
|
|
|
let notifications = this.state.notifications;
|
|
if (notifications[n.nid] === null || notifications[n.nid] === undefined) {
|
|
switch (n.content.type) {
|
|
case 'ride':
|
|
const ride = n.content.payload;
|
|
const driverPhoneNumber = (ride.driver && ride.driver.phone_number) ? ride.driver.phone_number : '';
|
|
|
|
const rideContactList = {
|
|
driverMobile: driverPhoneNumber,
|
|
memberMobile: ride.user.phonenumber,
|
|
memberEmail: ride.user.email,
|
|
schedulerEmail: ride.created_user.email,
|
|
schedulerMobile: ride.created_user.phonenumber,
|
|
rideID: ride.ride_uuid,
|
|
}
|
|
|
|
ReactMaterialUiNotifications.showNotification({
|
|
title: n.content.subject,
|
|
additionalText: n.content.payload.user.name,
|
|
priority: true,
|
|
icon: <MapsDirectionsCar />,
|
|
// icon: <Message />,
|
|
iconBadgeColor: indigo500,
|
|
personalized: true,
|
|
timestamp: moment(n.date).format('ddd, MMMM DD, hh:mm A'),
|
|
onClick: () => { this.disableNotification(n); },
|
|
overflowContent:
|
|
<div>
|
|
<div>
|
|
<div>
|
|
{n.content.body}
|
|
<p>
|
|
<a href={"/#/app/member/" + n.content.payload.user.useruuid}>Member</a> |
|
|
<a href="/#/app/table/visits/" > Visits </a> |
|
|
<a href={"/#/ride/" + n.content.payload.ride_uuid + "/" + n.content.payload.user.useruuid}> Ride</a> |
|
|
<a href={"/#/app/page/map/" + n.content.payload.ride_uuid}> Ride Details | </a>
|
|
|
|
<ContactList data={rideContactList} />
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
<div >
|
|
</div>
|
|
</div>,
|
|
});
|
|
if (this.props.onRideUpdate) {
|
|
this.props.onRideUpdate(n.content.payload);
|
|
}
|
|
break;
|
|
case 'message':
|
|
ReactMaterialUiNotifications.showNotification({
|
|
title: `Message Received`,
|
|
additionalText: n.content.payload.user.name,
|
|
priority: true,
|
|
icon: <Message />,
|
|
iconBadgeColor: deepOrange500,
|
|
personalized: true,
|
|
avatar: '/assets/images/ic_account_circle_white_48dp_1x.png',
|
|
timestamp: moment(n.date).format('ddd, MMMM DD, hh:mm A'),
|
|
onClick: () => { this.disableNotification(n); },
|
|
overflowContent:
|
|
<div>
|
|
<div>
|
|
{n.content.body}
|
|
</div>
|
|
<div>
|
|
<Paper style={paperStyle} zDepth={1} />
|
|
</div>
|
|
|
|
</div>
|
|
});
|
|
break;
|
|
}
|
|
notifications[n.nid] = n;
|
|
this.setState(Object.assign(this.state, { notifications: notifications, totalNotifications: this.state.totalNotifications++ }));
|
|
|
|
if (this.props.onNotificationUpdate) {
|
|
this.props.onNotificationUpdate(n, this.state.totalNotifications);
|
|
}
|
|
|
|
this.forceUpdate();
|
|
}
|
|
}
|
|
|
|
socketOpenListener(event) {
|
|
console.log('Connected for the ID: ' + this.state.user.useruuid);
|
|
}
|
|
|
|
socketCloseListener(event) {
|
|
if (this.socket) {
|
|
console.error('Disconnected.');
|
|
}
|
|
this.socket = new WebSocket(this.state.socket_url);
|
|
|
|
this.socketMessageListener = this.socketMessageListener.bind(this);
|
|
this.socketOpenListener = this.socketOpenListener.bind(this);
|
|
this.socketCloseListener = this.socketCloseListener.bind(this);
|
|
|
|
this.socket.addEventListener('open', this.socketOpenListener);
|
|
this.socket.addEventListener('message', this.socketMessageListener);
|
|
this.socket.addEventListener('close', this.socketCloseListener);
|
|
}
|
|
|
|
render() {
|
|
const { layoutBoxed, navCollapsed, navBehind, fixedHeader, sidebarWidth, theme } = this.props;
|
|
let materialUITheme;
|
|
switch (theme) {
|
|
case 'gray':
|
|
materialUITheme = grayTheme;
|
|
break;
|
|
case 'dark':
|
|
materialUITheme = darkTheme;
|
|
break;
|
|
default:
|
|
materialUITheme = lightTheme;
|
|
}
|
|
|
|
return (
|
|
<MuiThemeProvider muiTheme={getMuiTheme(materialUITheme)}>
|
|
<ReactMaterialUiNotifications
|
|
desktop={false}
|
|
transitionName={{
|
|
leave: 'dummy',
|
|
leaveActive: 'fadeOut',
|
|
appear: 'dummy',
|
|
appearActive: 'zoomInUp'
|
|
}}
|
|
transitionAppear={true}
|
|
transitionLeave={true}
|
|
/>
|
|
</MuiThemeProvider>
|
|
);
|
|
}
|
|
}
|
|
|
|
Notification.propTypes = {
|
|
user: PropTypes.object.isRequired,
|
|
onRideUpdate: PropTypes.func,
|
|
onNotificationUpdate: PropTypes.func,
|
|
}
|