From 6b7e09f06384e0d54567e6ba447b321c89894cf6 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 11 Nov 2017 12:22:23 -0800
Subject: [PATCH] Handle error when loading avatar, show default

---
 app/components/Avatar/Avatar.js               |  28 +++++++++++++++++-
 app/components/Avatar/placeholder.png         | Bin 0 -> 976 bytes
 app/components/Collaborators/Collaborators.js |  21 ++++++-------
 3 files changed, 36 insertions(+), 13 deletions(-)
 create mode 100644 app/components/Avatar/placeholder.png

diff --git a/app/components/Avatar/Avatar.js b/app/components/Avatar/Avatar.js
index 8422b8733..18baa139c 100644
--- a/app/components/Avatar/Avatar.js
+++ b/app/components/Avatar/Avatar.js
@@ -1,10 +1,36 @@
 // @flow
+import React, { Component } from 'react';
 import styled from 'styled-components';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { color } from 'shared/styles/constants';
+import placeholder from './placeholder.png';
 
-const Avatar = styled.img`
+@observer
+class Avatar extends Component {
+  @observable error: boolean;
+
+  handleError = () => {
+    this.error = true;
+  };
+
+  render() {
+    return (
+      <CircleImg
+        {...this.props}
+        onError={this.handleError}
+        src={this.error ? placeholder : this.props.src}
+      />
+    );
+  }
+}
+
+const CircleImg = styled.img`
   width: 24px;
   height: 24px;
   border-radius: 50%;
+  border: 2px solid ${color.white};
+  flex-shrink: 0;
 `;
 
 export default Avatar;
diff --git a/app/components/Avatar/placeholder.png b/app/components/Avatar/placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..573c74b4e20153e59ff1a0417be5c2de9bbf1172
GIT binary patch
literal 976
zcmV;>126oEP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px&ib+I4RA>e5SxZP&Q50S8`6)9iznNxMqLS$&G&HEt!Rv#igKQA#AgHDl(V!qA
znpA^=MokJLDw@=wKnNTpRHUecT2K)bW|`(UEb#Yw>%j$mKhHkzTtDCfdE9%?U3;y2
z&)sM5qoca+ln09#&PA-<Cw<Ale80h^H!$CCAljsWjPz8LmAJ62FdwPOiAYLZ?V}$U
z97bRNAl`L;L{n=!e)RMi3+phEMsqf1;n<OCxVGjg32T4<3HKg9!<VmJO5?)~ipYS|
z>BNb;L#TA`g2Ukm7boDF$KyeL!z<i*@Dx*1QvugiPiRk}_!V(DfBHCF1-YuRW{jiZ
z1ABHOD>EI}Zr#P`-+wc%s~%`&AwKy?#7`H;2S6@z>Oku*P8;1PA50{<$f*Od0e-NY
z^QJ*ga!VmLz-%M^U{yqsliX5>3}mLKDW^)Q5RPXW=2{|w$UtdHk%U`oEEhrvL<YFR
z+6`$8kpY$mc0(FNWWcIz>@*>bAu?d6aEqHIh6Ex5tSars;LwODgvbC(V!I)YAu_;v
z-fl=^hzvBhcG#`o*YHS!hzxZ1^n%TZT_Cr#TN4?eaCTDCOrc_!oaB~5Y=CVbJ1Ns3
zr%sD0HbCKQ1KU4*Hs*m`<kW$d0rs$L15KD92f1|n;;4LA*<~H)<Kq)(eA9x2mGQ{k
zyg}R}SWW%S+xIaxHm)PVcTYsS5?0hjyRBjwuzuO_uxALjvBkB7>DUyEya7{Uba=Er
zVx2&C-J`v+<u53E{W_Eu7y34;Skou1@%~NQ8yy%L2CLbw?jAI^b>iFipZ*kD#}Q2-
ziguUpKv{7S)}|$k1pMmlM^jq|8XDh5WJb$Cinq0_t*J!C&h6SeYL;8(|Cg^@@bF1J
zeruHLA_LJ;Q8?-qUcJ8pF)_wwpU(@|g6A(9@yKgrVsg^*H|wvmid6~mxZvHxEXdE9
zl~iXyY-|i_s@&L;w+UChEAz;oQ6(CsER>y<fg4xO*(QFvQa&KYVoVjxYJf!7FP%YJ
zN|Fknkui+Lm?|d18sN0Kc=jaXmM=3ROhUq#j7<&U5YhlYSkC#meDeN68JilYB@{v$
zs6AXcCv!fOFzY<O31+@f2x@?N{@~v7Q1{IF`Ko>8pr&95YJiIr)7nA-wNO(q1Q=j>
yz!i3(ftskz9{~nf+vxto&7a)lF*Q+}KmG$HNgMG34hHi80000<MNUMnLSTZf5yxl%

literal 0
HcmV?d00001

diff --git a/app/components/Collaborators/Collaborators.js b/app/components/Collaborators/Collaborators.js
index 3ae8a24b9..42b5f0d97 100644
--- a/app/components/Collaborators/Collaborators.js
+++ b/app/components/Collaborators/Collaborators.js
@@ -2,12 +2,14 @@
 import React from 'react';
 import moment from 'moment';
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
 import Flex from 'shared/components/Flex';
+import Avatar from 'components/Avatar';
 import Tooltip from 'components/Tooltip';
 import Document from 'models/Document';
 
-const Collaborators = function({ document }: { document: Document }) {
+type Props = { document: Document };
+
+const Collaborators = ({ document }: Props) => {
   const {
     createdAt,
     updatedAt,
@@ -40,19 +42,14 @@ const StyledTooltip = styled(Tooltip)`
 `;
 
 const Avatars = styled(Flex)`
+  align-items: center;
   flex-direction: row-reverse;
-  height: 26px;
-`;
 
-const Avatar = styled.img`
-  width: 26px;
-  height: 26px;
-  flex-shrink: 0;
-  border-radius: 50%;
-  border: 2px solid ${color.white};
-  margin-right: -10px;
+  ${Avatar} & {
+    margin-right: -10px;
+  }
 
-  &:first-child {
+  ${Avatar} &:first-child {
     margin-right: 0;
   }
 `;