import React, { Component } from 'react';

import SearchBar from '../container/search-bar';
import Notification from '../container/notification';
import WeatherList from '../container/weather-list';
import Footer from '../container/footer';
import CityList from '../container/city-list';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = { useSwipeToDelete: true };
    this.updateCheckbox = this.updateCheckbox.bind(this);
  }

  componentDidMount() {
    // const menu = document.getElementsByClassName('settings-menu__content')[0];
    // const body = document.getElementById('body');
    // body.addEventListener('click', e => {
    //   const obj = e.target.classList;
    //   // Convert classList into an array.
    //   const classes = Object.keys(obj).map(key => obj[key]);
    //   // If the area clicked was not 'settings-menu__content', close
    //   // the dropup menu.
    //   if (!classes.includes('settings-menu__content')) {
    //     menu.classList.remove('settings-menu__content--display');
    //   }
    // });
  }

  updateCheckbox(e) {
    const target = e.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    this.setState({ useSwipeToDelete: value });
  }

  render() {
    return (
      <div id="app">
        <SearchBar />
        <Notification />
        <CityList />
        <WeatherList useSwipeToDelete={this.state.useSwipeToDelete} />
        <Footer
          updateCheckbox={this.updateCheckbox}
          checkBoxChecked={this.state.useSwipeToDelete}
        />
      </div>
    );
  }
}

@@ -34,16 +34,78 @@
 'react';
+%0Aimport %7B loadState, saveState %7D from '../manageLocalStorage';
 %0A%0Aimport
@@ -559,24 +559,166 @@
 idMount() %7B%0A
+    const settings = loadState('settings');%0A    const useSwipeToDelete = settings.useSwipeToDelete;%0A    this.setState(%7B useSwipeToDelete %7D);%0A%0A
     // const
@@ -1465,24 +1465,74 @@
 : value %7D);%0A
+    saveState(null, %7B useSwipeToDelete: value %7D);%0A
   %7D%0A%0A  rende

load settings on app load, save on settings change