<commit_before>import React from 'react';
import { withRouter } from 'react-router-dom'
import superagent from 'superagent-bluebird-promise'
import 導覽 from '../元素/導覽/導覽';
import 全部詞條 from '../元素/詞條/全部詞條';
import 詞條區塊 from '../元素/詞條區塊/詞條區塊';
import PlayerMenu from '../PlayerMenu'
import { ImtongBangtsi, TshaBangTshi } from '../後端'

class BangTsam extends React.Component {

  constructor (props) {
    super(props);
    this.state = {
      關鍵字: this.props.match.params.word || '',
      辭典資料: [],
      imtong: {
        pianho: '',
        gi: '',
        lueiong:'',
        url: '',
      },
      showPlayerMenu: false,
    };
  }

  togglePlayerMenu = () => {
    this.setState({showPlayerMenu: !this.state.showPlayerMenu})
  }

  openPlayerMenu = () => {
    this.setState({showPlayerMenu: true})    
  }

  closePlayerMenu = () => {
    this.setState({showPlayerMenu: false, imtong: {
        pianho: '',
        gi: '',
        lueiong:'',
        url: '',
      }
    })
  }

  換音檔 = (pianho, gi, lueiong) => {
    let { imtong } = this.state
    if(pianho == imtong.pianho && lueiong == imtong.lueiong){
      this.togglePlayerMenu()
      return
    }
    this.openPlayerMenu()
    let url = ImtongBangtsi(pianho, gi)
    this.setState({imtong: {pianho, gi, lueiong, url}});
  }

  clearTshiauTshue = (關鍵字) => {
    this.setState({ 關鍵字 })
  }

  updateBangTsi = (關鍵字) => {
    this.props.history.push({pathname: '/' + 關鍵字});
  }

  getSutian = (關鍵字) => {
    superagent.get(TshaBangTshi())
      .query({ 關鍵字 })
      .then(({ body }) => (
        this.setState({辭典資料: body.符合資料})
      ))
      .catch((err) => ({ '符合資料':[] }));
  }

  tsha = (關鍵字) => {
    this.clearTshiauTshue(關鍵字)
    this.updateBangTsi(關鍵字)
    this.getSutian(關鍵字)
  }

  componentWillMount () {
    this.tsha(this.state.關鍵字)
  }

  render () {
    let { 關鍵字, 辭典資料, imtong, showPlayerMenu } = this.state

    return (
        <div className='app site'>
          <div className='app main'>
            <header className='ui text container padded basic segment'>
              <h1 className='ui header'>
                Kaxabu Muwalak Misa A Ahan Bizu
                <div className='sub header'>噶哈巫語分類辭典</div>
              </h1>
              <div className="ui message">
              <i className='ui icon info'/>搜尋後，點擊你想聽的音標！！
              </div>
            </header>

            <導覽
                kuankianji={關鍵字}
                跳到查詞={this.tsha}
            />
            <全部詞條
              pianho={imtong.pianho}
              換音檔={this.換音檔.bind(this)}
              辭典資料={辭典資料}
            />
          </div>

          <footer>
            <div className='ui inverted segment'>
            <div className='ui center aligned container'>
            <ul className='ui stackable inverted menu'>
              <li className='item'><a href='https://www.facebook.com/events/1662129040716123/'>新書發表會暨使用說明會</a></li>
              <li className='item'><a href='https://www.facebook.com/kaxabu/?fref=ts'>埔里四庄番-噶哈巫族FB</a></li>
              <li className='item'><a href='https://github.com/Taiwanese-Corpus/kaxabu-muwalak-misa-a-ahan-bizu'>Github</a></li>
              <li className='item'><a href='https://ithuan.tw/'>意傳科技維護@2020</a></li>
            </ul>
            </div>
            </div>
          </footer>

          <PlayerMenu 
            showPlayerMenu={showPlayerMenu}
            imtong={imtong}
            handleClose={this.closePlayerMenu}
          />
        </div>
      );
  }
}


