<commit_before>import React, {Component} from "react";
import {
  StyleSheet,
  View,
  Text,
  Image,
  ScrollView
} from "react-native";
import dateFormat from "dateformat";
import {Ionicons} from "@exponent/vector-icons";
import Button from "react-native-button";

import ChatHeads from "../components/ChatHeads";
import FlexibleImage from "./FlexibleImage";
import store from "../store";

export default class EventDetailView extends Component {
  constructor(props) {
    super(props);
    this.toggleSignup = this.toggleSignup.bind(this);
  }

  toggleSignup() {
    if (!this.props.signedUp) {
      store.dispatch({
        type: "ADD_EVENT",
        event: this.props.eventInfo
      });
    } else {
      store.dispatch({
        type: "REMOVE_EVENT",
        event: this.props.eventInfo
      });
    }
  }

  render() {
    var signUpView = null;
    if (this.props.signedUp) {
      signUpView = (
        <View style={styles.signUpView}>
          <Ionicons name="md-checkmark-circle-outline" style={styles.signUpViewText} />
          <Text style={styles.signUpViewText}>{"I'm going"}</Text>
          <Button onPress={this.toggleSignup}>
            Cancel
          </Button>
        </View>
      );
    } else {
      signUpView = (
        <Button
          containerStyle={styles.buttonContainer}
          style={styles.button}
          onPress={this.toggleSignup}
        >
          Sign up
        </Button>
      );
    }

    var dateDisplay = dateFormat(this.props.eventInfo.date, "mmmm dd, h:MM tt");

    return (
      <View style={{flex: 1}}>
        <ScrollView style={{flex: 1}}>
          <View style={styles.header}>
            {/* Header */}
            <FlexibleImage source={this.props.eventInfo.image} />
            <Text style={styles.title}>{this.props.eventInfo.title}</Text>
          </View>
          {signUpView}
          <View style={styles.body}>
            {/* metadata*/}
            <View>
              <Text style={styles.location}>{this.props.eventInfo.location}</Text>
              <Text style={styles.date}>{dateDisplay}</Text>
            </View>
            <View>
              {/* Event details */}
              <Text style={styles.eventDetail}>{this.props.eventInfo.description}</Text>
            </View>
            <View>
              {/* Organizer details */}
              <Text style={styles.organizerName}>{"About " + this.props.eventInfo.organizer.name}</Text>
              <Text style={styles.organizerBio}>{this.props.eventInfo.organizer.bio}</Text>
            </View>
          </View>
          <View style={styles.chatHeadsBar}>
            <ChatHeads style={styles.chatHeads} title="Who's going:" attendees={this.props.eventInfo.people} organizer={this.props.eventInfo.organizer} />
          </View>
        </ScrollView>
      </View>
    );
  }
};

EventDetailView.propTypes = {
  /* True when the user is signed up for this event and false otherwise */
  signedUp: React.PropTypes.bool,
  /* Event object */
  eventInfo: React.PropTypes.shape({
    /* Event id */
    id: React.PropTypes.number.isRequired,
    /* Event title */
    title: React.PropTypes.string.isRequired,
    /* Event description */
    description: React.PropTypes.string.isRequired,
    /* Information about the event organizer */
    organizer: React.PropTypes.shape({
      /* The name of the organizer */
      name: React.PropTypes.string.isRequired,
      /* The biography or description of the organizer */
      bio: React.PropTypes.string.isRequired,
      /* `image` should be an image as returned by require("image-uri") */
      image: React.PropTypes.number
    }).isRequired,
    /* `image` should be an image as returned by require("image-uri") */
    image: React.PropTypes.number.isRequired,
    /* The human-formatted date string to be displayed for the event */
    date: React.PropTypes.string.isRequired,
    /* The human-formatted location string to be displayed for the event */
    location: React.PropTypes.string.isRequired,
    /* The attendees of the event */
    people: React.PropTypes.arrayOf(React.PropTypes.shape({
      name: React.PropTypes.string.isRequired,
      /* `image` should be an image as returned by require("image-uri") */
      image: React.PropTypes.number.isRequired
    })).isRequired
  }).isRequired,
};

