Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
188 lines (172 sloc) 5 KB
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import base64UrlToUint8Array from '../helpers/Encoding';
import { API_PATH_SUBSCRIBE } from '../helpers/Api';
import { saveSubscription, readSubscriptions } from '../redux/actions/subscription-actions';
class NotificationsPanelContainer extends Component {
static propTypes() {
return {
line: PropTypes.array.isRequired,
subscription: PropTypes.array.isRequired,
dispatch: PropTypes.object.isRequired
};
}
constructor(props) {
super(props);
this.state = {
timeSlots: [],
isLoading: false,
statusText: null
};
}
componentDidMount() {
this.props.dispatch(readSubscriptions(this.props.line.urlKey));
}
componentWillReceiveProps(nextProps) {
if (this.props.line.urlKey !== nextProps.line.urlKey) {
this.props.dispatch(readSubscriptions(nextProps.line.urlKey));
}
this.setState({
timeSlots: nextProps.subscription,
isLoading: false,
statusText: null
});
}
onSave() {
this.setState({
isLoading: true,
statusText: 'Saving... '
});
const swOptions = {
userVisibleOnly: true,
applicationServerKey: base64UrlToUint8Array(
'BKSO9McPgFJ6DcngM1wB2hxI_rnLoPs_JhyRh8bFJw6BBX-QFxGKYnTSVtyLu4G3Vc3jihaDUIZWiaYqEtvs_dg'
)
};
window.navigator.serviceWorker.ready
.then(serviceWorkerRegistration =>
serviceWorkerRegistration.pushManager.subscribe(swOptions)
)
.then((subscription) => {
const postData = {
userID: subscription.endpoint,
lineID: this.props.line.urlKey,
timeSlots: this.state.timeSlots,
subscription
};
return fetch(API_PATH_SUBSCRIBE, {
method: 'post',
body: JSON.stringify(postData)
});
})
.then(response => response.json())
.then(() => {
this.props.dispatch(saveSubscription(this.props.line.urlKey, this.state.timeSlots));
this.setState({
isLoading: false,
statusText: 'Saved '
});
})
.catch(() => {
this.setState({
isLoading: false,
statusText: 'An error occurred. Please try deleting all subscriptions on the settings page and try again '
});
});
}
onSelect(day, hour) {
const slots = this.state.timeSlots;
if (!slots[day]) {
slots[day] = [];
}
slots[day][hour] = !slots[day][hour]; // toggle the state
this.setState({
timeSlots: slots,
statusText: null
});
}
getRow(hour) {
const cols = [];
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
for (let i = 1; i <= 7; i += 1) {
const day = (i === 7) ? 0 : i; // sunday is zero
const inputID = `time-${day}-${hour}`;
cols.push(
<td key={i}>
<input
type="checkbox"
id={inputID}
checked={this.isSelected(day, hour)}
onChange={() => { this.onSelect(day, hour); }}
className="times__box"
/>
<label
className="times__label"
htmlFor={inputID}
><span className="invisible">{days[day]} {hour}:00</span></label>
</td>
);
}
return (
<tr key={hour}>
<th>{hour}</th>
{cols}
</tr>
);
}
getTable() {
if (this.state.timeSlots === null) {
return null;
}
const rows = [];
for (let i = 0; i <= 23; i += 1) {
rows.push(this.getRow(i));
}
return (
<table className="times">
<thead>
<tr>
<th />
<th>M<span className="invisible">onday</span></th>
<th>T<span className="invisible">uesday</span></th>
<th>W<span className="invisible">ednesday</span></th>
<th>T<span className="invisible">hursday</span></th>
<th>F<span className="invisible">riday</span></th>
<th>S<span className="invisible">aturday</span></th>
<th>S<span className="invisible">unday</span></th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
isSelected(day, hour) {
return !!(
this.state.timeSlots[day] &&
this.state.timeSlots[day][hour]
);
}
render() {
const loading = (this.state.isLoading) ? (<span className="loading loading--leading" />) : null;
return (
<div>
<p className="card--padded">
Choose the times you wish to be notified for this line and hit save
</p>
{this.getTable()}
<div className="card__foot text--right">
{loading}
{this.state.statusText}
<button className="btn" onClick={this.onSave.bind(this)}>Save</button>
</div>
</div>
);
}
}
export default connect(
(state, props) => ({
line: props.line,
subscription: state.subscriptionsState[`SUBSCRIPTION-${props.line.urlKey}`] || []
})
)(NotificationsPanelContainer);