<commit_before>import React, { Component } from 'react'
import PropTypes from 'prop-types'

import { Link } from 'react-router'
import classnames from 'classnames'

import ReactSidebar from 'react-sidebar'
import { connect } from 'nuclear-js-react-addons'

import SidebarHeader from './SidebarHeader'
import SidebarFooter from './SidebarFooter'
import getters from '~/stores/getters'
import actions from '~/actions'

import RulesChecker from '+/views/RulesChecker'

const style = require('./Sidebar.scss')

@connect(props => ({
  modules: getters.modules,
  UI: getters.UI
}))

class Sidebar extends Component {

  static contextTypes = {
    router: PropTypes.object.isRequired
  }

  constructor(props, context) {
    super(props, context)

    this.state = {
      sidebarOpen: false,
      sidebarDocked: false
    }

    this.onSetSidebarOpen = this.onSetSidebarOpen.bind(this)
    this.mediaQueryChanged = this.mediaQueryChanged.bind(this)
    this.renderModuleItem = this.renderModuleItem.bind(this)
  }

  onSetSidebarOpen(open) {
    this.setState({ sidebarOpen: open })
  }

  componentWillMount() {
    var mql = window.matchMedia(`(min-width: 800px)`)
    mql.addListener(this.mediaQueryChanged)
    this.setState({ mql: mql, sidebarDocked: mql.matches })
  }

  componentWillUnmount() {
    this.state.mql.removeListener(this.mediaQueryChanged)
  }

  mediaQueryChanged() {
    this.setState({ sidebarDocked: this.state.mql.matches })
  }

  routeActive(paths) {
    paths = Array.isArray(paths) ? paths : [paths]
    for (let p in paths) {
      if (this.context.router.isActive(paths[p])) {
        return true
      }
    }

    return false
  }

  renderModuleItem(module) {
    const path = `/modules/${module.name}`
    const iconPath = `/img/modules/${module.name}.png`

    const classNames = this.getActiveClassNames(this.routeActive(path))

    const hasCustomIcon = module.menuIcon === 'custom'
    const moduleIcon = hasCustomIcon
      ? <img className={classnames(style.customIcon, 'bp-custom-icon')} src={iconPath} />
      : <i className="icon material-icons">{module.menuIcon}</i>

    return <li key={`menu_module_${module.name}`} className={classNames}>
      <Link to={path} title={module.menuText}>
        {moduleIcon}
        <span>{module.menuText}</span>
      </Link>
    </li>
  }

  getActiveClassNames = (condition) => {
    return classnames({
      'bp-sidebar-active': condition,
      [style.active]: condition
    })
  }
  
  renderBasicItem(name, path, rule, activePaths, icon) {
    const isAt = (paths) => {
      return paths.includes(location.pathname)
    }

    const className = this.getActiveClassNames(isAt(activePaths))

    return <RulesChecker res={rule.res} op={rule.op}>
        <li className={className} key={path}>
          <Link to={path} title={name}>
            <i className="icon material-icons">{icon}</i>
            {name}
          </Link>
        </li>
      </RulesChecker>
  }

