import React, { PropTypes, Component } from 'react';
import { IMAGES_ROOT } from '../constants/Constants';
import shouldPureComponentUpdate from 'react-pure-render/function';
import selectn from 'selectn';

export default class User extends Component {
    static propTypes = {
        user: PropTypes.object.isRequired
    };

    shouldComponentUpdate = shouldPureComponentUpdate;

    render() {
        const { user, profile } = this.props;
        let imgSrc = user.picture ? `${IMAGES_ROOT}media/cache/user_avatar_180x180/user/images/${user.picture}` : `${IMAGES_ROOT}media/cache/user_avatar_180x180/bundles/qnoowweb/images/user-no-img.jpg`;
        return (
            <div className="User">
                <div className="content-block user-block">
                    <div className="user-image">
                        <img src={imgSrc} />
                    </div>
                    <div className="user-data">
                        <div className="user-username title">
                            {user.username}
                        </div>
                        <div className="user-location">
                            {/** TODO: For some reason, profile is different for different renders. This is a temporal fix */}
                            <span className="icon-marker"></span> {selectn('Location', profile) || selectn('location.locality', profile) || ''}
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

import React, { PropTypes, Component } from 'react';
import { IMAGES_ROOT } from '../constants/Constants';
import shouldPureComponentUpdate from 'react-pure-render/function';
import selectn from 'selectn';

export default class User extends Component {
    static propTypes = {
        user: PropTypes.object.isRequired
    };

    shouldComponentUpdate = shouldPureComponentUpdate;

    render() {
        const { user, profile } = this.props;
        let imgSrc = user.picture ? `${IMAGES_ROOT}media/cache/user_avatar_180x180/user/images/${user.picture}` : `${IMAGES_ROOT}media/cache/user_avatar_180x180/bundles/qnoowweb/images/user-no-img.jpg`;
        return (
            <div className="User">
                <div className="content-block user-block">
                    <div className="user-image">
                        <img src={imgSrc} />
                    </div>
                    <div className="user-data">
                        <div className="user-username title">
                            {user.username}
                        </div>
                        <div className="user-location">
                            {/** TODO: For some reason, profile is different for different renders. This is a temporal fix */}
                            <span className="icon-marker"></span> {selectn('Location', profile) || selectn('location.locality', profile) || selectn('location.address', profile) || ''}
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

Use address when there is no location
Use address when there is no location
