<commit_before>/* eslint-disable no-use-before-define */
import React from 'react-native';
import Button from "./button";

const {
  PropTypes,
  StyleSheet,
  Text,
  View,
} = React;

const onCreatePress = (navigator) => {
  navigator.push({ name: 'camera' });
};

const CreateQuilt = ({ navigator }) => (
  <View style={styles.container}>
    <Text>Invite Friends</Text>
    <Text>+Friends</Text>
    <Button text={'Create!'} onPress={() => onCreatePress(navigator)} />
  </View>
);

CreateQuilt.propTypes = {
  navigator: PropTypes.object,
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    padding: 4,
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 5,
    margin: 5,
    width: 200,
    alignSelf: 'center',
  },
  label: {
    fontSize: 18,
  },
});

export default CreateQuilt;<commit_msg>make create quilt class component, hook up to redux<commit_after>/* eslint-disable no-use-before-define, react/prefer-stateless-function */
/*
I am unclear on how to approach this component. We're not supposed
to use arrow functions or binds in our jsx (see
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/)
but we're also supposed to prefer stateless functions.
Since stateless functions are a convention, while arrow fns/bind in jsx is related
to preformance, I chose to use a class component here (disabling eslint as well)
*/

import React, { Component } from 'react-native';
import Button from './button';
import { connect } from 'react-redux';
import { startQuilt } from '../actions/index';

const {
  PropTypes,
  StyleSheet,
  Text,
  View,
} = React;

class CreateQuilt extends Component {
  constructor(props) {
    super(props);
    this.onCreatePress = this.onCreatePress.bind(this);
  }

  onCreatePress() {
    // todo: add users arguement
    this.props.createQuilt();
    this.props.navigator.push({ name: 'camera' });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Invite Friends</Text>
        <Text>+Friends</Text>
        <Button text={'Create!'} onPress={this.onCreatePress} />
      </View>
    );
  }
}

CreateQuilt.propTypes = {
  navigator: PropTypes.object,
};

const mapDispatchToProps = (dispatch) => ({
  createQuilt: () => {
    dispatch(startQuilt());
  },
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    padding: 4,
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 5,
    margin: 5,
    width: 200,
    alignSelf: 'center',
  },
  label: {
    fontSize: 18,
  },
});

export default connect(null, mapDispatchToProps)(CreateQuilt);
{'fraction_non_alphanumeric': 0.14414739884393063, 'fraction_numerical': 0.008670520231213872, 'mean_word_length': 3.3606299212598425, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 22, 'https://': 1, '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': '6795377', 'n_tokens_mistral': 924, 'n_tokens_neox': 897, 'n_words': 234}