import React, { Component } from 'react';
import moment from 'moment';
import excluded_dates from './excluded_dates.json';

// eslint-disable-next-line
import weekdayCalc from 'moment-weekday-calc';
// not sure why this is working, look into just importing the weekday-calc

import './App.css';

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

  getExcludedDates = () => {
    return this.state.calculatorInfo.data.map(item => item.date);
  }

  getParams = () => {
    const searchParams = window.location.search.replace('?', '');
    return searchParams;
  };

  decodeToState = () => {
    const params = this.getParams();
    const decodedData = params === ""
      ? []
      : JSON.parse(window.atob(params));

    return decodedData;
  }

  encodeState = (data) => {
    const encoded = window.btoa(JSON.stringify(data));
    return encoded;
  }

  addToUrl = () => {
    const myNewUrlQuery = this.encodeState(this.state.calculatorInfo.data);

    if (window.history.pushState) {
      const newurl = `${window.location.protocol}//${window.location.host}${window.location.pathname}?${myNewUrlQuery}`;
      window.history.pushState({ path:newurl },'',newurl);
    }
  }

  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">
          <div className="SidebarTop Flex Split">
            <h3>
              Excluded Dates:
            </h3>
            <button
              onClick={this.addToUrl}
              className="button button--ujarak button--border-medium button--round-s button--text-thick"
            >
              Save
            </button>
          </div>
          <div className="SidebarContent">
            <div className="Flex Split-Around">
              <div>
                Date:
              </div>
              <div>
                Reason:
              </div>
            </div>
            {this.state.calculatorInfo.data.length === 0
                ? <div>No dates to exclude</div>
                : this.state.calculatorInfo.data.map(item => (
                  <div key={item.date} className="Flex Card Split">
                    <div>{item.date}</div>
                    <div>{item.reason}</div>
                  </div>
                ))
            }
          </div>
        </div>
        <div className="Main Flex Stack bg">
          <div className="Title">{this.state.calculatorInfo.title}</div>
          <div className="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 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;

@@ -67,60 +67,8 @@
 nt';
-%0Aimport excluded_dates from './excluded_dates.json';
 %0A%0A//
@@ -413,22 +413,28 @@
 fo: 
-excluded_dates
+this.decodeToState()
 ,%0A  
@@ -774,10 +774,17 @@
   ? 
-%5B%5D
+undefined
 %0A   
@@ -1048,21 +1048,16 @@
 atorInfo
-.data
 );%0A%0A    
@@ -1647,24 +1647,67 @@
  render() %7B%0A
+    const %7B calculatorInfo %7D = this.state;%0A
     return (
@@ -2386,27 +2386,37 @@
        %7B
-this.state.
+ calculatorInfo && ( 
 calculat
@@ -2507,27 +2507,16 @@
       : 
-this.state.
 calculat
@@ -2745,32 +2745,33 @@
  ))%0A            
+)
 %7D%0A          %3C/di
@@ -2866,28 +2866,49 @@
 %22Title%22%3E
-%7Bthis.state.
+%0A            %7B calculatorInfo && 
 calculat
@@ -2920,16 +2920,27 @@
 o.title%7D
+%0A          
 %3C/div%3E%0A 

Add checks for when the params are empty