<commit_before>import React from 'react'
import ReactDOM from 'react-dom'
import { Route } from 'react-router-dom'
import { I, H, B, PAD, lightGray, red } from './bricks'
import MarkdownViewer from './MarkdownViewer'
import ScrollToMe from './ScrollToMe'

export const API = [
  { name: 'BrowserRouter',
    html: require('../api/BrowserRouter.md')
  },
  { name: 'HashRouter',
    html: require('../api/HashRouter.md')
  },
  { name: 'MemoryRouter',
    html: require('../api/MemoryRouter.md')
  },
  { name: 'NativeRouter',
    html: require('../api/NativeRouter.md')
  },
  { name: 'StaticRouter',
    html: require('../api/StaticRouter.md')
  },
  { name: 'Router',
    html: require('../api/Router.md')
  },
  { name: 'Route',
    html: require('../api/Route.md')
  },
  { name: 'Switch',
    html: require('../api/Switch.md')
  },
  { name: 'Link',
    html: require('../api/Link.md')
  },
  { name: 'Redirect',
    html: require('../api/Redirect.md')
  },
  { name: 'Prompt',
    html: require('../api/Prompt.md')
  },
  { name: 'withRouter',
    html: require('../api/withRouter.md')
  },
  { name: 'context.router',
    html: require('../api/context.router.md')
  },
  { name: 'history',
    html: require('../api/history.md')
  },
  { name: 'match',
    html: require('../api/match.md')
  }
]

const $ = (node, selector) => (
  [].slice.call(node.querySelectorAll(selector))
)

class APIDocs extends React.Component {
  state = {
    overflow: 'hidden'
  }

  listenToWindowScroll() {
    window.addEventListener('scroll', this.handleWindowScroll)
  }

  handleWindowScroll = () => {
    const top = this.root.offsetTop
    const bottom = top + this.root.offsetHeight
    const fold = window.innerHeight + window.scrollY
    const topIsVisible = top <= fold && window.scrollY <= top
    const bottomIsVisible = bottom <= fold
    console.log('BLAH')
    if (topIsVisible && bottomIsVisible) {
      this.setState({ overflow: 'auto' })
    } else if (this.state.overflow === 'auto') {
      this.setState({ overflow: 'hidden' })
    }
  }

  componentDidMount() {
    this.listenToWindowScroll()
    const items = $(this.root, '.api-entry').map(entry => {
      const name = $(entry, 'h1')[0].childNodes[1].textContent.trim()
      const hash = $(entry, 'h1 a')[0].hash
      const children = $(entry, 'h2').map(node => ({
        name: node.childNodes[1].textContent.trim(),
        hash: $(node, 'a')[0].hash
      }))
      return { name, hash, children }
    })

    this.renderMenu(items)
  }

  renderMenu(items) {
    const element = (
      <B fontFamily="Monaco, monospace">
        {items.map(item => (
          <B key={item.hash} margin="10px">
            <B component="a" props={{ href: item.hash }} fontWeight="bold" color={red} hoverTextDecoration="underline">{item.name}</B>
            <B marginLeft="20px">
              {item.children.map(({ hash, name }) => (
                <B key={hash} component="a" props={{ href: hash }} color={lightGray} hoverTextDecoration="underline">{name}</B>
              ))}
            </B>
          </B>
        ))}
      </B>
    )

    ReactDOM.render(element, this.menu)
  }

  render() {
    const { overflow } = this.state
    return (
      <B props={{ ref: node => this.root = node }}>
        <Route exact path="/api" component={ScrollToMe}/>
        <H height="95vh">
          <B props={{ ref: node => this.menu = node }} height="100%" overflow={overflow} fontSize="80%" padding="40px" background="#f0f0f0"/>
          <B flex="1" height="100%" overflow={overflow}>
            <B>{this.state.overflow}</B>
            {API.map((doc, i) => (
              <B className="api-entry" key={i} padding="40px 60px">
                <MarkdownViewer html={doc.html}/>
              </B>
            ))}
          </B>
        </H>
      </B>
    )
  }
}

