/* 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;

@@ -35,24 +35,487 @@
 fine
- */%0Aimport React
+, react/prefer-stateless-function */%0A/*%0AI am unclear on how to approach this component. We're not supposed%0Ato use arrow functions or binds in our jsx (see%0Ahttps://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/)%0Abut we're also supposed to prefer stateless functions.%0ASince stateless functions are a convention, while arrow fns/bind in jsx is related%0Ato preformance, I chose to use a class component here (disabling eslint as well)%0A*/%0A%0Aimport React, %7B Component %7D
  fro
@@ -555,17 +555,17 @@
 rom 
-%22
+'
 ./button
 %22;%0A%0A
@@ -564,197 +564,470 @@
 tton
-%22;%0A%0Aconst %7B%0A  PropTypes,%0A  StyleSheet,%0A  Text,%0A  View,%0A%7D = React;%0A%0Aconst onCreatePress = (navigator) =%3E %7B%0A  navigator.push(%7B name: 'camera' %7D);%0A%7D;%0A%0Aconst CreateQuilt = (%7B navigator %7D) =%3E (%0A
+';%0Aimport %7B connect %7D from 'react-redux';%0Aimport %7B startQuilt %7D from '../actions/index';%0A%0Aconst %7B%0A  PropTypes,%0A  StyleSheet,%0A  Text,%0A  View,%0A%7D = React;%0A%0Aclass CreateQuilt extends Component %7B%0A  constructor(props) %7B%0A    super(props);%0A    this.onCreatePress = this.onCreatePress.bind(this);%0A  %7D%0A%0A  onCreatePress() %7B%0A    // todo: add users arguement%0A    this.props.createQuilt();%0A    this.props.navigator.push(%7B name: 'camera' %7D);%0A  %7D%0A%0A  render() %7B%0A    return (%0A    
   %3CV
@@ -1056,24 +1056,28 @@
 ainer%7D%3E%0A    
+   
+ 
 %3CText%3EInvite
@@ -1088,24 +1088,28 @@
 ends%3C/Text%3E%0A
+    
     %3CText%3E+F
@@ -1126,16 +1126,20 @@
 xt%3E%0A    
+   
+ 
 %3CButton 
@@ -1168,14 +1168,13 @@
 ss=%7B
-() =%3E 
+this.
 onCr
@@ -1186,24 +1186,17 @@
 ress
-(navigator)
 %7D /%3E%0A
+    
   %3C/
@@ -1201,18 +1201,28 @@
 %3C/View%3E%0A
-);
+    );%0A  %7D%0A%7D
 %0A%0ACreate
@@ -1276,16 +1276,121 @@
 ct,%0A%7D;%0A%0A
+const mapDispatchToProps = (dispatch) =%3E (%7B%0A  createQuilt: () =%3E %7B%0A    dispatch(startQuilt());%0A  %7D,%0A%7D);%0A%0A
 const st
@@ -1729,16 +1729,50 @@
 default 
+connect(null, mapDispatchToProps)(
 CreateQu
@@ -1774,10 +1774,11 @@
 ateQuilt
+)
 ;%0A

make create quilt class component, hook up to redux