NotificationsPanelContainer.jsx

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);