<commit_before>import React from 'react'
import PropTypes from 'prop-types'
import IconButton from 'material-ui/IconButton'
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert'
import { logout } from 'js/authentication/user'
import { goToLogin } from 'js/navigation/navigation'
import {
  dashboardIconActiveColor,
  dashboardIconInactiveColor,
} from 'js/theme/default'
import logger from 'js/utils/logger'
import Hearts from 'js/components/Dashboard/HeartsContainer'
import SettingsDropdown from 'js/components/Dashboard/SettingsDropdownComponent'

class UserMenu extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      menuIconHover: false,
      menuOpen: false,
      menuPopoverAnchorElem: null,
    }
  }

  async logout() {
    var logoutSuccess = false
    try {
      logoutSuccess = await logout()
    } catch (e) {
      logger.error(e)
    }
    if (logoutSuccess) {
      goToLogin()
    }
  }

  onMenuClick(event) {
    this.setState({
      menuOpen: !this.state.open,
      menuPopoverAnchorElem: event.currentTarget,
    })
  }

  handleMenuPopoverClose() {
    this.setState({
      menuOpen: false,
    })
  }

  onMenuIconHover(hovering) {
    this.setState({
      menuIconHover: hovering,
    })
  }

  onHover(hovering) {
    this.setState({
      hover: hovering,
    })
  }

  render() {
    const { app, user, isUserAnonymous } = this.props
    const { menuOpen, menuPopoverAnchorElem } = this.state
    if (!user || !app) {
      return null
    }
    const userMenuStyle = {
      display: 'flex',
      alignItems: 'center',
    }

    // Menu style
    const menuIconButtonStyle = {
      padding: 0,
      width: 40,
      height: 40,
    }
    const menuIconStyle = {
      color: this.state.menuIconHover
        ? dashboardIconActiveColor
        : dashboardIconInactiveColor,
      transition: 'color 300ms ease-in',
      fontSize: 22,
    }

    // TODO: add level bar
    return (
      <div style={userMenuStyle}>
        <Hearts app={app} user={user} />
        <IconButton
          style={menuIconButtonStyle}
          iconStyle={menuIconStyle}
          onMouseEnter={this.onMenuIconHover.bind(this, true)}
          onMouseLeave={this.onMenuIconHover.bind(this, false)}
          onClick={this.onMenuClick.bind(this)}<commit_msg>TODO notes<commit_after>import React from 'react'
import PropTypes from 'prop-types'
import IconButton from 'material-ui/IconButton'
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert'
import { logout } from 'js/authentication/user'
import { goToLogin } from 'js/navigation/navigation'
import {
  dashboardIconActiveColor,
  dashboardIconInactiveColor,
} from 'js/theme/default'
import logger from 'js/utils/logger'
import Hearts from 'js/components/Dashboard/HeartsContainer'
import SettingsDropdown from 'js/components/Dashboard/SettingsDropdownComponent'

class UserMenu extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      menuIconHover: false,
      menuOpen: false,
      menuPopoverAnchorElem: null,
    }
  }

  async logout() {
    var logoutSuccess = false
    try {
      logoutSuccess = await logout()
    } catch (e) {
      logger.error(e)
    }
    if (logoutSuccess) {
      goToLogin()
    }
  }

  onMenuClick(event) {
    this.setState({
      menuOpen: !this.state.open,
      menuPopoverAnchorElem: event.currentTarget,
    })
  }

  handleMenuPopoverClose() {
    this.setState({
      menuOpen: false,
    })
  }

  onMenuIconHover(hovering) {
    this.setState({
      menuIconHover: hovering,
    })
  }

  onHover(hovering) {
    this.setState({
      hover: hovering,
    })
  }

  render() {
    const { app, user, isUserAnonymous } = this.props
    const { menuOpen, menuPopoverAnchorElem } = this.state
    if (!user || !app) {
      return null
    }
    const userMenuStyle = {
      display: 'flex',
      alignItems: 'center',
    }

    // Menu style
    const menuIconButtonStyle = {
      padding: 0,
      width: 40,
      height: 40,
    }
    const menuIconStyle = {
      color: this.state.menuIconHover
        ? dashboardIconActiveColor
        : dashboardIconInactiveColor,
      transition: 'color 300ms ease-in',
      fontSize: 22,
    }

    // TODO: move MoneyRaised component here
    // TODO: move settings icon into its own component
    // TODO: add more tests for UserMenu
    return (
      <div style={userMenuStyle}>
        <Hearts app={app} user={user} />
        <IconButton
          style={menuIconButtonStyle}
          iconStyle={menuIconStyle}
          onMouseEnter={this.onMenuIconHover.bind(this, true)}
          onMouseLeave={this.onMenuIconHover.bind(this, false)}
          onClick={this.onMenuClick.bind(this)}
{'fraction_non_alphanumeric': 0.10740507656807216, 'fraction_numerical': 0.004195510803440319, 'mean_word_length': 2.739607843137255, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 7, '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': '8720', 'n_tokens_mistral': 1510, 'n_tokens_neox': 1478, 'n_words': 311}