Untitled

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { StyleSheet, View } from 'react-native';

import {
  Container,
  Content,
  Icon,
  Item,
  Input,
  Label,
  Form,
  Button,
  Text,
  ListItem,
  CheckBox,
  Body,
} from 'native-base';
import { requestRepSearch } from '../actions/searchReps';
import { ErrorText } from '../components/Text';

class REPSearch extends Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    title: 'REP Search',
    drawerIcon: () => <Icon name="ios-home" />,
  };

  static propTypes = {
    dispatch: PropTypes.func,
  };
  constructor(props) {
    super(props);
    this.state = {
      firstname: '',
      lastname: '',
      company: '',
      secureid: '',
      exact: false,
      not_revoked_access: false,
      showError: false,
    };
  }

  handleRepSearch = () => {
    if (
      this.state.firstname === '' ||
      this.state.lastname === '' ||
      this.state.company === '' ||
      this.state.secureid === ''
    ) {
      this.setState({ showError: true });
    } else {
      this.setState({ showError: false });
      this.props.dispatch(requestRepSearch({
        user_fname: this.state.firstname,
        user_lname: this.state.lastname,
        user_company: this.state.company,
        user_id: this.state.secureid,
        exact: this.state.exact,
        not_revoked_access: this.state.not_revoked_access,
      }));
    }
  };

  handleChangeFirstNameText = (text) => {
    this.setState({ firstname: text, showError: false });
  };
  handleChangeLastNameText = (text) => {
    this.setState({ lastname: text, showError: false });
  };
  handleChangeCompanyText = (text) => {
    this.setState({ company: text, showError: false });
  };
  handleSecureIDText = (text) => {
    this.setState({ secureid: text, showError: false });
  };
  handleExactPressed = () => {
    if (this.state.exact) {
      this.setState({ exact: false });
    } else {
      this.setState({ exact: true });
    }
  };
  handleRevokedPressed = () => {
    if (this.state.not_revoked_access) {
      this.setState({ not_revoked_access: false });
    } else {
      this.setState({ not_revoked_access: true });
    }
  };
  render() {
    // const { height } = Dimensions.get('window');
    const errorMessege = 'Please enter FirstName/LastName/Compnay/ID to search';
    return (
      <Container>
        <Content padder style={styles.content}>
          <Form>
            <Item floatingLabel>
              <Label>FirstName</Label>
              <Input onChangeText={this.handleChangeFirstNameText} />
            </Item>
            <Item floatingLabel>
              <Label>LastName</Label>
              <Input onChangeText={this.handleChangeLastNameText} />
            </Item>
            <Item floatingLabel>
              <Label>Company</Label>
              <Input onChangeText={this.handleChangeCompanyText} />
            </Item>
            <Item floatingLabel>
              <Label>SEC3URE ID</Label>
              <Input onChangeText={this.handleSecureIDText} />
            </Item>
          </Form>
          <View style={styles.checkboxView}>
            <View style={styles.checkboxExact}>
              <ListItem style={styles.checkboxExact}>
                <CheckBox checked={this.state.exact} onPress={this.handleExactPressed} />
                <Body>
                  <Text style={styles.notRevokedAccessText}>Exact</Text>
                </Body>
              </ListItem>
            </View>
            <View style={styles.checkboxRevokeAccess}>
              <ListItem>
                <CheckBox
                  checked={this.state.not_revoked_access}
                  onPress={this.handleRevokedPressed}
                />
                <Body>
                  <Text style={styles.notRevokedAccessText}>Not Revoked Access</Text>
                </Body>
              </ListItem>
            </View>
          </View>
          {this.state.showError ? <ErrorText displayText={errorMessege} /> : ''}
          <Button success style={styles.searchButton} onPress={this.handleRepSearch}>
            <Text> Search </Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    backgroundColor: '#FFF',
  },
  searchButton: {
    marginTop: '5%',
    alignSelf: 'center',
  },
  listItemStyles: {
    height: 45,
  },
  checkboxView: {
    //  backgroundColor: 'yellow',
    flexDirection: 'row',
    alignSelf: 'stretch',
  },
  checkboxExact: {
    // backgroundColor: 'yellow',

    flex: 0.5,
  },
  checkboxRevokeAccess: {
    // backgroundColor: 'pink',
    flex: 1,
  },
  notRevokedAccessText: {
    // backgroundColor: 'pink',
    fontSize: 15,
  },
});

const mapStateToProps = () => ({});
export default connect(mapStateToProps)(REPSearch);