text: webpackJsonp([0],{
  
  /***/ 100:
  /***/ (function(module, exports, __webpack_require__) {
  
  "use strict";
  
  
  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  var listingsData = [{
    address: '2034 Grand Ave',
    city: 'Los Angeles',
    state: 'CA',
    bedrooms: 5,
    price: 450000,
    sqft: 2586,
    homeType: 'Townhouse',
    image: 'https://images.pexels.com/photos/277667/pexels-photo-277667.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    extras: ['elevator', 'gym']
  }, {
    address: '3642 Baldwin Ave',
    city: 'Oxon Hill',
    state: 'MD',
    bedrooms: 3,
    price: 350000,
    sqft: 3215,
    homeType: 'Single_family',
    image: 'https://images.pexels.com/photos/209296/pexels-photo-209296.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    extras: ['elevator', 'gym']
  }, {
    address: '2034 King Circle',
    city: 'Boston',
    state: 'MA',
    bedrooms: 4,
    price: 290000,
    sqft: 2722,
    homeType: 'Townhouse',
    image: 'https://images.pexels.com/photos/221024/pexels-photo-221024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    extras: ['elevator', 'gym']
  }, {
    address: '983 Patallion Dr',
    city: 'Los Angeles',
    state: 'CA',
    bedrooms: 1,
    price: 150000,
    sqft: 1175,
    homeType: 'Apartment',
    image: 'https://images.pexels.com/photos/144632/pexels-photo-144632.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    extras: ['elevator', 'gym']
  }, {
    address: '753 Square Dr',
    city: 'Seattle',
    state: 'WA',
    bedrooms: 6,
    price: 650000,
    sqft: 4146,
    homeType: 'Single_family',
    image: 'https://images.pexels.com/photos/209315/pexels-photo-209315.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    extras: ['elevator', 'gym']
  }, {
    address: '6544 Grand Way',
    city: 'Miami',
    state: 'FL',
    bedrooms: 2,
    price: 270000,
    sqft: 1980,
    homeType: 'Apartment',
    image: 'https://images.pexels.com/photos/271689/pexels-photo-271689.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    extras: ['elevator', 'gym']
  }, {
    address: '8439 Terrace Hills',
    city: 'Houston',
    state: 'TX',
    bedrooms: 5,
    price: 750000,
    sqft: 2720,
    homeType: 'Townhouse',
    image: 'https://images.pexels.com/photos/415687/pexels-photo-415687.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    extras: ['elevator', 'gym']
  }];
  
  exports.default = listingsData;
  
  /***/ }),
  
  /***/ 102:
  /***/ (function(module, exports, __webpack_require__) {
  
  "use strict";
  
  
  var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  
  var _react = __webpack_require__(16);
  
  var _react2 = _interopRequireDefault(_react);
  
  var _reactDom = __webpack_require__(33);
  
  var _reactDom2 = _interopRequireDefault(_reactDom);
  
  var _Header = __webpack_require__(98);
  
  var _Header2 = _interopRequireDefault(_Header);
  
  var _Filter = __webpack_require__(97);
  
  var _Filter2 = _interopRequireDefault(_Filter);
  
  var _Listings = __webpack_require__(99);
  
  var _Listings2 = _interopRequireDefault(_Listings);
  
  var _listingsData = __webpack_require__(100);
  
  var _listingsData2 = _interopRequireDefault(_listingsData);
  
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  
  function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
  
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  
  function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  
  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
  
  var App = function (_Component) {
    _inherits(App, _Component);
  
    function App() {
      _classCallCheck(this, App);
  
      var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this));
  
      _this.state = {
        listingsData: _listingsData2.default,
        city: 'All',
        homeType: 'All',
        bedrooms: 1,
        min_price: 0,
        max_price: 10000000,
        min_square_footage: 0,
        max_square_footage: 50000,
        elevator: false,
        finished_basement: false,
        gym: false,
        swimming_pool: false,
        filteredData: _listingsData2.default,
        populateFormsData: '',
        sortby: 'price-asc',
        view: 'box',
        search: ''
  
        // explicity defining the this keyword for each method
      };_this.change = _this.change.bind(_this);
      _this.filteredData = _this.filteredData.bind(_this);
      _this.populateForms = _this.populateForms.bind(_this);
      _this.changeView = _this.changeView.bind(_this);
      return _this;
    }
  
    // runs this method before the component is rendered to show the listings from lowest price to highest price
  
  
    _createClass(App, [{
      key: 'componentWillMount',
      value: function componentWillMount() {
        var listingsData = this.state.listingsData.sort(function (firstListing, secondListing) {
          return firstListing.price - secondListing.price;
        });
        this.setState({
          listingsData: listingsData
        });
      }
    }, {
      key: 'change',
      value: function change(event) {
        var _this2 = this;
  
        var name = event.target.name;
        // value equals the checkbox if it's checked or the value of the event on anything other than a checkbox
        var value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
  
        this.setState(_defineProperty({}, name, value), function () {
          console.log(_this2.state);
          _this2.filteredData();
        });
      }
    }, {
      key: 'changeView',
      value: function changeView(viewName) {
        this.setState({
          view: viewName
        });
      }
    }, {
      key: 'filteredData',
      value: function filteredData() {
        var _this3 = this;
  
        // item is equal to each listing. The item(s) (or listing(s)) that matches the price, bedroom and sqft conditions is/are returned
        var newData = this.state.listingsData.filter(function (item) {
          return item.price >= _this3.state.min_price && item.price <= _this3.state.max_price && item.sqft >= _this3.state.min_square_footage && item.sqft <= _this3.state.max_square_footage && item.bedrooms >= _this3.state.bedrooms;
        });
        // the item(s) that match each city is returned
        if (this.state.city != "All") {
          newData = newData.filter(function (item) {
            return item.city == _this3.state.city;
          });
        }
        // the item(s) that match the selected home type is returned
        if (this.state.homeType != "All") {
          newData = newData.filter(function (item) {
            return item.homeType == _this3.state.homeType;
          });
        }
  
        // ----------------------- THE SORTING SECTION -------------------------
        // sort and return listings by lowest price when the user selects 'Lowest Price'
        if (this.state.sortby == 'price-asc') {
          newData = newData.sort(function (firstListing, secondListing) {
            return firstListing.price - secondListing.price;
          });
        }
  
        // sort and return listings by higheset price when the user selects 'Highest Price'
        if (this.state.sortby == 'price-dsc') {
          newData = newData.sort(function (firstListing, secondListing) {
            return secondListing.price - firstListing.price;
          });
        }
  
        // sort and return listings by higheset square footage when the user selects 'Highest Sqft.'
        if (this.state.sortby == 'sqft-dsc') {
          newData = newData.sort(function (firstListing, secondListing) {
            return secondListing.sqft - firstListing.sqft;
          });
        }
  
        // sort and return listings by lowest square footage when the user selects 'Lowest Sqft.'
        if (this.state.sortby == 'sqft-asc') {
          newData = newData.sort(function (firstListing, secondListing) {
            return firstListing.sqft - secondListing.sqft;
          });
        }
  
        // sort and return listings by higheset square footage when the user selects 'Highest Sqft.'
        if (this.state.sortby == 'bed-dsc') {
          newData = newData.sort(function (firstListing, secondListing) {
            return secondListing.bedrooms - firstListing.bedrooms;
          });
        }
  
        // sort and return listings by higheset square footage when the user selects 'Highest Sqft.'
        if (this.state.sortby == 'bed-asc') {
          newData = newData.sort(function (firstListing, secondListing) {
            return firstListing.bedrooms - secondListing.bedrooms;
          });
        }
  
        // whatever city the user searches for is matched and returned to the user
        if (this.state.search != '') {
          newData = newData.filter(function (item) {
            var city = item.city.toLowerCase();
            var searchText = _this3.state.search.toLowerCase();
            var n = city.match(searchText);
  
            if (n != null) {
              return true;
            }
          });
        }
  
        this.setState({
          // the filteredData property is set to the newData variable
          filteredData: newData
        });
      }
  
      //
  
    }, {
      key: 'populateForms',
      value: function populateForms() {
        var _this4 = this;
  
        // City
        var cities = this.state.listingsData.map(function (item) {
          return item.city;
        });
        cities = new Set(cities);
        // The set is placed into an array
        cities = [].concat(_toConsumableArray(cities));
  
        // sorts the returned cities from A to Z
        cities = cities.sort();
  
        // home Type
        var homeTypes = this.state.listingsData.map(function (item) {
          return item.homeType;
        });
        homeTypes = new Set(homeTypes);
        homeTypes = [].concat(_toConsumableArray(homeTypes));
  
        // sorts the returned home types from A to Z
        homeTypes = homeTypes.sort();
  
        // bedrooms
        var bedrooms = this.state.listingsData.map(function (item) {
          return item.bedrooms;
        });
        bedrooms = new Set(bedrooms);
        bedrooms = [].concat(_toConsumableArray(bedrooms));
  
        // sorts the number of bedrooms numerically
        bedrooms = bedrooms.sort();
  
        this.setState({
          populateFormsData: {
            homeTypes: homeTypes,
            bedrooms: bedrooms,
            cities: cities
          }
        }, function () {
          console.log(_this4.state);
        });
      }
    }, {
      key: 'render',
      value: function render() {
        return _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(_Header2.default, null),
          _react2.default.createElement(
            'section',
            { id: 'content-area' },
            _react2.default.createElement(_Filter2.default, { change: this.change, globalState: this.state, populateAction: this.populateForms }),
            _react2.default.createElement(_Listings2.default, { listingsData: this.state.filteredData, globalState: this.state, change: this.change, changeView: this.changeView })
          )
        );
      }
    }]);
  
    return App;
  }(_react.Component);
  
  var app = document.getElementById('app');
  
  _reactDom2.default.render(_react2.default.createElement(App, null), app);
  
  /***/ }),
  
  /***/ 97:
  /***/ (function(module, exports, __webpack_require__) {
  
  "use strict";
  
  
  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  
  var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  
  var _react = __webpack_require__(16);
  
  var _react2 = _interopRequireDefault(_react);
  
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  
  function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  
  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
  
  var Filter = function (_Component) {
    _inherits(Filter, _Component);
  
    function Filter() {
      _classCallCheck(this, Filter);
  
      var _this = _possibleConstructorReturn(this, (Filter.__proto__ || Object.getPrototypeOf(Filter)).call(this));
  
      _this.state = {};
      _this.cities = _this.cities.bind(_this);
      _this.homeTypes = _this.homeTypes.bind(_this);
      _this.bedrooms = _this.bedrooms.bind(_this);
      return _this;
    }
  
    // the populateAction method is called before the component is rendered to ensure the forms are populated with data
  
  
    _createClass(Filter, [{
      key: "componentWillMount",
      value: function componentWillMount() {
        this.props.populateAction();
      }
    }, {
      key: "cities",
      value: function cities() {
        if (this.props.globalState.populateFormsData.cities != undefined) {
          var cities = this.props.globalState.populateFormsData.cities;
  
          return cities.map(function (item) {
            return _react2.default.createElement(
              "option",
              { key: item, value: item },
              item
            );
          });
        }
      }
    }, {
      key: "homeTypes",
      value: function homeTypes() {
        if (this.props.globalState.populateFormsData.homeTypes != undefined) {
          var homeTypes = this.props.globalState.populateFormsData.homeTypes;
  
          return homeTypes.map(function (item) {
            return _react2.default.createElement(
              "option",
              { key: item, value: item },
              item
            );
          });
        }
      }
    }, {
      key: "bedrooms",
      value: function bedrooms() {
        if (this.props.globalState.populateFormsData.bedrooms != undefined) {
          var bedrooms = this.props.globalState.populateFormsData.bedrooms;
  
          return bedrooms.map(function (item) {
            return _react2.default.createElement(
              "option",
              { key: item, value: item },
              item,
              "+ Bedrooms"
            );
          });
        }
      }
    }, {
      key: "render",
      value: function render() {
        return _react2.default.createElement(
          "section",
          { id: "filter" },
          _react2.default.createElement(
            "div",
            { className: "filterContainer" },
            _react2.default.createElement(
              "h4",
              null,
              "Filter"
            ),
            _react2.default.createElement(
              "label",
              { htmlFor: "city" },
              "City"
            ),
            _react2.default.createElement(
              "select",
              { name: "city", className: "filters city", onChange: this.props.change },
              _react2.default.createElement(
                "option",
                { value: "All" },
                "All"
              ),
              this.cities()
            ),
            _react2.default.createElement(
              "label",
              { htmlFor: "homeType" },
              "Home Type"
            ),
            _react2.default.createElement(
              "select",
              { name: "homeType", className: "filters homeType", onChange: this.props.change },
              _react2.default.createElement(
                "option",
                { value: "All" },
                "All"
              ),
              this.homeTypes()
            ),
            _react2.default.createElement(
              "label",
              { htmlFor: "bedrooms" },
              "Bedrooms"
            ),
            _react2.default.createElement(
              "select",
              { name: "bedrooms", className: "filters bedrooms", onChange: this.props.change },
              this.bedrooms()
            ),
            _react2.default.createElement(
              "div",
              { className: "filters price" },
              _react2.default.createElement(
                "span",
                { className: "title" },
                "Price"
              ),
              _react2.default.createElement("input", { placeholder: "Min Price", type: "text", name: "min_price", className: "min-price", onChange: this.props.change, value: this.props.globalState.min_price }),
              _react2.default.createElement("input", { placeholder: "Max Price", type: "text", name: "max_price", className: "max-price", onChange: this.props.change, value: this.props.globalState.max_price })
            ),
            _react2.default.createElement(
              "div",
              { className: "filters floor-space" },
              _react2.default.createElement(
                "span",
                { className: "title" },
                "Square Footage"
              ),
              _react2.default.createElement("input", { placeholder: "Min Sq. Ft.", type: "text", name: "min_square_footage", className: "min-square-footage", onChange: this.props.change, value: this.props.globalState.min_square_footage }),
              _react2.default.createElement("input", { placeholder: "Max Sq. Ft.", type: "text", name: "max_square_footage", className: "max-square-footage", onChange: this.props.change, value: this.props.globalState.max_square_footage })
            ),
            _react2.default.createElement(
              "div",
              { className: "filters extras" },
              _react2.default.createElement(
                "span",
                { className: "title" },
                "More Filters"
              ),
              _react2.default.createElement(
                "label",
                { htmlFor: "extras" },
                _react2.default.createElement(
                  "span",
                  null,
                  "Elevators"
                ),
                _react2.default.createElement("input", { type: "checkbox", value: "elevator", name: "elevator", onChange: this.props.change })
              ),
              _react2.default.createElement(
                "label",
                { htmlFor: "extras" },
                _react2.default.createElement(
                  "span",
                  null,
                  "Swimming Pool"
                ),
                _react2.default.createElement("input", { type: "checkbox", value: "swimming_pool", name: "swimming_pool", onChange: this.props.change })
              ),
              _react2.default.createElement(
                "label",
                { htmlFor: "extras" },
                _react2.default.createElement(
                  "span",
                  null,
                  "Finished Basement"
                ),
                _react2.default.createElement("input", { type: "checkbox", value: "finished_basement", name: "finished_basement", onChange: this.props.change })
              ),
              _react2.default.createElement(
                "label",
                { htmlFor: "extras" },
                _react2.default.createElement(
                  "span",
                  null,
                  "Gym"
                ),
                _react2.default.createElement("input", { type: "checkbox", value: "gym", name: "gym", onChange: this.props.change })
              )
            )
          )
        );
      }
    }]);
  
    return Filter;
  }(_react.Component);
  
  exports.default = Filter;
  
  /***/ }),
  
  /***/ 98:
  /***/ (function(module, exports, __webpack_require__) {
  
  "use strict";
  
  
  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  
  var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  
  var _react = __webpack_require__(16);
  
  var _react2 = _interopRequireDefault(_react);
  
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  
  function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  
  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
  
  var Header = function (_Component) {
    _inherits(Header, _Component);
  
    function Header() {
      _classCallCheck(this, Header);
  
      var _this = _possibleConstructorReturn(this, (Header.__proto__ || Object.getPrototypeOf(Header)).call(this));
  
      _this.state = {};
      return _this;
    }
  
    _createClass(Header, [{
      key: "render",
      value: function render() {
        return _react2.default.createElement(
          "header",
          null,
          _react2.default.createElement(
            "div",
            { className: "logo" },
            "Logo"
          ),
          _react2.default.createElement(
            "nav",
            null,
            _react2.default.createElement(
              "a",
              { href: "#" },
              "Create Ads"
            ),
            _react2.default.createElement(
              "a",
              { href: "#" },
              "About Us"
            ),
            _react2.default.createElement(
              "a",
              { href: "#" },
              "Login"
            ),
            _react2.default.createElement(
              "a",
              { href: "#", className: "register-btn" },
              "Register"
            )
          )
        );
      }
    }]);
  
    return Header;
  }(_react.Component);
  
  exports.default = Header;
  
  /***/ }),
  
  /***/ 99:
  /***/ (function(module, exports, __webpack_require__) {
  
  "use strict";
  
  
  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  
  var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  
  var _react = __webpack_require__(16);
  
  var _react2 = _interopRequireDefault(_react);
  
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  
  function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  
  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
  
  var Header = function (_Component) {
    _inherits(Header, _Component);
  
    function Header() {
      _classCallCheck(this, Header);
  
      var _this = _possibleConstructorReturn(this, (Header.__proto__ || Object.getPrototypeOf(Header)).call(this));
  
      _this.state = {};
      _this.loopListings = _this.loopListings.bind(_this);
      return _this;
    }
  
    _createClass(Header, [{
      key: 'loopListings',
      value: function loopListings() {
        var _this2 = this;
  
        var listingsData = this.props.listingsData;
  
        // Error message if the filtered data returns no listings
  
        if (listingsData == undefined || listingsData.length == 0) {
          return "Sorry, your filter(s) did not match any listings.";
        }
  
        return listingsData.map(function (listing, index) {
          // if the view state is changed to 'box', return the listings in the box view style
          if (_this2.props.globalState.view == 'box') {
            return _react2.default.createElement(
              'div',
              { className: 'col-md-3', key: index },
              _react2.default.createElement(
                'div',
                { className: 'listing' },
                _react2.default.createElement(
                  'div',
                  { className: 'listing-img', style: {
                      background: 'url("' + listing.image + '") no-repeat center center'
                    } },
                  _react2.default.createElement(
                    'span',
                    { className: 'address' },
                    listing.address
                  ),
                  _react2.default.createElement(
                    'div',
                    { className: 'details' },
                    _react2.default.createElement(
                      'div',
                      { className: 'user-details-container' },
                      _react2.default.createElement(
                        'div',
                        { className: 'user-img' },
                        _react2.default.createElement('img', { src: 'https://randomuser.me/api/portraits/women/65.jpg' })
                      ),
                      _react2.default.createElement(
                        'div',
                        { className: 'user-details' },
                        _react2.default.createElement(
                          'span',
                          { className: 'user-name' },
                          'Nina Simone'
                        ),
                        _react2.default.createElement(
                          'span',
                          { className: 'listing-date' },
                          'Posted on 8/22/2018'
                        )
                      )
                    ),
                    _react2.default.createElement(
                      'div',
                      { className: 'listing-details' },
                      _react2.default.createElement(
                        'div',
                        { className: 'squareFootage' },
                        _react2.default.createElement('i', { className: 'fas fa-home' }),
                        _react2.default.createElement(
                          'span',
                          null,
                          listing.sqft,
                          'sqft'
                        )
                      ),
                      _react2.default.createElement(
                        'div',
                        { className: 'bedrooms' },
                        _react2.default.createElement('i', { className: 'fas fa-bed' }),
                        _react2.default.createElement(
                          'span',
                          null,
                          listing.bedrooms,
                          'Bedrooms'
                        )
                      )
                    ),
                    _react2.default.createElement(
                      'div',
                      { className: 'viewListing' },
                      'View Listing'
                    )
                  )
                ),
                _react2.default.createElement(
                  'div',
                  { className: 'bottom-info' },
                  _react2.default.createElement(
                    'span',
                    { className: 'monthlyPrice' },
                    '$',
                    listing.price
                  ),
                  _react2.default.createElement(
                    'span',
                    { className: 'location' },
                    _react2.default.createElement('i', { className: 'fas fa-location-arrow' }),
                    listing.city,
                    ', ',
                    listing.state
                  )
                )
              )
            );
          } else {
            // Return the listings in a list style view otherwise
            return _react2.default.createElement(
              'div',
              { className: 'col-md-12 col-lg-6', key: index },
              _react2.default.createElement(
                'div',
                { className: 'listing' },
                _react2.default.createElement(
                  'div',
                  { className: 'listing-img', style: { background: 'url("' + listing.image + '") no-repeat center center' } },
                  _react2.default.createElement(
                    'span',
                    { className: 'address' },
                    listing.address
                  ),
                  _react2.default.createElement(
                    'div',
                    { className: 'details' },
                    _react2.default.createElement(
                      'div',
                      { className: 'user-details-container' },
                      _react2.default.createElement(
                        'div',
                        { className: 'user-img' },
                        _react2.default.createElement('img', { src: 'https://randomuser.me/api/portraits/women/65.jpg' })
                      ),
                      _react2.default.createElement(
                        'div',
                        { className: 'user-details' },
                        _react2.default.createElement(
                          'span',
                          { className: 'user-name' },
                          'Nina Simone'
                        ),
                        _react2.default.createElement(
                          'span',
                          { className: 'listing-date' },
                          'Posted on 8/22/2018'
                        )
                      )
                    ),
                    _react2.default.createElement(
                      'div',
                      { className: 'listing-details' },
                      _react2.default.createElement(
                        'div',
                        { className: 'squareFootage' },
                        _react2.default.createElement('i', { className: 'fas fa-home' }),
                        _react2.default.createElement(
                          'span',
                          null,
                          listing.sqft,
                          ' sqft'
                        )
                      ),
                      _react2.default.createElement(
                        'div',
                        { className: 'bedrooms' },
                        _react2.default.createElement('i', { className: 'fas fa-bed' }),
                        _react2.default.createElement(
                          'span',
                          null,
                          listing.bedrooms,
                          ' Bedrooms'
                        )
                      )
                    ),
                    _react2.default.createElement(
                      'div',
                      { className: 'viewListing' },
                      'View Listing'
                    )
                  )
                ),
                _react2.default.createElement(
                  'div',
                  { className: 'bottom-info' },
                  _react2.default.createElement(
                    'span',
                    { className: 'monthlyPrice' },
                    '$',
                    listing.price
                  ),
                  _react2.default.createElement(
                    'span',
                    { className: 'location' },
                    _react2.default.createElement('i', { className: 'fas fa-location-arrow' }),
                    ' ',
                    listing.city,
                    ', ',
                    listing.state
                  )
                )
              )
            );
          }
        });
      }
    }, {
      key: 'render',
      value: function render() {
        return _react2.default.createElement(
          'section',
          { id: 'listings' },
          _react2.default.createElement(
            'section',
            { className: 'search-area' },
            _react2.default.createElement('input', { type: 'text', name: 'search', onChange: this.props.change })
          ),
          _react2.default.createElement(
            'section',
            { className: 'sortby-area' },
            _react2.default.createElement(
              'div',
              { className: 'results' },
              '390 Results Found'
            ),
            _react2.default.createElement(
              'div',
              { className: 'sort-options' },
              _react2.default.createElement(
                'select',
                { name: 'sortby', className: 'sortby', onChange: this.props.change },
                _react2.default.createElement(
                  'option',
                  { value: 'price-asc' },
                  'Lowest Price'
                ),
                _react2.default.createElement(
                  'option',
                  { value: 'price-dsc' },
                  'Highest Price'
                ),
                _react2.default.createElement(
                  'option',
                  { value: 'sqft-asc' },
                  'Lowest Sqft.'
                ),
                _react2.default.createElement(
                  'option',
                  { value: 'sqft-dsc' },
                  'Highest Sqft.'
                ),
                _react2.default.createElement(
                  'option',
                  { value: 'bed-asc' },
                  'Bedrooms (Low to High)'
                ),
                _react2.default.createElement(
                  'option',
                  { value: 'bed-dsc' },
                  'Bedrooms (High to Low)'
                )
              ),
              _react2.default.createElement(
                'div',
                { className: 'view' },
                _react2.default.createElement('i', { className: 'fas fa-list-ul', onClick: this.props.changeView.bind(null, "list") }),
                _react2.default.createElement('i', { className: 'fas fa-th', onClick: this.props.changeView.bind(null, "box") })
              )
            )
          ),
          _react2.default.createElement(
            'section',
            { className: 'listings-results' },
            this.loopListings()
          ),
          _react2.default.createElement(
            'section',
            { className: 'pagination' },
            _react2.default.createElement(
              'ul',
              { className: 'pages' },
              _react2.default.createElement(
                'li',
                { className: 'pageButtons' },
                'Prev'
              ),
              _react2.default.createElement(
                'li',
                { className: 'active' },
                '1'
              ),
              _react2.default.createElement(
                'li',
                null,
                '2'
              ),
              _react2.default.createElement(
                'li',
                null,
                '3'
              ),
              _react2.default.createElement(
                'li',
                null,
                '4'
              ),
              _react2.default.createElement(
                'li',
                null,
                '5'
              ),
              _react2.default.createElement(
                'li',
                { className: 'pageButtons' },
                'Next'
              )
            )
          )
        );
      }
    }]);
  
    return Header;
  }(_react.Component);
  
  exports.default = Header;
  
  /***/ })
  
  },[102]);