From 457df4bb4d4cce9bb74ccbbbe218cc1d672bb56c Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Tue, 7 Jul 2020 19:01:53 +0200
Subject: [PATCH] Fix LHS team icon on team switch (#4545)

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
---
 app/components/team_icon/team_icon.js | 56 +++++++++++----------------
 1 file changed, 22 insertions(+), 34 deletions(-)

diff --git a/app/components/team_icon/team_icon.js b/app/components/team_icon/team_icon.js
index 27391c74e..529376512 100644
--- a/app/components/team_icon/team_icon.js
+++ b/app/components/team_icon/team_icon.js
@@ -21,30 +21,21 @@ export default class TeamIcon extends React.PureComponent {
         theme: PropTypes.object.isRequired,
     };
 
-    constructor(props) {
-        super(props);
+    static defaultProps = {
+        displayName: '',
+    };
 
-        this.state = {
-            teamIcon: null,
-            imageError: false,
-        };
-    }
+    state = {
+        imageError: false,
+    };
 
     componentDidMount() {
-        const {lastIconUpdate, teamId} = this.props;
         this.mounted = true;
-
-        if (lastIconUpdate) {
-            this.preloadTeamIcon(teamId, lastIconUpdate);
-        }
     }
 
-    componentDidUpdate(prevProps) {
-        if (this.props.teamId !== prevProps.teamId) {
-            this.setImageURL(null);
-        } else if (this.props.lastIconUpdate && this.props.lastIconUpdate !== prevProps.lastIconUpdate) {
-            const {lastIconUpdate, teamId} = this.props;
-            this.preloadTeamIcon(teamId, lastIconUpdate);
+    componentDidUpdate(prevProps, prevState) {
+        if (prevState.imageError && prevProps.teamId !== this.props.teamId) {
+            this.handleImageError(false);
         }
     }
 
@@ -52,20 +43,17 @@ export default class TeamIcon extends React.PureComponent {
         this.mounted = false;
     }
 
-    preloadTeamIcon = (teamId, lastIconUpdate) => {
-        const uri = Client4.getTeamIconUrl(teamId, lastIconUpdate);
-        this.setImageURL(uri);
-    };
-
-    setImageURL = (teamIcon) => {
+    handleImageError = (hasError) => {
         if (this.mounted) {
-            this.setState({imageError: false, teamIcon});
+            this.setState({imageError: Boolean(hasError)});
         }
     };
 
     render() {
         const {
             displayName,
+            lastIconUpdate,
+            teamId,
             theme,
             styleContainer,
             styleText,
@@ -75,20 +63,20 @@ export default class TeamIcon extends React.PureComponent {
         const styles = getStyleSheet(theme);
 
         let teamIconContent;
-        if (this.state.teamIcon) {
-            teamIconContent = (
-                <FastImage
-                    style={[styles.image, styleImage]}
-                    source={{uri: this.state.teamIcon}}
-                    onError={() => this.setState({imageError: true})}
-                />
-            );
-        } else {
+        if (this.state.imageError || !lastIconUpdate) {
             teamIconContent = (
                 <Text style={[styles.text, styleText]}>
                     {displayName?.substr(0, 2).toUpperCase()}
                 </Text>
             );
+        } else {
+            teamIconContent = (
+                <FastImage
+                    style={[styles.image, styleImage]}
+                    source={{uri: Client4.getTeamIconUrl(teamId, lastIconUpdate)}}
+                    onError={this.handleImageError}
+                />
+            );
         }
 
         return (