<commit_before>import * as React from 'react'
import {Link, withRouter} from 'react-router'
import {throttle} from 'lodash'
import Icon from '../Icon/Icon'
import ServerLayover from '../ServerLayover/ServerLayover'
import {chapters, neighboorSubchapter, subchapters, getLastSubchapterAlias} from '../../utils/content'
import {collectHeadings, buildHeadingsTree} from '../../utils/markdown'
import {slug} from '../../utils/string'
import {StoredState, getStoredState, update} from '../../utils/statestore'

require('./style.css')

const styles: any = require('./App.module.styl')

interface Props {
  children: React.ReactElement<any>
  router: any
  params: any
  location: any
}

interface State {
  showLayover: boolean
  storedState: StoredState
  expandNavButtons: boolean
  showNav: boolean
}

class App extends React.Component<Props, State> {

  static childContextTypes = {
    storedState: React.PropTypes.object.isRequired,
    updateStoredState: React.PropTypes.func.isRequired,
  }

  constructor(props: Props) {
    super(props)

    if (props.location.query.code) {
      this.fetchEndpoint(props.location.query.code)
    }

    this.state = {
      showLayover: false,
      storedState: getStoredState(),
      expandNavButtons: false,
      showNav: false,
    }

    this.onScroll = throttle(this.onScroll.bind(this), 100)
  }

  componentDidMount() {
    window.addEventListener('scroll', this.onScroll, false)

    this.onScroll()
  }

