<commit_before>import React, { Component } from 'react';
import styled from 'styled-components';
import CardContainer from './CardContainer';
import ButtonContainer from './ButtonContainer';
import Match from './Match';
import locations from '../data/locations.json';
import getCardFromLocation from '../modules/cardFromLocationBuilder.module';

const SwiperStyle = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
`;

const Header = styled.div`
  height: 75px;
  margin-bottom: 50px;
  background: #fff;
`;

const TextArea = styled.div`
  height: 240px;
  font-family: Roboto, sans-serif;
  font-weight: 300;
  color: #878787;
`;

const LogoArea = styled.div`
  width: 100%;
  margin-bottom: 20px;
`;

const Logo = styled.img.attrs({
  src: 'https://cdn-goeuro.com/static_content/hackathon/logo@2x.png',
  width: '180',
})`
  display: block;
  margin: 0 auto;
`;

const WordingTextArea = styled.p`
  text-align: center;
  width: 500px;
  letter-spacing: 0.2px;
  line-height: 1.5;
  margin: 0 auto;
  font-size: 18px
`;

class Swiper extends Component {
  constructor(props) {
    super(props);

    this.state = {
      cardCount: locations.routes.length,
      currentCard: getCardFromLocation(locations.routes.pop()),
      nextCard: getCardFromLocation(locations.routes.pop()),
      animation: '',
      showMatchModal: false,
    };
    this.swipeLeft = this.swipeLeft.bind(this);
    this.swipeRight = this.swipeRight.bind(this);
    this.toggleModal = this.toggleModal.bind(this);
  }

  swipeLeft() {
    if (this.state.animation === '') {
      this.setState({ animation: 'left' });
      setTimeout(() => {
        this.setState({ animation: '' });
        this.flipCard();
      }, 1000);
    }
  }

  swipeRight() {
    if (this.state.animation === '') {
      this.toggleModal();
      // this.setState({
      //   // animation: 'right', // @adds swipe animmation when swiping right
      // });
      // setTimeout(() => {
      //   this.setState({ animation: '' });
      // }, 1000);
    }
  }

  flipCard() {
    const nextCardToBringForward = this.state.nextCard;

    let nextCardInFile;
    if (this.state.cardCount > 0 && locations.routes.length > 0) {
      nextCardInFile = getCardFromLocation(locations.routes.pop());
    }

    if (this.state.cardCount >= 0) {
      this.setState({
        cardCount: this.state.cardCount - 1,
        currentCard: nextCardToBringForward || undefined,
        nextCard: nextCardInFile || undefined,
      });
    }
  }


  toggleModal() {
    this.setState({ showMatchModal: !this.state.showMatchModal });
    if (this.state.showMatchModal) { this.flipCard(); }
  }

  render() {
    const { cardCount, currentCard, nextCard, animation } = this.state;

    return (
      <SwiperStyle>
        <Header />
        <TextArea>
          <LogoArea><Logo /></LogoArea>
          <WordingTextArea>
            If you need a break but can't decide where to go, click the button and let us find somewhere
          for you to fall in love with.
          </WordingTextArea>
        </TextArea>
        <CardContainer
          cardCount={cardCount}
          currentCard={currentCard}
          nextCard={nextCard}
          animation={animation}
        />
        <ButtonContainer
          disabled={cardCount === 0}
          swipeLeft={this.swipeLeft}
          swipeRight={this.swipeRight}
        />
        {this.state.showMatchModal &&
          this.state.currentCard &&
          <Match
            cityName={this.state.cityName}
            price={this.state.price}
            duration={this.state.duration}
            deeplink={this.state.deeplink}
            closeModal={this.toggleModal}
          /><commit_msg>more changes<commit_after>import React, { Component } from 'react';
import styled from 'styled-components';
import CardContainer from './CardContainer';
import ButtonContainer from './ButtonContainer';
import Match from './Match';
import locations from '../data/locations.json';
import getCardFromLocation from '../modules/cardFromLocationBuilder.module';

const SwiperStyle = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
`;