const styles = StyleSheet.create({
  header: {
    flexDirection: "column",
    height: 300,
    backgroundColor: "black"
  },
  body: {
    flex: 1,
    padding: 25,
    paddingTop: 0
  },
  title: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    textAlign: "center",
    color: "white",
    fontSize: 19,
    padding: 10,<commit_msg>Switch to prop-based event dispatch<commit_after>import React, {Component} from "react";
import {
  StyleSheet,
  View,
  Text,
  Image,
  ScrollView
} from "react-native";
import dateFormat from "dateformat";
import {Ionicons} from "@exponent/vector-icons";
import Button from "react-native-button";
import {connect} from "react-redux";

import ChatHeads from "../components/ChatHeads";
import FlexibleImage from "./FlexibleImage";
import store from "../store";

class EventDetailView extends Component {
  render() {
    var signUpView = null;
    if (this.props.signedUp) {
      signUpView = (
        <View style={styles.signUpView}>
          <Ionicons name="md-checkmark-circle-outline" style={styles.signUpViewText} />
          <Text style={styles.signUpViewText}>{"I'm going"}</Text>
          <Button onPress={this.props.cancelEvent}>
            Cancel
          </Button>
        </View>
      );
    } else {
      signUpView = (
        <Button
          containerStyle={styles.buttonContainer}
          style={styles.button}
          onPress={this.props.signupForEvent}
        >
          Sign up
        </Button>
      );
    }

    var dateDisplay = dateFormat(this.props.eventInfo.date, "mmmm dd, h:MM tt");

    return (
      <View style={{flex: 1}}>
        <ScrollView style={{flex: 1}}>
          <View style={styles.header}>
            {/* Header */}
            <FlexibleImage source={this.props.eventInfo.image} />
            <Text style={styles.title}>{this.props.eventInfo.title}</Text>
          </View>
          {signUpView}
          <View style={styles.body}>
            {/* metadata*/}
            <View>
              <Text style={styles.location}>{this.props.eventInfo.location}</Text>
              <Text style={styles.date}>{dateDisplay}</Text>
            </View>
            <View>
              {/* Event details */}
              <Text style={styles.eventDetail}>{this.props.eventInfo.description}</Text>
            </View>
            <View>
              {/* Organizer details */}
              <Text style={styles.organizerName}>{"About " + this.props.eventInfo.organizer.name}</Text>
              <Text style={styles.organizerBio}>{this.props.eventInfo.organizer.bio}</Text>
            </View>
          </View>
          <View style={styles.chatHeadsBar}>
            <ChatHeads style={styles.chatHeads} title="Who's going:" attendees={this.props.eventInfo.people} organizer={this.props.eventInfo.organizer} />
          </View>
        </ScrollView>
      </View>
    );
  }
};

EventDetailView.propTypes = {
  /* True when the user is signed up for this event and false otherwise */
  signedUp: React.PropTypes.bool,
  /* Event object */
  eventInfo: React.PropTypes.shape({
    /* Event id */
    id: React.PropTypes.number.isRequired,
    /* Event title */
    title: React.PropTypes.string.isRequired,
    /* Event description */
    description: React.PropTypes.string.isRequired,
    /* Information about the event organizer */
    organizer: React.PropTypes.shape({
      /* The name of the organizer */
      name: React.PropTypes.string.isRequired,
      /* The biography or description of the organizer */
      bio: React.PropTypes.string.isRequired,
      /* `image` should be an image as returned by require("image-uri") */
      image: React.PropTypes.number
    }).isRequired,
    /* `image` should be an image as returned by require("image-uri") */
    image: React.PropTypes.number.isRequired,
    /* The human-formatted date string to be displayed for the event */
    date: React.PropTypes.string.isRequired,
    /* The human-formatted location string to be displayed for the event */
    location: React.PropTypes.string.isRequired,
    /* The attendees of the event */
    people: React.PropTypes.arrayOf(React.PropTypes.shape({
      name: React.PropTypes.string.isRequired,
      /* `image` should be an image as returned by require("image-uri") */
      image: React.PropTypes.number.isRequired
    })).isRequired
  }).isRequired,
};

const mapDispatchToProps = function(dispatch, ownProps) {
  return {
    signupForEvent: () => {
      store.dispatch({
        type: "ADD_EVENT",
        event: ownProps.eventInfo
      });
    },
    cancelEvent: () => {
      store.dispatch({
        type: "REMOVE_EVENT",
        event: ownProps.eventInfo
      });
    }
  };
};

export default connect(null, mapDispatchToProps)(EventDetailView);

const styles = StyleSheet.create({
  header: {
    flexDirection: "column",
    height: 300,
    backgroundColor: "black"
  },
  body: {
    flex: 1,
    padding: 25,
    paddingTop: 0
  },
  title: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    textAlign: "center",
    color: "white",
    fontSize: 19,
    padding: 10,
{'fraction_non_alphanumeric': 0.13600762066045724, 'fraction_numerical': 0.003386960203217612, 'mean_word_length': 2.3903839253677788, 'pattern_counts': {'":': 0, '<': 81, '<?xml version=': 0, '>': 83, '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': '4485818', 'n_tokens_mistral': 2813, 'n_tokens_neox': 2744, 'n_words': 622}