  render() {

    const modules = this.props.modules
    const items = modules.toJS().filter(x => !x.noInterface).map(this.renderModuleItem)

    const emptyClassName = classnames({
      [style.empty]: true,
      'bp-empty': true
    })

    const dashboardRules = { res:'dashboard', op:'read' }
    const modulesRules = { res:'modules/list', op:'read' }
    const ummRules = { res:'umm', op:'read' }
    const middlewareRules = { res:'middleware', op:'read' }

    const dashboardPaths = ['', '/', '/dashboard']
    const modulesPaths = ['/manage']
    const ummPaths = ['/umm']
    const middlewarePaths = ['/middleware']

    const sidebarContent = <div className={classnames(style.sidebar, 'bp-sidebar')}>
      <SidebarHeader/>
      <ul className="nav">
        {this.renderBasicItem('Dashboard', 'dashboard', dashboardRules, dashboardPaths, 'dashboard')}
        {this.renderBasicItem('Modules', 'manage', modulesRules, modulesPaths, 'build')}
        {/*this.renderBasicItem('UMM', 'umm', ummRules, ummPaths, 'code')*/}<commit_msg>Add content view to the sidebar<commit_after>import React, { Component } from 'react'
import PropTypes from 'prop-types'

import { Link } from 'react-router'
import classnames from 'classnames'

import ReactSidebar from 'react-sidebar'
import { connect } from 'nuclear-js-react-addons'

import SidebarHeader from './SidebarHeader'
import SidebarFooter from './SidebarFooter'
import getters from '~/stores/getters'
import actions from '~/actions'

import RulesChecker from '+/views/RulesChecker'

const style = require('./Sidebar.scss')

@connect(props => ({
  modules: getters.modules,
  UI: getters.UI
}))

class Sidebar extends Component {

  static contextTypes = {
    router: PropTypes.object.isRequired
  }

  constructor(props, context) {
    super(props, context)

    this.state = {
      sidebarOpen: false,
      sidebarDocked: false
    }

    this.onSetSidebarOpen = this.onSetSidebarOpen.bind(this)
    this.mediaQueryChanged = this.mediaQueryChanged.bind(this)
    this.renderModuleItem = this.renderModuleItem.bind(this)
  }

  onSetSidebarOpen(open) {
    this.setState({ sidebarOpen: open })
  }

  componentWillMount() {
    var mql = window.matchMedia(`(min-width: 800px)`)
    mql.addListener(this.mediaQueryChanged)
    this.setState({ mql: mql, sidebarDocked: mql.matches })
  }

  componentWillUnmount() {
    this.state.mql.removeListener(this.mediaQueryChanged)
  }

  mediaQueryChanged() {
    this.setState({ sidebarDocked: this.state.mql.matches })
  }

  routeActive(paths) {
    paths = Array.isArray(paths) ? paths : [paths]
    for (let p in paths) {
      if (this.context.router.isActive(paths[p])) {
        return true
      }
    }

    return false
  }

  renderModuleItem(module) {
    const path = `/modules/${module.name}`
    const iconPath = `/img/modules/${module.name}.png`

    const classNames = this.getActiveClassNames(this.routeActive(path))

    const hasCustomIcon = module.menuIcon === 'custom'
    const moduleIcon = hasCustomIcon
      ? <img className={classnames(style.customIcon, 'bp-custom-icon')} src={iconPath} />
      : <i className="icon material-icons">{module.menuIcon}</i>

    return <li key={`menu_module_${module.name}`} className={classNames}>
      <Link to={path} title={module.menuText}>
        {moduleIcon}
        <span>{module.menuText}</span>
      </Link>
    </li>
  }

  getActiveClassNames = (condition) => {
    return classnames({
      'bp-sidebar-active': condition,
      [style.active]: condition
    })
  }
  
  renderBasicItem(name, path, rule, activePaths, icon) {
    const isAt = (paths) => {
      return paths.includes(location.pathname)
    }

    const className = this.getActiveClassNames(isAt(activePaths))

    return <RulesChecker res={rule.res} op={rule.op}>
        <li className={className} key={path}>
          <Link to={path} title={name}>
            <i className="icon material-icons">{icon}</i>
            {name}
          </Link>
        </li>
      </RulesChecker>
  }

  render() {

    const modules = this.props.modules
    const items = modules.toJS().filter(x => !x.noInterface).map(this.renderModuleItem)

    const emptyClassName = classnames({
      [style.empty]: true,
      'bp-empty': true
    })

    const dashboardRules = { res:'dashboard', op:'read' }
    const modulesRules = { res:'modules/list', op:'read' }
    const ummRules = { res:'umm', op:'read' }
    const contentRules = { res: 'content', op:'read' }
    const middlewareRules = { res:'middleware', op:'read' }

    const dashboardPaths = ['', '/', '/dashboard']
    const modulesPaths = ['/manage']
    const ummPaths = ['/umm']
    const contentPaths = ['/content']
    const middlewarePaths = ['/middleware']

    const sidebarContent = <div className={classnames(style.sidebar, 'bp-sidebar')}>
      <SidebarHeader/>
      <ul className="nav">
        {this.renderBasicItem('Dashboard', 'dashboard', dashboardRules, dashboardPaths, 'dashboard')}
        {this.renderBasicItem('Modules', 'manage', modulesRules, modulesPaths, 'build')}
        {/*this.renderBasicItem('UMM', 'umm', ummRules, ummPaths, 'code')*/}
        {this.renderBasicItem('Content', 'content', contentRules, contentPaths, 'create')}
{'fraction_non_alphanumeric': 0.14510617525018307, 'fraction_numerical': 0.000732243104710764, 'mean_word_length': 3.4130317716747443, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 51, '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': '2476812', 'n_tokens_mistral': 2576, 'n_tokens_neox': 2537, 'n_words': 521}