<commit_before>import React, { Component } from 'react';
import Relay from 'react-relay';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import styled from 'styled-components';
import ProjectRoute from '../../relay/ProjectRoute';
import CheckContext from '../../CheckContext';
import { mediaQuery, units, black02, black54, black87, headerHeight, black32 } from '../../styles/js/variables';

class ProjectHeaderComponent extends Component {
  componentDidMount() {
    this.subscribe();
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  getPusher() {
    const context = new CheckContext(this);
    return context.getContextStore().pusher;
  }

  unsubscribe() {
    const pusher = this.getPusher();
    if (pusher) {
      pusher.unsubscribe(this.props.project.team.pusher_channel);
    }
  }

  subscribe() {
    const pusher = this.getPusher();
    if (pusher) {
      const that = this;
      pusher.subscribe(this.props.project.team.pusher_channel).bind('project_created', () => {
        that.props.relay.forceFetch();
      });
    }
  }

  render() {
    const currentProject = this.props.project;

    const StyledDropDownMenu = styled(DropDownMenu)`
      max-width: 60vw;
      height: ${headerHeight} !important;
      ${mediaQuery.handheld` max-width: 40vw; `}
      &:hover {
        background-color: ${black02};
      }
    `;

    const styles = {
      menuItemStyle: {
        minWidth: 200,
        padding: `${units(1.5)} 0`,
        lineHeight: units(2.5),
        whiteSpace: 'wrap',
      },
      menuStyle: {
        minWidth: 200,
      },
      labelStyle: {
        color: black54,
        paddingLeft: units(1),
      },
      iconStyle: {
        fill: black32,
      },
      underlineStyle: {
        borderWidth: 0,
      },
      selectedMenuItemStyle: {
        color: black87,
      },
    };

    return (
      <StyledDropDownMenu
        anchorOrigin={{ vertical: 'center', horizontal: 'left' }}
        autoWidth={false}
        className="project-header__title"
        iconStyle={styles.iconStyle}
        labelStyle={styles.labelStyle}
        menuItemStyle={styles.menuItemStyle}
        menuStyle={styles.menuStyle}
        underlineStyle={styles.underlineStyle}
        value={currentProject.title}
        selectedMenuItemStyle={styles.selectedMenuItemStyle}
      >
        {currentProject.team.projects.edges
            .sortp((a, b) => a.node.title.localeCompare(b.node.title))
            .map((p) => {
              const projectPath = `/${currentProject.team.slug}/project/${p.node.dbid}`;
              return (
                <MenuItem
                  className="project-list__project"
                  href={projectPath}
                  key={p.node.dbid}
                  primaryText={p.node.title}
                  value={p.node.title}
                  style={{ color: black54 }}
                />
              );
            })}
      </StyledDropDownMenu>
    );
  }
}

ProjectHeaderComponent.contextTypes = {
  store: React.PropTypes.object,
};

const ProjectHeaderContainer = Relay.createContainer(ProjectHeaderComponent, {
  fragments: {
    project: () => Relay.QL`
      fragment on Project {
        id,
        dbid,
        title,
        description,
        permissions,
        get_slack_channel,
        team {
          id,
          dbid,
          slug,
          permissions,
          pusher_channel,
          get_slack_notifications_enabled,
          projects(first: 10000) {
            edges {
              node {
                title,
                dbid,
                id,
              }
            }
          }
        }
      }
    `,
  },
});

class ProjectHeader extends Component {
  render() {
    if (this.props.params && this.props.params.projectId) {
      const route = new ProjectRoute({ contextId: this.props.params.projectId });
      return (<Relay.RootContainer
        Component={ProjectHeaderContainer}
        route={route}
      />);
    }
    return null;
  }
}

export default ProjectHeader;
<commit_msg>#6203 Hide projectHeader dropdown on mobile<commit_after>import React, { Component } from 'react';
import Relay from 'react-relay';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import styled from 'styled-components';
import ProjectRoute from '../../relay/ProjectRoute';
import CheckContext from '../../CheckContext';
import { mediaQuery, units, black02, black54, black87, headerHeight, black32 } from '../../styles/js/variables';

class ProjectHeaderComponent extends Component {
  componentDidMount() {
    this.subscribe();
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  getPusher() {
    const context = new CheckContext(this);
    return context.getContextStore().pusher;
  }

  unsubscribe() {
    const pusher = this.getPusher();
    if (pusher) {
      pusher.unsubscribe(this.props.project.team.pusher_channel);
    }
  }

  subscribe() {
    const pusher = this.getPusher();
    if (pusher) {
      const that = this;
      pusher.subscribe(this.props.project.team.pusher_channel).bind('project_created', () => {
        that.props.relay.forceFetch();
      });
    }
  }

  render() {
    const currentProject = this.props.project;

    const StyledDropDownMenu = styled(DropDownMenu)`
      max-width: 60vw;
      height: ${headerHeight} !important;
      ${mediaQuery.handheld` display: none !important;`}
      &:hover {
        background-color: ${black02};
      }
    `;

    const styles = {
      menuItemStyle: {
        minWidth: 200,
        padding: `${units(1.5)} 0`,
        lineHeight: units(2.5),
        whiteSpace: 'wrap',
      },
      menuStyle: {
        minWidth: 200,
      },
      labelStyle: {
        color: black54,
        paddingLeft: units(1),
      },
      iconStyle: {
        fill: black32,
      },
      underlineStyle: {
        borderWidth: 0,
      },
      selectedMenuItemStyle: {
        color: black87,
      },
    };

    return (
      <StyledDropDownMenu
        anchorOrigin={{ vertical: 'center', horizontal: 'left' }}
        autoWidth={false}
        className="project-header__title"
        iconStyle={styles.iconStyle}
        labelStyle={styles.labelStyle}
        menuItemStyle={styles.menuItemStyle}
        menuStyle={styles.menuStyle}
        underlineStyle={styles.underlineStyle}
        value={currentProject.title}
        selectedMenuItemStyle={styles.selectedMenuItemStyle}
      >
        {currentProject.team.projects.edges
            .sortp((a, b) => a.node.title.localeCompare(b.node.title))
            .map((p) => {
              const projectPath = `/${currentProject.team.slug}/project/${p.node.dbid}`;
              return (
                <MenuItem
                  className="project-list__project"
                  href={projectPath}
                  key={p.node.dbid}
                  primaryText={p.node.title}
                  value={p.node.title}
                  style={{ color: black54 }}
                />
              );
            })}
      </StyledDropDownMenu>
    );
  }
}

ProjectHeaderComponent.contextTypes = {
  store: React.PropTypes.object,
};

const ProjectHeaderContainer = Relay.createContainer(ProjectHeaderComponent, {
  fragments: {
    project: () => Relay.QL`
      fragment on Project {
        id,
        dbid,
        title,
        description,
        permissions,
        get_slack_channel,
        team {
          id,
          dbid,
          slug,
          permissions,
          pusher_channel,
          get_slack_notifications_enabled,
          projects(first: 10000) {
            edges {
              node {
                title,
                dbid,
                id,
              }
            }
          }
        }
      }
    `,
  },
});

class ProjectHeader extends Component {
  render() {
    if (this.props.params && this.props.params.projectId) {
      const route = new ProjectRoute({ contextId: this.props.params.projectId });
      return (<Relay.RootContainer
        Component={ProjectHeaderContainer}
        route={route}
      />);
    }
    return null;
  }
}

export default ProjectHeader;

{'fraction_non_alphanumeric': 0.12126003405497446, 'fraction_numerical': 0.00997324252006811, 'mean_word_length': 1.976112920738328, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 19, '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': '122894', 'n_tokens_mistral': 2407, 'n_tokens_neox': 2346, 'n_words': 424}