<commit_before>import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from './actions';
import App from 'grommet-udacity/components/App';
import { AppNavigation, ToastMessage } from 'components';
import { updatePageTitle, getTitleFromRoute } from 'utils/a11y';

class Main extends Component {
  constructor() {
    super();
    this.handleToggleNav = this.handleToggleNav.bind(this);
    this.handleSetMobile = this.handleSetMobile.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.loadUser = this.loadUser.bind(this);
    this.handleOffline = this.handleOffline.bind(this);
  }
  componentDidMount() {
    this.loadUser();
    const {
      pathname,
    } = this.props.location;
    updatePageTitle(getTitleFromRoute(pathname));
    this.handleSetMobile();
    if (window) {
      window.addEventListener('resize', this.handleSetMobile);
      window.addEventListener('online', this.handleOffline);
      window.addEventListener('offline', this.handleOffline);
    }
  }
  componentWillReceiveProps(newProps) {
    const {
      pathname,
    } = this.props.location;
    const newPathname = newProps.location.pathname;
    if (newPathname !== pathname) {
      updatePageTitle(getTitleFromRoute(newPathname));
    }
    const {
      isOffline,
    } = newProps;
    if (isOffline !== this.props.isOffline) {
      if (isOffline) {
        this.props.actions.appSetError(
          'Warning, the app is now offline.'
        );
      } else {
        this.props.actions.appSetMessage(
          'The app is now back online!'
        );
      }
    }
  }
  componentWillUnmount() {
    if (window) {
      window.removeEventListener('resize', this.handleSetMobile);
      window.removeEventListener('online', this.handleOffline);
      window.removeEventListener('offline', this.handleOffline);
    }
  }
  loadUser() {
    const {
      loadPersistedUser,
      loadPersistedAuthToken,
    } = this.props.actions;
    loadPersistedUser();
    loadPersistedAuthToken();
  }
  handleSetMobile() {
    const isMobile = window.innerWidth <= 860;
    const {
      appSetMobile,
    } = this.props.actions;
    if (isMobile !== this.props.isMobile) {
      appSetMobile(isMobile);
    }
  }
  handleOffline() {
    const isOffline = !navigator.onLine;
    this.props.actions.toggleOfflineMode(isOffline);
  }
  handleToggleNav(e) {
    const {
      appToggleNav,
    } = this.props.actions;
    if (!this.props.navIsActive) {
      document.body.addEventListener('click', this.handleToggleNav);
    } else {
      document.body.removeEventListener('click', this.handleToggleNav);
    }
    if (e.target.parentNode.id === 'mobile-nav' || e.targat.name === 'session-menu') {
      e.stopPropagation();
    } else {
      appToggleNav();
    }
  }
  handleSearch(e) {
    const {
      router,
    } = this.context;
    const {
      setSearchTerm,
      clearSearchTerm,
    } = this.props.actions;
    if (e.target.value) {
      setSearchTerm(e.target.value);
      router.push('/search');
    } else {
      clearSearchTerm();
    }
  }
  render() {
    const {
      user,
      isMobile,
      navIsActive,
      navLinks,<commit_msg>Fix: navbar issue on mobile<commit_after>import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from './actions';
import App from 'grommet-udacity/components/App';
import { AppNavigation, ToastMessage } from 'components';
import { updatePageTitle, getTitleFromRoute } from 'utils/a11y';

class Main extends Component {
  constructor() {
    super();
    this.handleToggleNav = this.handleToggleNav.bind(this);
    this.handleSetMobile = this.handleSetMobile.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.loadUser = this.loadUser.bind(this);
    this.handleOffline = this.handleOffline.bind(this);
  }
  componentDidMount() {
    this.loadUser();
    const {
      pathname,
    } = this.props.location;
    updatePageTitle(getTitleFromRoute(pathname));
    this.handleSetMobile();
    if (window) {
      window.addEventListener('resize', this.handleSetMobile);
      window.addEventListener('online', this.handleOffline);
      window.addEventListener('offline', this.handleOffline);
    }
  }
  componentWillReceiveProps(newProps) {
    const {
      pathname,
    } = this.props.location;
    const newPathname = newProps.location.pathname;
    if (newPathname !== pathname) {
      updatePageTitle(getTitleFromRoute(newPathname));
    }
    const {
      isOffline,
    } = newProps;
    if (isOffline !== this.props.isOffline) {
      if (isOffline) {
        this.props.actions.appSetError(
          'Warning, the app is now offline.'
        );
      } else {
        this.props.actions.appSetMessage(
          'The app is now back online!'
        );
      }
    }
  }
  componentWillUnmount() {
    if (window) {
      window.removeEventListener('resize', this.handleSetMobile);
      window.removeEventListener('online', this.handleOffline);
      window.removeEventListener('offline', this.handleOffline);
    }
  }
  loadUser() {
    const {
      loadPersistedUser,
      loadPersistedAuthToken,
    } = this.props.actions;
    loadPersistedUser();
    loadPersistedAuthToken();
  }
  handleSetMobile() {
    const isMobile = window.innerWidth <= 860;
    const {
      appSetMobile,
    } = this.props.actions;
    if (isMobile !== this.props.isMobile) {
      appSetMobile(isMobile);
    }
  }
  handleOffline() {
    const isOffline = !navigator.onLine;
    this.props.actions.toggleOfflineMode(isOffline);
  }
  handleToggleNav(e) {
    const {
      appToggleNav,
    } = this.props.actions;
    if (!this.props.navIsActive) {
      document.body.addEventListener('click', this.handleToggleNav);
    } else {
      document.body.removeEventListener('click', this.handleToggleNav);
    }
    if (e.target.parentNode.id === 'mobile-nav' || e.target.name === 'session-menu') {
      e.stopPropagation();
    } else {
      appToggleNav();
    }
  }
  handleSearch(e) {
    const {
      router,
    } = this.context;
    const {
      setSearchTerm,
      clearSearchTerm,
    } = this.props.actions;
    if (e.target.value) {
      setSearchTerm(e.target.value);
      router.push('/search');
    } else {
      clearSearchTerm();
    }
  }
  render() {
    const {
      user,
      isMobile,
      navIsActive,
      navLinks,
{'fraction_non_alphanumeric': 0.12774725274725274, 'fraction_numerical': 0.0015262515262515263, 'mean_word_length': 2.8706438275251034, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 3, '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': '6936034', 'n_tokens_mistral': 2023, 'n_tokens_neox': 2016, 'n_words': 343}