React snippet2

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import cookie from 'react-cookie';
import Listing from './Listing';
import { BubbleLoader, ListingProfileModal } from 'components';
import { changeSearchParams, silentlySaveSearchParams, changeListingPage, setParams } from 'redux/modules/search-params';
import { clear, setResults, setFilterId } from 'redux/modules/search-results';
import { load as loadUser } from 'redux/modules/user';
import { get } from 'lodash';
import Helmet from 'react-helmet';
import { load as loadListing } from 'redux/modules/listing';
import errorBoundary from '../../decorators/ErrorBoundary';

@connect(({ listing, searchResults, searchParams, globalConfig, auth, currencies }) => ({
  listing: listing.data,
  search: searchResults.data,
  listing_count: searchResults.listing_count,
  currencies: currencies.data,
  isMobile: globalConfig.isMobile,
  user: auth.user,
  searchParams,
  searchResults
}), {
  clear,
  changeSearchParams,
  silentlySaveSearchParams,
  changeListingPage,
  loadUser,
  setParams,
  setResults,
  setFilterId,
  loadListing
})

@errorBoundary()

export default class ListingMobile extends Component {
  constructor(props) {
    super(props);

    this.state = {
      minVisible: 0,
      maxVisible: 1,
      listing: {},
      currentListing: {},
      isRenderMap: false
    };
  }

  componentDidMount() {
    document.getElementsByClassName('wrapper')[0].classList.add('one-listing-mobile');
    document.getElementsByClassName('wsmenucontainer')[0].classList.add('wsmenucontainer-one-listing-mobile');
    const { listing, params, loadListing, loadUser } = this.props;
    if (!listing) {
      loadListing(params ? params.listing_id : Number(location.pathname.split('/')[2])).then((listing) => {
        loadUser(listing.user_id).then(user => {
          const currentListing = { listing, user };
          this.setState({ listing: currentListing, currentListing });
        });
      });
    } else {
      loadUser(listing.user_id).then(user => {
        const currentListing = { listing, user };
        this.setState({ listing: currentListing, currentListing });
      });
    }

    __CLIENT__ && window.addEventListener('scroll', () => this.setState({ isRenderMap: true }), { once: true });
  }

  componentWillUnmount() {
    document.getElementsByClassName('wrapper')[0].classList.remove('one-listing-mobile');
    document.getElementsByClassName('wsmenucontainer')[0].classList.remove('wsmenucontainer-one-listing-mobile');
  }

  render() {
    const { currencies } = this.props;
    const { listing, currentListing, isRenderMap } = this.state;
    const currentCurrency = cookie.load('currency');
    const currencyData = currencies.find(el => el.currency === currentCurrency);

    return (
      <div>
        {
          currentListing.listing &&
          <Helmet title={currentListing.listing && `${currentListing.listing.headline}, ${currencyData.prefix}${currentListing.listing.rates.requested_monthly_rate}${currencyData.postfix}, ${currentListing.listing.geo_location.google_formatted_address}` || ''}
                  titleTemplate="%s"
                  link={[{'rel': 'canonical', 'href': `${location.protocol || 'https:'}//${location.host}${location.pathname}`}]}
                  meta={[
                    {
                      name: 'description',
                      content: currentListing.listing && currentListing.listing.description || ''
                    },
                    {
                      property: 'og:title',
                      content: currentListing.listing && `${currentListing.listing.headline}, ${currencyData.prefix}${currentListing.listing.rates.requested_monthly_rate}${currencyData.postfix}, ${currentListing.listing.geo_location.google_formatted_address}` || ''
                    },
                    {
                      property: 'og:description',
                      content: currentListing.listing && currentListing.listing.description || ''
                    },
                    {
                      property: 'og:url',
                      content: `https://www.example.com/listings/${currentListing.listing && currentListing.listing.listing_id}`
                    },
                    {
                      property: 'og:image',
                      content: (currentListing.listing && Array.isArray(currentListing.listing.photos) && !!currentListing.listing.photos.length)
                        ? currentListing.listing.photos[0].path_medium
                        : ''
                    }
                  ]} />
        }
        {
          (!listing.listing || !listing.user) &&
          <BubbleLoader isOverlay style={{ backgroundColor: '#fff' }} />
        }
        { (listing.listing && listing.user) && <Listing listing={listing.listing} listingUser={listing.user} isRenderMap={isRenderMap} /> }
        <ListingProfileModal currencyData={currencyData}
                             listing={currentListing.listing}
                             listingUser={currentListing.user}
                             listingType={get(currentListing, 'listing.service_type') || 1}/>
      </div>
    );
  }
}

ListingMobile.propTypes = {
  currencies: PropTypes.array.isRequired,
  listing: PropTypes.object.isRequired,
  loadListing: PropTypes.func.isRequired,
  loadUser: PropTypes.func.isRequired,
  params: PropTypes.object.isRequired
};