  componentDidUpdate() {
    this.onScroll()
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.onScroll, false)
  }

  getChildContext() {
    return {
      storedState: this.state.storedState,
      updateStoredState: this.updateStoredState,
    }
  }

  render() {
    const currentSubchapterAlias = this.props.params.subchapter
    const currentSubchapter = subchapters.find((s) => s.alias === currentSubchapterAlias)

    const headingsTree = currentSubchapter ? buildHeadingsTree(collectHeadings(currentSubchapter!.ast())) : []

    const nextSubchapter = neighboorSubchapter(currentSubchapterAlias, true)
    const previousSubchapter = neighboorSubchapter(currentSubchapterAlias, false)

    const lastSubchapterAlias = getLastSubchapterAlias(Object.keys(this.state.storedState.hasRead))

    return (
      <div className='flex row-reverse'>
        <div className={styles.hamburger} onClick={this.toggleNav}>
          <div className={styles.hamburgerWrapper}/>
        </div>
        <div
          className={`
            flex flex-column vertical-line font-small fixed left-0 h-100 overflow-x-visible
            ${styles.sidebar}
          `}
          style={{
            width: 270,
            display: this.state.showNav ? 'flex' : 'none',
          }}
        >

          <div className='relative pb6 overflow-y-scroll' ref='sidenav'>
            <div className={styles.close} onClick={this.toggleNav}>
              <Icon
                src={require('../../assets/icons/close.svg')}
                width={25}
                height={25}
                color='rgba(0,0,0,0.5)'
              />
            </div>
            <Link to='/' onClick={this.toggleNav}>
              <h2 className='fw3 pa4 pb0 black'>
                <span className='dib mr3 mrl-1'>
                  <Icon
                    src={require('../../assets/icons/logo.svg')}
                    width={22}
                    height={22}
                  />
                </span>
                Learn Apollo
              </h2>
            </Link>
            {chapters.map((chapter, index) => (
              <div
                className='flex flex-column'
                key={chapter.alias}
              >
                <Link
                  className='fw6 ph4 pb3 black'
                  to={`/${chapter.alias}/${chapter.subchapters[0].alias}`}
                  onClick={this.toggleNav}
                  style={{
                    paddingBottom: '0.5rem',
                    paddingTop: '1rem',
                  }}
                >
                  <span className='mr3 o-20 bold'>{index + 1}</span> {chapter.title}
                </Link>
                {chapter.subchapters.map((subchapter) => (
                  <div
                    className='pb1'
                    key={subchapter.alias}
                  >
                    <div
                      className={`
                      relative
                      ${this.props.params.subchapter === subchapter.alias ? 'ph4 bg-black-05' : 'ph4'}
                      ${this.props.params.subchapter === subchapter.alias ? styles.currentProgressBar : ''}
                      `}
                      onClick={this.toggleNav}
                      style={{
                        paddingTop: '0.5rem',
                        paddingBottom: '0.5rem',
                      }}
                    >
                      {subchapter.alias === lastSubchapterAlias &&
                      <div className={styles.progressBar}/>
                      }
                      {this.state.storedState.hasRead[subchapter.alias] &&
                      <span className='mr3 fw5 green dib'>
                          <Icon
                            src={require('../../assets/icons/check_chapter.svg')}
                            width={8}
                            height={8}
                            color={'#64BF00'}
                          />
                        </span>
                      }
                      <div
                        ref={`link-${slug(subchapter.alias)}`}
                        className='dib'
                      >
                        {!this.state.storedState.hasRead[subchapter.alias] &&
                        <span
                          className='mr3 fw5 green dib'
                          style={{
                              width: 8,
                              height: 8,
                            }}
                        />
                        }
                        <Link
                          to={`/${chapter.alias}/${subchapter.alias}`}
                          className='black fw3'
                          onClick={this.toggleNav}
                        >
                          {subchapter.title}
                        </Link>
                      </div>
                    </div>
                    {chapter.alias === this.props.params.chapter &&
                    subchapter.alias === this.props.params.subchapter &&
                    headingsTree.map((h) => (
                      <a
                        onClick={this.toggleNav}
                        key={h.title!}
                        className={`flex flex-row flex-start black ${styles.subchapter}`}
                        href={`#${slug(h.title!)}`}
                      >
                        <div className='ml4 mr2 fw5 bold o-20 black rotate-180 dib indent-char-dimensions'>¬</div>
                        <div>{h.title}</div>
                      </a>
                    ))}
                  </div>
                ))}
              </div>
            ))}
          </div>
          {this.state.storedState.user && this.state.storedState.user.projectId &&
          <div
            className={`
              fixed bottom-0 left-0 flex fw3 items-center justify-center bg-accent pointer ${styles.serverButton}
            `}
            style={{ width: 269, height: 90 }}
            onClick={this.openLayover}
          >
            <Icon
              src={require('../../assets/icons/graph-logo.svg')}
              width={22}
              height={24}
              className='pt1'
              color='#fff'
            />
            <span className='white f3 pl2'>GraphQL Server</span>
          </div>
          }
        </div>
        <div className={`absolute right-0 ph4 o-50 black gray-2 f6 tr ${styles.lastUpdated}`}>
          Last updated<br />
          {__LAST_UPDATE__}
        </div>
        <div className={`${styles.content} ${this.state.showLayover ? styles.layoverPadding : ''}`}>
          {this.props.children}
          {previousSubchapter &&<commit_msg>Added "powered by.." message to layover button<commit_after>import * as React from 'react'
import {Link, withRouter} from 'react-router'
import {throttle} from 'lodash'
import Icon from '../Icon/Icon'
import ServerLayover from '../ServerLayover/ServerLayover'
import {chapters, neighboorSubchapter, subchapters, getLastSubchapterAlias} from '../../utils/content'
import {collectHeadings, buildHeadingsTree} from '../../utils/markdown'
import {slug} from '../../utils/string'
import {StoredState, getStoredState, update} from '../../utils/statestore'

require('./style.css')

const styles: any = require('./App.module.styl')

interface Props {
  children: React.ReactElement<any>
  router: any
  params: any
  location: any
}

interface State {
  showLayover: boolean
  storedState: StoredState
  expandNavButtons: boolean
  showNav: boolean
}

class App extends React.Component<Props, State> {

  static childContextTypes = {
    storedState: React.PropTypes.object.isRequired,
    updateStoredState: React.PropTypes.func.isRequired,
  }

  constructor(props: Props) {
    super(props)

    if (props.location.query.code) {
      this.fetchEndpoint(props.location.query.code)
    }

    this.state = {
      showLayover: false,
      storedState: getStoredState(),
      expandNavButtons: false,
      showNav: false,
    }

    this.onScroll = throttle(this.onScroll.bind(this), 100)
  }

  componentDidMount() {
    window.addEventListener('scroll', this.onScroll, false)

    this.onScroll()
  }

  componentDidUpdate() {
    this.onScroll()
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.onScroll, false)
  }

  getChildContext() {
    return {
      storedState: this.state.storedState,
      updateStoredState: this.updateStoredState,
    }
  }

  render() {
    const currentSubchapterAlias = this.props.params.subchapter
    const currentSubchapter = subchapters.find((s) => s.alias === currentSubchapterAlias)

    const headingsTree = currentSubchapter ? buildHeadingsTree(collectHeadings(currentSubchapter!.ast())) : []

    const nextSubchapter = neighboorSubchapter(currentSubchapterAlias, true)
    const previousSubchapter = neighboorSubchapter(currentSubchapterAlias, false)

    const lastSubchapterAlias = getLastSubchapterAlias(Object.keys(this.state.storedState.hasRead))

    return (
      <div className='flex row-reverse'>
        <div className={styles.hamburger} onClick={this.toggleNav}>
          <div className={styles.hamburgerWrapper}/>
        </div>
        <div
          className={`
            flex flex-column vertical-line font-small fixed left-0 h-100 overflow-x-visible
            ${styles.sidebar}
          `}
          style={{
            width: 270,
            display: this.state.showNav ? 'flex' : 'none',
          }}
        >

          <div className='relative pb6 overflow-y-scroll' ref='sidenav'>
            <div className={styles.close} onClick={this.toggleNav}>
              <Icon
                src={require('../../assets/icons/close.svg')}
                width={25}
                height={25}
                color='rgba(0,0,0,0.5)'
              />
            </div>
            <Link to='/' onClick={this.toggleNav}>
              <h2 className='fw3 pa4 pb0 black'>
                <span className='dib mr3 mrl-1'>
                  <Icon
                    src={require('../../assets/icons/logo.svg')}
                    width={22}
                    height={22}
                  />
                </span>
                Learn Apollo
              </h2>
            </Link>
            {chapters.map((chapter, index) => (
              <div
                className='flex flex-column'
                key={chapter.alias}
              >
                <Link
                  className='fw6 ph4 pb3 black'
                  to={`/${chapter.alias}/${chapter.subchapters[0].alias}`}
                  onClick={this.toggleNav}
                  style={{
                    paddingBottom: '0.5rem',
                    paddingTop: '1rem',
                  }}
                >
                  <span className='mr3 o-20 bold'>{index + 1}</span> {chapter.title}
                </Link>
                {chapter.subchapters.map((subchapter) => (
                  <div
                    className='pb1'
                    key={subchapter.alias}
                  >
                    <div
                      className={`
                      relative
                      ${this.props.params.subchapter === subchapter.alias ? 'ph4 bg-black-05' : 'ph4'}
                      ${this.props.params.subchapter === subchapter.alias ? styles.currentProgressBar : ''}
                      `}
                      onClick={this.toggleNav}
                      style={{
                        paddingTop: '0.5rem',
                        paddingBottom: '0.5rem',
                      }}
                    >
                      {subchapter.alias === lastSubchapterAlias &&
                      <div className={styles.progressBar}/>
                      }
                      {this.state.storedState.hasRead[subchapter.alias] &&
                      <span className='mr3 fw5 green dib'>
                          <Icon
                            src={require('../../assets/icons/check_chapter.svg')}
                            width={8}
                            height={8}
                            color={'#64BF00'}
                          />
                        </span>
                      }
                      <div
                        ref={`link-${slug(subchapter.alias)}`}
                        className='dib'
                      >
                        {!this.state.storedState.hasRead[subchapter.alias] &&
                        <span
                          className='mr3 fw5 green dib'
                          style={{
                              width: 8,
                              height: 8,
                            }}
                        />
                        }
                        <Link
                          to={`/${chapter.alias}/${subchapter.alias}`}
                          className='black fw3'
                          onClick={this.toggleNav}
                        >
                          {subchapter.title}
                        </Link>
                      </div>
                    </div>
                    {chapter.alias === this.props.params.chapter &&
                    subchapter.alias === this.props.params.subchapter &&
                    headingsTree.map((h) => (
                      <a
                        onClick={this.toggleNav}
                        key={h.title!}
                        className={`flex flex-row flex-start black ${styles.subchapter}`}
                        href={`#${slug(h.title!)}`}
                      >
                        <div className='ml4 mr2 fw5 bold o-20 black rotate-180 dib indent-char-dimensions'>¬</div>
                        <div>{h.title}</div>
                      </a>
                    ))}
                  </div>
                ))}
              </div>
            ))}
          </div>
          {this.state.storedState.user && this.state.storedState.user.projectId &&
          <div
            className={`
              fixed bottom-0 left-0 flex fw3 items-center justify-center flex-column bg-accent pointer ${styles.serverButton}
            `}
            style={{ width: 269, height: 90 }}
            onClick={this.openLayover}
          >
            <div className='flex-row flex'>
              <Icon
                src={require('../../assets/icons/graph-logo.svg')}
                width={22}
                height={24}
                className='pt1'
                color='#fff'
              />
              <span className='white f3 pl2'>GraphQL Server</span>
            </div>
            <span className='white'>powered by Graphcool</span>
          </div>
          }
        </div>
        <div className={`absolute right-0 ph4 o-50 black gray-2 f6 tr ${styles.lastUpdated}`}>
          Last updated<br />
          {__LAST_UPDATE__}
        </div>
        <div className={`${styles.content} ${this.state.showLayover ? styles.layoverPadding : ''}`}>
          {this.props.children}
          {previousSubchapter &&
{'fraction_non_alphanumeric': 0.12029618839524156, 'fraction_numerical': 0.011289147851420248, 'mean_word_length': 1.31809229037704, 'pattern_counts': {'":': 0, '<': 115, '<?xml version=': 0, '>': 123, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, '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': '4862288', 'n_tokens_mistral': 4497, 'n_tokens_neox': 4193, 'n_words': 753}