<commit_before>import React, { Component } from 'react';
import { connect } from 'react-redux';
import Slider from 'react-slick';
import axios from 'axios';
import ToggleDisplay from 'react-toggle-display';
import EventList from '../components/EventList';
import { getEvents, gettingEvents } from '../actions/index';
// import Playlist from '../components/Playlist';
import '../../public/Styles/input.scss';
import '../../public/Styles/howto.scss';


class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showEventList: false,
      showPlaylist: false,
      playlistId: [],
      username: '',
      authenticated: false,
      showLoading: false,
    };
  }

  // onGenerateClick = (username) => {
  //   console.log('Called+++++++++')
  //   this.props.getEvents(username)
  //     .then(() => {
  //       this.setState({ showEventList: true });
  //     });
  // }


  componentWillMount() {
    console.log('BEFORE MOUNT');
    axios.get('/api/checksession').then((data) => {
      console.log(data, 'RESP CHECK SESSION');
      if (data.data === 'logged') {
        this.setState({ authenticated: true });
        // window.location = '/auth/signin';
      } else {
        window.location = '/auth/signin';
        // this.setState({authenticated : true});
      }
    }).catch((err) => {
      this.setState({ authenticated: false });
      window.location = '/auth/signin';
    });
  }

  handleUsername(username) {
    this.setState({ username: username.target.value });
  }

  handleLogout() {
    axios.get('/auth/logout')
        .then((res) => {
          if (res.data === 'logout') {
            window.location = '/login';
          }
        })
        .catch(err => console.error(err));
  }

  handleFirst() {
    const panoramaPlaylist = {
      data: ['panoramanyc', '3Tx6bcrYcvmAA9sblNLPrH'],
    };
    this.renderPlaylist(panoramaPlaylist);
  }

  handleSecond() {
    const govballPlaylist = {
      data: [1265233623, '5lRkpBlgVkBEmVNYSp9BmB'],
    };
    this.renderPlaylist(govballPlaylist);
  }

  handleSubmit(e) {
    const that = this;
    e.preventDefault();
    axios.get('/api/checksession')
    .then((data) => {
      console.log(data, "on submit songkik username");
      if (data.data === 'logged') {
        that.props.gettingEvents();
        axios.get(`/api/events/${this.state.username}`)
        .then((response) => {
          that.props.getEvents(response);
          that.setState({ showEventList: true });
        })
        .catch((error) => {
          console.log(error, 'error in get api/events on submit');
        });
      } else {
        window.location = '/auth/signin';
      }
    })
    .catch((err) => {
      console.log(err, 'error in auth check on submit');
    });
  }

  handleGenre(username){
    const that = this;
    axios.get(`/api/events/${username}`)
    .then((response) => {
      that.props.getEvents(response);
      that.setState({ showEventList: true });
    })
    .catch((error) => {
      console.log(error, 'error in get api/events on submit');
    });
  }

  renderPlaylist(playlistId) {
    console.log("HERE IS THE PLAYLIST ID ARRAY IN RENDERPLAYLIST: ", playlistId)
    const that = this;
    this.setState({
      playlistId: playlistId.data,
      showPlaylist:false });
    this.setState({ showLoading: true }, function () {
      setTimeout(function() {
        $('#loadingModal').modal('hide');
        that.setState({ showLoading:false, showPlaylist: true });
    }, 2000)

    });
    $('#homePlaylistModal').modal('show');
  }

  renderPlaylist2(playlistId) {
    console.log("HERE IS THE PLAYLIST ID ARRAY IN RENDERPLAYLIST: ", playlistId)
    this.setState({
      playlistId: playlistId.data,
      showPlaylist:true });
  }

  render() {
    const settings = {
      dots: true,
      dotsClass: 'slick-dots slick-thumb',
      infinite: true,
      fade: true,
      speed: 1000,
      slidesToShow: 1,
      slidesToScroll: 1,
      swipeToSlide: false,
      autoplay: true,
      autoplaySpeed: 6000,
    };

    if (this.state.authenticated === false) {
      return (<div />);   //Empty page while authorization is checked before
                          //redirect to login
    }

    return (
      <div className="home-container">
        <div className="home-page-container">
          <div className="carousel">
            <Slider {...settings}>
              <div className="top-page-container">
                <div className="home-carousel">
                  <img className="home-header-logo" src="./assets/gigify.svg"/>
                </div>
              </div>
              <a className="carousel-image panorama" data-toggle="modal"  data-target="#loadingModal" onClick={() => this.handleFirst()} />
              <a className="carousel-image govball" data-toggle="modal" data-target="#loadingModal" onClick={() => this.handleSecond()} />
            </Slider>
          </div>
          <div id="songkick-input">
              <div className="search-container">
                <form className="username-form form-group">
                  <div className="search-input form-group">
                    <input
                      type="text" className="username-input input-lg"
                      id="inlineFormInputGroup" placeholder="Enter Songkick username..."
                      value={this.state.username} onChange={this.handleUsername.bind(this)}
                    />
                  <span className="input-icon"><img className="sk-input-logo" src="../assets/sk-badge-black.png" /></span>
                  </div>
                  <div className="form-group">
                    <button
                      type="submit" className="submit-btn input-btn btn btn-lg"
                      onClick={this.handleSubmit.bind(this)}
                      >
                      Submit
                    </button>
                  </div>
                </form>
                <div className="input-loader">
                  <img className="input-loader-gif" id="search-loader" src="../assets/loadingicon.gif" />
                </div>
              </div>
            <div className="or-container">
              <img className="or" src="../../assets/or.svg" />
              </div>
            <div className="genre-container">
                <div className="dropdown">
                  <button
                    className="dropdown-btn btn btn-lg dropdown-toggle"
                    type="button" data-toggle="dropdown">
                    Choose a genre <i className="arrow fa fa-chevron-down" aria-hidden="true" />
                  </button>
                  <ul className="dropdown-menu genres">
                    <li><a onClick={() => this.handleGenre('gigify_edm')}><i className="fa fa-music" aria-hidden="true" /> EDM </a></li>
                    <li><a onClick={() => this.handleGenre('gigify_hiphop')}><i className="fa fa-music" aria-hidden="true" /> Hip Hop </a></li>
                    <li><a onClick={() => this.handleGenre('gigify_indie')}><i className="fa fa-music" aria-hidden="true" /> Indie </a></li>
                    <li><a onClick={() => this.handleGenre('gigify_pop')}><i className="fa fa-music" aria-hidden="true" /> Pop </a></li>
                    <li><a onClick={() => this.handleGenre('gigify_rock')}><i className="fa fa-music" aria-hidden="true" /> Rock </a></li>
                    </ul>
                </div>
                <div className="nyc-events">(NYC Gigs)</div>
                  <div className="input-loader">
                    <img className="input-loader-gif" id="genre-loader" src="../assets/loadingicon.gif" />
                  </div>
              </div>
          </div>
          <div className="howto-container">
            <div className="howto-header">How to Gigify</div>
            <div className="howto-logos">
              <div className="howto col-xs">
                <img src="./assets/sk-badge-black.png" className="howto-logo" alt="Songkick Logo" />
                <p>Find all the upcoming gigs your favorite artists are playing</p>
              </div>
              <i className="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
              <div className="howto col-xs">
                <img src="./assets/music_playlist.svg" className="howto-logo" alt="Playlist Logo" />
                <p>Pick the gigs you'd like to add to your playlist</p>
              </div>
              <i className="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
              <div className="howto col-xs">
                <img src="./assets/Spotify_Icon_RGB_Black.png" className="howto-logo" alt="Spotify Logo" />
                <p>Jam out to your favorite artists and the folks they have tagging along</p>
              </div>
            </div>
          </div>
        </div><commit_msg>feat(Home, search container, genre container): loading gif on submit username and genre<commit_after>import React, { Component } from 'react';
import { connect } from 'react-redux';
import Slider from 'react-slick';
import axios from 'axios';
import ToggleDisplay from 'react-toggle-display';
import EventList from '../components/EventList';
import { getEvents, gettingEvents } from '../actions/index';
// import Playlist from '../components/Playlist';
import '../../public/Styles/input.scss';
import '../../public/Styles/howto.scss';


class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showEventList: false,
      showPlaylist: false,
      playlistId: [],
      username: '',
      authenticated: false,
      showLoading: false,
      showLoadingGif: false,
      showLoadingGifGenre: false,
    };
  }

  // onGenerateClick = (username) => {
  //   console.log('Called+++++++++')
  //   this.props.getEvents(username)
  //     .then(() => {
  //       this.setState({ showEventList: true });
  //     });
  // }


  componentWillMount() {
    console.log('BEFORE MOUNT');
    axios.get('/api/checksession').then((data) => {
      console.log(data, 'RESP CHECK SESSION');
      if (data.data === 'logged') {
        this.setState({ authenticated: true });
        // window.location = '/auth/signin';
      } else {
        window.location = '/auth/signin';
        // this.setState({authenticated : true});
      }
    }).catch((err) => {
      this.setState({ authenticated: false });
      window.location = '/auth/signin';
    });
  }

  componentWillUpdate() {
    !(this.props.loadingplaylist)
    ? this.props.loadingplaylist
    : this.setState({ showLoadingGif: false, showLoadingGifGenre: false });
  }

  handleUsername(username) {
    this.setState({ username: username.target.value });
  }

  handleLogout() {
    axios.get('/auth/logout')
        .then((res) => {
          if (res.data === 'logout') {
            window.location = '/login';
          }
        })
        .catch(err => console.error(err));
  }

  handleFirst() {
    const panoramaPlaylist = {
      data: ['panoramanyc', '3Tx6bcrYcvmAA9sblNLPrH'],
    };
    this.renderPlaylist(panoramaPlaylist);
  }

  handleSecond() {
    const govballPlaylist = {
      data: [1265233623, '5lRkpBlgVkBEmVNYSp9BmB'],
    };
    this.renderPlaylist(govballPlaylist);
  }

  handleSubmit(e) {
    this.setState({ showLoadingGif: true });
    const that = this;
    e.preventDefault();
    axios.get('/api/checksession')
    .then((data) => {
      console.log(data, "on submit songkik username");
      if (data.data === 'logged') {
        that.props.gettingEvents();
        axios.get(`/api/events/${this.state.username}`)
        .then((response) => {
          that.props.getEvents(response);
          that.setState({ showEventList: true });
        })
        .catch((error) => {
          console.log(error, 'error in get api/events on submit');
        });
      } else {
        window.location = '/auth/signin';
      }
    })
    .catch((err) => {
      console.log(err, 'error in auth check on submit');
    });
  }

  handleGenre(username) {
    this.setState({ showLoadingGifGenre: true });
    const that = this;
    that.props.gettingEvents();
    axios.get(`/api/events/${username}`)
    .then((response) => {
      that.props.getEvents(response);
      that.setState({ showEventList: true });
    })
    .catch((error) => {
      console.log(error, 'error in get api/events on submit');
    });
  }

  renderPlaylist(playlistId) {
    console.log("HERE IS THE PLAYLIST ID ARRAY IN RENDERPLAYLIST: ", playlistId)
    const that = this;
    this.setState({
      playlistId: playlistId.data,
      showPlaylist:false });
    this.setState({ showLoading: true }, function () {
      setTimeout(function() {
        $('#loadingModal').modal('hide');
        that.setState({ showLoading:false, showPlaylist: true });
    }, 2000)

    });
    $('#homePlaylistModal').modal('show');
  }

  renderPlaylist2(playlistId) {
    console.log("HERE IS THE PLAYLIST ID ARRAY IN RENDERPLAYLIST: ", playlistId)
    this.setState({
      playlistId: playlistId.data,
      showPlaylist:true });
  }

  render() {
    const settings = {
      dots: true,
      dotsClass: 'slick-dots slick-thumb',
      infinite: true,
      fade: true,
      speed: 1000,
      slidesToShow: 1,
      slidesToScroll: 1,
      swipeToSlide: false,
      autoplay: true,
      autoplaySpeed: 6000,
    };

    if (this.state.authenticated === false) {
      return (<div />);   //Empty page while authorization is checked before
                          //redirect to login
    }

    return (
      <div className="home-container">
        <div className="home-page-container">
          <div className="carousel">
            <Slider {...settings}>
              <div className="top-page-container">
                <div className="home-carousel">
                  <img className="home-header-logo" src="./assets/gigify.svg"/>
                </div>
              </div>
              <a className="carousel-image panorama" data-toggle="modal"  data-target="#loadingModal" onClick={() => this.handleFirst()} />
              <a className="carousel-image govball" data-toggle="modal" data-target="#loadingModal" onClick={() => this.handleSecond()} />
            </Slider>
          </div>
          <div id="songkick-input">
              <div className="search-container">
                <form className="username-form form-group">
                  <div className="search-input form-group">
                    <input
                      type="text" className="username-input input-lg"
                      id="inlineFormInputGroup" placeholder="Enter Songkick username..."
                      value={this.state.username} onChange={this.handleUsername.bind(this)}
                    />
                  <span className="input-icon"><img className="sk-input-logo" src="../assets/sk-badge-black.png" /></span>
                  </div>
                  <div className="form-group">
                    <button
                      type="submit" className="submit-btn input-btn btn btn-lg"
                      onClick={this.handleSubmit.bind(this)}
                      >
                      Submit
                    </button>
                  </div>
                </form>
                <ToggleDisplay id="toggle-search-gif" show={this.state.showLoadingGif}>
                  <div className="input-loader">
                    <img
                      className="input-loader-gif"
                      id="search-loader"
                      src="../assets/loadingicon.gif"
                    />
                  </div>
              </ToggleDisplay>
              </div>
            <div className="or-container">
              <img className="or" src="../../assets/or.svg" />
              </div>
            <div className="genre-container">
                <div className="dropdown">
                  <button
                    className="dropdown-btn btn btn-lg dropdown-toggle"
                    type="button" data-toggle="dropdown">
                    Choose a genre <i className="arrow fa fa-chevron-down" aria-hidden="true" />
                  </button>
                  <ul className="dropdown-menu genres">
                    <li><a onClick={() => this.handleGenre('gigify_edm')}><i className="fa fa-music" aria-hidden="true" /> EDM </a></li>
                    <li><a onClick={() => this.handleGenre('gigify_hiphop')}><i className="fa fa-music" aria-hidden="true" /> Hip Hop </a></li>
                    <li><a onClick={() => this.handleGenre('gigify_indie')}><i className="fa fa-music" aria-hidden="true" /> Indie </a></li>
                    <li><a onClick={() => this.handleGenre('gigify_pop')}><i className="fa fa-music" aria-hidden="true" /> Pop </a></li>
                    <li><a onClick={() => this.handleGenre('gigify_rock')}><i className="fa fa-music" aria-hidden="true" /> Rock </a></li>
                    </ul>
                </div>
                <div className="nyc-events">(NYC Gigs)</div>
              <ToggleDisplay id="toggle-genre-gif" show={this.state.showLoadingGifGenre}>
                <div className="input-loader">
                  <img
                    className="input-loader-gif" id="genre-loader"
                    src="../assets/loadingicon.gif"
                  />
                </div>
              </ToggleDisplay>
              </div>
          </div>
          <div className="howto-container">
            <div className="howto-header">How to Gigify</div>
            <div className="howto-logos">
              <div className="howto col-xs">
                <img src="./assets/sk-badge-black.png" className="howto-logo" alt="Songkick Logo" />
                <p>Find all the upcoming gigs your favorite artists are playing</p>
              </div>
              <i className="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
              <div className="howto col-xs">
                <img src="./assets/music_playlist.svg" className="howto-logo" alt="Playlist Logo" />
                <p>Pick the gigs you'd like to add to your playlist</p>
              </div>
              <i className="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
              <div className="howto col-xs">
                <img src="./assets/Spotify_Icon_RGB_Black.png" className="howto-logo" alt="Spotify Logo" />
                <p>Jam out to your favorite artists and the folks they have tagging along</p>
              </div>
            </div>
          </div>
        </div>
{'fraction_non_alphanumeric': 0.1561470762917769, 'fraction_numerical': 0.0034555369580476216, 'mean_word_length': 1.9339458260731823, 'pattern_counts': {'":': 0, '<': 209, '<?xml version=': 0, '>': 247, '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': '2096985', 'n_tokens_mistral': 5478, 'n_tokens_neox': 5298, 'n_words': 1047}