Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
197 lines (182 sloc) 5.2 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);