import React, {Component} from 'react';
import {connect} from 'react-redux';
import {GocaraLJ, Gocara80, Gocara60} from './GocaraText';

class AppContainer extends Component {
  click(e) {
    console.log(e.target);
  }

  scrollTo(id) {
    document.getElementsByClassName('_1-121')[0].scrollIntoView();
    document.getElementsByClassName('_1-121')[1].scrollIntoView();
    document.getElementsByClassName('_1-121')[2].scrollIntoView();
    const a = document.getElementsByClassName('gocLJ')[0];
    const b = document.getElementsByClassName('_1-121')[1];
    console.log(a);
    console.log(b);
  }

  render() {
    return (
      <div id="main">
        <header id="title">
          Tibetain-Chinese Sutra Contrast Reading UI on Gocaraparisuddhi
          <button onClick={this.scrollTo}>test</button>
        </header>
        <div id="text">
          <div id="textTop">
            <div id="textTopTitle" className="textTitle">
              <span>麗江大藏經</span>
            </div>
            <div id="textTopContent" className="textContent">
              <GocaraLJ />
            </div>
          </div>
          <div id="textMiddle">
            <div id="textTopTitle" className="textTitle">
              <span>八十華嚴</span>
            </div>
            <div id="textTopContent" className="textContent">
              <Gocara80 />
            </div>
          </div>
          <div id="textBottom">
            <div id="textTopTitle" className="textTitle">
              <span>六十華嚴</span>
            </div>
            <div id="textTopContent" className="textContent">
              <Gocara60 />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    contrast: state.contrast
  };
};

const App = connect(mapStateToProps)(AppContainer);

export default App;

@@ -175,249 +175,279 @@
 %7B%0A  
-click(e) %7B%0A    console.log(e.target);%0A  %7D%0A%0A  scrollTo(id) %7B%0A    document.getElementsByClassName('_1-121')%5B0%5D.scrollIntoView();%0A    document.getElementsByClassName('_1-121')%5B1%5D.scrollIntoView();%0A    document.getElementsByClassName('_1-121')%5B2
+highlight(obj) %7B%0A%0A  %7D%0A%0A  scrollToId(obj) %7B%0A    console.log(obj);%0A    const idx = obj.contrastList.indexOf(obj.clickedSutraName);%0A    for (let i = 0; i %3C obj.contrastList.length; i++) %7B%0A      if (idx !== i) %7B%0A        document.getElementsByClassName(obj.clickedClassName)%5Bi
 %5D.sc
@@ -470,180 +470,118 @@
     
-const a = document.getElementsByClassName('gocLJ')%5B0%5D;%0A    const b = document.getElementsByClassName('_1-121')%5B1%5D;%0A    console.log(a);%0A    console.log(b);%0A  %7D%0A%0A  render() %7B
+  %7D%0A    %7D%0A  %7D%0A%0A  render() %7B%0A    this.scrollToId(this.props.contrast);%0A    this.highlight(this.props.contrast);
 %0A   
@@ -717,64 +717,8 @@
 dhi%0A
-          %3Cbutton onClick=%7Bthis.scrollTo%7D%3Etest%3C/button%3E%0A
     

add scrollTo