From 7e13d659eec14cb9ca4fcdafb28eedc5a35db426 Mon Sep 17 00:00:00 2001
From: Harlan <luoxwen@gmail.com>
Date: Mon, 28 Aug 2017 14:29:34 +0800
Subject: [PATCH 1/2] Fix issue #287

---
 src/shared/components/Avatar/index.jsx        |  7 ++++--
 .../Tooltips/UserAvatarTooltip/index.jsx      | 22 +++++++++++--------
 .../Tooltips/UserAvatarTooltip/style.scss     |  7 ++++--
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/shared/components/Avatar/index.jsx b/src/shared/components/Avatar/index.jsx
index 91cbda7781..48c1b2950f 100644
--- a/src/shared/components/Avatar/index.jsx
+++ b/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,6 +37,7 @@ Avatar.defaultProps = {
     avatar: '',
   },
   url: null,
+  handleError: _.noop,
 };
 
 Avatar.propTypes = {
@@ -43,6 +45,7 @@ Avatar.propTypes = {
     avatar: PT.string.isRequired,
   }),
   url: PT.string,
+  handleError: PT.func,
 };
 
 export default themr('Avatar', defaultStyle)(Avatar);
diff --git a/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/index.jsx b/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/index.jsx
index f1e01ebda8..bfae1a0466 100644
--- a/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/index.jsx
+++ b/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 });
   }
 
diff --git a/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/style.scss b/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/style.scss
index e9c42f4926..5ce58791b2 100644
--- a/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/style.scss
+++ b/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;

From 741030c2efb11578fea7a502b8033bf99a6feabd Mon Sep 17 00:00:00 2001
From: Harlan <luoxwen@gmail.com>
Date: Thu, 31 Aug 2017 08:11:03 +0800
Subject: [PATCH 2/2] Remove handleError from Avatar

---
 src/shared/components/Avatar/index.jsx        |  7 ++-----
 .../Tooltips/UserAvatarTooltip/index.jsx      | 21 +++----------------
 2 files changed, 5 insertions(+), 23 deletions(-)

diff --git a/src/shared/components/Avatar/index.jsx b/src/shared/components/Avatar/index.jsx
index 48c1b2950f..91cbda7781 100644
--- a/src/shared/components/Avatar/index.jsx
+++ b/src/shared/components/Avatar/index.jsx
@@ -20,14 +20,13 @@
 
 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, handleError }) {
+function Avatar({ theme, url }) {
   return url
-    ? <img alt="Avatar" src={url} className={theme.avatar} onError={handleError} />
+    ? <img alt="Avatar" src={url} className={theme.avatar} />
     : <DefaultAvatar className={theme.avatar} />;
 }
 
@@ -37,7 +36,6 @@ Avatar.defaultProps = {
     avatar: '',
   },
   url: null,
-  handleError: _.noop,
 };
 
 Avatar.propTypes = {
@@ -45,7 +43,6 @@ Avatar.propTypes = {
     avatar: PT.string.isRequired,
   }),
   url: PT.string,
-  handleError: PT.func,
 };
 
 export default themr('Avatar', defaultStyle)(Avatar);
diff --git a/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/index.jsx b/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/index.jsx
index bfae1a0466..101723a038 100644
--- a/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/index.jsx
+++ b/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/index.jsx
@@ -13,6 +13,7 @@ import PT from 'prop-types';
 import Tooltip from 'components/Tooltip';
 import Avatar from 'components/Avatar';
 import styles from './style.scss';
+import config from 'utils/config';
 
 /**
  * Renders the tooltip's content.
@@ -31,10 +32,7 @@ function Tip(props) {
     </span>
   )); */
   const { photoLink } = props.user;
-  let src = null;
-  if (photoLink) {
-    src = photoLink.startsWith('https') ? photoLink : `${props.MAIN_URL}/${photoLink}`;
-  }
+  const src = photoLink.startsWith('https') ? photoLink : `${config.URL.BASE}/${photoLink}`;
 
   return (
     <div styleName="user-avatar-tooltip">
@@ -43,7 +41,6 @@ function Tip(props) {
           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
@@ -62,8 +59,6 @@ function Tip(props) {
 }
 
 Tip.propTypes = {
-  handleError: PT.func.isRequired,
-  MAIN_URL: PT.string,
   user: PT.shape({
     country: PT.string,
     handle: PT.string,
@@ -73,10 +68,6 @@ Tip.propTypes = {
   }).isRequired,
 };
 
-Tip.defaultProps = {
-  MAIN_URL: process.env.MAIN_URL,
-};
-
 /**
  * Renders the tooltip.
  */
@@ -86,16 +77,10 @@ class UserAvatarTooltip extends Component {
     this.state = {
       user: props.user,
     };
-    this.handleError = this.handleError.bind(this);
-  }
-  handleError() {
-    const user = this.state.user;
-    user.photoLink = null;
-    this.setState({ user });
   }
 
   render() {
-    const tip = <Tip user={this.state.user} handleError={this.handleError} />;
+    const tip = <Tip user={this.state.user} />;
     return (
       <Tooltip content={tip}>
         <div>{this.props.children}</div>