import React, { Component } from 'react';
import Weather from './Weather';
import TenDay from './TenDay'
import SevenHour from './SevenHour'
import $ from 'jquery';
import dataCleaner from '../helpers/dataCleaner'

export default class Controls extends Component {
  constructor(props) {
    super(props);
    this.state = {
      locationInputField: localStorage.getItem('recentSearch') || '',
      locationResults   : {},
    };
  }

  componentDidMount() {
    if(localStorage.length){
      this.handleClickEvent()
    }
  }

  

  handleClickEvent() {
    $.get(this.props.source + this.state.locationInputField + '.json').then(data => {
      this.state.locationResults = dataCleaner(data);
      localStorage.setItem('recentSearch', this.state.locationInputField)
      this.setState({ locationInputField: '', locationResults: this.state.locationResults })
    })
  }

  render() {
    return (
      <div>
        <div className='header'>
          <h1>weathrly</h1>
          <div className='inputs'>
            <input placeholder='City, State or Zip Code' className='searchInput' type='text' value={this.state.locationInputField}
                             onChange={(e) => this.setState({ locationInputField: e.target.value })}/>
            <input className='searchSubmit' type='submit' onClick={() => this.handleClickEvent()}/>
          </div>
        </div>
        <Weather locationResults={this.state.locationResults}/>
        <h2>Seven Hour Forecast</h2>
        <SevenHour locationResults={this.state.locationResults} />
        <section> Ten Day Forecast </section>
        <TenDay locationResults={this.state.locationResults} />
      </div>
    );
  }
}

@@ -526,16 +526,124 @@
 %0A  %7D%0A%0A  
+toggleTenDay() %7B%0A    let tenDayToggle = document.querySelector('.tenDaySection').style.display = 'block'%0A  %7D
 %0A%0A  hand
@@ -1659,17 +1659,75 @@
    %3C
-section%3E 
+button className='tenDayButton'onClick=%7B() =%3E this.toggleTenDay()%7D%3E
 Ten 
@@ -1742,16 +1742,14 @@
 cast
- 
 %3C/
-secti
+butt
 on%3E%0A

Update Controls.js