Exercise 13 @ Ticketmaster

Input.js

import React from 'react';
import { StyleSheet } from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Autocomplete from 'react-native-autocomplete-select';
import { colors } from '../../lib/theme';
import { input as inputActions } from '../../store/actions';

const Input = ({
  inputValue,
  suggestions = [
    { description: 'Montpellier' },
    { description: 'Los Angeles' },
  ],
  editInput,
  resetInput,
}) => (
  <Autocomplete
    suggestions={suggestions || []}
    suggestionObjectTextProperty="description"
    style={styles.autocomplete}
    inputStyle={styles.input}
    onChangeText={editInput}
    onSelect={resetInput}
    value={inputValue}
  />
);

const styles = StyleSheet.create({
  autocomplete: {
    margin: 10,
    alignSelf: 'stretch',
  },
  input: {
    padding: 10,
    margin: 10,
    height: 40,
    color: colors.darkBlue,
    borderWidth: 1,
    borderColor: colors.darkBlue,
    borderRadius: 2,
  },
});

const mapStateToProps = state => ({ inputValue: state.input });
const mapDispatchToProps = dispatch =>
  bindActionCreators(inputActions, dispatch);

// import the needed dependencies
const withData = graphql(
  gql`
  # use the query from GraphiQL
`,
  {
    options: ({ inputValue }) => ({
      variables: { place: inputValue },
    }),
    // use the props function as in App.js to give the component 'suggestions'
  },
);

export default connect(mapStateToProps, mapDispatchToProps)(Input);