export default withRouter(BangTsam)<commit_msg>* Nî-hūn iōng JS sǹg.<commit_after>import React from 'react';
import { withRouter } from 'react-router-dom'
import superagent from 'superagent-bluebird-promise'
import 導覽 from '../元素/導覽/導覽';
import 全部詞條 from '../元素/詞條/全部詞條';
import 詞條區塊 from '../元素/詞條區塊/詞條區塊';
import PlayerMenu from '../PlayerMenu'
import { ImtongBangtsi, TshaBangTshi } from '../後端'

class BangTsam extends React.Component {

  constructor (props) {
    super(props);
    this.state = {
      關鍵字: this.props.match.params.word || '',
      辭典資料: [],
      imtong: {
        pianho: '',
        gi: '',
        lueiong:'',
        url: '',
      },
      showPlayerMenu: false,
    };
  }

  togglePlayerMenu = () => {
    this.setState({showPlayerMenu: !this.state.showPlayerMenu})
  }

  openPlayerMenu = () => {
    this.setState({showPlayerMenu: true})    
  }

  closePlayerMenu = () => {
    this.setState({showPlayerMenu: false, imtong: {
        pianho: '',
        gi: '',
        lueiong:'',
        url: '',
      }
    })
  }

  換音檔 = (pianho, gi, lueiong) => {
    let { imtong } = this.state
    if(pianho == imtong.pianho && lueiong == imtong.lueiong){
      this.togglePlayerMenu()
      return
    }
    this.openPlayerMenu()
    let url = ImtongBangtsi(pianho, gi)
    this.setState({imtong: {pianho, gi, lueiong, url}});
  }

  clearTshiauTshue = (關鍵字) => {
    this.setState({ 關鍵字 })
  }

  updateBangTsi = (關鍵字) => {
    this.props.history.push({pathname: '/' + 關鍵字});
  }

  getSutian = (關鍵字) => {
    superagent.get(TshaBangTshi())
      .query({ 關鍵字 })
      .then(({ body }) => (
        this.setState({辭典資料: body.符合資料})
      ))
      .catch((err) => ({ '符合資料':[] }));
  }

  tsha = (關鍵字) => {
    this.clearTshiauTshue(關鍵字)
    this.updateBangTsi(關鍵字)
    this.getSutian(關鍵字)
  }

  componentWillMount () {
    this.tsha(this.state.關鍵字)
  }

  render () {
    let { 關鍵字, 辭典資料, imtong, showPlayerMenu } = this.state

    return (
        <div className='app site'>
          <div className='app main'>
            <header className='ui text container padded basic segment'>
              <h1 className='ui header'>
                Kaxabu Muwalak Misa A Ahan Bizu
                <div className='sub header'>噶哈巫語分類辭典</div>
              </h1>
              <div className="ui message">
              <i className='ui icon info'/>搜尋後，點擊你想聽的音標！！
              </div>
            </header>

            <導覽
                kuankianji={關鍵字}
                跳到查詞={this.tsha}
            />
            <全部詞條
              pianho={imtong.pianho}
              換音檔={this.換音檔.bind(this)}
              辭典資料={辭典資料}
            />
          </div>

          <footer>
            <div className='ui inverted segment'>
              <div className='ui center aligned container'>
                <ul className='ui stackable inverted menu'>
                  <li className='item'><a href='https://www.facebook.com/events/1662129040716123/'>新書發表會暨使用說明會</a></li>
                  <li className='item'><a href='https://www.facebook.com/kaxabu/?fref=ts'>埔里四庄番-噶哈巫族FB</a></li>
                  <li className='item'><a href='https://github.com/Taiwanese-Corpus/kaxabu-muwalak-misa-a-ahan-bizu'>Github</a></li>
                  <li className='item'><a href='https://ithuan.tw/'>意傳科技維護@{ new Date().getUTCFullYear() }</a></li>
                </ul>
              </div>
            </div>
          </footer>

          <PlayerMenu 
            showPlayerMenu={showPlayerMenu}
            imtong={imtong}
            handleClose={this.closePlayerMenu}
          />
        </div>
      );
  }
}


export default withRouter(BangTsam)
{'fraction_non_alphanumeric': 0.1591385820165012, 'fraction_numerical': 0.005593623269472801, 'mean_word_length': 1.920375663536137, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 103, 'https://': 8, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3924156', 'n_tokens_mistral': 2879, 'n_tokens_neox': 2908, 'n_words': 414}