import React, { Component } from 'react';
import moment from 'moment';
import weekdayCalc from 'moment-weekday-calc';
import excludedDates from './excluded_dates.json';
import './App.css';

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      numberOfDays: 0,
      result: "",
      resultDays: 0,
    }
  }

  getExcludedDates = () => {
    return excludedDates.map(item => item.date);
  }

  calculateDate = () => {
    const calculatedDate = moment()
      .addWorkdays(this.state.numberOfDays, this.getExcludedDates())
      .format('MM-DD-YYYY');

    this.setState({
      result: calculatedDate,
      resultDays: this.state.numberOfDays,
    })
  }

  setNumberOfDays = ({target}) => {
    this.setState({ numberOfDays: target.value });
  }

  render() {
    return (
      <div className="App Flex">
        <div className="Sidebar Flex Stack">
          <h3>
            Excluded Dates:
          </h3>
          <div className="SidebarContent">
            <div className="Flex Split-Around">
              <div>
                Date:
              </div>
              <div>
                Reason:
              </div>
            </div>
            {excludedDates.map(item => (
              <div className="Flex Card Split">
                <div>{item.date}</div>
                <div>{item.reason}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="Main bg">
          <div class="Content Stack" >
            <div className="Control">
              <input
                className="Input round-s"
                type="number"
                onChange={this.setNumberOfDays}
                value={this.state.numberOfDays}
              />
              <button
                onClick={this.calculateDate}
                className="button button--ujarak button--border-medium button--round-s button--text-thick">Calculate Date</button>
            </div>
            <div className="Result Flex">
              { this.state.result &&
                  <div className="ResultContent Flex Stack">
                    <div>In <b>{this.state.resultDays}</b> working school days it will be:</div>
                    <div className="Date">{moment(this.state.result).format('dddd, MMMM Do YYYY')}</div>
                    <div className="Date">{this.state.result}</div>
                  </div>
              }
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

@@ -63,16 +63,45 @@
 moment';
+%0A%0A// eslint-disable-next-line
 %0Aimport 
@@ -144,58 +144,83 @@
 c';%0A
-import excludedDates from './excluded_dates.json';
+// not sure why this is working, look into just importing the weekday-calc%0A
 %0Aimp
@@ -383,24 +383,58 @@
 ultDays: 0,%0A
+      data: this.decodeToState(),%0A
     %7D%0A  %7D%0A%0A 
@@ -476,45 +476,734 @@
 urn 
-excludedDates.map(item =%3E item.date);
+this.state.data.map(item =%3E item.date);%0A  %7D%0A%0A  getParams = () =%3E %7B%0A    const searchParams = window.location.search.replace('?', '');%0A    return searchParams;%0A  %7D;%0A%0A  decodeToState = () =%3E %7B%0A    const params = this.getParams();%0A    const decodedData = JSON.parse(window.atob(params));%0A%0A    return decodedData;%0A  %7D%0A%0A  encodeState = (data) =%3E %7B%0A    const encoded = window.btoa(JSON.stringify(data));%0A    return encoded;%0A  %7D%0A%0A  addToUrl = () =%3E %7B%0A    const myNewUrlQuery = this.encodeState(this.state.data);%0A%0A    if (window.history.pushState) %7B%0A      const newurl = %60$%7Bwindow.location.protocol%7D//$%7Bwindow.location.host%7D$%7Bwindow.location.pathname%7D?$%7BmyNewUrlQuery%7D%60;%0A      window.history.pushState(%7B path:newurl %7D,'',newurl);%0A    %7D
 %0A  %7D
@@ -1464,16 +1464,17 @@
 ,%0A    %7D)
+;
 %0A  %7D%0A%0A  
@@ -1563,16 +1563,81 @@
 );%0A  %7D%0A%0A
+  // componentWillMount() %7B%0A  //   this.decodeToState();%0A  // %7D%0A%0A
   render
@@ -2046,21 +2046,23 @@
    %7B
-excludedDates
+this.state.data
 .map
@@ -2763,23 +2763,300 @@
 ick%22
-%3ECalculate Date
+%0A              %3E%0A                Calculate Date%0A              %3C/button%3E%0A              %3Cbutton%0A                onClick=%7Bthis.addToUrl%7D%0A                className=%22button button--ujarak button--border-medium button--round-s button--text-thick%22%0A              %3E%0A                Save%0A              
 %3C/bu

Add eslint ignore