const Header = styled.div`
  height: 75px;
  margin-bottom: 50px;
  background: #fff;
`;

const MainContentArea = styled.div`
  height: 240px;
  font-family: Roboto, sans-serif;
  font-weight: 300;
  color: #878787;
  
  @media (max-width: 500px) {
   display: none;
	}
`;

const LogoArea = styled.div`
  width: 100%;
  margin-bottom: 20px;
`;

const Logo = styled.img.attrs({
  src: 'https://cdn-goeuro.com/static_content/hackathon/logo@2x.png',
  width: '180',
})`
  display: block;
  margin: 0 auto;
`;

const WordingTextArea = styled.p`
  text-align: center;
  width: 500px;
  letter-spacing: 0.2px;
  line-height: 1.5;
  margin: 0 auto;
  font-size: 18px;
  @media (max-width: 500px) {
    width: 350px;
	}
`;

class Swiper extends Component {
  constructor(props) {
    super(props);

    this.state = {
      cardCount: locations.routes.length,
      currentCard: getCardFromLocation(locations.routes.pop()),
      nextCard: getCardFromLocation(locations.routes.pop()),
      animation: '',
      showMatchModal: false,
    };
    this.swipeLeft = this.swipeLeft.bind(this);
    this.swipeRight = this.swipeRight.bind(this);
    this.toggleModal = this.toggleModal.bind(this);
  }

  swipeLeft() {
    if (this.state.animation === '') {
      this.setState({ animation: 'left' });
      setTimeout(() => {
        this.setState({ animation: '' });
        this.flipCard();
      }, 1000);
    }
  }

  swipeRight() {
    if (this.state.animation === '') {
      this.toggleModal();
      // this.setState({
      //   // animation: 'right', // @adds swipe animmation when swiping right
      // });
      // setTimeout(() => {
      //   this.setState({ animation: '' });
      // }, 1000);
    }
  }

  flipCard() {
    const nextCardToBringForward = this.state.nextCard;

    let nextCardInFile;
    if (this.state.cardCount > 0 && locations.routes.length > 0) {
      nextCardInFile = getCardFromLocation(locations.routes.pop());
    }

    if (this.state.cardCount >= 0) {
      this.setState({
        cardCount: this.state.cardCount - 1,
        currentCard: nextCardToBringForward || undefined,
        nextCard: nextCardInFile || undefined,
      });
    }
  }


  toggleModal() {
    this.setState({ showMatchModal: !this.state.showMatchModal });
    if (this.state.showMatchModal) { this.flipCard(); }
  }

  render() {
    const { cardCount, currentCard, nextCard, animation } = this.state;

    return (
      <SwiperStyle>
        <Header />
        <MainContentArea>
          <LogoArea><Logo /></LogoArea>
          <WordingTextArea>
            If you need a break but can't decide where to go, click the button and let us find somewhere
          for you to fall in love with.
          </WordingTextArea>
        </MainContentArea>
        <CardContainer
          cardCount={cardCount}
          currentCard={currentCard}
          nextCard={nextCard}
          animation={animation}
        />
        <ButtonContainer
          disabled={cardCount === 0}
          swipeLeft={this.swipeLeft}
          swipeRight={this.swipeRight}
        />
        {this.state.showMatchModal &&
          this.state.currentCard &&
          <Match
            cityName={this.state.cityName}
            price={this.state.price}
            duration={this.state.duration}
            deeplink={this.state.deeplink}
            closeModal={this.toggleModal}
          />
{'fraction_non_alphanumeric': 0.1376619941814335, 'fraction_numerical': 0.01414969584765935, 'mean_word_length': 2.527518656716418, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 37, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 2, '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': '2610255', 'n_tokens_mistral': 2458, 'n_tokens_neox': 2340, 'n_words': 485}