# All files / composer/components LocationComposerBar.jsx

78.95% Statements 15/19
63.64% Branches 7/11
78.57% Functions 11/14
78.95% Lines 15/19

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108

    1x

    1x
    1x

    1x
    1x

    1x
    1x

    1x

    1x
    1x

    2x

    11x

    11x

    1x

    1x

     import React from 'react';
    import PropTypes from 'prop-types';
    import Autocomplete from 'react-autocomplete';
    import debounce from 'lodash.debounce';
    import LocationFinder from '../utils/LocationFinder';
    import styles from './css/LocationComposerBar.css';

    import ComposerActionCreators from '../action-creators/ComposerActionCreators';

    class LocationComposerBar extends React.Component {
      static propTypes = {
        draftId: PropTypes.string.isRequired,
        locationName: PropTypes.string,
        locationId: PropTypes.string,
        places: PropTypes.array,
        instagramProfileId: PropTypes.string,
      };

      static defaultProps = {
        locationName: '',
        locationId: null,
        instagramProfileId: null,
        places: [],
      };

      onChange = (event, value) => {
        ComposerActionCreators.updateDraftLocation(this.props.draftId, null, value);

        Eif (value !== '') {
          this.getLocations(value);
        }
      };

      onMenuVisibilityChange = (isOpen) => {
        Eif (!isOpen && this.props.locationId === null && this.props.locationName !== '') {
          this.resetInput();
        }
      };

      getLocations = debounce((query) => {
        LocationFinder.findLocations(this.props.instagramProfileId, query).then((results) => {
          ComposerActionCreators.updateDraftListPlaces(this.props.draftId, results);
        }).catch(() => {
          ComposerActionCreators.updateDraftListPlaces(this.props.draftId, []);
        });
      }, 450);

      saveLocation = (newPlace) => {
        ComposerActionCreators.updateDraftLocation(this.props.draftId, newPlace.id, newPlace.name);
      };

      removeLocation = (e) => {
        e.preventDefault();
        this.resetInput();
      }

      resetInput = () => ComposerActionCreators.updateDraftLocation(this.props.draftId, null, '');

      isLocationSet = () => (this.props.locationId !== null);

      render() {
        return (
          <div className={styles.locationComposerBar}>
            <div className={styles.locationFieldContainer}>
              <span className={styles.locationFieldLabel}>Add location </span>
              {this.isLocationSet() &&
                <span className={styles.locationFieldRemoveInput} onClick={this.removeLocation} />
              }
              <Autocomplete
                wrapperStyle={{ position: 'relative', display: 'inline-block' }}
                value={this.props.locationName}
                items={this.props.places}
                inputProps={{
                  className: styles.locationFieldInput,
                  placeholder: 'Start typing a location...',
                }}
                getItemValue={(item) => item.name}
                onSelect={(value, place) => {
                  this.saveLocation(place);
                }}
                onChange={this.onChange}
                onMenuVisibilityChange={this.onMenuVisibilityChange}
                renderMenu={(children) => (
                  <div className={styles.locationMenu}>
                    {children}
                  </div>
                )}
                renderItem={(item, highlighted) => {
                  const classHighlighted = highlighted ? styles.optionRowHighlighted : '';
                  return (<div key={item.id} className={`${styles.optionRow} ${classHighlighted}`}>
                    <img className={styles.optionImage} alt={item.name} src={item.pictureUrl} />
                    <div className={styles.optionTextDescription}>
                      <p className={styles.optionTitle}>{item.name}</p>
                      <p>
                        {item.formattedAddressWithCheckins}
                      </p>
                    </div>
                  </div>);
                }}
              />
            </div>
          </div>
        );
      }
    }

    export default LocationComposerBar;