export default APIDocs<commit_msg>remove debugging element<commit_after>import React from 'react'
import ReactDOM from 'react-dom'
import { Route } from 'react-router-dom'
import { I, H, B, PAD, lightGray, red } from './bricks'
import MarkdownViewer from './MarkdownViewer'
import ScrollToMe from './ScrollToMe'

export const API = [
  { name: 'BrowserRouter',
    html: require('../api/BrowserRouter.md')
  },
  { name: 'HashRouter',
    html: require('../api/HashRouter.md')
  },
  { name: 'MemoryRouter',
    html: require('../api/MemoryRouter.md')
  },
  { name: 'NativeRouter',
    html: require('../api/NativeRouter.md')
  },
  { name: 'StaticRouter',
    html: require('../api/StaticRouter.md')
  },
  { name: 'Router',
    html: require('../api/Router.md')
  },
  { name: 'Route',
    html: require('../api/Route.md')
  },
  { name: 'Switch',
    html: require('../api/Switch.md')
  },
  { name: 'Link',
    html: require('../api/Link.md')
  },
  { name: 'Redirect',
    html: require('../api/Redirect.md')
  },
  { name: 'Prompt',
    html: require('../api/Prompt.md')
  },
  { name: 'withRouter',
    html: require('../api/withRouter.md')
  },
  { name: 'context.router',
    html: require('../api/context.router.md')
  },
  { name: 'history',
    html: require('../api/history.md')
  },
  { name: 'match',
    html: require('../api/match.md')
  }
]

const $ = (node, selector) => (
  [].slice.call(node.querySelectorAll(selector))
)

class APIDocs extends React.Component {
  state = {
    overflow: 'hidden'
  }

  listenToWindowScroll() {
    window.addEventListener('scroll', this.handleWindowScroll)
  }

  handleWindowScroll = () => {
    const top = this.root.offsetTop
    const bottom = top + this.root.offsetHeight
    const fold = window.innerHeight + window.scrollY
    const topIsVisible = top <= fold && window.scrollY <= top
    const bottomIsVisible = bottom <= fold
    console.log('BLAH')
    if (topIsVisible && bottomIsVisible) {
      this.setState({ overflow: 'auto' })
    } else if (this.state.overflow === 'auto') {
      this.setState({ overflow: 'hidden' })
    }
  }

  componentDidMount() {
    this.listenToWindowScroll()
    const items = $(this.root, '.api-entry').map(entry => {
      const name = $(entry, 'h1')[0].childNodes[1].textContent.trim()
      const hash = $(entry, 'h1 a')[0].hash
      const children = $(entry, 'h2').map(node => ({
        name: node.childNodes[1].textContent.trim(),
        hash: $(node, 'a')[0].hash
      }))
      return { name, hash, children }
    })

    this.renderMenu(items)
  }

  renderMenu(items) {
    const element = (
      <B fontFamily="Monaco, monospace">
        {items.map(item => (
          <B key={item.hash} margin="10px">
            <B component="a" props={{ href: item.hash }} fontWeight="bold" color={red} hoverTextDecoration="underline">{item.name}</B>
            <B marginLeft="20px">
              {item.children.map(({ hash, name }) => (
                <B key={hash} component="a" props={{ href: hash }} color={lightGray} hoverTextDecoration="underline">{name}</B>
              ))}
            </B>
          </B>
        ))}
      </B>
    )

    ReactDOM.render(element, this.menu)
  }

  render() {
    const { overflow } = this.state
    return (
      <B props={{ ref: node => this.root = node }}>
        <Route exact path="/api" component={ScrollToMe}/>
        <H height="95vh">
          <B props={{ ref: node => this.menu = node }} height="100%" overflow={overflow} fontSize="80%" padding="40px" background="#f0f0f0"/>
          <B flex="1" height="100%" overflow={overflow}>
            {API.map((doc, i) => (
              <B className="api-entry" key={i} padding="40px 60px">
                <MarkdownViewer html={doc.html}/>
              </B>
            ))}
          </B>
        </H>
      </B>
    )
  }
}

export default APIDocs
{'fraction_non_alphanumeric': 0.191015625, 'fraction_numerical': 0.008333333333333333, 'mean_word_length': 2.5314942528735633, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 65, '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': '5449384', 'n_tokens_mistral': 2573, 'n_tokens_neox': 2525, 'n_words': 512}