<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { withRouter, Link } from 'react-router-dom';
import { connect } from 'react-redux';
import styled from 'styled-components';

import UserMenu from './UserMenu';
import LogOut from './LogOut';
import CreatePlaylist from './CreatePlaylist';
import Login from './Login';
import Register from './Register';
import Container from '../common/Container';

import logoImage from '../../img/logo.png';

import {
  toggleLoginWindow,
  toggleCreatePlaylistWindow,
  toggleRegisterWindow,
  toggleLogoutWindow,
  logOut,
  createPlaylist,
  verifyToken,
} from '../../actions';

const mapStateToProps = (state, ownProps) => ({
  ...ownProps,
  username: state.auth.username,
  loggedIn: state.auth.loggedIn,
  loginOpen: state.windows.loginOpen,
  registerOpen: state.windows.registerOpen,
  logoutOpen: state.windows.logoutOpen,
  createPlaylistOpen: state.windows.createPlaylistOpen,
});

const mapDispatchToProps = (dispatch, ownProps) => ({
  verifyToken: () => {
    dispatch(verifyToken());
  },
  onOpenLoginClick: () => {
    dispatch(toggleLoginWindow());
  },
  onOpenRegisterClick: () => {
    dispatch(toggleRegisterWindow());
  },
  onOpenLogoutClick: () => {
    dispatch(toggleLogoutWindow());
  },
  onOpenCreatePlaylistClick: () => {
    dispatch(toggleCreatePlaylistWindow());
  },
  onLogoutClick: () => {
    dispatch(logOut());
  },
  onCreatePlaylistSubmit: (title, description) => {
    dispatch(createPlaylist(title, description, ownProps.history));
  },
});

const HeaderContainer = styled.header`
  height: 50px;
  width: 100%;
  background-color: #212121;
  border-bottom: 1px solid #666666;
  @media (min-width: 1280px) {
      position: fixed;
      top: 0;
      z-index: 30;
  }
  @media (max-width: 1279px) and (min-width: 992px) {
      position: fixed;
      top: 0;
      z-index: 2;
  }
  @media (min-width: 320px) and (max-width: 479px) {
    header {
        height: auto;
    }
  }
`;

const RightMenu = styled.div`
  align-self: flex-end;
  flex: 1;
`;

const Logo = styled(Link)`
  background: url(${logoImage}) left center;
  margin: 0px;
  margin-top: 2px;
  height: 42px;
  padding-left: 42px;
  font-size: 30px;
  background-repeat: no-repeat;
  background-size: contain;
  line-height: 46px;
  width: auto;
  float:left;
  color: #ffffff;
  font-weight: 200;
  @media (max-width: 992px) {
      margin-left: 0px;
      width: 50px;
  }
  @media (max-width: 768px) {
    width: 30px;
    margin-left: 0px;
    background-repeat: no-repeat;
    background-position: center left;
    text-indent: -99999px;     
  }
`;


class Header extends React.Component {
  componentDidMount() {<commit_msg>Fixes typo that caused a crash<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { withRouter, Link } from 'react-router-dom';
import { connect } from 'react-redux';
import styled from 'styled-components';

import UserMenu from './UserMenu';
import LogOut from './LogOut';
import CreatePlaylist from './CreatePlaylist';
import Login from './Login';
import Register from './Register';
import Container from '../common/Container';

import logoImage from '../../img/logo.png';

import {
  toggleLoginWindow,
  toggleCreatePlaylistWindow,
  toggleRegisterWindow,
  toggleLogoutWindow,
  logOut,
  createPlaylist,
  verifyToken,
} from '../../actions';

const mapStateToProps = (state, ownProps) => ({
  ...ownProps,
  username: state.auth.username,
  loggedIn: state.auth.loggedIn,
  loginOpen: state.windows.loginOpen,
  registerOpen: state.windows.registerOpen,
  logoutOpen: state.windows.logoutOpen,
  createPlaylistOpen: state.windows.createPlaylistOpen,
});

const mapDispatchToProps = (dispatch, ownProps) => ({
  verifyToken: () => {
    dispatch(verifyToken());
  },
  onOpenLoginClick: () => {
    dispatch(toggleLoginWindow());
  },
  onOpenRegisterClick: () => {
    dispatch(toggleRegisterWindow());
  },
  onOpenLogoutClick: () => {
    dispatch(toggleLogoutWindow());
  },
  onOpenCreatePlaylistClick: () => {
    dispatch(toggleCreatePlaylistWindow());
  },
  onLogoutClick: () => {
    dispatch(logOut());
  },
  onCreatePlaylistSubmit: (title, description) => {
    dispatch(createPlaylist(title, description, ownProps.history));
  },
});

const HeaderContainer = styled.header`
  height: 50px;
  width: 100%;
  background-color: #212121;
  border-bottom: 1px solid #666666;
  @media (min-width: 1280px) {
      position: fixed;
      top: 0;
      z-index: 30;
  }
  @media (max-width: 1279px) and (min-width: 992px) {
      position: fixed;
      top: 0;
      z-index: 2;
  }
  @media (min-width: 320px) and (max-width: 479px) {
    header {
        height: auto;
    }
  }
`;

const RightMenu = styled.div`
  align-self: flex-end;
  flex: 1;
`;

const Logo = styled.div`
  background: url(${logoImage}) left center;
  margin: 0px;
  margin-top: 2px;
  height: 42px;
  padding-left: 42px;
  font-size: 30px;
  background-repeat: no-repeat;
  background-size: contain;
  line-height: 46px;
  width: auto;
  float:left;
  color: #ffffff;
  font-weight: 200;
  @media (max-width: 992px) {
      margin-left: 0px;
      width: 50px;
  }
  @media (max-width: 768px) {
    width: 30px;
    margin-left: 0px;
    background-repeat: no-repeat;
    background-position: center left;
    text-indent: -99999px;     
  }
`;


class Header extends React.Component {
  componentDidMount() {
{'fraction_non_alphanumeric': 0.14543114543114544, 'fraction_numerical': 0.02610774039345468, 'mean_word_length': 3.6062658763759528, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 21, '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': '2209540', 'n_tokens_mistral': 1925, 'n_tokens_neox': 1806, 'n_words': 413}