first commit
This commit is contained in:
Senad Uka
297
src/components/Shared/Notification.js
Normal file
297
src/components/Shared/Notification.js
Normal file
@@ -0,0 +1,297 @@
|
||||
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,
|
||||
}
|
||||
Reference in New Issue
Block a user