<commit_before>// React
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link, hashHistory } from 'react-router'

// Material UI
import injectTapEventPlugin from 'react-tap-event-plugin'; injectTapEventPlugin()
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import AppBar from 'material-ui/AppBar'
import IconButton from 'material-ui/IconButton'
import Drawer from 'material-ui/Drawer'
import Popover from 'material-ui/Popover'
import { List, ListItem } from 'material-ui/List'
import Divider from 'material-ui/Divider'

// icons
import MenuButton from 'material-ui/svg-icons/navigation/menu'
import ChatIcon from 'material-ui/svg-icons/communication/chat'
import SettingsIcon from 'material-ui/svg-icons/action/settings'
import ExitIcon from 'material-ui/svg-icons/action/exit-to-app'
import AccountIcon from 'material-ui/svg-icons/action/account-circle'

// custom components
import Room from './room'

class Main extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      logged: false
    }
  }

  render() {
    return(
      <MuiThemeProvider>
        <div>
          <AppBar
            title="chatroom"
            iconElementLeft={ <Nav /> }
            />
          { this.props.children }
        </div>
      </MuiThemeProvider>
    )
  }
}

class Nav extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      open: false
    }

    this.close = this.close.bind(this)
    this.open = this.open.bind(this)
  }

  close() { this.setState({open: false}) }
  open() { this.setState({open: true}) }

  rooms() {
    // in the future, this would return some recommended rooms, but for now we can hard code them
    const rooms = ['John', 'Paul', 'George', 'Ringo']
    const result = rooms.map((room, i) => {
      return(
        <ListItem
          key = { i }
          primaryText = { room }
          containerElement={ <Link to={ "/room/" + room }/> }
          onTouchTap = { this.close }/>
      )
    })

    return result
  }

  render() {
    return (
      <div>
        <IconButton onTouchTap = { this.open }>
          <MenuButton/>
        </IconButton>
        <Drawer
          docked = { false }
          open = { this.state.open }
          onRequestChange = { this.close } >
            <List>
              <ListItem primaryText = "Profile" leftIcon = { <AccountIcon /> }/>
              <ListItem primaryText = "Settings" leftIcon = { <SettingsIcon /> }/>
              <ListItem primaryText = "Rooms"
                        leftIcon = { <ChatIcon /> }
                        nestedItems = { this.rooms() }
                        primaryTogglesNestedList = { true }
                        initiallyOpen = { false } />
              <Divider />
              <ListItem primaryText = "Log out"
                leftIcon = { <ExitIcon /> }
                href = "/logout" />
            </List>
        </Drawer>
      </div>
    )
  }
}

render((
  <Router history = { hashHistory }>
    <Route path = "/" component = { Main }>
      <Route path = "profile" component = { Main } />
      <Route path = "settings" component = { Main } />
      <Route path = "room">
        <Route path = "/room/:roomId" component = { Room }/>
      </Route>
    </Route>
  </Router>
), document.getElementById('app'))
<commit_msg>move icons to the right<commit_after>// React
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link, hashHistory } from 'react-router'

// Material UI
import injectTapEventPlugin from 'react-tap-event-plugin'; injectTapEventPlugin()
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import AppBar from 'material-ui/AppBar'
import IconButton from 'material-ui/IconButton'
import Drawer from 'material-ui/Drawer'
import Popover from 'material-ui/Popover'
import { List, ListItem } from 'material-ui/List'
import Divider from 'material-ui/Divider'

// icons
import MenuButton from 'material-ui/svg-icons/navigation/menu'
import ChatIcon from 'material-ui/svg-icons/communication/chat'
import SettingsIcon from 'material-ui/svg-icons/action/settings'
import ExitIcon from 'material-ui/svg-icons/action/exit-to-app'
import AccountIcon from 'material-ui/svg-icons/action/account-circle'

// custom components
import Room from './room'

class Main extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      logged: false
    }
  }

  render() {
    return(
      <MuiThemeProvider>
        <div>
          <AppBar
            title="chatroom"
            iconElementLeft={ <Nav /> }
            />
          { this.props.children }
        </div>
      </MuiThemeProvider>
    )
  }
}

class Nav extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      open: false
    }

    this.close = this.close.bind(this)
    this.open = this.open.bind(this)
  }

  close() { this.setState({open: false}) }
  open() { this.setState({open: true}) }

  rooms() {
    // in the future, this would return some recommended rooms, but for now we can hard code them
    const rooms = ['John', 'Paul', 'George', 'Ringo']
    const result = rooms.map((room, i) => {
      return(
        <ListItem
          key = { i }
          primaryText = { room }
          containerElement={ <Link to={ "/room/" + room }/> }
          onTouchTap = { this.close }/>
      )
    })

    return result
  }

  render() {
    return (
      <div>
        <IconButton onTouchTap = { this.open }>
          <MenuButton/>
        </IconButton>
        <Drawer
          docked = { false }
          open = { this.state.open }
          onRequestChange = { this.close } >
            <List>
              <ListItem primaryText = "Profile" rightIcon = { <AccountIcon /> }/>
              <ListItem primaryText = "Settings" rightIcon = { <SettingsIcon /> }/>
              <ListItem primaryText = "Rooms"
                        rightIcon = { <ChatIcon /> }
                        nestedItems = { this.rooms() }
                        primaryTogglesNestedList = { true }
                        initiallyOpen = { false } />
              <Divider />
              <ListItem primaryText = "Log out"
                rightIcon = { <ExitIcon /> }
                href = "/logout" />
            </List>
        </Drawer>
      </div>
    )
  }
}

render((
  <Router history = { hashHistory }>
    <Route path = "/" component = { Main }>
      <Route path = "profile" component = { Main } />
      <Route path = "settings" component = { Main } />
      <Route path = "room">
        <Route path = "/room/:roomId" component = { Room }/>
      </Route>
    </Route>
  </Router>
), document.getElementById('app'))

{'fraction_non_alphanumeric': 0.13104061666172548, 'fraction_numerical': 0.0, 'mean_word_length': 2.065424806905952, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 75, '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': '5652824', 'n_tokens_mistral': 2002, 'n_tokens_neox': 1974, 'n_words': 486}