Fix issue #287

Author: elfman

src/shared/components/Avatar/index.jsx

@@ -20,13 +20,14 @@
 
 import PT from 'prop-types';
 import React from 'react';
+import _ from 'lodash';
 import { themr } from 'react-css-themr';
 import DefaultAvatar from '../../../assets/images/ico-user-default.svg';
 import defaultStyle from './style.scss';
 
-function Avatar({ theme, url }) {
+function Avatar({ theme, url, handleError }) {
   return url
-    ? <img alt="Avatar" src={url} className={theme.avatar} />
+    ? <img alt="Avatar" src={url} className={theme.avatar} onError={handleError} />
     : <DefaultAvatar className={theme.avatar} />;
 }
 
@@ -36,13 +37,15 @@ Avatar.defaultProps = {
     avatar: '',
   },
   url: null,
+  handleError: _.noop,
 };
 
 Avatar.propTypes = {
   theme: PT.shape({
     avatar: PT.string.isRequired,
   }),
   url: PT.string,
+  handleError: PT.func,
 };
 
 export default themr('Avatar', defaultStyle)(Avatar);

src/shared/components/LeaderboardAvatar/index.jsx

@@ -4,6 +4,8 @@ import React, { Component } from 'react';
 import PT from 'prop-types';
 import './style.scss';
 
+import config from 'utils/config';
+
 // Constants
 const VISIBLE_CHARACTERS = 3;
 const MOCK_PHOTO = 'https://acrobatusers.com/assets/images/template/author_generic.jpg';
@@ -27,7 +29,7 @@ class LeaderboardAvatar extends Component {
   render() {
     const { domain, openNewTab, url } = this.props;
     const { member } = this.state;
-    const targetURL = url || `//${domain}/members/${member.handle}`;
+    const targetURL = url || `${domain}/members/${member.handle}`;
     return (
       <a
         href={targetURL}
@@ -50,7 +52,7 @@ class LeaderboardAvatar extends Component {
 }
 
 LeaderboardAvatar.defaultProps = {
-  domain: process.env.domain,
+  domain: config.URL.BASE,
   member: {},
   openNewTab: false,
   url: '',

src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/index.jsx

@@ -11,9 +11,9 @@ import React, { Component } from 'react';
 import PT from 'prop-types';
 // import moment from 'moment';
 import Tooltip from 'components/Tooltip';
-import './style.scss';
+import Avatar from 'components/Avatar';
+import styles from './style.scss';
 
-const MOCK_PHOTO = 'https://acrobatusers.com/assets/images/template/author_generic.jpg';
 /**
  * Renders the tooltip's content.
  * It includes: user profile picture, handle, his country and the TC registration
@@ -31,15 +31,19 @@ function Tip(props) {
     </span>
   )); */
   const { photoLink } = props.user;
-  const src = photoLink.startsWith('https') ? photoLink : `${props.MAIN_URL}/${photoLink}`;
+  let src = null;
+  if (photoLink) {
+    src = photoLink.startsWith('https') ? photoLink : `${props.MAIN_URL}/${photoLink}`;
+  }
 
   return (
     <div styleName="user-avatar-tooltip">
-      <img
-        alt="User avatar"
-        styleName="avatar"
-        src={src}
-        onError={props.handleError}
+      <Avatar
+        theme={{
+          avatar: styles.avatar,
+        }}
+        url={src}
+        handleError={props.handleError}
       />
       <div styleName="handle">{props.user.handle}</div>
       {/* Below block is commented out as it's not possible to get this information
@@ -86,7 +90,7 @@ class UserAvatarTooltip extends Component {
   }
   handleError() {
     const user = this.state.user;
-    user.photoLink = MOCK_PHOTO;
+    user.photoLink = null;
     this.setState({ user });
   }
 

src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/style.scss

@@ -8,6 +8,9 @@ $avatar-radius-50: $corner-radius * 25;
 $avatar-radius-4: $corner-radius * 2;
 
 .user-avatar-tooltip {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   max-width: 640px;
   font-family: 'Roboto';
   overflow: auto;
@@ -43,13 +46,13 @@ $avatar-radius-4: $corner-radius * 2;
 
   .avatar {
     border-radius: $avatar-radius-50;
-    float: left;
-    margin-right: $avatar-space-15;
     width: $base-unit * 10;
     height: $base-unit * 10;
+    overflow: hidden;
   }
 
   .handle {
+    margin-left: $avatar-space-15;
     display: inline-block;
     font-weight: 500;
     font-size: 20px;